1 Reply Latest reply on May 7, 2008 9:08 PM by atta707

    using <mx:states> to create a Login system

    kamleshgk

      Hi,
      I'm very new to FLEX development and i would need some help.
      I'm creating a Login page which would lead to the home page.

      I found some examples, it is recommended to use <mx:states>.
      So when the user logs in succefully, we just need to switch the state in Actionscript.

      currentState = "Logged In";

      So i have designed states (1 - Login; 2 - Logged in)
      And the designer generates this code.


      <mx:states>
      <mx:State name="Logged In">
      <mx:SetProperty target="{panel1}" name="width" value="95%"/>
      <mx:SetProperty target="{panel1}" name="height" value="95%"/>
      <mx:SetProperty target="{canvas1}" name="width" value="95%"/>
      <mx:SetProperty target="{canvas1}" name="height" value="95%"/>
      <mx:SetProperty target="{panel1}" name="title" value="Welcome Members!"/>
      <mx:RemoveChild target="{label1}"/>
      <mx:RemoveChild target="{txtUserID}"/>
      <mx:RemoveChild target="{label2}"/>
      <mx:RemoveChild target="{txtPassword}"/>
      <mx:RemoveChild target="{btnLogin}"/>
      <mx:AddChild relativeTo="{panel1}" position="lastChild">
      <mx:Label x="61" y="42" text="This is for members only!" width="168" height="53"/>
      </mx:AddChild>
      <mx:AddChild relativeTo="{panel1}" position="lastChild">
      <mx:LinkButton x="0" y="0" click="currentState = 'Login'" label="Logout" labelPlacement="right" includeInLayout="true"/>
      </mx:AddChild>
      </mx:State>

      <mx:State name="Login">
      <mx:AddChild relativeTo="{panel1}" position="lastChild">
      <mx:ControlBar id="controlbar1">
      </mx:ControlBar>
      </mx:AddChild>
      <mx:SetProperty target="{btnLogin}" name="x"/>
      <mx:SetProperty target="{btnLogin}" name="y"/>
      <mx:RemoveChild target="{btnLogin}"/>
      <mx:AddChild relativeTo="{controlbar1}" position="lastChild" target="{btnLogin}"/>
      <mx:SetProperty target="{btnLogin}" name="labelPlacement" value="right"/>
      <mx:SetProperty target="{txtPassword}" name="displayAsPassword" value="true"/>
      </mx:State>
      </mx:states>




      This is fine, this works, but what if my application has lots of pages, the designer would generate so much code to maintain different states. And thatz not recommended.

      I want to know if we could separate the Login Page code into another file, the homepage code into another file.
      and thus organize the files instead of having one big file with so many <mx:states>

      Any help/links would be appreciated.