I have written several posts on how to use the Actuate JSAPI to integrate with various frameworks. In this post I will detail integrating with Wicket. For more information on the JSAPI see this post:
Showing BIRT Reports using the Actuate JSAPI
Wicket can call BIRT reports with the JSAPI in a similar fashion as other front end frameworks that allow AJAX based APIs, where JavaScript is just embedded into the HTML. An HTML file based on the Hello World Wicket example may look similar to the following.
<html>
<head>
<title>Actuate JSAPI Wicket Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Viewer creation example</title>
</head>
<body>
<b>
<span wicket:id="message">message will be here</span>
</b>
<div id="acviewer" />
<div id="jsapi_example_container"><script type="text/javascript"
src="http://localhost:8080/ActuateJavaComponent/jsapi"></script> <script
type="text/javascript" language="JavaScript">
actuate.load("viewer");
actuate.initialize("http://localhost:8080/ActuateJavaComponent/",
null,
null,
null,
initViewer);
var viewer;
function initViewer()
{
viewer = new actuate.Viewer("acviewer");
var viewerwidth = 800;
var viewerheight = 620;
viewer.setWidth(viewerwidth);
viewer.setHeight(viewerheight);
run();
}
Using a Wicket Behavior to write out this code
function run()
{
viewer.setParameters({"Customer":"CAF Imports"});
viewer.setReportName("/Public/BIRT and BIRT Report Studio Examples/Customer Order History.rptdesign");
viewer.submit();
}
</script></div>
</body>
</html>
This example will look very familiar to other examples in the JSAPI overview post. The only real difference is the addition of the wicket message, which is generated by my instance of the Wicket Web Page class. You will notice that the run JavaScript function is hard coding the report name and parameters. This may be something you want to handle in the Java code, to make it more dynamic. One way of handling this is to use Wicket Behaviors to create custom components. You could use a Behavior to write out all the above JavaScript, but we will keep it simple and just write out the run script. So the first thing to do is to create a class that extends the AbstractBehavior class.
package jsapi.wicket.sample;
import org.apache.wicket.Component;
import org.apache.wicket.Response;
import org.apache.wicket.behavior.AbstractBehavior;
import org.apache.wicket.util.string.JavascriptUtils;
public class ReportComponent extends AbstractBehavior{
private static final long serialVersionUID = 1L;
public void onRendered(Component component) {
Response response = component.getResponse();
response.write(JavascriptUtils.SCRIPT_OPEN_TAG);
response.write("function run(){");
response.write("viewer.setParameters({\"Customer\":\"CAF Imports\"});");
response.write("viewer.setReportName(\"/Public/BIRT and BIRT Report Studio Examples/Customer Order History.rptdesign\");");
response.write("viewer.submit();}");
response.write(JavascriptUtils.SCRIPT_CLOSE_TAG);
}
}
This class overides the onRendered method to write out the entire run script from the HTML above. I can now modify my extended WebPage class to add an instance of the ReportComponent class.
package jsapi.wicket.sample;
import org.apache.wicket.PageParameters;
import org.apache.wicket.markup.html.WebPage;
import org.apache.wicket.markup.html.basic.Label;
public class ReportParameter extends WebPage {
private static final long serialVersionUID = 1L;
public ReportParameter(final PageParameters parameters) {
// Add the simplest type of label
Label myLabel = new Label("message", "Actuate JSAPI Wicket Example");
add(myLabel);
ReportComponent rc = new ReportComponent();
myLabel.add(rc);
}
}
The script is written below the Label component.
Finally the HTML should have the run JavaScript function commented out. The output from this example is as follows.
The generated HTML looks like:
Note that you can use the built in view time functions like selecting new parameters and rerunning the report without any additional code.
The example files can be downloaded from Birt-Exchange.
Monday, September 28, 2009
Calling BIRT reports from Wicket using Actuate’s JSAPI
Thursday, September 03, 2009
Calling BIRT reports from Flex using Actuate’s JSAPI
Continuing on a series of posts I have written around Acuate’s JSAPI, this post details integrating BIRT reports with Flex. Previous posts detailed:
Showing BIRT Reports using the Actuate JSAPI
See this link for more details on what is available in the JSAPI.
Calling BIRT Reports from PHP using Actuate’s JSAPI
Calling BIRT Reports from ASP.NET using Actuate’s JSAPI
BIRT Reports can contain Flash components using the Text element. Actuate has also extended the BIRT report designer to include Flash charts. As stated in previous post the JSAPI can be used to include BIRT content in just about any front end. BIRT currently does not support a Flash emitter, but a Flex component can call the JSAPI to include and modify BIRT content within the same HTML page. This post details how this can be achieved.
The Flex SDK provides a Flex Ajax bridge that allows a Flex application to call and interact with Ajax based APIs. To illustrate how this can be used with Actuate’s JSAPI, I am going to build a Flex application that list a couple of reports. The application will also contain a button to execute the report. The output for the report will be written to another DIV element within the HTML wrapper.
The mxml file is pretty simple and contains a DataGrid that calls an action script to load the names and paths of two reports.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="640" height="300" layout="vertical" backgroundColor="white">
<fab:FABridge xmlns:fab="bridge.*" />
<mx:Panel id="pnlMain" x="10" y="10" width="560" height="260"
layout="absolute" title="BIRT Reports From Flex">
<mx:DataGrid id="dgReports" x="10" y="10" initialize="initReports()" width="530" height="130">
<mx:columns>
<mx:DataGridColumn headerText="Report Name" width="160" dataField="name"/>
<mx:DataGridColumn headerText="Report Path" dataField="path"/>
</mx:columns>
</mx:DataGrid>
<mx:Button x="10" y="156" label="Run Report From Flex" id="flashButton" />
</mx:Panel>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
public function initReports():void
{
var reports:Array = new Array();
reports.push({name: "Monthly Revenue Analysis", path: "/Public/BIRT and BIRT Report Studio Examples/Monthly Revenue Analysis.rptdesign"});
reports.push({name: "Sales by Territory", path: "/Public/BIRT and BIRT Report Studio Examples/Sales by Territory.rptdesign"});
var reportCollection:ArrayCollection = new ArrayCollection(reports);
dgReports.dataProvider = reportCollection;
dgReports.selectedIndex = 0;
}
]]>
</mx:Script>
</mx:Application>
The fab:FABridge xmlns:fab=”bridge.*” tag includes the Flex Ajax bridge library. In this example I just added a bridge directory to my application, which contained the FABridge.as and FABridge.js files that handle the bridge. These files are available in the Flex SDK. This application also contains a button (flashButton) that will be used by JavaScript later in the example.
My wrapper HTML file contains a div element to display the application which is named BirtFlex. The flashvars parameter is used to set a unique bridge name for this application. The bridge name is used by JavaScript to get/set values within the Flex application.
<div id="fply">
<script language='javascript' charset='utf-8'>
document.write("<object id='flexApp' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,5,0,0' type='application/x-shockwave-flash' height='300' width='640'>");
document.write("<param name='flashvars' value='bridgeName=birtexample'/>");
document.write("<param name='src' value='BirtFlex.swf'/>");
document.write("<embed name='BirtFlexDemo' pluginspage='http://www.macromedia.com/go/getflashplayer' src='BirtFlex.swf' height='300' width='640' flashvars='bridgeName=birtexample'/>");
document.write("</object>");
</script>
</div>
For brevity, I have foregone error checking and player checks.
To use the JSAPI the following code is added to the wrapper HTML file.
<div id="jsapi_example_container">
<script type="text/javascript" src="http://localhost:8080/ActuateJavaComponent/jsapi"></script>
<script type="text/javascript" language="JavaScript">
actuate.load("viewer");
actuate.initialize("http://localhost:8080/ActuateJavaComponent/",
null,
null,
null,
initViewer);
var viewer;
function initViewer()
{
document.getElementById("run").disabled = true;
viewer = new actuate.Viewer("acviewer");
var viewerwidth = 500;
var viewerheight = 620;
viewer.setWidth(viewerwidth);
viewer.setHeight(viewerheight);
setupFlashCallBack();
}
function run()
{
var flexApp = FABridge.birtexample.root();
var appValue = flexApp.getDgReports().getSelectedItem().path;
viewer.setReportName(appValue);
viewer.submit();
}
function setupFlashCallBack()
{
var initCallback = function()
{
//alert("Enabling");
document.getElementById("run").disabled = false;
}
var btnCallback = function()
{
var flexApp = FABridge.birtexample.root();
flexApp.getFlashButton().addEventListener("click",flashButtonClicked);
}
FABridge.addInitializationCallback("birtexample",initCallback);
FABridge.addInitializationCallback("birtexample",btnCallback);
}
function flashButtonClicked(event)
{
run();
}
</script>
</div>
This code is very similar to previous examples with a few notable exceptions. When the JSAPI is initialized the call back function initViewer is set.
actuate.initialize("http://localhost:8080/ActuateJavaComponent/",
null,
null,
null,
initViewer);
Once the API is initialized, the initViewer JavaScript function is called.
function initViewer()
{
document.getElementById("run").disabled = true;
viewer = new actuate.Viewer("acviewer");
var viewerwidth = 500;
var viewerheight = 620;
viewer.setWidth(viewerwidth);
viewer.setHeight(viewerheight);
setupFlashCallBack();
}
In addition to a button in the Flex application, the HTML wrapper also contains one to run the report. Not that two buttons are needed, but for illustrative purposes, this example contains two. In this example we disable the button until both the JSAPI and the Flex component are initialized. The Viewer JSAPI component is created as usual and then the setupFlashCallBack() function is called.
function setupFlashCallBack()
{
var initCallback = function()
{
document.getElementById("run").disabled = false;
}
var btnCallback = function()
{
var flexApp = FABridge.birtexample.root();
flexApp.getFlashButton().addEventListener("click",flashButtonClicked);
}
FABridge.addInitializationCallback("birtexample",initCallback);
FABridge.addInitializationCallback("birtexample",btnCallback);
}
In this function two call back functions are registered. The first one (initCallback) is setup to let us know when the Flex application is loaded, which then enables the run button. The second one (btnCallback) registers an event handler that the bridge will call when the Flex button is pressed. This event handler JavaScript function simply calls the run JavaScript function.
function flashButtonClicked(event)
{
run();
}
The JavaScript button has the run function setup on the onclick event.
<input type="button" id="run" value="Run Report From JavaScript" onclick="run()" >
So the report can be run from either button. The run function sets the report name and executes the API to run the report.
function run()
{
var flexApp = FABridge.birtexample.root();
var appValue = flexApp.getDgReports().getSelectedItem().path;
viewer.setReportName(appValue);
viewer.submit();
}
The report path is retrieved using the getDgReports().getSelectedItem().path command. The DataGrid in the mxml file is named dgReports
<mx:DataGrid id="dgReports" x="10" y="10" initialize="initReports()" width="530" height="130">
The bridge provides getter and setter methods for the items in the Flex application. The DataGrid contains two columns (name and path). The path contains the location of the report, so this is the field that is retrieved from the Flex application. See the Flex developers guide for more details on the bridge calls.
This example can be downloaded at Birt-Exchange.
