Jaspersoft Studio 1. 도구개요 2. 설치및실행 3. 주요기능
1. 도구개요 1.1 도구정보요약 도구명소개특징주요기능 Jaspersoft Studio (http://community.jaspersoft.com/proj ect/jaspersoft-studio) Eclipse 기반의리포팅도구 라이선스 Eclipse Public License v1.0 ireport Designer 라는 Eclipse 의플러그인을 standalone 애플리케이션인 Jaspersoft Studio 로새로작성 Stand-alone 방식으로사용할수도있고, JasperReport Server 와도연동가능 Eclipse BIRT 에비해더세부적이고다양한기능을제공하지만, 직관성이다소낮아사용하기위해 Eclipse BIRT 보다많은학습필요 WYSIWYG 방식리포트 UI 디자인 데이터소스연결을통한차트와보고서생성 HTML, PPT, DOC, XLS 등다양한방식으로내보내기 실행환경 Windows, Linux, MacOS 사전설치도구 JDK 1.6+ 카테고리 구현 ( 리포팅 ) 최신버전 v6.6.1 (2015.10) 관련도구 Eclipse, Eclipse BIRT, JasperReports Server 2
1. 도구개요 1.2 스크린캡쳐및주요기능 Eclipse 플랫폼상에서 WYSIWYG 방식으로리포트파일생성 파일, RDBMS, NoSQL DBMS 등다양한데이터소스지원 HTML, PPT, DOC, XLS, PDF 등다양한포맷으로익스포트가능 3
2. 설치및실행 세부목차 2.1 사전설치사항확인 2.2 다운로드 2.3 설치 2.4 실행 4
2. 설치및실행 2.1 사전설치사항확인 (1/2) Windows 의경우아래와같이 Command 창에서 java version 을실행하여설치된 JDK 버전을확인한다. Jaspersoft Studio 를사용하려면 JDK 1.6 이상이필요하다. 5
2. 설치및실행 2.1 사전설치사항확인 (2/2) 아래와같이에러가나는경우, 탐색기의 C:\Program Files 폴더또는 C:\Program Files (x86) 폴더에서 Java 폴더가있는지확인한다. Java 폴더가있다면, 그아래의 jdk/bin 디렉토리에서 java version 실행 Java 폴더가없다면, JDK 를다운받아설치한다. 6
2. 설치및실행 2.2 다운로드 (1/5) http://community.jaspersoft.com/ 에접속하여, 우측의 Download Now 클릭 7
2. 설치및실행 2.2 다운로드 (2/5) 왼쪽의 Community Editions 에서 Jaspersoft Studio 우측의 Download 클릭 8
2. 설치및실행 2.2 다운로드 (3/5) OS 에맞는설치파일을클릭하여다운로드한다. 본자료에서는 Windows 64bit 용을설치한다. 9
2. 설치및실행 2.2 다운로드 (4/5) 로그인이나회원가입을요청하는화면에서우하단의 No Thanks 클릭 10
2. 설치및실행 2.2 다운로드 (5/5) Sourceforge 를통해파일을다운로드한다. 11
2. 설치및실행 2.3 설치 (1/3) 다운로드받은파일을실행하고, 라이선스에동의한다. 12
2. 설치및실행 2.3 설치 (2/3) 설치위치를지정한다. 여기서는기본값그대로지정한다. 13
2. 설치및실행 2.3 설치 (3/3) 설치가완료되면, 설치마법사에서 Run TIBCO Jaspersoft Studio 6.1.1 final 에체크하고 Finish 클릭 14
2. 설치및실행 2.4 실행 (1/4) 설치마법사에서실행옵션을체크했으므로설치완료후자동실행 15
2. 설치및실행 2.4 실행 (2/4) workspace 를 D:\Jaspersoft\Jaspersoft Studio-6.1.1.final\workspace 로설정하고 OK 클릭 Directory 생성확인창에서 OK 클릭 16
2. 설치및실행 2.4 실행 (3/4) 사용통계정보를 Jaspersoft Studio 개발팀에게보내기에동의 17
2. 설치및실행 2.4 실행 (4/4) Jaspersoft Studio 가성공적으로실행된다. 18
3. 주요기능 세부목차 3.1 데이터어댑터 3.2 데이터셋생성 3.3 Bands 3.4 테이블작성 3.5 차트작성 3.6 스타일 3.7 Web Application 연동 19
3. 주요기능 3.1 데이터어댑터 Jaspersoft Studio 는 JDBC 뿐아니라 XML, JSON 파일, Hive, MongoDB, Cassandra, HBase 등여러유형의데이터소스와연동하여보고서를작성할수있다. Jaspersoft Studio 는 Data Adapter( 데이터어댑터 ) 를통해데이터소스연결을관리한다. 에서직접데이터소스를연결해서데이터어댑터를생성해본다. 20
3. 주요기능 3.2 데이터셋생성 Jaspersoft Studio 는데이터어댑터에서실제데이터를추출하고이를보고서에연동한다. 추출한데이터는 Outline 의 Fields 항목으로매핑된다. 보고서생성시이 Fields 내의컬럼을 Drag&Drop 해서보고서에사용할수있다. 보고서를생성할때데이터셋을지정하지만, 나중에데이터셋을추가할수도있다. 21
3. 주요기능 3.3 Bands (1/2) 비어있는템플릿을적용해도 Jaspersoft Studio 는리포트를구성하는기본적인 9 개의 Bands 제공 22
3. 주요기능 3.3 Bands (2/2) Title : 보고서제목영역 Page Header/Footer : 페이지마다표시되는보고서 Heaer/Footer 영역 Column Header : 표시되는데이터의필드명표시에주로사용, Field 를 Detail 영역에드래그 & 드랍하면 Column Header 는자동으로세팅된다. Column Footer : 표시되는데이터의구분선표시에주로사용 Group Header/Footer : 데이터를그룹으로나누어표시할때, 해당그룹에대한 Header/Footer 정보표시, Group Header/Footer 는기본적으로는추가되어있지않으며, 수동으로추가해야함. Detail : 데이터셋에서가져온데이터를표시하는영역 Last Page Footer : 마지막페이지에만표시되는영역 Summary : 총합, 평균, 중간값등데이터에대한요약정보를표시하며차트는주로 Summary 영역에작성한다. Background : 워터마크에사용 23
3. 주요기능 3.4 테이블작성 Jaspersoft Studio 에서는기본적으로 Column Header, Detail, Column Footer 에데이터셋에서가져온 Fields 를드래그 & 드랍하는방식으로테이블을작성한다. 팔레트에있는 Table 은통계같은것을추가적으로 Table 로표시할때사용한다. 24
3. 주요기능 3.5 차트작성 Jaspersoft Studio 는 JFreeChart 에서작성할수있는다양한차트를지원한다. 25
3. 주요기능 3.6 스타일 워드나아래한글의스타일처럼 Jaspersoft Studio 도스타일을만들어두고필요한요소에적용할수있다. 26
3. 주요기능 3.7 Web Application 연동 Jasper Studio 보고서파일 (jrxml 파일 ) 을컴파일해서 jasper 파일을생성하고, Jasper Library 를활용해서직접구현한서블릿을통해 jasper 파일을로딩해서브라우저로보여준다. WAS Web Browser jrxml 컴파일 jasper File Loading 27
3. 주요기능 3.8 Custom Visualization Component D3.js 등 JavaScript 를이용해서직접시각화컴포넌트를만들수있다. 28
세부목차 4.1 예제소개 4.2 프로젝트생성 4.3 리포트생성 4.4 리포트작성 4.5 차트서브데이터생성 4.6 차트작성 4.7 Web Application 연동 4.8 커스텀시각화컴포넌트만들기 29
4.1 예제소개 본예제는 Jaspersoft Studio 의주요기능과실제개발에서필요한사항을설명한다. 데이터소스연결및데이터셋생성은 MySQL 데이터베이스에있는테이블을 JDBC Driver 로연결하는법을알아보고, Jaspersoft Studio 보고서작성에사용되는필요한테이블, 차트등의사용을위한실제데이터는학습용으로 Jaspersoft Studio 에내장된샘플데이터소스를활용한다. Jaspersoft Studio 에서작성한보고서를 Servlet 을이용해서웹애플리케이션에연동한다. 30
4.2 프로젝트생성 (1/3) Jaspersoft Studio 는설치하면기본으로 MyReports 라는프로젝트를생성해주므로, 실습을위해 MyReports 를이용할수도있다. 하지만여기서는직접프로젝트를생성해서진행한다. 31
4.2 프로젝트생성 (2/3) Name 란에 TestReports 를입력하고 Finish 를클릭 32
4.2 프로젝트생성 (3/3) TestProjects 프로젝트가생성된다. 33
4.3 리포트생성 (1/16) TestProject 를우클릭하고 New > Jasper Report 클릭 34
4.3 리포트생성 (2/16) Jaspersoft Studio 는매우다양한템플릿을제공한다. 여기서는 Blank A4 를선택하고 Next 클릭 35
4.3 리포트생성 (3/16) Parent Folder 로 TestReports 를선택하고, File name 란에 Test-Blank_A4.jrxml 을입력하고 Next 클릭 36
4.3 리포트생성 (4/16) Data Adapter 우측의 New 클릭 여기서는 MySQL JDBC 연결방법을알아보기위해 New 를클릭하며, 실제보고서작성실습은 Data Adapter 에서 Sample DB 를선택하여진행 37
4.3 리포트생성 (5/16) Database JDBC Connection 선택후 Next 클릭 38
4.3 리포트생성 (6/16) 어댑터 Name 을 MySQL-Adapter 로하고, JDBC Driver 는 MySQL(com.mysql.jdbc.Driver) 선택 JDBC Url 과데이터베이스계정정보입력후 Connection Properties 입력 39
4.3 리포트생성 (7/16) Connection Properties 탭에서우측의 Add 클릭 Property 란에 characterencoding 입력 Value 란에 UTF-8 입력후 Driver Classpath 클릭 40
4.3 리포트생성 (8/16) Driver Classpath 에서 Add 를클릭하고, mysql connector 파일추가 mysql connector 파일은 http://www.mysql.com/products/connector/ 에서다운로드할수있다. 41
4.3 리포트생성 (9/16) 좌하단의 test 를클릭하여데이터베이스연결테스트 성공하면 OK 를누르고, Data Adapter Wizard 창에서 Finish 를클릭한다. 2 1 3 42
4.3 리포트생성 (10/16) 비밀번호저장힌트를물어보는창에서 Yes 클릭 43
4.3 리포트생성 (11/16) 비밀번호복구를위한질문 / 응답정보를작성하고 OK 클릭 44
4.3 리포트생성 (12/16) Data Adapter 란이 MySQL-Adapter 로세팅되고, 왼쪽에데이터베이스내용이표시된다. 오른쪽쿼리작성란에 select * from 테이블명 을입력하고, Next 클릭 45
4.3 리포트생성 (13/16) Jaspersoft Studio 의 Fields 로가져올컬럼을선택하고 > 를클릭하여 Fields 로옮기고아래의 Next 클릭 46
4.3 리포트생성 (14/16) Group By 의기준이될컬럼을선택한다. 여기서는그냥 Next 클릭 47
4.3 리포트생성 (15/16) 리포트를작성하기위한데이터셋생성까지완료했다. Finish 클릭 48
4.3 리포트생성 (16/16) 아래와같이 Project Explorer 에 jrxml 파일이추가되고, Outline > Fields 에방금데이터셋생성시가져온컬럼이추가되어있다. 49
4.4 리포트작성 (1/18) 실습용 DB 인 SampleDB 를사용하기위해데이터어댑터를변경한다. MySQL-Adapter 에서가져온 Fields 는모두제거한다. 50
4.4 리포트작성 (2/18) 쿼리작성란에 SELECT * FROM PRODUCT 입력후, 우측의 Read Fields 버튼클릭 51
4.4 리포트작성 (3/18) 아래와같이 Fields 가설정된다. OK 를클릭한다. 변경된데이터어댑터에서가져온 Fields 로변경되었다. 52
4.4 리포트작성 (4/18) 타이틀을작성한다. Jaspersoft Studio 에서는텍스트작성을위한두개의팔레트요소가있다. Text Field : 표현식을통한동적인값을표시할때사용 Static Text : 확정된문자열을표시할때사용 Static Text 를드래그하여에디터의 Title band 영역에드랍한다. 53
4.4 리포트작성 (5/18) Properties 뷰에서 Static Text 를클릭 Text 란에 Jasper 보고서 라고입력, 가운데정렬, 폰트크기조정 에디터뷰에서 Static Text 를보고서전체너비만큼크기조정 54
4.4 리포트작성 (6/18) 데이터를테이블에표시한다. 테이블은행구분을쉽게하기위해짝수행에색을넣기로한다. Frame 을이용해서행별색상처리를하고, 데이터값은 Frame 안에넣는다. 팔레트에서 Frame 을드래그해서 Detail 1 band 영역에드랍하고, Frame 의크기를적절히조정한다. 55
4.4 리포트작성 (7/18) Outline 에서 Fields 아래에있는 ID, NAME, COST 를각각 Frame 영역안에드래그드랍한다. 우측에서보는것처럼 TextField 가생성되고, Field 값을읽어올수있는표현식이자동으로설정된다. 56
4.4 리포트작성 (8/18) 데이터의짝수행에채색을하도록 Style 을생성하고, Properties 뷰에서 Name 을 Data Rows 로설정한다. 57
4.4 리포트작성 (9/18) Data Rows 에서우클릭하여짝수행에만적용되는조건스타일을추가한다. Properties>Conditional expression 의우측수식작성버튼을클릭한다. 58
4.4 리포트작성 (10/18) 왼쪽항목에서 Variables 를클릭하고, 가운데 Variables 항목중 REPORT_COUNT 를더블클릭 위쪽의수식편집창에서짝수행을걸러내기위해 %2 == 0 입력 Finish 클릭 59
4.4 리포트작성 (11/18) 아래와같이짝수행에만조건적으로적용할스타일이생성된다. 60
4.4 리포트작성 (12/18) 조건형스타일의배경색을지정하고 Transparent 속성을해제한다. 61
4.4 리포트작성 (13/18) Detail band 안에서데이터항목인 Text Field 를포함하고있는 Frame 에 Data Rows 스타일을적용한다. 62
4.4 리포트작성 (14/18) Detail band, Frame, Text Field 의크기를보기좋게조정한다. 63
4.4 리포트작성 (15/18) 컬럼헤더를작성한다. 컬럼헤더는변하는값이아니므로, Title 을작성할때와마찬가지방법으로 Static Text 를이용해서작성한다. 64
4.4 리포트작성 (16/18) 컬럼헤더에구분선을추가한다. 팔레트에서 Line 을드래그하여에디터의 Column Header 영역에드랍한다. 기본으로대각선이생성되는데, Properties 뷰에서 Size 의높이값을 1 로하면수평선이된다. 65
4.4 리포트작성 (17/18) 구분선의위치와너비를조정해서최종적으로아래와같이보고서를구성한다. 각요소들의너비, 정렬등은마우스우클릭을통해 PPT 와유사한방법으로조정할수있다. 66
4.4 리포트작성 (18/18) 에디터뷰하단의 Preview 탭을클릭하면미리보기화면이나온다. 67
4.5 차트서브데이터생성 (1/6) 서브데이터셋을활용해서차트를작성한다. 아래와같이 Create Datase 클릭 68
4.5 차트서브데이터생성 (2/6) Dataset name 에 ChartData 를입력하고 Next 클릭 69
4.5 차트서브데이터생성 (3/6) Sample DB 선택후, 쿼리작성란에아래와같이입력후 Next 클릭 70
4.5 차트서브데이터생성 (4/6) 왼쪽에있는모든컬럼을오른쪽으로이동후 Next 클릭 71
4.5 차트서브데이터생성 (5/6) 그룹필드는지정하지않고 Finish 클릭 72
4.5 차트서브데이터생성 (6/6) Outline 뷰에보면 ChartData 라는서브데이터셋이추가된다. 73
4.6 차트작성 (1/14) Paletette 에서 Chart 를드래그하여에디터의 Summary 영역에드랍 74
4.6 차트작성 (2/14) Jaspersoft Studio 에서는 JFreeChart 에서제공하는다양한차트지원 Pie Chart 를선택하고 Next 클릭 75
4.6 차트작성 (3/14) 데이터셋을새로만든서브데이터셋인 ChartData 로설정 Main Dataset 과같은연결을사용하는데이터셋이므로 Use same connection.. 선택 76
4.6 차트작성 (4/14) 데이터계열설정을위해 Series 의 버튼클릭 Series 창에서기본값을지우기위해 Delete 클릭 77
4.6 차트작성 (5/14) Add 를클릭하고 수식창에서 SHIPCOUNTRY 를더블클릭해서 $F{SHIPCOUNTRY} 가자동입력되게하고 Finish 클릭 78
4.6 차트작성 (6/14) 데이터계열에 SHIPCOUNTRY 가추가된것을확인하고 OK 클릭 79
4.6 차트작성 (7/14) Key 란에 $F{SHIPCOUNTRY} 가설정된다. 80
4.6 차트작성 (8/14) Value 란의 버튼을클릭하고, 수식창에서 C1 Field Long 더블클릭후 Finish 클릭 81
4.6 차트작성 (9/14) Chart Wizard 에서 Finish 를누른다. 82
4.6 차트작성 (10/14) Editor 의 Summary 영역에작성한차트개요가표시된다. Preview 를클릭해서차트미리보기실행 83
4.6 차트작성 (11/14) Summary 영역보고서의가장마지막에나오므로마지막페이지로이동 차트가작게표시된다. 차트를수정하기위해 Design 을클릭 84
4.6 차트작성 (12/14) 먼저차트의크기를알맞게확장하고, Properties 뷰에서파이차트에대한타이틀, 범례, 레이블표시등여러가지설정을할수있다. 85
4.6 차트작성 (13/14) 차트를더블클릭하여 Chart Wizard 를열고좌측의데이터레이블옆의 버튼을클릭하고아래와같은수식을입력하여, 데이터계열과데이터값을함께표시 86
4.6 차트작성 (14/14) 다시미리보기하며아래와같은차트를볼수있다. 87
4.7 웹애플리케이션연동 (1/3) Jaspersoft Studio 에서만든보고서를웹 (Java 기반 ) 에연동하려면아래의절차를참고하여웹모듈을구현해야한다. 보고서파일 (jrxml) 을컴파일하여 jasper 파일생성 Servlet(or JSP) 작성 net.sf.jasperreports.engine.jasperrunmanager.runreporttopdf() 를통해 jasper 파일로부터 byte[] 를획득 ServletOutputStream 에 byte[] 를 flush net.sf.jasperreports.engine.jasperrunmanager.runreporttopdf() 메서드는다양한방식을지원하기위해여러가지로 overload 되어있다. http://jasperreports.sourceforge.net/api/net/sf/jasperreports/engine/j asperrunmanager.html 참고 여기서는동작원리를설명하기위해간단한 Servlet 코드예제를살펴본다. 88
4.7 웹애플리케이션연동 (2/3) 보고서파일에서우클릭 >Compile Report 클릭, jasper 파일생성 89
4.7 웹애플리케이션연동 (3/3) 아래의예제와같은리포트용서블릿작성 public class JasperReportsBrowserDemoServlet extends HttpServlet { protected void doget(httpservletrequest request, HttpServletResponse response) throws ServletException, IOException { ServletOutputStream servletoutputstream = response.getoutputstream(); File reportfile = new File(getServletConfig().getServletContext().getRealPath("/reports/Test-Blank_A4.jasper")); // jasper 파일위치지정 byte[] bytes = null; } } try { bytes = JasperRunManager.runReportToPdf(reportFile.getPath(), new HashMap(), new JREmptyDataSource()); // HashMap 에 map.put( para1, value1) 로파라미터를지정 // 보고서파일에서는 $P{para1} 로파라미터사용 // JREmptyDataSource 대신실제 connection 객체사용가능 response.setcontenttype("application/pdf"); response.setcontentlength(bytes.length); servletoutputstream.write(bytes, 0, bytes.length); servletoutputstream.flush(); servletoutputstream.close(); } catch (JRException e) { StringWriter stringwriter = new StringWriter(); PrintWriter printwriter = new PrintWriter(stringWriter); e.printstacktrace(printwriter); response.setcontenttype("text/plain"); response.getoutputstream().print(stringwriter.tostring()); } 90
4.7 커스텀시각화컴포넌트만들기 (1/16) JasperSoft Studio 에서는데이터시각화라이브러리인 D3.js 를이용해서커스텀시각화컴포넌트를만들어서리포트작성에사용할수있다. 커스텀시각화컴포넌트가포함된리포트를미리보기하려면웹사이트테스팅도구인 phantomjs.exe 를 Path 가포함된경로에저장해야한다. PhantomJS 는 http://phantomjs.org/ 에서다운로드할수있다. 91
4.7 커스텀시각화컴포넌트만들기 (2/16) 커맨드창에서 path를입력해서 path가지정된경로를확인한다. 본예제에서는 D:\SW 를 phantomjs.exe의저장위치로이용한다. 92
4.7 커스텀시각화컴포넌트만들기 (3/16) 다운로드한 phantomjs-2.0.0-windows.zip 파일의압축을해제하고, bin 디렉토리에있는 phantomjs.exe 파일을 D:\SW 로복사한다. 복사 93
4.7 커스텀시각화컴포넌트만들기 (4/16) JavaScript 를소스를작성해서 JasperSoft Studio 에서빌드하면커스텀시각화컴포넌트를만들수있다. JasperSoft Studio 에서는 D3.js, Raphael.js 를이용한커스텀시각화컴포넌트를만들수있게도와주는프로젝트를제공한다. 본예제에서는 D3.js 를이용해서분홍색원을그릴수있는커스텀시각화컴포넌트를만들고리포트에추가한다. 94
4.7 커스텀시각화컴포넌트만들기 (5/16) JavaScript 를소스를작성해서 JasperSoft Studio 에서빌드하면커스텀시각화컴포넌트를만들수있다. JasperSoft Studio 에서는 D3.js, Raphael.js 를이용한커스텀시각화컴포넌트를만들수있게도와주는프로젝트를제공한다. 본예제에서는 D3.js 를이용해서분홍색원을그릴수있는커스텀시각화컴포넌트를만들고리포트에추가한다. 먼저 JasperSoft Studio 에서제공하는프로젝트를생성한다. 95
4.7 커스텀시각화컴포넌트만들기 (6/16) 마법사에서 Custom Visualization Component 선택 96
4.7 커스텀시각화컴포넌트만들기 (7/16) Project Name 에 MyVizCompo 를입력하고, Circle Sample based on D3.js library 선택 97
4.7 커스텀시각화컴포넌트만들기 (8/16) D3.js 라이브러리를추가하고, D3.js 라이선스에동의 98
4.7 커스텀시각화컴포넌트만들기 (9/16) 다음과같이 MyVizCompo 프로젝트가생성된다. build.js 는빌드설정파일로수정불필요 MyVizCompo.css 파일은차트의 CSS 정의 MyVizCompo.js 가실제시각화를작성하는 JavaScript 소스파일 99
4.7 커스텀시각화컴포넌트만들기 (10/16) MyVizCompo.js 소스 실제시각화컴포넌트구현부 100
4.7 커스텀시각화컴포넌트만들기 (11/16) 시각화컴포넌트빌드 build.js 에서우클릭 > Build Component 클릭 101
4.7 커스텀시각화컴포넌트만들기 (12/16) 콘솔창에서빌드진행사항을볼수있으며, 빌드가성공하면 MyVizCompo.min.js 파일이생성된다. 102
4.7 커스텀시각화컴포넌트만들기 (13/16) 빌드해서생성된 MyVizCompo.min.js 파일과 MyVizCompo.css 파일을실제리포트를작성하는 TestReports 프로젝트아래로복사한다. 103
4.7 커스텀시각화컴포넌트만들기 (14/16) 커스텀시각화컴포넌트적용실제작업흐름 1. Custom Visualization 아이템을리포트작성영역에드래그앤드랍 2. Custom Visualization 의속성창에서 script, module, css 값지정 104
4.7 커스텀시각화컴포넌트만들기 (15/16) 작업내용저장후 Preview 클릭 105
4.7 커스텀시각화컴포넌트만들기 (16/16) 마지막페이지로이동하면 D3.js 를이용해작성한커스텀시각화컴포넌트가적용된것을확인할수있다. 106