This Weblog is successor for my previous Weblog: “ Calling xMII WebService from Flex (Calling xMII WebService in Flex)”. In my previous Weblog, the application was created using Flex Builder2.0, here i have created the same application using FABridge. As I said earlier, Flex is equipped with very few Charts(considering ready to use charts only) while xMII provides a rich set of Charts. Not only in case of Charts, there may be many cases where the developer may feel a stringent need of exposing Flex ActionScript to JavaScript and vice versa. Flex provides External API (the ExternalInterface class) which allows the Adobe Flash Player to call JavaScript from ActionScript, and vice versa. But ExternalInterface has few limitations: ** The ExternalInterface class also limits what you can pass to JavaScript from ActionScript and vice versa – primitive types, arrays, and simple objects are legal, but user-defined classes, with associated properties and methods, are off-limits. ** The ExternalInterface class enables you to define an interface so your JavaScript can call your ActionScript. And this is the exact place where FABridge (Flex Ajax Bridge) can be used to bridge the gap between Action Script and Java Script. *What is Flex Ajax Bridge?* FABridge is a small code library which can be inserted to your Flex Application, Flex Component or an empty SWF file to expose it to browser JavaScript. FABridge essentially lets you write JavaScript instead of ActionScript. *FABridge Usage* import mx.collections.ArrayCollection; import mx.rpc.events.ResultEvent; import mx.controls.DataGrid; import mx.charts.PieChart; import mx.charts.series.PieSeries; import mx.containers.HBox; (Bindable) public var myData:ArrayCollection; (Bindable) public var pieChartDP:ArrayCollection; public function dataArrived(e:ResultEvent):void{ myData = e.result.Rowsets.Rowset.Row; } public function createPieChartDP(selectedRow:int):void{ var obj:Object = myData.getItemAt(selectedRow); pieChartDP = new ArrayCollection(); pieChartDP.addItem({ParamName:"Quality", Value:obj.L1Quality}); pieChartDP.addItem({ParamName}); pieChartDP.addItem({ParamName}); } public var refs:Array = (DataGrid, PieChart, HBox); var flexApp; var chart; var grid; var hbox; function createFlexComponent(){ // Creating a HBox and adding it to Flex App flexApp = FABridge.sample.root(); // Getting the attached Flex movie Reference hbox = FABridge.sample.create("mx.containers.HBox") hbox.setWidth("100%") hbox.setHeight("100%"); flexApp.addChild(hbox); // Ading a dataGrid to the Hbox grid = FABridge.sample.create("mx.controls.DataGrid"); grid.setHeight(360); hbox.addChild(grid); //Adding a Pie Chart to Hbox chart = FABridge.sample.create("mx.charts.PieChart"); var s = FABridge.sample.create("mx.charts.series.PieSeries"); s.setField("Value"); s.setNameField("ParamName"); s.setStyle("labelPosition","callout"); //Defining style for Label Position chart.setSeries( (s)); hbox.addChild(chart); // Call back function for itemClick event on DataGrid var gridRowClickCallback = function(event){ var test = flexApp.createPieChartDP(event.getRowIndex() -1); // Calling the function from ActionScript chart.setDataProvider(flexApp.getPieChartDP()); } //Adding the callBack function as EventListener grid.addEventListener("itemClick", gridRowClickCallback); } //This function sends the request to xMII using HTTPService function sendRequest(){ flexApp = FABridge.sample.root(); flexApp.getAbc().send(); } //Here the DataProvider is set to the PieChart and DataaGrid function populateData(){ grid.setDataProvider(flexApp.getMyData()); var dp = [{name:"Item1", Value: 100},{name},{name}]; chart.setDataProvider(dp); } I have created HTML buttons to trigger the different actions. First button 'CreateFlexComponent' creates the Flex Components and adds to the embeded swf file. Same way, second button 'executexMIITransaction' executes the xMII Transaction and gets the data and for the last it populates the data for Flex Components. When you'll run the application, it'll come up like this :
