Hide tabbar in login state flex builder

Question

I am having a tabbednavigation application and inside one of the tabs I have 2 states "planner" and "Login". I want the Login state to be first, and after they logged in it will change to the planner state.

The thing is when it is in the login State I don7t want the tab bar to be visible, and when it changes to the Planner state it should become visible. I am trying to use the If clause but I can't get it to work.

Anyone an idea?

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:ns1="*"
        currentState="Login" preinitialize="view2_creationCompleteHandler(event)" title="Planner">

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
                protected function view2_creationCompleteHandler(event:FlexEvent):void
    {

    if (this.currentState == "Login") {
    // TODO Auto-generated method stub
    this.tabBarVisible = false;
    }
    else  {
    this.tabBarVisible = true;
    }
    }

        ]]>
    </fx:Script>


    <s:states>
        <s:State name="planner"/>
        <s:State name="Login"/> 
    </s:states>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:BorderContainer includeIn="Login" width="320" height="364" >

    </s:BorderContainer>
<s:HGroup includeIn="planner" y="10" width="320" height="46" horizontalAlign="center"
          textAlign="center">
    <ns1:Lbtn width="34" height="35"/>
    <ns1:weekdisplay height="35"/>
    <ns1:Rbtn width="34" height="35"/>
</s:HGroup>
    <s:VGroup includeIn="planner" y="55" width="100%" gap="-1" paddingBottom="0" paddingLeft="0"
              paddingRight="0" paddingTop="0">


    <s:BorderContainer x="0" y="319" width="100%" height="45" backgroundColor="#E6E6E6"
                       borderStyle="inset" borderWeight="1">
        <s:Label width="70" height="45" text="Mon" textAlign="center" verticalAlign="middle"/>
        <s:Label x="70" width="250" height="45" text="Click to add dish" textAlign="center"
                 verticalAlign="middle"/>
    </s:BorderContainer>

    <s:BorderContainer  x="0" y="319" width="100%" height="45" borderStyle="inset" borderWeight="1" >
        <s:Label width="70" height="45" text="Tue" textAlign="center" verticalAlign="middle"/>
        <s:Label x="70" width="250" height="45" text="Click to add dish   " textAlign="center"
                 verticalAlign="middle"/>
    </s:BorderContainer>

    <s:BorderContainer x="0" y="319" width="100%" height="45" backgroundColor="#E6E6E6"
                       borderStyle="inset" borderWeight="1">
        <s:Label width="70" height="45" text="Wed" textAlign="center" verticalAlign="middle"/>
        <s:Label x="70" width="250" height="45" text="Click to add dish" textAlign="center"
                 verticalAlign="middle"/>
    </s:BorderContainer>

    <s:BorderContainer  x="0" y="319" width="100%" height="45" borderStyle="inset" borderWeight="1" >
        <s:Label width="70" height="45" text="Thu" textAlign="center" verticalAlign="middle"/>
        <s:Label x="70" width="250" height="45" text="Click to add dish" textAlign="center"
                 verticalAlign="middle"/>
    </s:BorderContainer>

    <s:BorderContainer x="0" y="319" width="100%" height="45" backgroundColor="#E6E6E6"
                       borderStyle="inset" borderWeight="1">
        <s:Label width="70" height="45" text="Fri" textAlign="center" verticalAlign="middle"/>
        <s:Label width="250" height="45" text="Click to add dish" textAlign="center"
                 x="70" verticalAlign="middle"/>
    </s:BorderContainer>

    <s:BorderContainer  x="0" y="319" width="100%" height="45" borderStyle="inset" borderWeight="1" >
        <s:Label width="70" height="45" text="Sat" textAlign="center" verticalAlign="middle"/>
        <s:Label x="70" width="250" height="45" text="Click to add dish" textAlign="center"
                 verticalAlign="middle"/>
    </s:BorderContainer>

    <s:BorderContainer x="0" y="319" width="100%" height="45" backgroundColor="#E6E6E6"
                       borderStyle="inset" borderWeight="1">
        <s:Label width="70" height="45" text="Sun" textAlign="center" verticalAlign="middle"/>
        <s:Label x="70" width="250" height="45" text="Click to add dish" textAlign="center"
                 verticalAlign="middle"/>
    </s:BorderContainer>
     </s:VGroup>
    <s:TextInput id="LoginName" includeIn="Login" y="192" left="15" right="15" text="Email address"/>
    <s:TextInput id="LoginPassword" includeIn="Login" y="247" left="15" right="15" text="Password"/>
    <s:Button id="LoginLogin" includeIn="Login" y="306" right="15" width="100" height="30"
              label="Login" click="this.currentState=&quot;planner&quot;"/>
    <s:Button id="LoginCreate" includeIn="Login" y="306" left="15" width="100" height="30"
              label="Create"/>
    <s:Label includeIn="Login" x="166" y="39" width="113" height="101" fontSize="30"
             text="Menu&#xd;Planner"/>
</s:View>

Answer 1

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        currentState="login" tabBarVisible="{currentState!='login'}">
    <s:actionContent>
        <s:Button includeIn="login" label="login" click="currentState='planner'"/>
    </s:actionContent>
    <s:states>
        <s:State name="login"/>
        <s:State name="planner"/>
    </s:states>
</s:View>