How to use PODS in Flex

<?xml version="1.0" encoding="utf-8"?>
<!--
 The main application file for the Dashboard demo app.
 Loads the layout XML and creates PodLayoutManagers.
-->
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    horizontalAlign="left"
    minWidth="600" minHeight="600"
    width="100%" height="100%"
    backgroundSize="100%"
    backgroundColor="#ffffff"
    paddingLeft="45" paddingRight="45" paddingBottom="35" paddingTop="34"
    applicationComplete="onApplicationComplete()" viewSourceURL="srcview/index.html">
    <mx:Style source="/assets/styles.css" />
    <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.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"
        dataProvider="viewStack" />
    <mx:ViewStack
        id="viewStack"
        paddingTop="15"
        width="100%" height="100%" />
</mx:Application>