3 Replies Latest reply on Feb 15, 2008 6:53 AM by Gregory Lafrance

    Architecting an Application With MXML Components

    jooeee Level 1
      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
        • 1. Re: Architecting an Application With MXML Components
          Gregory Lafrance Level 6
          Here is a sample app I created to show using ViewStack for an entire website:

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

          • 2. Re: Architecting an Application With MXML Components
            jooeee Level 1
            HI Greg,

            I set up the sample application you sent me in the Flex 2 Builder. I set up one main application file (GregSampleApp.mxml) and set up component files as follows: About.mxml, Contact.mxml, LeftBar.mxml,
            MainFinalText.mxml, MainIntroText.mxml, MainSecondaryText.mxml, and TopBar.mxml. I put the component files in a folder entitled "components" under the main app folder. When I saved the application before running it, I have an problem showing in GregSampleApp.mxml as follows: "Could not resolve <comp:TopBar> to component implementation". Code for those two files are indicated below. Thought maybe you could find the error quicker than I could. I checked the code several times but it seems OK to me.

            Any suggestions would be appreciated.

            --------------------GregSampleApp.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="contact" width="100%">
            <comp:Contact />
            </mx:VBox>

            </mx:ViewStack>
            </mx:VBox>

            </mx:HBox>

            </mx:Application>

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

            • 3. Re: Architecting an Application With MXML Components
              Gregory Lafrance Level 6
              I had no problem compiling the code you posted. Try this, and ensure the following:
              - TopBar.mxml has that exact file name
              - TopBar.mxml is in a folder components under main application folder (folder containing Test.mxml).

              ------------------------ Test.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:Application>

              ---------------------------------- components/TopBar.mxml -------------------
              <?xml version="1.0" encoding="utf-8"?>
              <mx:HBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="100%">
              <mx:Label text="It Works"/>
              </mx:HBox>