1 Reply Latest reply on Feb 16, 2011 6:58 AM by Gregory Lafrance

    Flex 3 WASI Dashboard graph datasource modify - Please help


      I been trying to resolve this for 2 weeks now given that i'm new to Flex. Regarding to the WASI Dashboard, how can i modify the data source for the charts within the POD.xml so that it reference an Array Collection instead of a static xml file.


      I have the first page (login state) which has a combo box. When a user selects a value from the combo box, it will call several PHP services to pull data from a MySql database into several ArrayCollections.  The state then change to the "DashboardComponents" which is the same as the WASI dashboard's Main.mxml which loads the pod under the POD.xml.  How can i change the datasource for the graphs so that is referring to the array collections from the first state(login state)?


      Below are my codes:  Just for testing purpose, i have not added the combo box, however the paramenter for PHP service all suppliermasterService5.getSuppliermasterByID('10029') would eventually hold the value from the selected item in the combo box.


      From Login.mxml


      <?xml version="1.0" encoding="utf-8"?>

      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"


                           xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)" xmlns:suppliergeneralservice="services.suppliergeneralservice.*" currentState="MainMenu" xmlns:local="*" xmlns:suppliermasterservice5="services.suppliermasterservice5.*" xmlns:view="com.esria.samples.dashboard.view.*">



                        import mx.collections.ArrayCollection;

                        import mx.controls.Alert;

                        import mx.events.FlexEvent;

                        import mx.rpc.events.ResultEvent;


                        import spark.events.IndexChangeEvent;

                        import spark.events.TextOperationEvent;



                        public var ontime:ArrayCollection = new ArrayCollection;



                        protected function ResponderOntime_resultHandler(event:ResultEvent):void


                              // TODO Auto-generated method stub

                              ontime = event.result as ArrayCollection;



                  protected function application1_creationCompleteHandler(event:FlexEvent):void


                              // TODO Auto-generated method stub

                              ResponderOntime.token = suppliermasterService5.getSuppliermasterByID('10029');

                              //currentState = "Dashboard";







                  <s:State name="MainMenu"/>

                  <s:State name="Dashboard"/>        



                  <s:CallResponder id="getSupplierCodeResult"/>

                  <suppliergeneralservice:SuppliergeneralService id="suppliergeneralService" fault="Alert.show(event.fault.faultString + '\n' + event.fault.faultDetail)" showBusyCursor="true"/>

                  <suppliermasterservice5:SuppliermasterService5 id="suppliermasterService5"/>

                  <s:CallResponder id="ResponderOntime" result="ResponderOntime_resultHandler(event)"/>

                  <s:CallResponder id="getSupplierCodeResult2"/>

                  <!-- Place non-visual elements (e.g., services, value objects) here -->


            <local:DashboardComponent includeIn="Dashboard"/>

            <mx:DataGrid includeIn="MainMenu" x="44" y="42" id="dataGrid" dataProvider="{ontime}" width="187" height="167">


                        <mx:DataGridColumn headerText="SupplierCode" dataField="SupplierCode"/>






      From DashboardComponents.mxml

      <?xml version="1.0" encoding="utf-8"?>

      <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"

                  minWidth="600" minHeight="600"

                  x="0" y="0"

                  width="100%" height="100%"





                        import com.esria.samples.dashboard.events.LayoutChangeEvent;

                        import com.esria.samples.dashboard.managers.PodLayoutManager;

                        import com.esria.samples.dashboard.managers.StateManager;

                        import com.esria.samples.dashboard.view.ChartContent;

                        import com.esria.samples.dashboard.view.FormContent;

                        import com.esria.samples.dashboard.view.ListContent;

                        import com.esria.samples.dashboard.view.PieChartContent;

                        import com.esria.samples.dashboard.view.DragHighlight;

                        import com.esria.samples.dashboard.view.Pod;

                        import com.esria.samples.dashboard.view.PodContentBase;

                        import mx.containers.Canvas;

                        import mx.controls.Alert;

                        import mx.events.FlexEvent;

                        import mx.events.IndexChangedEvent;

                        import mx.events.ItemClickEvent;

                        import mx.rpc.events.FaultEvent;

                        import mx.rpc.events.ResultEvent;

                        import mx.rpc.http.HTTPService;


                        // Array of PodLayoutManagers

                        private var podLayoutManagers:Array = new Array();


                        // Stores the xml data keyed off of a PodLayoutManager.

                        private var podDataDictionary:Dictionary = new Dictionary();


                        // Stores PodLayoutManagers keyed off of a Pod.

                        // Used for podLayoutManager calls after pods have been created for the first time.

                        // Also, used for look-ups when saving pod content ViewStack changes.

                        private var podHash:Object = new Object();


                        private function onApplicationComplete():void


                              // Load pods.xml, which contains the pod layout.

                              var httpService:HTTPService = new HTTPService();

                              httpService.url = "data/pods.xml";

                              httpService.resultFormat = "e4x";

                              httpService.addEventListener(FaultEvent.FAULT, onFaultHttpService);

                             httpService.addEventListener(ResultEvent.RESULT, onResultHttpService);




                        private function onFaultHttpService(e:FaultEvent):void


                              Alert.show("Unable to load data/pods.xml.");



                        private function onResultHttpService(e:ResultEvent):void


                              var viewXMLList:XMLList = e.result.view;

                              var len:Number = viewXMLList.length();

                              var containerWindowManagerHash:Object = new Object();

                              for (var i:Number = 0; i < len; i++) // Loop through the view nodes.


                                    // Create a canvas for each view node.

                                    var canvas:Canvas = new Canvas();

                                    // PodLayoutManager handles resize and should prevent the need for

                                    // scroll bars so turn them off so they aren't visible during resizes.

                                    canvas.horizontalScrollPolicy = "off";

                                    canvas.verticalScrollPolicy = "off";

                                    canvas.label = viewXMLList[i].@label;

                                    canvas.percentWidth = 100;

                                    canvas.percentHeight = 100;



                                    // Create a manager for each view.

                                    var manager:PodLayoutManager = new PodLayoutManager();

                                    manager.container = canvas;

                                    manager.id = viewXMLList[i].@id;

                                    manager.addEventListener(LayoutChangeEvent.UPDATE, StateManager.setPodLayout);

                                   // Store the pod xml data. Used when view is first made visible.

                                    podDataDictionary[manager] = viewXMLList[i].pod;




                              var index:Number = StateManager.getViewIndex();

                              // Make sure the index is not out of range.

                              // This can happen if a tab view was saved but then tabs were subsequently removed from the XML.

                              index = Math.min(tabBar.numChildren - 1, index);

                             onItemClickTabBar(new ItemClickEvent(ItemClickEvent.ITEM_CLICK, false, false, null, index));

                              tabBar.selectedIndex = index;



                        private function onItemClickTabBar(e:ItemClickEvent):void


                              var index:Number = e.index;

                              StateManager.setViewIndex(index); // Save the view index.


                              viewStack.selectedIndex = index;


                              // If data exists then add the pods. After the pods have been added the data is cleared.

                              var podLayoutManager:PodLayoutManager = podLayoutManagers[index];

                              if (podDataDictionary[podLayoutManager] != null)




                        // Adds the pods to a view.

                        private function addPods(manager:PodLayoutManager):void


                              // Loop through the pod nodes for each view node.

                              var podXMLList:XMLList = podDataDictionary[manager];

                              var podLen:Number = podXMLList.length();

                              var unsavedPodCount:Number = 0;

                              for (var j:Number = 0; j < podLen; j++)


                                    // Figure out which type of pod content to use.

                                    var podContent:PodContentBase = null;

                                    if (podXMLList[j].@type == "chart")

                                          podContent = new ChartContent();

                                    else if (podXMLList[j].@type == "form")

                                          podContent = new FormContent();

                                    else if (podXMLList[j].@type == "list")

                                          podContent = new ListContent();

                                    else if (podXMLList[j].@type == "pieChart")

                                          podContent = new PieChartContent();


                                    if (podContent != null)


                                          var viewId:String = manager.id;

                                          var podId:String = podXMLList[j].@id;


                                          // Get the saved value for the pod content viewStack.

                                          if (StateManager.getPodViewIndex(viewId, podId) != -1)

                                                podXMLList[j].@selectedViewIndex = StateManager.getPodViewIndex(viewId, podId);


                                          podContent.properties = podXMLList[j];

                                          var pod:Pod = new Pod();

                                          pod.id = podId;

                                          pod.title = podXMLList[j].@title;


                                          var index:Number;


                                          if (StateManager.isPodMinimized(viewId, podId))


                                                index = StateManager.getMinimizedPodIndex(viewId, podId);

                                                manager.addMinimizedItemAt(pod, index);




                                                index = StateManager.getPodIndex(viewId, podId);


                                                // If the index hasn't been saved move the pod to the last position.

                                                if (index == -1)


                                                      index = podLen + unsavedPodCount;

                                                      unsavedPodCount += 1;



                                                manager.addItemAt(pod, index, StateManager.isPodMaximized(viewId, podId));



                                          pod.addEventListener(IndexChangedEvent.CHANGE, onChangePodView);


                                          podHash[pod] = manager;




                              // Delete the saved data.

                              delete podDataDictionary[manager];


                              // Listen for the last pod to complete so the layout from the ContainerWindowManager is done correctly.

                              pod.addEventListener(FlexEvent.UPDATE_COMPLETE, onCreationCompletePod);



                        // Pod has been created so update the respective PodLayoutManager.

                        private function onCreationCompletePod(e:FlexEvent):void


                              e.currentTarget.removeEventListener(FlexEvent.UPDATE_COMPLETE, onCreationCompletePod);

                              var manager:PodLayoutManager = PodLayoutManager(podHash[e.currentTarget]);





                        // Saves the pod content ViewStack state.

                        private function onChangePodView(e:IndexChangedEvent):void


                              var pod:Pod = Pod(e.currentTarget);

                              var viewId:String = PodLayoutManager(podHash[pod]).id;

                              StateManager.setPodViewIndex(viewId, pod.id, e.newIndex);








                  height="35" styleName="TabBar"

                  dataProvider="viewStack" />




                  width="100%" height="100%" />