2 Replies Latest reply on Oct 25, 2007 5:24 PM by Gregory Lafrance

    <mx:states>  or  <mx:ViewStack>,which one is better?

    mark416 Level 1
      Hi,

      I have a question about multi-screens problem

      we can use <mx:states> or <mx:ViewStack> to build multi-screen applications.
      I want to know what is the different between them.Please let me know when I use <mx:states> and when I have to use <mx:ViewStack> .

      Thanks a lot

      M
        • 1. Re: &lt;mx:states&gt;  or  &lt;mx:ViewStack&gt;,which one is better?
          ntsiii Level 3
          This is a judgement call.

          But I use ViewStack if there are more than a few components different. In fact, I almost always use viewstack. I have used states in a few item renderers, but that is it.

          Viewstack is very efficient, and very easy to use.

          Tracy
          • 2. Re: &lt;mx:states&gt;  or  &lt;mx:ViewStack&gt;,which one is better?
            Gregory Lafrance Level 6
            States are good for a small component whose display may change depending on conditions, like someone is doing a search and you have an Advanced button, and when the user clicks the button the state changes to show the advanced search UI.

            ViewStacks are powerful for building complex multi-screen Flex apps, below is a simplified example:

            ------------------------- Main App File - 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>
            ------------------------- END MAIN APP FILE ---------------------

            ------------------------- 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>
            ------------------------- END TopBar.mxml ---------------------

            ------------------------- 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>
            ------------------------- END LeftBar.mxml ---------------------

            ------------------------- 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>
            ------------------------- END About.mxml ---------------------

            ------------------------- 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 lets you contact us." />
            </mx:VBox>
            </mx:HBox>
            ------------------------- END Contact.mxml ---------------------

            ------------------------- 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>
            ------------------------- END MainIntroText.mxml ---------------------

            ------------------------- 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>
            ------------------------- END MainSecondaryText.mxml ---------------------

            ------------------------- 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>
            ------------------------- END MainFinalText.mxml ---------------------