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

    Flex 3 WASI Dashboard graph datasource modify - Please help

    jasonxavx123

      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:s="library://ns.adobe.com/flex/spark"

                           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.*">

            <fx:Script>

                  <![CDATA[

                        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;

                       

                        [Bindable]

                        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";

                        }

                 

           

                  ]]>

            </fx:Script>

            <s:states>

                  <s:State name="MainMenu"/>

                  <s:State name="Dashboard"/>        

            </s:states>

            <fx:Declarations>

                  <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 -->

            </fx:Declarations>

            <local:DashboardComponent includeIn="Dashboard"/>

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

                  <mx:columns>

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

                  </mx:columns>

            </mx:DataGrid>

           

      </s:Application>

       

      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%"

                  backgroundSize="100%"

                  creationComplete="onApplicationComplete()">

            <mx:Script>

                  <![CDATA[

                        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);

                              httpService.send();

                        }

                       

                        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;

                                    viewStack.addChild(canvas);

                                   

                                    // 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;

                                    podLayoutManagers.push(manager);

                              }

                             

                              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)

                                    addPods(podLayoutManagers[index]);

                        }

                       

                        // 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;

                                          pod.addChild(podContent);

                                          var index:Number;

                                         

                                          if (StateManager.isPodMinimized(viewId, podId))

                                          {

                                                index = StateManager.getMinimizedPodIndex(viewId, podId);

                                                manager.addMinimizedItemAt(pod, index);

                                          }

                                          else

                                          {

                                                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]);

                              manager.removeNullItems();

                              manager.updateLayout(false);

                        }

                       

                        // 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);

                        }

                  ]]>

            </mx:Script>

           

            <mx:TabBar

                  id="tabBar"

                  itemClick="onItemClickTabBar(event)"

                  height="35" styleName="TabBar"

                  dataProvider="viewStack" />

            <mx:ViewStack

                  id="viewStack"

                  paddingTop="15"

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

      </mx:VBox>