Creating PDF in WaveMaker using JasperReports

*** Note from the Editor(Joerg) ***
This is the first of (hopefully) lots of articles written by vcoportal’s very own student intern, Tobias.
Not to get him too bored 😈 , his task was to cover multiple topics in one article:

How to create PDF-files in WaveMaker, using JasperReports
How to “import” a WaveMaker JavaService into Eclipse
How to use the iReport Designer to create report templates
How to show the resulting PDF as preview in Web-UI

At the end of the Article you will find the exported WaveMaker project to download and referencing links to the external libraries, so that you can reproduce and expand the examples…

As usual, any comments are very welcome! (Just remember: It’s our intern’s first article, so please don’t be too rude 😎 )
***Here we go***

Preparations

Create a new project in WaveMaker without using any template

Now you have to do some small changes in your project’s folder

Go to …projects\yourProjectName\webroot and create a folder called “printtemp” (in which the created pdf-files will be stored)

Go to …\projects\yourProjectName\lib and put the following jar-files in there (see the origins in the References below)

Open up WaveMaker and create a new Java Service

Now you should see the Java code which was automatically created by WaveMaker. I deleted the comments and the sample method.

Go to your canvas and add a button, a text editor and an iFrame. Arrange those widgets just as you like.

Import WaveMaker JavaService to Eclipse

Time to do some programming… Open Eclipse and create a new Java Project. The Project’s name has to be the same one as you have used for your WaveMaker project. In addition, you have to choose your WaveMaker project’s directory as the location:

In order to avoid later errors inside your code (or at least: Eclipse not to find some classes of the WaveMaker core), you have to add an additional library to your Java project:

Right-click on your project folder which is shown in the upper-left corner inside your package explorer and choose “Properties”

Choose the property “Java Build Path” and the tab “Libraries”. Now you can add external JAR’s

You have to navigate to WaveMaker’s installation directory, which’s subfolder \launcher\lib contains “servlet-api-2.5.jar”

If everything was done right, the package explorer should show your WaveMaker project’s directories.

Now you can open the java file and type your code (or ours ;))

Please notice: You are now accessing the jave file both with Eclipse AND WaveMaker. After you made changes on the code, you have to press the refresh button and save it.

Create the PDF-File using JasperReports

Please notice that the fileName in line 63 has to be the name of the jasper template we will create. To keep the example easy, we also hardcode the relative subpath in which the pdf-files are created (here: “printtemp”), remember that this has to exist in your WaveMaker project’s webapp-root (see above).

package com.vcoportal;

import com.wavemaker.runtime.RuntimeAccess;

import java.util.Collection;
import java.util.HashMap;
import java.util.Map;
import java.util.Vector;
import java.net.URL;
import java.io.*;
import net.sf.jasperreports.engine.JRExporterParameter;
import net.sf.jasperreports.engine.JasperFillManager;
import net.sf.jasperreports.engine.JasperPrint;
import net.sf.jasperreports.engine.JasperReport;
import net.sf.jasperreports.engine.data.JRBeanCollectionDataSource;
import net.sf.jasperreports.engine.export.JRPdfExporter;
import net.sf.jasperreports.engine.util.JRLoader;

public class ReportGenerator extends com.wavemaker.runtime.javaservice.JavaServiceSuperClass
{

public ReportGenerator() {
super(INFO);
}

// some attributes holding the data
private String titleText;
private String subTitle;

// getters & setters
public String getTitleText() {
return this.titleText;
}

public String getSubTitle() {
return this.subTitle;
}

public void setTitleText(String ttext) {
this.titleText = ttext;
}

public void setSubTitle(String stitle) {
this.subTitle = stitle;
}

// a static method that initializes, stores and returns our data
public static Collection<ReportGenerator> getData() {

Vector<ReportGenerator> theData = new Vector<ReportGenerator>();

ReportGenerator myReportGen = new ReportGenerator();
myReportGen.setTitleText("Hello World!");
myReportGen.setSubTitle("This is a subtitle!");
theData.add(myReportGen);

return theData;
}

// this is where the magic happens...
public String printReport() {

String fileName = "report.jasper";
String typeDocument = "PDF";
URL fileUrl = this.getClass().getResource(fileName);
Map<String, Object> parameters = new HashMap<String, Object>();
parameters.put("just", new String("testing"));

JRBeanCollectionDataSource ds = new JRBeanCollectionDataSource(this.getData());

try {
JasperReport report = (JasperReport) JRLoader.loadObject(fileUrl);
JasperPrint jasperPrint = JasperFillManager.fillReport(report, parameters, ds);

String pathWR = RuntimeAccess.getInstance().getSession().getServletContext().getRealPath("/printtemp/");
File tempDir = new File(pathWR);
String tempFileName = new String();

if (typeDocument.equals("PDF")) {
File tempFile = File.createTempFile("tempReport", ".pdf", tempDir);
tempFile.deleteOnExit();
tempFileName = tempFile.getName();

JRPdfExporter exporter = new JRPdfExporter();
exporter.setParameter(JRExporterParameter.JASPER_PRINT, jasperPrint);
exporter.setParameter(JRExporterParameter.OUTPUT_FILE_NAME, tempDir + "/" + tempFileName);

exporter.exportReport();
}

return "printtemp/" + tempFileName;

} catch (Exception e) {
log(ERROR, "Error in printReport(): " + e);
return "";
}
}
}

Now we create a very basic jasper template:

Open Jaspersoft iReport Designer, create a new File and open it

For your report, you have to choose the same filename as in your java code. The location has to be the directory of your WaveMaker project’s Java-Service

Now you can add a new field to your template by right-clicking the property “field”. Fields are placeholders for the data we want the PDF to contain

On the lower-right part of the interface you can change the field’s properties. The name has to match the attribute’s name in your code. In my case that’s titleText and subTitle
The field class property has to match the used data type of your attribute.

When you drag your field from the Report Inspector on the left onto your template, a dialog will appear. Just hit OK.

Now you can select your field by clicking on it and change its properties

Create a second field for the attribute “subTitle” and your template could look just as spectacular as this…

By pressing the Preview-Button your template will be compiled and the .jasper-file will be created

Wire the JavaService to the Web-UI

Ok, just a few steps left to do…

Bring up WaveMaker again and create a new Service Variable that will use our Java Service

Remember the Button? It will call the Service Variable

The text editor will show the path and filename of the created PDF. So you can check the option “readonly” and bind its dataValue to the result of the Service Variable

You have to do bind the iFrame’s source to the result of the Service Variable too

And finally, it should look like this…

Cleaning up

In this example every time some user hits the button a new pdf-file will be created. This might not be a good idea for a real project (even if the files are “marked” as temp-files in the JavaVM and will be deleted when this closes, not good for a running-forever web-application). So you might include another method in the JavaService that deletes the report (e.g. after printing, or a certain timeframe) not to fill up the printemp-directory…


public void deleteTempPrintFile(String filename) {
//delete temp pdf
if (filename != null) {
try {
      File toDelete = new File(filename);
toDelete.delete();
}
  catch (Exception e) {
log(ERROR, "Error in deleteTempPrintFile(): " + e);
}

}