4 Replies Latest reply on Jan 18, 2010 8:35 PM by kiran7881

    How to switch from different views when a common button is clicked on using View states concept

    kiran7881 Level 1

      Hi

       

      i have  made a single form for both Login Screen and Registration screen with two states :

       

      1. BaseState which is the curret state of  state of My application

       

      2.registrationstate 

       

      I have a common button for changing from one view to another view .(Not related to any of the state)

       

      At first the Login screen is loaded , and when the common  button is clicked , i want to switch to Registration Screen .

       

       

      <?xml version="1.0" encoding="utf-8"?>

       

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

       

      <mx:Script>

       

          <![CDATA[

       

       

      // Logic for common button needed .

          public function handleMe(event:MouseEvent):void

              {    

       

              }

       

       

       

          ]]>

       

      </mx:Script>

       

          <mx:states>

       

              <mx:State name="registrationstate">

       

                  <mx:SetProperty target="{formitem1}" name="label" value="Email"/>

       

                  <mx:SetProperty target="{button1}" name="label" value="Change state to Login"/>

       

              </mx:State>

       

          </mx:states>

       

          <mx:Form x="248" y="158">

       

              <mx:FormItem label="User Name" fontWeight="bold" id="formitem1">

       

                  <mx:TextInput/>

       

              </mx:FormItem>

       

          </mx:Form>

       

       

      <!-- This is my coomon button-->

       

       

          <mx:Button

       

              click="handleMe(event)"  

       

              x="297" y="261" label="Change state to Registration" id="button1"/>

       

      </mx:Application>

        • 1. Re: How to switch from different views when a common button is clicked on using View states concept
          Gregory Lafrance Level 6

          This code answers your question:

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
            <mx:states>
              <mx:State name="registrationstate">
                <mx:SetProperty target="{formitem1}" name="label" value="Email"/>
                <mx:AddChild>
                  <mx:Button click="currentState=''" x="297" y="261" 
                    label="Change state to Login"/>        
                </mx:AddChild>
                <mx:RemoveChild target="{button1}"/>
              </mx:State>
            </mx:states>
            <mx:Form x="248" y="158">
              <mx:FormItem label="User Name" fontWeight="bold" id="formitem1">
                <mx:TextInput/>
              </mx:FormItem>
            </mx:Form>
            <mx:Button click="currentState='registrationstate'" x="297" y="261" 
              label="Change state to Registration" id="button1"/>
          </mx:Application>
          


          If this post answers your question or helps, please mark it as such.


          Greg Lafrance - Flex 2 and 3 ACE certified

          www.ChikaraDev.com

          Flex / AIR Development, Training, and Support Services

          1 person found this helpful
          • 2. Re: How to switch from different views when a common button is clicked on using View states concept
            kiran7881 Level 1

            Hi ,

             

            First of all thank you very much for taking time and implementing my requirement sucessfully .

             

            i can see from your code that you made a new button on to  the registration state and from there you were trying to switch from one state to another .

             <mx:AddChild>
                    <mx:Button click="currentState=''"
                      label="Change state to Login"/>       

             

            But the question what i want to ask is that , is it not possible to make only a single button (Common Button ) to switch between states .

             

            ( I am new to Flex ,  just experiementing , so please excuse if my questions are dumb )

             

            Thank you .

            • 3. Re: How to switch from different views when a common button is clicked on using View states concept
              Gregory Lafrance Level 6

              Originally I could not get that to work, but now I have it working:

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
                <mx:Script>
                  <![CDATA[
                    import mx.controls.Alert;
                    public function handleMe(event:MouseEvent):void{   
                      trace(this.currentState);  
                      if(currentState=="" || currentState == null){
                        mx.controls.Alert.show("base state");
                        currentState = "registrationstate";  
                      }else if(currentState=="registrationstate"){
                        mx.controls.Alert.show("registrationstate");
                        currentState = "";  
                      }
                    }
                  ]]>
                </mx:Script>
                <mx:states>
                  <mx:State name="registrationstate">
                    <mx:SetProperty target="{formitem1}" name="label" value="Email"/>
                    <mx:SetProperty target="{button1}" name="label" value="Change state to Login"/>
                  </mx:State>
                </mx:states>
                <mx:Form x="248" y="158">
                  <mx:FormItem label="User Name" fontWeight="bold" id="formitem1">
                    <mx:TextInput/>
                  </mx:FormItem>
                </mx:Form>
                <mx:Button click="handleMe(event)" x="297" y="261" 
                  label="Change state to Registration" id="button1"/>
              </mx:Application>
              


              If this post answers your question or helps, please mark it as such.


              Greg Lafrance - Flex 2 and 3 ACE certified

              www.ChikaraDev.com

              Flex / AIR Development, Training, and Support Services