1 Reply Latest reply on Feb 14, 2008 10:41 AM by Gregory Lafrance

    Architecting an Application With MXML Components

    jooeee
      I have an application that has gotten lengthy and I want to simplify it by architecting the Main Application with custom MXML Components. The application as it is currently architected works perfectly.

      Currently, the application consists of "Canvas" containers along Top and Left Side holding Navigation Buttons. The main (changing) sections of the application will consist of a "ViewStack" container holding a number of "Canvas" containers stacked on top of one another. The navigation buttons along the top and left side, when clicked, display in turn the content of each of the several stacked "Canvas" containers. Because of the number of stacked "Canvas" containers within the "ViewStack" and the content of each, the main Application source code has become very long and unwieldy, thus the need to use custom components for each of the "Canvas" containers in the "Stack" and referencing them in the main Application page.

      I have tried several times to get this to work and I need to clarify a couple of things.

      1) After setting up custom components for the several "Canvas" containers that are now in the "ViewStack" container, do I first need to set up a custom component for the "ViewStack" container with its own name space?

      2) If the answer to 1) above is Yes then do I then reference each of the custom components for the "Canvas" container with their own name space designation within the "ViewStack" reference within the main Application?

      In the event I am completely off base then I would appreciate any suggestions. If you wish I would be happy to email you the current application page.

      Thanks,

      Joe
      --------------------------------------------------------------------------------
      joe k

        • 1. Re: Architecting an Application With MXML Components
          Gregory Lafrance Level 6
          Here is some code for an app built with components. You can see how the pieces talk to each other a bit.

          ------------------------- ViewStack1.mxml ---------------------
          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:comp="components.*"
          layout="vertical" width="100%" height="100%" >
          <comp:TopBar />
          <mx:HBox width="100%" height="100%">
          <comp:LeftBar />
          <mx:VBox width="100%" height="100%">
          <mx:ViewStack id="myViewStack" borderStyle="none" width="100%" height="100%">
          <mx:VBox id="home" width="100%">
          <comp:MainIntroText />
          <mx:HRule width="50%" height="3" strokeColor="0xCC3333"/>
          <comp:MainSecondaryText />
          <mx:HRule width="50%" height="3" strokeColor="0xCC3333"/>
          <comp:MainFinalText />
          </mx:VBox>
          <mx:VBox id="about" width="100%">
          <comp:About />
          </mx:VBox>
          <mx:VBox id="contact" width="100%">
          <comp:Contact />
          </mx:VBox>
          </mx:ViewStack>
          </mx:VBox>
          </mx:HBox>
          </mx:Application>
          ------------------------------- About.mxml -----------------------
          <?xml version="1.0" encoding="utf-8"?>
          <mx:HBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%">
          <mx:VBox width="65%">
          <mx:Text fontSize="14" width="100%" text="This page tells you about us." />
          </mx:VBox>
          </mx:HBox>

          ----------------------------------- Contact.mxml ---------------------------
          <?xml version="1.0" encoding="utf-8"?>
          <mx:HBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%">
          <mx:VBox width="65%">
          <mx:Text fontSize="14" width="100%" text="This page tells you how to contact us." />
          </mx:VBox>
          </mx:HBox>

          ------------------- LeftBar.mxml -------------------------
          <?xml version="1.0" encoding="utf-8"?>
          <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="200" height="100%">
          <mx:LinkButton label="Adobe Labs - Flex"
          click="navigateToURL(new URLRequest(' http://labs.adobe.com/technologies/flex'), '_blank');"/>
          <mx:Spacer height="20"/>
          <mx:Label fontSize="16" text="Flex Blogs"/>
          <mx:LinkBar direction="vertical" width="90%" itemClick="navigateToURL(new URLRequest(event.item.data), '_blank');">
          <mx:Object label="Adobe Flex Team Blog" data=" http://weblogs.macromedia.com/flexteam/"/>
          <mx:Object label="Flex Blog Aggregator" data=" http://www.allyourflexarebelongtous.com/"/>
          <mx:Object label="Adobe Flex Blog Aggregator" data=" http://weblogs.macromedia.com/mxna/index.cfm?query=byCategory&#38;categoryId=5&#38;categor yName=Flex"/>
          </mx:LinkBar>
          <mx:Spacer height="20"/>
          <mx:Label fontSize="16" text="Example Flex Apps"/>
          <mx:LinkBar direction="vertical" id="addlRscList" width="90%" itemClick="navigateToURL(new URLRequest(event.item.data), '_blank');">
          <mx:Object label="Adobe Flex Store" data=" http://www.adobe.com/devnet/flex/samples/flex_store_v2/"/>
          <mx:Object label="Adobe Dashboard Example" data=" http://examples.adobe.com/flex2/inproduct/sdk/dashboard/dashboard.html"/>
          <mx:Object label="Buzzword Word Processor" data=" http://preview.getbuzzword.com/?s=true"/>
          <mx:Object label="Adobe Style Explorer" data=" http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html"/>
          <mx:Object label="Adobe Component Explorer" data=" http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html"/>
          </mx:LinkBar>
          </mx:VBox>

          ----------------------- MainFinalText.mxml ----------------------------
          <?xml version="1.0" encoding="utf-8"?>
          <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%">
          <mx:Text width="100%" fontSize="12"
          text="Here is the final text I want to show you." />
          </mx:VBox>

          --------------------------- MainIntroText.mxml -------------------------------
          <?xml version="1.0" encoding="utf-8"?>
          <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%">
          <mx:Text width="100%" fontSize="12"
          text="Here is the main text I want to show you." />
          </mx:VBox>

          ----------------------- MainSecondaryText.mxml --------------------------------
          <?xml version="1.0" encoding="utf-8"?>
          <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%">
          <mx:Text width="100%" fontSize="12"
          text="Here is the secondary text I want to show you." />
          </mx:VBox>

          --------------- TopBar.mxml --------------------------------
          <?xml version="1.0" encoding="utf-8"?>
          <mx:HBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%">
          <mx:Script>
          <![CDATA[
          private function goToViews(view:String):void {
          if(view == "home"){
          this.parentApplication.myViewStack.selectedChild=this.parentApplication.home;
          }
          if(view == "about"){
          this.parentApplication.myViewStack.selectedChild=this.parentApplication.about;
          }
          if(view == "contact"){
          this.parentApplication.myViewStack.selectedChild=this.parentApplication.contact;
          }
          }
          ]]>
          </mx:Script>
          <mx:LinkButton label="MySnazzyLogo" fontSize="20" click="goToViews('home');" />
          <mx:VBox width="100%">
          <mx:HBox width="100%">
          <mx:Spacer width="100%" />
          <mx:LinkBar fontSize="14" itemClick="goToViews(String(event.item.data));">
          <mx:Array>
          <mx:Object label="About Us" data="about"/>
          <mx:Object label="Contact Us" data="contact"/>
          </mx:Array>
          </mx:LinkBar>
          </mx:HBox>
          <mx:HBox width="100%">
          <mx:Spacer width="150" />
          <mx:Label fontSize="25" text="Here is Some Additional Text" />
          </mx:HBox>
          </mx:VBox>
          </mx:HBox>