Welcome!

AJAX & REA Authors: John Funnell, Bob Little, Kevin Hoffman, Maureen O'Gara, Onkar Singh

Related Topics: AJAX & REA, Java, ColdFusion, Adobe Flex, AJAXWorld RIA Conference & Expo

AJAX & REA: Article

AJAX Reporting Challenges & Solutions with Adobe Flex

Bringing together JavaScript, Flash Player, and Web Services

The XML file on the left is processed by the code on the right. The first three ActionScript trace statements demonstrate how you can access the elements and attributes of this XML stored in the variable myXML. The second line has a filtering criteria in parentheses: @id==2. This line means "find me all XML elements named item, and print the content of the element menuName for those that have the attribute id equal to 2. Pretty loaded and elegant line, isn't it?

After that, the code snippet above creates a newItem element and appends it to myXML, and then again uses dot notation to access XML elements and attributes.

From SOAP to JavaScript and FlashPlayer with ClearBI
ClearBI is a commercial Web reporter originally created for Flex/Java applications and worked only with server-side applications that had Adobe LiveCycle Data Services, which implemented a fast communication protocol called AMF. But the newest version of ClearBI 1.1 can work with the data that comes in a form of JavaScript objects, a Web Service, or uses OpenAMF, an open source implementation of the AMF0 communication protocol.

In this section I'll go over the process of getting the data from Amazon's SOAP Web Service to JavaScript and then to ClearBI. This is what has to be done after the Web Service is initialized by WebService.swf. This time we'll use a JavaScript object as an argument to the operation KeywordSearchRequest.

Pass a JavaScript object with retrieval args to a hidden swf object, which will return the data back to JavaScript, which in turn passes the data to ClearBI swf:

var ws = com.farata.jsfx.WebServices("MyWebService"); // a hidden swf

Add a Web Service operation result listener. The next line maps the WebService.swf method serviceresult to JavaScript's function onJavaScriptResult that will receive the data from WebService.swf when available and will format it as JSON objects.

ws.addEventListener("serviceresult", onJavaScriptResult);
var args = {
   KeywordSearchRequest: {
     keyword:     "AJAX",
     page:     "1",
     mode:     "books",
     tag:     "D3HW0PG66IPLAM",
     type:     "lite",
     devtag:     "D3HW0PG66IPLAM",
     sort:     null,
     variations: null,
     locale: null
   }
};

Call Amazon's "KeywordSearchRequest" Web Service operation.

ws.Amazon.KeywordSearchRequest( args );
...

The JavaScript function receives the data arriving as JavaScript into a variable lastData.

function onJavaScriptResult(ev) {
    lastData = ev.result.Details;
    this.removeEventListener("serviceresult", onJavaScriptResult);
   }

Now we can pass the data from lastData to clearBI.swf for displaying and customizing the report.

Pass the Data to ClearBI from a JavaScript Array
In JavaScript, get a reference to the Flash Player object and call the function loadReport giving the report name (a template customized by the user and stored in a database) and the data itself:

var report

report = $plugin("ClearBIPlayer"); // a helper function to return reporter's id
report.loadReport(reportName, lastData);

The data exchange between JavaScript and ClearBI.swf is supported internally by the ActionScript class ExternalInterface. The report variable above represents ClearBI.swf, which internally (in ActionScript) allowed JavaScript calling its function loadReport, which is mapped to ActionScript's loadReport function.

ExternalInterface.addCallback("loadReport", loadReport);

That's all there is to it. End users can run and customize reports themselves. For example, their Web browser window may look like Figure 4. The top portion of the screen is regular JavaScript while the report and its editor are rendered by Flash Player 9.

Using a Faster Communication Protocol: OpenAMF
If you're building your application in-house and it doesn't have to connect to someone else's Web Service, you may be better off creating a Java-based data feed using faster communication protocol called OpenAMF. This open source implementation of the AMF communication protocol performs serialization of the server-side POJO into its ActionScript peer on the client (see Figure 5). This is how it goes:

  • Client: A Web browser with Flash Player 9 plug-in or ActiveX
  • Mid-tier: A servlet container with open source OpenAMF (five jars), open source Flex SDK, ClearBI's jars to support report compilation and hot deployment, JOTM, JTS, JDBC drivers
  • Report persistence: ClearBI uses two database tables to store reports' metadata (can be co-located with other data)
  • Report publishing: Reports can be compiled into swf files and published on the Web
Summary Proper integration of JavaScript and Flash Player's components can enrich your AJAX application with powerful reporting capabilities offered by ClearBI (written in Adobe Flex). If you aren't into reporting, just use the WebService.swf to communicate with SOAP Web Services.

You can download the description of the API for the JavaScript wrapper to WebService.swf at www.myflex.org/demo/webservice_swf/doc/. The WebService.swf is located at www.myflex.org/demo/webservice_swf/WebService.swf .

The trial version of ClearBI 1.1 became available on October 15, 2007 at www.myflex.org.

The demo application that uses JavaScript, WebService.swf, and ClearBI.swf is deployed at www.myflex.org/theriabook/ClearBI.Ajax/main.html. It looks like Figure 6.

In the first three tabs you'll be able to play with sending XML and JavaScript requests to Amazon, and the last three tabs are supported by ClearBI (the name of the report is Amazon.KeywordSearchRequest. You might want to watch a short pre-recorded demo that shows working with a sample Employees database and using ClearBI editor for report customization. This demo is located at . It shows how end users can add grouping, modify styling, and apply formulas.

More Stories By Yakov Fain

Yakov Fain is a Managing Director of Farata Systems, consulting, training and product company. He has authored several Java books, dozens of technical articles. SYS-CON Books released his latest co-authored book , Rich Internet Applications with Adobe Flex and Java: Secrets of the Masters in Spring 2007. Sun Microsystems has nominated and awarded Yakov with the title Java Champion. He leads the Princeton Java Users Group. He is an Adobe Certified Flex Instructor. Currently Yakov works on the book for O'Reilly "Enterprise Application Development with Flex". He twits at twitter.com/yfain.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.