Msz

Integrating_BIRT_Viewer_Toolkit_and_ZK

Author
Shamil' Mustafin, Engineer, Nefteavtomatika, Russia

Date
June 03, 2014

Version
ZK CE 7.0.2

Introduction

Project mission: To display a report in a web application.
Viewing reports in web applications is always topical. The question is how to do it ? Will help to solve this issue BIRT.
BIRT Viewer Toolkit (BVT) is a free toolkit that was created to enhance the BIRT experience for open-source users. The toolkit provides use of the BIRT Viewer, for a cleaner, more modern look and feel. It also allows open-source users to utilize the JavaScript API (JSAPI) to more easily embed BIRT data visualizations into many different types of applications. This product guide will take you all the way from installing BVT to using the JSAPI.

Environment

• Apache Tomcat/7.0.52
• ActuateBIRTViewer Toolkit [1]
• ZK Framework CE 7.0.2
• File report salesDashboard.rptdesign must be placed in the folder Tomcat7\webapps\ActuateBIRTViewer\WEB-INF\repository
• ZkBirtReport.war

Comment

If you want to use a JDBC driver, then you must place it in the folder:
\Tomcat7\webapps\ActuateBIRTViewer\WEB-INF\platform\plugins\org.eclipse.birt.report.data.oda.jdbc_4.2.3.v20140106-0433\drivers
Place JDBC drivers' JAR files in this directory to make them available to BIRT.

Features

• To pass parameters are used ZK components
• Passing parameters via JSON
• You can generate reports independently from each other (in different tabs)
• Export to XLS format
• Export to PDF format
• Print report

Source

The MainController.java

public class MainController extends SelectorComposer<Window>{

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	
	@Wire("#treeReports") private Tree treeReports;
	@Wire("#mainTabs")	private Tabbox mainTabs;
	@Wire("#mainTabs > tabs") 	private Tabs tabs; 
	@Wire("#mainTabs > tabpanels") 	private Tabpanels tabpanels;
	
	private void setTabValue(String url, String nameReport) {
		Tab tab = new Tab(nameReport);
		tab.setClosable(true);
		tab.setSelected(true);
		tabs.appendChild(tab);
		
		Tabpanel tabpanel = new Tabpanel();
		Include include = new Include(url);
		tabpanel.appendChild(include);
		tabpanels.appendChild(tabpanel);
	}
	
	@Listen("onClick = #viewReport")
	public void showReport() {
		if (treeReports.getSelectedItem() != null) {
			String url = treeReports.getSelectedItem().getValue();
			String label = treeReports.getSelectedItem().getLabel();
			setTabValue(url, label);
		} else {
			showNotify("Select the report");
			return;
		}
	}
	
	private void showNotify(String msg) {
		 Clients.showNotification(msg,"warning",null,null,0);
   }
}

The ViewReportController.java

public class ViewReportController extends SelectorComposer<Window>{

	/**
	 * @author Shamil' Mustafin
	 */
	private static final long serialVersionUID = 1L;
	@Wire("#year") private Textbox year;
	
	
	@Listen("onClick = #showReport")
	public void showReport() {
		String yearValue = year.getText().trim();
		if (yearValue.equals("")) {
			showNotify("Requires input values");
			return;
		} else {
		   String json = getJSONForReport(yearValue);
		 //The transfer of control in the JS code
		   Clients.evalJavaScript("runReportI(" + json + ")");
		}  
	}
	
	private void showNotify(String msg) {
		 Clients.showNotification(msg,"warning",null,null,0);
    }

	//Generated a JSON string to send in the JS code
	private String getJSONForReport(String yearValue) {
		  String json = "";
		 
		      json = "{\"elements\":[";
		      
		      json = json + "{" +
		                        "\"" + "year"  + "\"" + ":" + "\"" + yearValue + "\"" +
		                        "},";
		      
		      json = json + "]}";
		      System.out.println("---json---");
		      System.out.println(json);
		    return json;
	 }
	
}

The report.zul

<?page title="new page title" contentType="text/html;charset=UTF-8"?>
<zk>
<window border="none" width="100%" height="100%" >
<iframe id="iframe" src="/report/reportPage.zul" hflex="1" vflex="1" scrolling="auto" />
</window>
</zk>

The reportPage.zul

<?page title="Тестовый отчет" contentType="text/html;charset=UTF-8"?>
<?script src="http://localhost:8081/ActuateBIRTViewer/jsapi" ?>
<zk>
...

<script> 
	zk.afterMount(function() {
        init();    
 	});
</script>
 <n:script xmlns:n="native">
 <![CDATA[
		function init(){
			actuate.load("viewer");
			actuate.initialize("http://localhost:8081/ActuateBIRTViewer", null, null, null, null);
		}
		function runReportI(jsonElements)    {
			var countOfElements = jsonElements.elements.length;
     	    for (var i = 0; i < countOfElements; i++) {
		        var year = jsonElements.elements[i].year;
		    }
			var viewer = new actuate.Viewer("viewer1");
			viewer.setReportName("/salesDashboard.rptdesign");
			viewer.setParameters({Year:year}); 
			var options2 = new actuate.viewer.UIOptions( );
				options2.enableToolBar(true);
				options2.enableMainMenu(false);
				viewer.setUIOptions( options2 );
			viewer.setSize(1100,800);
			viewer.submit();
		}
		
		function runReportXLS() {
			var viewer = new actuate.Viewer("viewer1");
			viewer.downloadReport("xls", null, null);
		}
		
		function runReportPDF() {
			var viewer = new actuate.Viewer("viewer1");
			viewer.downloadReport("pdf", null, null);
		}
		
		function printReport() {
			var viewer = new actuate.Viewer("viewer1");
			viewer.showPrintDialog( );	
		}

]]>
</n:script>
<window width="100%" height="100%" apply="ru.ufa.zkbirt.ViewReportController">
<borderlayout>
<center  autoscroll="true"> 
	<html ><![CDATA[
	<div id="viewer1">
	</div>        
	]]>
	</html>
</center>
...

</zk>

Summary

http://www.actuate.com/info/birt-viewer-toolkit/ [2].
http://developer.actuate.com/deployment-center/deployment-guides/birt-viewer-toolkit/ [3].