2 Replies Latest reply on Jan 2, 2008 1:18 PM by Gregory Lafrance

    Breaking up large Apps into components

    evware77
      Hello, I have a large application that I need to break up into components. I have been trying to find information on how to do this, however, to no real avail. My application will have components that have states so that when the user selects from the menu bar the component state will show. Does anyone know how I can get my XMLlist view state to show the external component state when selected?

      Thanks
      LZ
        • 1. Re: Breaking up large Apps into components
          GYorky
          Hi,

          Why do you need to break it up into components? What problems are you having?

          We had a large application that was taking a long time to load up and draw.

          After looking into a number of ways round it, the best way we found was to break the application up into Modules.

          You create an MXML application, but instead of the top level tag being <mx:Application>, you use <mx:Module> instead. This can then be compiled into an swf file

          Once you have created the Module swf file, you can import it using the <mx:ModuleLoader> tag. The ModuleLoader acts as a visible container that contains an instance of the Module.

          This also has the nice consequence that your module can be reused in other programs
          • 2. Re: Breaking up large Apps into components
            Gregory Lafrance Level 6
            Viewstacks might work, here is an example:
            ------------------------------ ViewStack.mxml -------------------------------
            <?xml version="1.0"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:comp="components.*">
            <mx:Script>
            <![CDATA[
            private function selectPortal(event:Event):void {
            if(cmbx.selectedItem.data == "home"){
            portals.selectedChild = home;
            }
            if(cmbx.selectedItem.data == "hr_portal"){
            portals.selectedChild = hr_portal;
            }
            if(cmbx.selectedItem.data == "is_portal"){
            portals.selectedChild = is_portal;
            }
            if(cmbx.selectedItem.data == "pay_portal"){
            portals.selectedChild = pay_portal;
            }
            }
            ]]>
            </mx:Script>

            <mx:ApplicationControlBar width="100%">
            <mx:Label text="Select an intranet portal: " fontSize="12"/>
            <mx:ComboBox id="cmbx" change="selectPortal(event)">
            <mx:Object label="XYZ Intranet Home Page" data="home"/>
            <mx:Object label="Human Resources Portal" data="hr_portal"/>
            <mx:Object label="Information Services Portal" data="is_portal"/>
            <mx:Object label="Payroll Portal" data="pay_portal"/>
            </mx:ComboBox>
            </mx:ApplicationControlBar>
            <mx:ViewStack id="portals" width="100%" height="100%">
            <mx:Panel width="100%" height="100%" horizontalAlign="center"
            backgroundColor="#ccffcc" id="home">
            <mx:Text text="Welcome to the XYZ Corporate Intanet" fontSize="20"
            color="blue"/>
            </mx:Panel>
            <comp:HumanResources id="hr_portal"/>
            <comp:InformationServices id="is_portal"/>
            <comp:Payroll id="pay_portal"/>
            </mx:ViewStack>
            </mx:Application>
            ------------------------------------------------------------------------------------
            ---------- components/HumanResources.mxml ------------------
            <?xml version="1.0" encoding="utf-8"?>
            <mx:Panel xmlns="*" xmlns:mx=" http://www.adobe.com/2006/mxml"
            width="100%" height="100%" horizontalAlign="center" backgroundColor="red">
            <mx:Text text="Human Resources Portal" fontSize="20"
            color="blue"/>
            </mx:Panel>
            ------------------------------------------------------------------------------------
            ---------- components/InformationServices.mxml ------------------
            <?xml version="1.0" encoding="utf-8"?>
            <mx:Panel xmlns="*" xmlns:mx=" http://www.adobe.com/2006/mxml"
            width="100%" height="100%" horizontalAlign="center" backgroundColor="purple">
            <mx:Text text="Information Services Portal" fontSize="20"
            color="blue"/>
            </mx:Panel>
            ------------------------------------------------------------------------------------
            ---------- components/Payroll.mxml ------------------
            <?xml version="1.0" encoding="utf-8"?>
            <mx:Panel xmlns="*" xmlns:mx=" http://www.adobe.com/2006/mxml"
            width="100%" height="100%" horizontalAlign="center" backgroundColor="gray">
            <mx:Text text="Payroll Portal" fontSize="20"
            color="blue"/>
            </mx:Panel>