Welcome!

Microsoft Cloud Authors: Pat Romanski, Andreas Grabner, Nick Basinger, Kevin Benedict, Liz McMillan

Blog Feed Post

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.

Read the original blog entry...

More Stories By Jason Weathersby

Jason Weathersby is a member of the extended BIRT development team at Actuate Corporation and has backgrounds in both computer science and technical writing. He has many years experience in technical consulting, training, writing, and publishing about reporting, business intelligence tools, and database technologies.

IoT & Smart Cities Stories
Moroccanoil®, the global leader in oil-infused beauty, is thrilled to announce the NEW Moroccanoil Color Depositing Masks, a collection of dual-benefit hair masks that deposit pure pigments while providing the treatment benefits of a deep conditioning mask. The collection consists of seven curated shades for commitment-free, beautifully-colored hair that looks and feels healthy.
The textured-hair category is inarguably the hottest in the haircare space today. This has been driven by the proliferation of founder brands started by curly and coily consumers and savvy consumers who increasingly want products specifically for their texture type. This trend is underscored by the latest insights from NaturallyCurly's 2018 TextureTrends report, released today. According to the 2018 TextureTrends Report, more than 80 percent of women with curly and coily hair say they purcha...
The textured-hair category is inarguably the hottest in the haircare space today. This has been driven by the proliferation of founder brands started by curly and coily consumers and savvy consumers who increasingly want products specifically for their texture type. This trend is underscored by the latest insights from NaturallyCurly's 2018 TextureTrends report, released today. According to the 2018 TextureTrends Report, more than 80 percent of women with curly and coily hair say they purcha...
We all love the many benefits of natural plant oils, used as a deap treatment before shampooing, at home or at the beach, but is there an all-in-one solution for everyday intensive nutrition and modern styling?I am passionate about the benefits of natural extracts with tried-and-tested results, which I have used to develop my own brand (lemon for its acid ph, wheat germ for its fortifying action…). I wanted a product which combined caring and styling effects, and which could be used after shampo...
The platform combines the strengths of Singtel's extensive, intelligent network capabilities with Microsoft's cloud expertise to create a unique solution that sets new standards for IoT applications," said Mr Diomedes Kastanis, Head of IoT at Singtel. "Our solution provides speed, transparency and flexibility, paving the way for a more pervasive use of IoT to accelerate enterprises' digitalisation efforts. AI-powered intelligent connectivity over Microsoft Azure will be the fastest connected pat...
There are many examples of disruption in consumer space – Uber disrupting the cab industry, Airbnb disrupting the hospitality industry and so on; but have you wondered who is disrupting support and operations? AISERA helps make businesses and customers successful by offering consumer-like user experience for support and operations. We have built the world’s first AI-driven IT / HR / Cloud / Customer Support and Operations solution.
Codete accelerates their clients growth through technological expertise and experience. Codite team works with organizations to meet the challenges that digitalization presents. Their clients include digital start-ups as well as established enterprises in the IT industry. To stay competitive in a highly innovative IT industry, strong R&D departments and bold spin-off initiatives is a must. Codete Data Science and Software Architects teams help corporate clients to stay up to date with the mod...
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...
Druva is the global leader in Cloud Data Protection and Management, delivering the industry's first data management-as-a-service solution that aggregates data from endpoints, servers and cloud applications and leverages the public cloud to offer a single pane of glass to enable data protection, governance and intelligence-dramatically increasing the availability and visibility of business critical information, while reducing the risk, cost and complexity of managing and protecting it. Druva's...
BMC has unmatched experience in IT management, supporting 92 of the Forbes Global 100, and earning recognition as an ITSM Gartner Magic Quadrant Leader for five years running. Our solutions offer speed, agility, and efficiency to tackle business challenges in the areas of service management, automation, operations, and the mainframe.