https://www.zkoss.org/_w/index.php?title=Small_Talks/2012/April/Create_a_Report_with_ZK_using_iReport_and_JasperReports&feed=atom&action=history
Small Talks/2012/April/Create a Report with ZK using iReport and JasperReports - Revision history
2024-03-28T17:06:05Z
Revision history for this page on the wiki
MediaWiki 1.35.1
https://www.zkoss.org/_w/index.php?title=Small_Talks/2012/April/Create_a_Report_with_ZK_using_iReport_and_JasperReports&diff=53823&oldid=prev
Hawk: correct highlight (via JWB)
2022-01-20T04:19:10Z
<p>correct highlight (via JWB)</p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 04:19, 20 January 2022</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l112" >Line 112:</td>
<td colspan="2" class="diff-lineno">Line 112:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>File:iReport-sample1-04.png|Specify Language properties to Java</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>File:iReport-sample1-04.png|Specify Language properties to Java</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></gallery></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></gallery></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><li>If you want to specify report title dynamically in Java code instead of static text, you can add a parameter named "reportTitle" and specify "Parameter class" to <<del class="diffchange diffchange-inline">tt</del>>java.lang.String</<del class="diffchange diffchange-inline">tt</del>></li></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><li>If you want to specify report title dynamically in Java code instead of static text, you can add a parameter named "reportTitle" and specify "Parameter class" to <<ins class="diffchange diffchange-inline">code</ins>>java.lang.String</<ins class="diffchange diffchange-inline">code</ins>></li></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><gallery widths="250px" heights="200px"></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><gallery widths="250px" heights="200px"></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>File:iReport-sample1-18.png|Right click parameters to Add Parameter</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>File:iReport-sample1-18.png|Right click parameters to Add Parameter</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l118" >Line 118:</td>
<td colspan="2" class="diff-lineno">Line 118:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>File:iReport-sample1-20.png|Drag the parameter to "Title" band</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>File:iReport-sample1-20.png|Drag the parameter to "Title" band</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></gallery></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></gallery></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><li>Add two parameters named "vegetableDataSource" and "seafoodDataSource", then specify "Parameter class" of both parameters to <<del class="diffchange diffchange-inline">tt</del>>net.sf.jasperreports.engine.JRDataSource</<del class="diffchange diffchange-inline">tt</del>></li></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><li>Add two parameters named "vegetableDataSource" and "seafoodDataSource", then specify "Parameter class" of both parameters to <<ins class="diffchange diffchange-inline">code</ins>>net.sf.jasperreports.engine.JRDataSource</<ins class="diffchange diffchange-inline">code</ins>></li></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><gallery widths="250px" heights="200px"></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><gallery widths="250px" heights="200px"></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>File:iReport-sample1-05.png|Right click parameters to Add Parameter</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>File:iReport-sample1-05.png|Right click parameters to Add Parameter</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l141" >Line 141:</td>
<td colspan="2" class="diff-lineno">Line 141:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><li>Select the fields you want to show in the table, then click "Next"</li></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><li>Select the fields you want to show in the table, then click "Next"</li></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>:[[File:iReport-sample1-12.png|600px]]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>:[[File:iReport-sample1-12.png|600px]]</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><li>Select "Use a JRDatasource expression" option and type <<del class="diffchange diffchange-inline">tt</del>>$P{vegetableDataSource}</<del class="diffchange diffchange-inline">tt</del>> in the expression, then click "Next"</li></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><li>Select "Use a JRDatasource expression" option and type <<ins class="diffchange diffchange-inline">code</ins>>$P{vegetableDataSource}</<ins class="diffchange diffchange-inline">code</ins>> in the expression, then click "Next"</li></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>:[[File:iReport-sample1-13.png|600px]]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>:[[File:iReport-sample1-13.png|600px]]</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><li>Design the table style, then click "Finish"</li></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><li>Design the table style, then click "Finish"</li></div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l162" >Line 162:</td>
<td colspan="2" class="diff-lineno">Line 162:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Now we need to create data source instance and set ZK JasperReports settings as follows:</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Now we need to create data source instance and set ZK JasperReports settings as follows:</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><ol></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><ol></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><li>Create a <<del class="diffchange diffchange-inline">tt</del>>DataSource</<del class="diffchange diffchange-inline">tt</del>> instance that implements <<del class="diffchange diffchange-inline">tt</del>>net.sf.jasperreports.engine.JRDataSource</<del class="diffchange diffchange-inline">tt</del>></li></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><li>Create a <<ins class="diffchange diffchange-inline">code</ins>>DataSource</<ins class="diffchange diffchange-inline">code</ins>> instance that implements <<ins class="diffchange diffchange-inline">code</ins>>net.sf.jasperreports.engine.JRDataSource</<ins class="diffchange diffchange-inline">code</ins>></li></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang="java"></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><source lang="java"></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>public class DataSource implements JRDataSource {</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>public class DataSource implements JRDataSource {</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l338" >Line 338:</td>
<td colspan="2" class="diff-lineno">Line 338:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><li>In step 7 of the wizard, choose "Use a JRDataSource expression" option and click the edit icon</li></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><li>In step 7 of the wizard, choose "Use a JRDataSource expression" option and click the edit icon</li></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>:[[File:iReport-sample2-08.png|600px]]</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>:[[File:iReport-sample2-08.png|600px]]</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><li>Type <<del class="diffchange diffchange-inline">tt</del>>new net.sf.jasperreports.engine.data.JRBeanCollectionDataSource($F{foods})</<del class="diffchange diffchange-inline">tt</del>> in Expression editor then click <b>Apply</b></li></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><li>Type <<ins class="diffchange diffchange-inline">code</ins>>new net.sf.jasperreports.engine.data.JRBeanCollectionDataSource($F{foods})</<ins class="diffchange diffchange-inline">code</ins>> in Expression editor then click <b>Apply</b></li></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><li>Repeat step 2-1 to set data source of sub-report with <<del class="diffchange diffchange-inline">tt</del>>Food.class</<del class="diffchange diffchange-inline">tt</del>> bean and design the sub-report style.</li></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><li>Repeat step 2-1 to set data source of sub-report with <<ins class="diffchange diffchange-inline">code</ins>>Food.class</<ins class="diffchange diffchange-inline">code</ins>> bean and design the sub-report style.</li></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></ul></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div></ul></div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><li>Edit "Default Value Expressions" attribute of the parameter <<del class="diffchange diffchange-inline">tt</del>>SUBREPORT_DIR</<del class="diffchange diffchange-inline">tt</del>> in main-report using an empty string "" for web project</li></div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><li>Edit "Default Value Expressions" attribute of the parameter <<ins class="diffchange diffchange-inline">code</ins>>SUBREPORT_DIR</<ins class="diffchange diffchange-inline">code</ins>> in main-report using an empty string "" for web project</li></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><gallery widths="250px" heights="200px"></div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div><gallery widths="250px" heights="200px"></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>File:iReport-sample2-09.png|Click SUBREPORT_DIR parameter</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>File:iReport-sample2-09.png|Click SUBREPORT_DIR parameter</div></td></tr>
</table>
Hawk
https://www.zkoss.org/_w/index.php?title=Small_Talks/2012/April/Create_a_Report_with_ZK_using_iReport_and_JasperReports&diff=26791&oldid=prev
Southerncrossie at 07:57, 19 April 2012
2012-04-19T07:57:24Z
<p></p>
<table class="diff diff-contentalign-left diff-editfont-monospace" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="en">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Older revision</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revision as of 07:57, 19 April 2012</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1" >Line 1:</td>
<td colspan="2" class="diff-lineno">Line 1:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{Template:Smalltalk_Author|</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>{{Template:Smalltalk_Author|</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>|author=Jimmy Shiau & Vincent Jian, Engineer, Potix Corporation</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>|author=Jimmy Shiau & Vincent Jian, Engineer, Potix Corporation</div></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>|date=April <del class="diffchange diffchange-inline">13</del>, 2012</div></td><td class='diff-marker'>+</td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>|date=April <ins class="diffchange diffchange-inline">19</ins>, 2012</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>|version=ZK 5/6, iReport 4.5.0, JasperReports 4.5.0</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>|version=ZK 5/6, iReport 4.5.0, JasperReports 4.5.0</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>}}</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>}}</div></td></tr>
</table>
Southerncrossie
https://www.zkoss.org/_w/index.php?title=Small_Talks/2012/April/Create_a_Report_with_ZK_using_iReport_and_JasperReports&diff=26664&oldid=prev
Southerncrossie: Created page with "{{Template:Smalltalk_Author| |author=Jimmy Shiau & Vincent Jian, Engineer, Potix Corporation |date=April 13, 2012 |version=ZK 5/6, iReport 4.5.0, JasperReports 4.5.0 }} =Introdu..."
2012-04-13T03:51:12Z
<p>Created page with "{{Template:Smalltalk_Author| |author=Jimmy Shiau & Vincent Jian, Engineer, Potix Corporation |date=April 13, 2012 |version=ZK 5/6, iReport 4.5.0, JasperReports 4.5.0 }} =Introdu..."</p>
<p><b>New page</b></p><div>{{Template:Smalltalk_Author|<br />
|author=Jimmy Shiau & Vincent Jian, Engineer, Potix Corporation<br />
|date=April 13, 2012<br />
|version=ZK 5/6, iReport 4.5.0, JasperReports 4.5.0<br />
}}<br />
<br />
=Introduction=<br />
JasperReports is a powerful reporting engine which supports various formats including pdf, html, rtf, xls, doc etc, ZK has integrated JasperReports to leverage these powers for ease of reporting. This article demonstrates how you can export your ZK-powered page to a desired JasperReport format and layout, designed by iReport, a GUI based design tool for JasperReport.<br />
<br />
=Prerequisite=<br />
==JasperReports==<br />
<br />
ZK 5.0.8/6 and later have integrated jasperreport version 4.0.1 and you can use the jasperreports.jar packaged within ZK directly. If you want to use the latest version of jasperreport, you can download it from http://sourceforge.net/projects/jasperreports/files/jasperreports/<br />
Note that ZK JasperReport Integration is part of ZK PE/EE so please download ZK PE/EE or the evaluation copy of ZK PE/EE.<br />
<br />
==iReport==<br />
Download iReport from [http://jasperforge.org/website/ireportwebsite/IR%20Website/ir_download.html?header=project&target=ireport JasperForge] and install. Notice that the version of iReport should exactly match with the version of JasperReports.<br />
<br />
=Scenario One: Create Report with Custom Data Source=<br />
In this sample, we assume you have a ZK page with two grids which contain custom data source and you wish to export these grids to a PDF/RTF table using JasperReports.<br />
<br />
==The ZK page==<br />
The data page we demonstrate here is a Food List with various categories. The list is displayed as two grid components.<br />
:[[File:iReport-sample1-01.png|600px]]<br />
<br />
Necessary classes are as follows:<br />
<ul><br />
<li>Food bean.</li><br />
<source lang="java"><br />
public class Food {<br />
private String Category;<br />
private String Name;<br />
private String TopNutrients;<br />
private Integer DailyPercent;<br />
private Integer Calories;<br />
private String Quantity;<br />
public Food(String category, String name, String topNutrients, Integer dailyPercent, Integer calories, String quantity) {<br />
Category = category;<br />
Name = name;<br />
TopNutrients = topNutrients;<br />
DailyPercent = dailyPercent;<br />
Calories = calories;<br />
Quantity = quantity;<br />
}<br />
// getters and setters<br />
}<br />
</source><br />
<br />
<li>Food Data Access Object.</li><br />
<br />
<source lang="java"><br />
public class FoodData {<br />
private static List<Food> foods = new ArrayList<Food>();<br />
static {<br />
foods.add(new Food("Vegetables", "Asparagus", "Vitamin K", 115, 43, "1 cup - 92 grams"));<br />
foods.add(new Food("Vegetables", "Beets", "Folate", 33, 74, "1 cup - 170 grams"));<br />
// other foods<br />
}<br />
public static List<Food> getFoodsByCategory(String category) {<br />
List<Food> somefoods = new ArrayList<Food>();<br />
for (Iterator<Food> i = foods.iterator(); i.hasNext();) {<br />
Food tmp = i.next();<br />
if (tmp.getCategory().equals(category))<br />
somefoods.add(tmp);<br />
}<br />
return somefoods;<br />
}<br />
}<br />
</source><br />
<br />
<li>Data set by model and render by RowRenderer.</li><br />
<br />
<source lang="java"><br />
public class ReportSample1Composer extends GenericForwardComposer {<br />
private Grid vegetable;<br />
private Grid seafood;<br />
private List<Food> vegetables = FoodData.getFoodsByCategory("Vegetables");<br />
private List<Food> seafoods = FoodData.getFoodsByCategory("Seafood");<br />
public void doAfterCompose(Component comp) throws Exception {<br />
super.doAfterCompose(comp);<br />
RowRenderer renderer = new RowRenderer() {<br />
public void render(Row row, Object data) throws Exception {<br />
Food food = (Food) data;<br />
new Label(food.getName()).setParent(row);<br />
new Label(food.getTopNutrients()).setParent(row);<br />
new Label(food.getDailyPercent() + "").setParent(row);<br />
new Label(food.getCalories() + "").setParent(row);<br />
new Label(food.getQuantity()).setParent(row);<br />
}<br />
};<br />
vegetable.setModel(new ListModelList(vegetables));<br />
vegetable.setRowRenderer(renderer);<br />
seafood.setModel(new ListModelList(seafoods));<br />
seafood.setRowRenderer(renderer);<br />
}<br />
}<br />
</source><br />
</ul><br />
<br />
==Design the report layout by iReport==<br />
Now we are ready to design our report with the following steps:<br />
<ol><br />
<li>First, execute iReport and set classpath that contains the <b>Food</b> class</li><br />
<gallery widths="250px" heights="200px"><br />
File:iReport-sample2-02.png|Tools -> Options<br />
File:iReport-sample2-03.png|iReport -> Classpath -> Add Folder<br />
</gallery><br />
<li>Then, create a new empty report with Blank A4 template and change the language properties to Java</li><br />
<gallery widths="250px" heights="200px"><br />
File:iReport-sample1-02.png|Create a new report<br />
File:iReport-sample1-03.png|Modify report properties<br />
File:iReport-sample1-04.png|Specify Language properties to Java<br />
</gallery><br />
<li>If you want to specify report title dynamically in Java code instead of static text, you can add a parameter named "reportTitle" and specify "Parameter class" to <tt>java.lang.String</tt></li><br />
<gallery widths="250px" heights="200px"><br />
File:iReport-sample1-18.png|Right click parameters to Add Parameter<br />
File:iReport-sample1-19.png|Modify parameter properties<br />
File:iReport-sample1-20.png|Drag the parameter to "Title" band<br />
</gallery><br />
<li>Add two parameters named "vegetableDataSource" and "seafoodDataSource", then specify "Parameter class" of both parameters to <tt>net.sf.jasperreports.engine.JRDataSource</tt></li><br />
<gallery widths="250px" heights="200px"><br />
File:iReport-sample1-05.png|Right click parameters to Add Parameter<br />
File:iReport-sample1-06.png|Modify parameter properties<br />
</gallery><br />
<li>Add an empty data set in the report named "FoodDataSet"</li><br />
<gallery widths="250px" heights="200px"><br />
File:iReport-sample1-07.png|Right click MyReport to Add DataSet<br />
File:iReport-sample1-08.png|Create a empty data set<br />
</gallery><br />
<li>Now, design the report layout for vegetable grid in the ZUL page</li><br />
<ul><br />
<li>Add fields in "FoodDataSet" according to Food bean properties</li><br />
<gallery widths="250px" heights="200px"><br />
File:iReport-sample1-09.png|Right click FoodDataSet to Edit Query<br />
File:iReport-sample1-10.png|Read Attributes from Food bean<br />
</gallery><br />
<li>Add "Table" element to "Detail 1" band and follow "Table Wizard"</li><br />
<ol style="list-style-type: lower-alpha"><br />
<li>Create a table from "FoodDataSet" and set columns to "5", then click "Next"</li><br />
:[[File:iReport-sample1-11.png|600px]]<br />
<li>Select the fields you want to show in the table, then click "Next"</li><br />
:[[File:iReport-sample1-12.png|600px]]<br />
<li>Select "Use a JRDatasource expression" option and type <tt>$P{vegetableDataSource}</tt> in the expression, then click "Next"</li><br />
:[[File:iReport-sample1-13.png|600px]]<br />
<li>Design the table style, then click "Finish"</li><br />
:[[File:iReport-sample1-14.png|600px]]<br />
</ol><br />
<li>Tweak the report and table layout as you wish</li><br />
</ul><br />
<li>Then, design the report layout for seafood grid in the ZUL page</li><br />
<ul><br />
<li>Add another Detail band in the report</li><br />
:[[File:iReport-sample1-15.png|frame|none]]<br />
<li>Repeat step 6-2 to add another table in "Detail 2" band</li><br />
</ul><br />
<li>Compile <b>MyReport</b> and copy <b>MyReport.jasper</b> file to your web project</li><br />
:[[File:iReport-sample1-16.png|frame|none]]<br />
</ol><br />
<br />
==Use ZK JasperReports in your web project==<br />
<br />
Now we need to create data source instance and set ZK JasperReports settings as follows:<br />
<ol><br />
<li>Create a <tt>DataSource</tt> instance that implements <tt>net.sf.jasperreports.engine.JRDataSource</tt></li><br />
<source lang="java"><br />
public class DataSource implements JRDataSource {<br />
private List<Food> foods;<br />
private int index = -1;<br />
public DataSource(List<Food> foods) {<br />
super();<br />
this.foods = foods;<br />
}<br />
public Object getFieldValue(JRField field) throws JRException {<br />
String fieldName = field.getName();<br />
Food food = foods.get(index);<br />
if ("name".equals(fieldName)) {<br />
return food.getName();<br />
} else if ("topNutrients".equals(fieldName)) {<br />
return food.getTopNutrients();<br />
} else if ("dailyPercent".equals(fieldName)) {<br />
return food.getDailyPercent();<br />
} else if ("calories".equals(fieldName)) {<br />
return food.getCalories();<br />
} else if ("quantity".equals(fieldName)) {<br />
return food.getQuantity();<br />
}<br />
return "";<br />
}<br />
public boolean next() throws JRException {<br />
return ++index < foods.size();<br />
}<br />
}<br />
</source><br />
<br />
<li>Create a <b>report.zul</b> page which contains jasperreport component</li><br />
<br />
<source lang="xml"><br />
<window title="Report" border="normal" width="800px" height="600px" closable="true" mode="modal"><br />
<jasperreport id="report" height="600px" /><br />
</window><br />
</source><br />
<li>Create two buttons in the <b>index.zul</b> page, and let them forward onClick event with a string to the onShowReport event in the composer.</li><br />
<source lang="xml"><br />
<hlayout><br />
Export Report to <button label="PDF" forward='onShowReport(pdf)' /><button label="RTF" forward='onShowReport(rtf)' /><br />
</hlayout><br />
</source><br />
<br />
<source lang="java"><br />
public void onShowReport(ForwardEvent event) {<br />
String type = event.getData().toString();<br />
String path = page.getDesktop().getWebApp().getRealPath("/sample1");<br />
Window win = (Window) Executions.createComponents("report.zul", null, null);<br />
<br />
Map<String, Object> params = new HashMap<String, Object>();<br />
// Add parameters used in this report<br />
params.put("reportTitle", "My Food List");<br />
params.put("vegetableDataSource", new DataSource(vegetables));<br />
params.put("seafoodDataSource", new DataSource(seafoods));<br />
<br />
Jasperreport report = (Jasperreport) win.getFellow("report");<br />
report.setType(type);<br />
report.setSrc(path + "/MyReport.jasper");<br />
report.setParameters(params);<br />
}<br />
</source><br />
<br />
<li>Now we have finished all the settings, the following image shows what the resulting report looks like:</li><br />
:[[File:iReport-sample1-17.png|600px]]<br />
</ol><br />
<br />
=Scenario Two: Create Sub-Report with Bean Collection Data Source=<br />
In this sample, we assume you have a ZK page with a Master-Detail grid which contains a bean collection data source where each bean has another bean collection data. And you wish to export the grid to a PDF/RTF sub-report table using JasperReports.<br />
==The ZK page==<br />
The data page we demonstrate here contains a Person List with each person's favorite Food list. The list is displayed as a Master-Detail grid component.<br />
:[[File:iReport-sample2-01.png]]<br />
<br />
Necessary classes are as follows:<br />
<ul><br />
<li>Person bean with a list of Food bean in scenario one.</li><br />
<source lang="java"><br />
public class Person {<br />
private String name;<br />
private Integer age;<br />
private List<Food> foods = new ArrayList<Food>();<br />
<br />
public Person(String name, Integer age, List<Food> foods) {<br />
this.name = name;<br />
this.age = age;<br />
this.foods = foods;<br />
}<br />
// getters and setters<br />
}<br />
</source><br />
<li>Person Data Access Object.</li><br />
<source lang="java"><br />
public class PersonData {<br />
private static List<Person> people = new ArrayList<Person>();<br />
static {<br />
people.add(new Person("Tom Riddle", 50, FoodData.getFoodsByCategory("Grains")));<br />
people.add(new Person("Harry Potter", 20, FoodData.getFoodsByCategory("Fruits")));<br />
people.add(new Person("Ron Wesley", 21, FoodData.getFoodsByCategory("Seafood")));<br />
}<br />
<br />
public static List<Person> getPeople() {<br />
return people;<br />
}<br />
}<br />
</source><br />
<br />
<li>Use data binding to show the data page in <b>index.zul</b> page.</li><br />
<br />
<source lang="xml"><br />
<?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" ?><br />
<zk><br />
<window id="win" title="JasperReports Sample 1" border="normal" apply="web.ui.ctrl.ReportSample2Composer"><br />
<grid id="people" model="@{win$composer.personList}"><br />
<columns><br />
<column width="40px" /><br />
<column label="Name" /><br />
<column label="Age" /><br />
</columns><br />
<rows><br />
<row self="@{each='person'}" value="@{person}"><br />
<detail open="true"><br />
<grid id="vegetable" model="@{person.foods}"><br />
<columns><br />
<column label="cagetory" /><br />
<column label="Name" /><br />
<!-- other Food properties --><br />
</columns><br />
<rows><br />
<row self="@{each='food'}" value="@{food}"><br />
<label value="@{food.category}"/><br />
<label value="@{food.name}" /><br />
<!-- other Food properties --><br />
</row><br />
</rows><br />
</grid><br />
</detail><br />
<label value="@{person.name}" /><br />
<label value="@{person.age}" /><br />
</row><br />
</rows><br />
</grid><br />
</window><br />
</zk><br />
</source><br />
</ul><br />
<br />
==Design the report layout by iReport==<br />
<br />
Now we are ready to design our report with the following steps:<br />
<br />
<ol><br />
<li>Execute iReport and set classpath that contains Person.class and Food.class</li><br />
<gallery widths="250px" heights="200px"><br />
File:iReport-sample2-02.png|Tools -> Options<br />
File:iReport-sample2-03.png|iReport -> Classpath -> Add Folder<br />
</gallery><br />
<br />
<li>Create a new report by iReport</li><br />
<br />
<ul><br />
<li>Set data source of the report</li><br />
<gallery widths="250px" heights="200px"><br />
File:iReport-sample2-04.png|Right click on MainReport -> Edit Query<br />
File:iReport-sample2-05.png|Add bean properties to report fields<br />
</gallery><br />
<li>Design the report and drag all Fields in Detail band</li><br />
<li>Remove Field value "foods" as the food bean data collection will be listed in sub-report</li><br />
:[[File:iReport-sample2-06.png|600px]]<br />
</ul><br />
<li>Adding sub-report element in Detail band will trigger iReport wizard to create a new report</li><br />
<ul><br />
<li>Press next directly in the first 5 steps of the wizard, and in step 6 of the wizard, remember to select "Store the directory name in a parameter" option.</li><br />
:[[File:iReport-sample2-07.png|600px]]<br />
<li>In step 7 of the wizard, choose "Use a JRDataSource expression" option and click the edit icon</li><br />
:[[File:iReport-sample2-08.png|600px]]<br />
<li>Type <tt>new net.sf.jasperreports.engine.data.JRBeanCollectionDataSource($F{foods})</tt> in Expression editor then click <b>Apply</b></li><br />
<li>Repeat step 2-1 to set data source of sub-report with <tt>Food.class</tt> bean and design the sub-report style.</li><br />
</ul><br />
<li>Edit "Default Value Expressions" attribute of the parameter <tt>SUBREPORT_DIR</tt> in main-report using an empty string "" for web project</li><br />
<gallery widths="250px" heights="200px"><br />
File:iReport-sample2-09.png|Click SUBREPORT_DIR parameter<br />
File:iReport-sample2-10.png|Set "Default Value Expressions" to empty string<br />
</gallery><br />
<li>Compile report and copy both <b>*.jasper</b> files to your web project</li><br />
Right-Click MainReport and execute "Compile Report" to compile the report. It will also compile sub-report automatically.<br />
:[[File:iReport-sample2-11.png|frame|none]]<br />
<br />
==Use ZK JasperReports in your web project==<br />
Now we can set ZK JasperReports settings as follows:<br />
<ol><br />
<li>Create a <b>report.zul</b> page contains jasperreport component</li><br />
<source lang="xml"><br />
<window title="Report" border="normal" width="800px" height="600px" closable="true" mode="modal"><br />
<jasperreport id="report" height="600px" /><br />
</window><br />
</source><br />
<li>Create two buttons in the <b>index.zul</b> page, and let them forward onClick event with a string to the onShowReport event in the composer.</li><br />
<source lang="xml"><br />
<hlayout><br />
Export Report to <button label="PDF" forward='onShowReport(pdf)' /><button label="RTF" forward='onShowReport(rtf)' /><br />
</hlayout><br />
</source><br />
<source lang="java"><br />
public void onShowReport(ForwardEvent event) {<br />
String type = event.getData().toString();<br />
// get the absolute path that contains *.jasper files<br />
String path = page.getDesktop().getWebApp().getRealPath("/sample2");<br />
Window win = (Window) Executions.createComponents("report.zul", null, null);<br />
// set parameters used in the main-report<br />
Map<String, Object> params = new HashMap<String, Object>();<br />
params.put("SUBREPORT_DIR", path + "/");<br />
// set jasperreport component attributes<br />
Jasperreport report = (Jasperreport) win.getFellow("report");<br />
report.setType(type);<br />
report.setSrc(path + "/MainReport.jasper");<br />
report.setParameters(params);<br />
report.setDatasource(new JRBeanCollectionDataSource(PersonData.getPeople()));<br />
}<br />
</source><br />
<li>Result</li><br />
:[[File:iReport-sample2-12.png|600px]]<br />
</ol><br />
<br />
=See Also=<br />
*To export your report to a different format other than PDF and RTF, please refer to [http://books.zkoss.org/wiki/ZK_Component_Reference/Diagrams_and_Reports/Jasperreport#Supported_Type support type list].<br />
*To embed different fonts in the report, please refer to this [http://blog.zkoss.org/index.php/2011/07/14/embed-font-in-jasperreport/ blog].<br />
<br />
=Download=<br />
Download the source code and war file of the two samples illustrated above at: [http://sourceforge.net/projects/zkforge/files/Small%20Talks/Create%20a%20Report%20with%20ZK%20using%20iReport%20and%20JasperReports/? jasperreport.zip]<br />
<br />
{{Template:CommentedSmalltalk_Footer_new|<br />
|name=Potix Corporation<br />
}}</div>
Southerncrossie