5 Replies Latest reply on May 7, 2009 12:55 PM by Andre Brito

    Transitions between pages.

    Andre Brito

      Hi.

       

      I have 2 .mxml files: one with the Application tag (that represents the Login and Welcome screen) and I have another mxml with the Application tag too (representing the "Home"). How can I navigate from Login to Home? Do I have to use States?

       

      Bye!

        • 1. Re: Transitions between pages.
          _Natasha_ Level 4

          Hi,

          it's better in your situation to create only one Application and use states to navigation. Your application will be smaller and easier to understand.

          1 person found this helpful
          • 2. Re: Transitions between pages.
            Gregory Lafrance Level 6

            Here is a complete example:

             

            ---------------- Login.mxml -------------------

            <?xml version="1.0" encoding="utf-8"?>
            <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
              <mx:Script>
                <![CDATA[
                  import mx.controls.Alert;
                  import mx.core.Application;
                 
                  private function checkCredentials():void{
                    if(user.text == "Greg" && pwd.text == "goodpass"){
                      mx.core.Application.application.currentState="welcome";
                    }else{
                      mx.controls.Alert.show("Login Failed");
                    }
                  }
                ]]>
              </mx:Script>
              <mx:Form>
                <mx:FormHeading label="Login"/>
                <mx:FormItem label="User:">
                  <mx:TextInput id="user"/>
                </mx:FormItem>
                <mx:FormItem label="Password:">
                  <mx:TextInput id="pwd"/>
                </mx:FormItem>
                <mx:FormItem>
                  <mx:Button label="Login" click="checkCredentials()"/>
                </mx:FormItem>
              </mx:Form>
            </mx:VBox>

             

            ---------------- Welcome.mxml ---------------------

            <?xml version="1.0" encoding="utf-8"?>
            <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300"
              horizontalAlign="center">
              <mx:Script>
                <![CDATA[
                  import mx.core.Application;
                 
                  private function goToMainApp():void{
                    mx.core.Application.application.currentState="";
                  }
                ]]>
              </mx:Script>
              <mx:Label text="Welcome to the Program !!!"
                fontSize="18" color="0xFF0000"/>
              <mx:Button label="OK" click="goToMainApp()"/>
            </mx:VBox>

             

            ------------------- MainApp.mxml ------------------

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
              creationComplete="init();" xmlns:comp="*"
              horizontalAlign="center" verticalAlign="middle">
              <mx:Script>
                <![CDATA[
                  private function init():void{
                    this.currentState="login";
                  }
                ]]>
              </mx:Script>
              <mx:states>
                <mx:State name="login">
                  <mx:RemoveChild target="{mainAppVB}"/>
                  <mx:AddChild>
                    <comp:Login id="loginComp"/>
                  </mx:AddChild>
                </mx:State>
                <mx:State name="welcome" basedOn="login">
                  <mx:RemoveChild target="{loginComp}"/>
                  <mx:AddChild>
                    <comp:Welcome/>
                  </mx:AddChild>
                </mx:State>
              </mx:states>
              <mx:VBox id="mainAppVB">
                <mx:Label text="Main App" fontSize="20"/>
              </mx:VBox>
            </mx:Application>

            • 3. Re: Transitions between pages.
              Andre Brito Level 1

              Great, Greg!
              Thanks!

               

              Bye!

              • 4. Re: Transitions between pages.
                ntsiii Level 3

                Also, look into ViewStack.  It is easier to code and use than states, and seems to have fewer issues.  I use states for very small changes to the UI, and ViewStack for multiple controls, or even entire screens.

                 

                One more alernative for a login is to use a pop-up.

                 

                Tracy

                1 person found this helpful
                • 5. Re: Transitions between pages.
                  Andre Brito Level 1

                  Hi Tracy!

                   

                  Yeah... I've heard many complaints about States. I'm using States just for this transition between Login and Home screen. I'm trying to avoid that

                  Thanks!