AJAXWorld News Desk

Creating reporting applications in AJAX is often more challenging process than development of data entry  CRUD applications. Reporters  usually need to process lots of data, preferably on the client side to minimize the amount of information that goes through the wire. Reporters need to know how to apply formulas, group the data and calculate totals and subtotals. Add to the mix a requirement to give the end users an ability to customize the look and feel of the report, and you are facing a serious project.  At the time of this writing, the AJAX frameworks do not offer advanced reporting capabilities. Let’s go over some challenges and solutions of creating Web reporting software. In this article I’ll pay special attention to the case when a  rich Internet application works as a consumer of a Web Service.

We’ll start with identifying some major challenges of creating reports in AJAX applications.

Browsers’ incompatibilities
Challenge #1: Reporting requires  complex UI programming , but maintaining browser specific code is a huge effort. Optimization of code delivery is a work of art. Optimization of data delivery is not easy, because it needs to support ever changing protocols  (SOAP, REST…)
Solution: Flash Player is a virtual machine that works the same way in every browser

Challenge #2: Code packaging (in Internet Explorer  WebServices are packaged as HTC, which is not supported by Mozilla browsers.
Solution: Use browser agnostic  invisible Flash Player-based agent that supports communications with Web Services regardless of what Web browser you are using.

Performance
Challenge #3: Large JavaScript projects such as reporting applications need to be loaded, pre-processed  and executed on every page load.
Solution: Use Flash agents that are pre-compiled, compressed and optimized for streaming and caching.

Robustness
Challenge #4: HTTP protocol is very forgiving because it was optimized for non-reliable networks. The Web browsers were designed to display whatever has arrived with a Web page. If a page includes an image, which was not available at the moment, you’ll see an icon of the broken image, and, maybe an alternative text. But what if a piece of JavaScript code will not arrive for whatever reason?

There is no built-in way to ensure the delivery of JavaScript. This means that AJAX programmers need to write an additional code just to check if the application code has arrived. On top of this, Web browsers offer mediocre debugging support.

Solution: Use a virtual machine with reliable code delivery and good development and debugging tools.

Web browsers have unpredictable future
Challenge #5 : Software vendors do not seem to be eager to invest into browsers. Microsoft is investing in .Net (WPF) and Silverlight that runs on CLR. Adobe is developing AIR. Sun Microsystems is about to release a small  Consumer VM for rich Internet applications written in Java and JavaFX.
Solution:  Select ubiquitous technology (currently it’s Flash Player) that offers a solid development and deployment environment. 

I’ve listed some major challenges that any RIA developers would face regardless of what protocol is being used for data delivery.  Recently, our company, Farata Systems that was working mainly with Flex/Java applications, decided to create a version of our reporter ClearBI as a component that can be added to AJAX applications as well. While experimenting with various protocols, we’ve created a component called WebService.swf, which is a Flash Player and can easily turn a SOAP WebService into an object with methods that correspond to WSDL operations, and the XML processing is done using ECMAScript for XML (E4X) that allows you to forget about XML parsing headaches .

Below is a diagram that shows you an HTML/JavaScript application that uses an invisible Flash Player component  (WebService.swf) and one visible (ClearBI.swf).  In this example we’ll  use the data coming from a publicly available book search Web Service from Amazon .com.

The entire process works as follows:

1. The JavaScript code gives a URL of Amazon’s WSDL to a hidden WebService.swf

2. The WebServices.swf loads WSDL from Amazon, and automatically converts XML into an object with properties (it uses E4X that will be explained below).

3. The JavaScript asks WebService.swf to call the selected operation from Amazon’s WSDL.

4. WebService.swf gets the data and passes them to JavaScript (XML or JavaScript objects).  If you are just interested in simplified processing of SOAP in your AJAX application, you don’t need to perform the step 5 – WebService.swf is all you need.

5.To produce reports that look as shown below and can be customized by the end users, pass the data from JavaScript to ClearBI swf.

What’s under the hood

The entire workflow consists of two major steps described below:

1. Using JavaScript initialize the WebService.swf object, register event listeners, and load the WSDL:

This call will load Amazon’s WSDL, which among others will contain the operation KeywordSearchRequest:

<wsdl:message name="KeywordSearchRequest">
 <wsdl:part name="KeywordSearchRequest" type="typens:KeywordRequest"/>
</wsdl:message>

As you can see, this operation expects an argument of type KeywordRequest, which is described in the same WSDL:

<xsd:complexType name="KeywordRequest">
<xsd:all>
<xsd:element name="keyword" type="xsd:string"/>
<xsd:element name="page" type="xsd:string"/>
<xsd:element name="mode" type="xsd:string"/>
<xsd:element name="tag" type="xsd:string"/>
<xsd:element name="type" type="xsd:string"/>
<xsd:element name="devtag" type="xsd:string"/>
<xsd:element name="sort" type="xsd:string" minOccurs="0"/>
<xsd:element name="variations" type="xsd:string" minOccurs="0"/>
<xsd:element name="locale" type="xsd:string" minOccurs="0"/>
</xsd:all>
</xsd:complexType>

Now we need to call the operation KeywordSearchRequest providing the data according to the  KewordRequest format.

2. Call the Web service

var ws = com.farata.jsfx.WebServices("MyWebService");    

Add the web service operation result listener.

ws.addEventListener("serviceresult", onXmlResult);    

Prepare the arguments for the call (i.e.as an XML object) to find books that have the work AJAX in
 their titles
var args =  '<m:KeywordSearchRequest xmlns:m="http://soap.amazon.com">'    
+ '  <KeywordSearchRequest>'    + '    <keyword>AJAX</keyword>'    
+ '    <page>1</page>'    + '    <mode>books</mode>'    
+ '    <tag>D3HW0PG66IPLAM</tag>'    + '    <type>lite</type>'    
+ '    <devtag>D3HW0PG66IPLAM</devtag>'    + '    <sort></sort>'    
+ '    <variations></variations>'    + '    <locale></locale>'    
+ '  </KeywordSearchRequest>'    + '</m:KeywordSearchRequest>';  

Call "KeywordSearchRequest" web service operation.

ws.callService("Amazon", "KeywordSearchRequest", args);  

Later in this article I’ll show you how to pass the operation’s arguments as a JavaScript object instead of XML. Now the data from Amazon come back and WebService.swf will receive something like this :

<SOAP-ENV:Envelope SOAP-ENV:encodingStyle="http://schemas.xmlsoap.org/soap/encoding/" xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/" xmlns:amazon="http://soap.amazon.com" xmlns:xsi="http://www.w3.org/1999/XMLSchema-instance" xmlns:SOAP-ENC="http://schemas.xmlsoap.org/soap/encoding/" xmlns:xsd="http://www.w3.org/1999/XMLSchema">

<SOAP-ENV:Body>-<namesp1099:KeywordSearchRequestResponse xmlns:namesp1099="http://soap.amazon.com">

<return xsi:type="amazon:ProductInfo">
<TotalResults xsi:type="xsd:string">355</TotalResults>
<TotalPages xsi:type="xsd:string">36</TotalPages>
 <Details xsi:type="SOAP-ENC:Array" SOAP-ENC:arrayType="amazon:Details[10]">
<Details xsi:type="amazon:Details">
<Url xsi:type="xsd:string">http://www.amazon.com/gp/product/0596101996%3ftag=D3HW0PG66IPLAM%26link_code=sp1%26camp=2025%26dev-t=D3HW0PG66IPLAM</Url>
<Asin xsi:type="xsd:string">0596101996</Asin>
<ProductName xsi:type="xsd:string">JavaScript: The Definitive Guide</ProductName>
<Catalog xsi:type="xsd:string">Book</Catalog>
<Authors xsi:type="SOAP-ENC:Array" SOAP-ENC:arrayType="xsd:string[1]">
<Author xsi:type="xsd:string">David Flanagan</Author>
</Authors>
<ReleaseDate xsi:type="xsd:string">17 August, 2006</ReleaseDate>
<Manufacturer xsi:type="xsd:string">O'Reilly Media, Inc.</Manufacturer>
<ImageUrlSmall xsi:type="xsd:string">http://ec1.images-amazon.com/images/I/11G8BIrxn7L.jpg</ImageUrlSmall>
<ImageUrlMedium xsi:type="xsd:string">http://ec1.images-amazon.com/images/I/21yLdMet2BL.jpg</ImageUrlMedium>

<ImageUrlLarge xsi:type="xsd:string">http://ec1.images-amazon.com/images/I/51OY5KP5ydL.jpg</ImageUrlLarge>
<ListPrice xsi:type="xsd:string">$49.99</ListPrice>
<Availability xsi:type="xsd:string">This item is currently not available.</Availability>
<UsedPrice xsi:type="xsd:string">$18.49</UsedPrice>
</Details>
…

As you can see, there is 355 AJAX books  that can be  returned as  36 pages, and  Amazon has returned the page number one as was requested in the argument object. Parsing of this XML will be done for you automatically by the WebService.swf component that will turn it into an object for easy access via dot notation.

 Working with XML(SOAP) based Web Services in AJAX is not easy: each browser handles XML differently. But consuming  Web Services with AJAX can be fun if you delegate XML processing to our WebService.swf component that engages E4X.

In the next diagram  you’ll see how  ActionScript 3 (we used it for creation of WebService.swf)  can work with any XML source (i.e. SOAP)  using familiar dot notation. This is an example from ActionScript documentation, and it  will give you a feeling of the ease of dealing with XML in ActionScript (for more detailed explanation of E4X visit Adobe documentation).

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 nameed item, and print the content of the element menuName for those that have the attribute id equals 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.

ClearBI is a commercial Web reported that was originally created for Flex/Java applications and it was working only with the 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 come in a form of  JavaScript objects, a Web service or use OpenAMF, an open source implementation of 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 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 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 them  as JSON objects.

var args = {
  KeywordSearchRequest: {  
    keyword:    “AJAX",  
    page:       "1",  
    mode:       "books",  
    tag:        "D3HW0PG66IPLAM",  
    type:       "lite",  
    devtag:     "D3HW0PG66IPLAM",  
    sort:       null,  
    variations: null,  
    locale:     null  
  }  

The JavaScript function that 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.

In JavaScript, get a reference to 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

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  that’s mapped to ActionScript’s  function loadReport

ExternalInterface.addCallback(“loadReport", loadReport);

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

Using faster communication protocol: OpenAMF

Mid-Tier: A servlet container with open source OpenAMF (5 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

A 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 are not into reporting, just use the WebService.swf to communication with SOAP Web Services.

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

The trial version of ClearBI 1.1 will become available on October 15, 2007 at http://www.myflex.org

This demo  application that uses JavaScript, WebService.swf and ClearBI.swf is deployed  at http://www.myflex.org/theriabook/ClearBI.Ajax/main.html. It looks like this:

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 thos 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  http://myflex.org/screencast/clearbi_ajax/clearbi_ajax.html. This demo shows how end-users can add grouping, modify  styling, apply formulas and more.