7 Replies Latest reply on Oct 22, 2007 11:33 AM by dimpled

    To pass variable between screen/views?

    mark416 Level 1
      Hi,

      I need build a Flex application.the application is one mxml file and have many view(screen).I need share many variables between the views.Please let know how to do this.

      This is very similar with session variables in coldfusion/asp/php etc.

      Thanks a lot

      Mark
        • 1. Re: To pass variable between screen/views?
          Handycam Level 1
          Define the variable in tne main mxml file. Then you can access it with

          Application.application._yourVariableName

          (after using import mx.core.Application)

          Is this what you mean?
          • 2. Re: To pass variable between screen/views?
            mark416 Level 1
            May I change the application variable in different view states.

            Thanks

            M
            • 3. Re: To pass variable between screen/views?
              peterent Level 2
              I *really* don't recommend building a Flex app with "many view (screen)" in a single MXML file. It will get very messy quickly.

              However, there is an advantage for you in using one file. Any variables you declare in the MXML file can be used anywhere in that file just by their name. For example:

              <mx:Application ... />
              <mx:Script><![CDATA[
              [Bindable] private var today:Date = new Date();
              ...
              ]]></mx:Script>

              <mx:ViewStack ... >
              <mx:Canvas label="View 1" >
              <mx:Label text="Today is {today.toDateString()}" />
              </mx:Canvas>
              <mx:Canvas label="View 2">
              <mx:Label text="Today is {today.toDateString()}" />
              </mx:Canvas>
              ...
              </mx:ViewStack>
              ...
              </mx:Application>

              Here you have today as a member of this file (which is also a Class). The variable is used in two views (children of a ViewStack). There's nothing special you have to do, just use the variable.
              • 4. Re: To pass variable between screen/views?
                mark416 Level 1
                Hi peterent ,

                Please show me how to switch from "View 1" to "View 2"?

                which one is default view?view 1 or view 2?

                How to manage many views if you do not like to use one MXML file?

                Thanks

                M
                • 5. Re: To pass variable between screen/views?
                  peterent Level 2
                  The easiest way is to set the ViewStack's selectedIndex property. The "default" view is index 0 - the first view. Give the ViewStack an id, say "viewstack1", and then do: viewstack1.selectedIndex = 1; and that will switch it the second view.
                  • 6. Re: To pass variable between screen/views?
                    Gregory Lafrance Level 6
                    Here is an example of using a ViewStack to control a website built in Flex. Not all the page content is in the ViewStack, but you could cut out those pieces if you wanted the entire content of each page switched by the ViewStack.

                    ------------------------- 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 ---------------------
                    • 7. Re: To pass variable between screen/views?
                      dimpled
                      Not that i'd encourage it's usage too much (use custom event firing where possible) just remember that

                      mx.core.Application.application.parentApplication

                      will always get you access to your parent mxml scope