Using mx:states to create a Login system

Question

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.

Answer 1

Components and Modules are two topics that should start from
in the FB help.
Briefly, yes you can and should put these two into separate
files. Call components.
If you want to keep load time of your app short, you might as
well turn the view after successful login into a Module. A module
unlike a component can be loaded/unloaded on demand.