Difference between revisions of "Msz"

From Documentation
Line 53: Line 53:
 
   }
 
   }
 
}
 
}
 +
</source>
 +
 +
= The report.zul =
 +
<source lang="xml">
 +
<?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>
 +
</source>
 +
 +
= The reportPage.zul =
 +
<source lang="xml">
 +
<?page title="Тестовый отчет" contentType="text/html;charset=UTF-8"?>
 +
<?script src="http://localhost:8081/ActuateBIRTViewer/jsapi" ?>
 +
<zk>
 +
<style>
 +
    .block_image {
 +
      display: block;
 +
    }
 +
    .bttn:hover {
 +
      cursor: pointer;
 +
      background-color: #c3c3c3;
 +
    }
 +
    .bttn {
 +
      padding: 5px 4px;
 +
    }
 +
   
 +
</style>
 +
<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>
 +
 +
<east title="Configuring report" collapsible="true" splittable="true" minsize="300" size="25%" open="true">
 +
<div>
 +
<separator></separator>
 +
<groupbox vflex="1" closable="false">
 +
<caption label="Report parameters" ><image src="/report/parameter.gif" width="30px" height="30px"/></caption>
 +
<hbox>
 +
<textbox id="year" /><label value="Write one of the values (2011, 2012, 2013)" />
 +
</hbox>
 +
<separator/>
 +
</groupbox>
 +
<groupbox vflex="1" closable="false"><caption label="View report"><image src="/report/view.gif" width="30px" height="30px"/></caption>
 +
        <div id="showReport" align="center" sclass="bttn" ><image sclass="block_image" src="/report/search.png"/>View report</div>
 +
    </groupbox>
 +
    <groupbox hflex="1" closable="false"><caption label="Export"><image src="/report/export.gif" width="30px" height="30px"/></caption>
 +
        <div align="center">
 +
          <hbox>
 +
          <div align="center" sclass="bttn" xmlns:w="client" w:onClick="runReportXLS()"><image sclass="block_image" src="/report/excel.png"/>Export to XLS</div>
 +
          <div align="center" sclass="bttn" xmlns:w="client" w:onClick="runReportPDF()"><image sclass="block_image" src="/report/pdf.png"/>Export to PDF</div>
 +
          <div align="center" sclass="bttn" xmlns:w="client" w:onClick="printReport()"><image sclass="block_image" src="/report/printer.png"/>Print report</div>
 +
          </hbox>
 +
          </div>
 +
  </groupbox>
 +
</div>
 +
</east >
 +
</borderlayout>
 +
</window>
 +
</zk>
 
</source>
 
</source>

Revision as of 09:09, 5 June 2014

Integrating_BIRT_Viewer_Toolkit_and_ZK

Documentationsz
sz
Author
Shamil' Mustafin, Engineer, Nefteavtomatika, Russia
Date
June 03, 2014
Version
ZK CE 7.0.2

Introduction

SalesDashboardReport.png

Prerequisites

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 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>
<style>
    .block_image {
      display: block;
    }
    .bttn:hover {
      cursor: pointer;
      background-color: #c3c3c3;
    }
    .bttn {
      padding: 5px 4px;
    }
    
</style>
<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>

<east title="Configuring report" collapsible="true" splittable="true" minsize="300" size="25%" open="true">
	<div>
	<separator></separator>
	<groupbox vflex="1" closable="false">
		<caption label="Report parameters" ><image src="/report/parameter.gif" width="30px" height="30px"/></caption>
		<hbox>	
		<textbox id="year" /><label value="Write one of the values (2011, 2012, 2013)" />
		</hbox>				
		<separator/>
	</groupbox>
	<groupbox vflex="1" closable="false"><caption label="View report"><image src="/report/view.gif" width="30px" height="30px"/></caption>
        <div id="showReport" align="center" sclass="bttn" ><image sclass="block_image" src="/report/search.png"/>View report</div>
    </groupbox>
    <groupbox hflex="1" closable="false"><caption label="Export"><image src="/report/export.gif" width="30px" height="30px"/></caption> 
         <div align="center">
          <hbox>
          <div align="center" sclass="bttn" xmlns:w="client" w:onClick="runReportXLS()"><image sclass="block_image" src="/report/excel.png"/>Export to XLS</div>
          <div align="center" sclass="bttn" xmlns:w="client" w:onClick="runReportPDF()"><image sclass="block_image" src="/report/pdf.png"/>Export to PDF</div>
          <div align="center" sclass="bttn" xmlns:w="client" w:onClick="printReport()"><image sclass="block_image" src="/report/printer.png"/>Print report</div>
          </hbox>
          </div> 
   </groupbox>
	</div>	
</east >
</borderlayout>
</window>
</zk>
Retrieved from "https://www.zkoss.org/_w/index.php?title=Msz&oldid=41835"