MXML Component State Question

Question

Hey guys,
I am trying to simplify my code and break out different parts of the app into different MXML Component files.  I have taken my login info and created the LoginScreen.mxml file which calls the doLogin function in its (parent) mxml file FlexCMS.  It properly sets the state to 'LoggedIn' but then the LoginScreen.mxml file doesnt hide...
Any ideas?
<!-- FlexCMS.mxml file -->
<s:states>
          <s:State name="Login" />
          <s:State name="LoggedIn" />
     </s:states>
<fx:Script>
          <![CDATA[
public function doLogin($username:String, $password:String):void {
                    loginResult.token = customUserClass.login($username, $password);
               protected function loginResultEvent(event:ResultEvent):void {
                    //Alert.show(event.result.toString(), 'loginResult');
                    trace(event.result.toString());
                    if (event.result == true) {
                         currentState = 'LoggedIn';
                    trace('currentState: ' + currentState);
     ]]>
     </fx:Script>
<components:LoginScreen includeIn="Login" />
... More code for rest of app that hasnt been broken out to other mxml files yet
<!-- LoginScreen.mxml -->
<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
           xmlns:s="library://ns.adobe.com/flex/spark"
           xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*">
     <s:layout>
          <s:BasicLayout/>
     </s:layout>
     <s:states>
          <s:State name="Login" />
          <s:State name="LoggedIn" />
     </s:states>
     <fx:Declarations>
          <!-- Place non-visual elements (e.g., services, value objects) here -->
     </fx:Declarations>
     <fx:Script>
          <![CDATA[
               private var flexCMS:FlexCMS = new FlexCMS(); //get reference to main class
               protected function loginClick(event:MouseEvent):void {
                    flexCMS.doLogin(username_txt.text, password_txt.text);
          ]]>
     </fx:Script>
     <s:Panel height="140"
                horizontalCenter="0"
                title="Login"
                includeIn="Login"
                verticalCenter="0"
                width="250">
          <s:TextInput id="username_txt" text="testuser" width="151" x="87" y="10" />
          <s:TextInput id="password_txt" text="test" width="151" x="87" y="40" />
          <s:Label fontSize="14" text="Username:" x="10" y="10" />
          <s:Label fontSize="14" text="Password:" x="10" y="44" />
          <s:CheckBox label="Remember Me" x="10" y="68" />
          <s:Button click="loginClick(event)" id="login" label="Login" x="168" y="69" />
          <!-- <local:FlexCMS -->
     </s:Panel>
</s:Group>

Answer 1

I did something similar in the past for a few of my apps.
The login screen was a custom TitleWindow component that contained the normal username field, password field and login button and could communicate with the server for authentication purposes. If the authentication was successful then I'd call the PopUpManager's removePopUp method on the login window and change the current state to the authenticated state.