AWESOM-O: Chetan's blog

I've surely witnessed the goodness of flex charting and its so easy. Continued from my previous entry let's see now how flex charting helps us in achieving the RIA dashboard on Project WebSynergy. This blog is just a layer on top from my colleagues Sandeep's, Murali's blogs ;).

Flexification of a Pentaho Dashboard :)

• Creating graphs with Adobe’s Flex Builder 3 is a pretty simple. A basic knowledge of mxml and actionscript combination will help us creating the dashboard.
• Using the Flex Builder design the layout using drag and drop components. Drag and drop the type of charts onto the panel. This will generate the default code for charts with placeholders for the x-axis and y-axis.
  

//init() - event to handle any postprocessing tasks that must be performed after the component is completely created and initialized.

private function init():void
  {

        //call the http service on pentaho xaction.
        trService.send();
  }

//<mx:itemClick> will get the clicked data item which can be used to drill down further.

// setter method will be called taking the input hitdata when an item is clicked 

• Use <mx:HTTPService> to make a pentaho xaction call. This will return a SOAP response which can be easily handled by ResultEvent. 
  
• <mx:HTTPService id="trService" url="http://localhost:8080/pentaho/ServiceAction?solution=samples&amp;path=steel-wheels/dashboards&amp;
  action=Sales_by_Territory.xaction&amp;userid=joe&amp;password=password" result="handleTRResult(event)"/>

     //   Action script method handles the result event after executing the httpservice call.


• private function handleTRResult(event:ResultEvent):void
        {
          territoryRevenue = new ArrayCollection();
          territory.dataProvider = territoryRevenue;
          // Creates an array collection parsing the node tree of the SOAP response headers
          var hdrTR:ArrayCollection =     event.result.Envelope.Body.ExecuteActivityResponse.swresult['COLUMN-HDR-ROW']['COLUMN-HDR-ITEM'];
         
          for each (var plDat:Object in event.result.Envelope.Body.ExecuteActivityResponse.swresult['DATA-ROW'])
          {
            var pl:Object = new Object();
            pl[hdrTR[0]] = plDat['DATA-ITEM'][0];
            pl[hdrTR[1]] = plDat['DATA-ITEM'][1];
            territoryRevenue.addItem(pl);
          }
        }
• Now once all the charts on the dashboard are well coordinated and connected save the mxml file and follow the Murali's process.

• Use the PortalPack NetBeans plugin to quickly develop and deploy portlets on Project  WebSynergy

• Check out the flex source here and portlet screencast.