How To Integrate GWT (GWT-EXT) and JasperReports

First part, why reports?


You are enthusiastic researcher of new technologies, freelancer and now you are developing an corporate solution, based on Google Web Toolkit (GWT). And once, your lovely customer call to you at one at night, and asking you about new features he wants – reports and asking you to meet tomorrow morning and discuss about it! Op… Ok, he is also promising to you free coffee and inviting you to the private party … so you agreed

You are angry, what the f… it is… reports? Why? There is so nice gwt-ext panel, buttons, windows …. But, you always following the style of customer friendly behavior, so, you are deciding to make client happy

So, let’s start with a task definition.

Task Definition

We have a goal to create a prototype of report generation, viewing and exporting to the different file formats. Task is not so hard, but as well requires knowledge and some tricks to do it well.

Requirements to accomplish task

To make an complete solution, you need to get and install next tools:

1. Eclipse IDE - http://www.eclipse.org/downloads/
2. Google Web Toolkit - http://code.google.com/webtoolkit/gettingstarted.html
3. JasperReports - http://www.jaspersoft.com/
4. iReport - http://ireport.sourceforge.net/
5. Tomcat 5.x/6 - http://tomcat.apache.org/
6. Ant - http://ant.apache.org/
7. Gwt (Gwt-Ext) application:)

Some facts about JasperReports


JasperReports is one of the most popular Open Source libraries for a report generation. It has a good possibilities for integration with java applications.



Reports definitions is a plain XML files, so it allows in the future to create new reports, using a velocity template engine(http://velocity.apache.org/), Jelly (http://commons.apache.org/jelly/) or other template tools. Report definition files has an extension: *.jrxml.

After you are created a definition, it compiles and you are getting a *.jasper files.

JasperCompileManager.compileReportToFile("WebappReport.jrxml");

Some cases it is convenient, since it allows to hide definitions from customer, by giving him an compiled report, but not the sources.

After compilation is done, you should execute report using JasperFillManager.fillReport() to get JasperPrint object (you can then store it to the file).

Actually, you already got an report and can use it! You can use a wide collection of exporters to export it to any format you like: JexcelApiExporter, JexcelApiExporterNature, JexcelApiExporterParameter, JRCsvExporter, JRGraphics2Dexporter, JRHtmlExporter, JRPdfExporter, JRPrintServiceExporter, JRRtfExporter, JRTextExporter, JRXlsExporter, JRXmlExporter.

Application prototype

For a prototype of an application I took GWT-Ext Showcase2 and changed it, to accomplish the customer needs.

When you are clicking “Logined users”, information is opened in new tab, showing a details. Everything is clear, isn’t? So, continue step by step.

Step One

So, let’s start with Jasper and create report.

• We have jasperreports-3.1.2-project.zip, extract it to C:\demo\jasper. And at folder “demo\samples\webapp” we should to find report WebappReport.jrxml (great example for report running under the web)


• Than, using iReport changing report, making it looks nice: put logo of company, change a title and configuring JDBC DataSource and Report Query.

• Necessary changes in servlets
  “demo\samples\webapp\WEB-INF\classes\servlets” – making possible to start a report using parameter ‘reportfile’:
  String rp = req.getParameter(“reportfile”);
  String reportFileName = context.getRealPath("/reports/”+rp+”.jasper");
  “demo\samples\webapp” for testing – in HTML all links changing to “?reportfile=WebappReport”;
  

• At root folder “ demo\samples\webapp” we need to run ANT.

After we need a little bit to configure Tomcat, coping content “demo\samples\webapp” to the Tomcat ”webapps\jasper” and run it.

Than easy step: open a browser and go to url: (be careful, your port number can be different)
http://localhost:8887/jasper/


It should be like above. Great job, it works!

Second step

So, we have a working report, and now we want to run it using gwt application. The sample application should be like this:

Let’s integrate GWT and Jasper together!

Creating an simplest ReportManager class with static methods:
public class ReportManager {
public static String getExportReportURL(String report, String exptype){
return "http://localhost:8887/jasper/servlets/"+exptype+"?reportfile=" + report;
};

}

Than, we should to create an Panel:

Panel centerPanel = new Panel();
centerPanel.setLayout(new BorderLayout());
centerPanel.setTitle("Sessions");
…

String rep_url = ReportManager.getExportReportURL("WebappReport","html");
final Frame frame = new Frame(rep_url);
centerPanel.add(frame, new BorderLayoutData(RegionPosition.CENTER));

Toolbar toolbar = new Toolbar();
toolbar.addFill();
ToolbarButton toolbarButton = new ToolbarButton("PDF", new ButtonListenerAdapter() {
public void onClick(Button button, EventObject e) {
frame.setUrl(ReportManager.getExportReportURL("WebappReport","pdf"));
}
});
…

Run a project in Host Mode, clicking to the button “Logined users” and .... Oppa!

If you want to see it in pdf, just click to the button export to “PDF”


So, everything you need now… sleep, meet with a client and with cup of tea share with him great perspectives of his business :)