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:-
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.
3 Comments
