Skip to Content
Flex is a development and run-time environment that offers rich Internet applications that use Adobe Flash Player 9 to deliver more intuitive, interactive and enticing user interface.


Here I am trying to explain how Flex can be used as front end for xMII.


Flex has in-built capability to interact with data using HTTPService and WebService both. As every Transaction and Query created in xMII is always exposed as a WebService and also is always accessible through HTTPService. So the data returned from xMII can be consumed by Flex easily (Through HTTPService & WebService both).


I have used an xMII transaction which returns Line1 (L1) data using a Tag Query. The transaction is having an Output parameter which holds the Line Data in XML format.


I am consuming this data in Flex using WebService and displaying the whole data in a Flex DataGrid Control. The break-up for OEE is displayed using PieChart for the selected row in Grid.


Following is the code written for Flex side which is easily understandable and i have put comments wherever required.


          <![CDATA[
               import mx.events.ListEvent;
               import mx.events.ItemClickEvent;
               import mx.collections.ArrayCollection;
               import mx.controls.Alert;
               import mx.rpc.events.ResultEvent;
               
               
               public var pieChartDP:ArrayCollection;
               
               public var xMIITrxData:ArrayCollection;
               
               public var radiusArr:Array = ; //explode Radius


               //     Event Handler for ‘Result’ Event of WebService               
               public function dataArrived(e:ResultEvent):void{
                    xMIITrxData = xMIIData.Xacute.lastResult.Rowset;
                    createPieChartDP(0);
               }
               
               //Creating DataProvider for PieChart
               public function createPieChartDP(selectedRow:int):void{
                    var obj:Object = xMIITrxData.getItemAt(selectedRow);
                    pieChartDP = new ArrayCollection();
                    pieChartDP.addItem({ParamName:”Performance”, Value:obj.L1Performance});
                    pieChartDP.addItem();
                    pieChartDP.addItem();
               }
               
               //Callback function for PieChart labels
               public function displayLabel(data:Object, field:String, index:Number, percentValue:Number):String{
                    return data.ParamName;
               }
               
          ]]>
     
               <mx:DataGrid width=”65%” height=”100%” dataProvider=”
                    itemClick=”createPieChartDP(event.rowIndex)”>
               </mx:DataGrid>     
               <mx:PieChart id=”piechart” width=”35%” height=”60%” dataProvider=”” showDataTips=”true”>
                    <mx:series>
                         <mx:PieSeries displayName=”LineData” field=”Value” labelPosition=”callout”
                               name=”OEEDistribution” perWedgeExplodeRadius=”” nameField=”ParamName”
                               labelFunction=”displayLabel”/>
                    </mx:series>
               </mx:PieChart>
          </mx:HBox>
     </mx:Panel>     
</mx:Application>
  </textarea></p>h6. The application will look like this:-
image h6. Nevertheless, there are certain limitations of Flex:

  • h6. Flex always needs Adobe Flash Player 9 plug-in on the browser side. Though it’s a freeware, but making it available for an existing and huge landscape may result as an issue.
  • h6. Flex always needs a file called ‘cross-domain.xml’ to access the data from a system which lies in a different domain.
  • h6. The size of swf file generated from Flex is always bigger than the file created in JavaScript with same functionality. So the page loads a bit slower which may be crucial in some cases.
To report this post you need to login first.

3 Comments

You must be Logged on to comment or reply to a post.

  1. Rick Bullotta
    First recommendation is that you use “REST” style web requests rather than SOAP Web Service calls to xMII.  You’ll get better performance and a cleaner/safer security model.  This involves using the xMII ‘Runner’ URL format.

    Regarding your limitations, adding/extending Flex’s charts is quite simple to do.  I’ve built time series trend charts, SPC charts, and other UI elements in Flex.

    Regarding the need to have the Flash Player, the good news is that is BY FAR the most widely installed browser plug-in on both personal and corporate computers, even behind the corporate firewell.

    Also, there is no need to do any cross-domain request if you also use Flex on the server, or if you host the SWF files on the xMII server.

    Regarding the SWF file(s), Flex 3.0 (and the Flash player) now support shared libraries which are loaded once and DRAMATICALLY shrink the size of the SWFs.

    (0) 

Leave a Reply