Switching Views [Flash Builder 4.5 - Flex Mobile]

Question

I'm trying to build an app with Login view (no tabs), after user submits "Login" it'll then switch to another Main view (with tabs). Is this possible?

Currently I chose the "Tabbed Application" under the Application Template.
To make the tab bar hidden I tried:

protected function view1_activateHandler(event:Event):void
        {
            // TODO Auto-generated method stub
            this.tabBarVisible = false;
        }

..but the hide has a slide-down animation upon running the app (meaning its not instantly hidden)
Plus if the switched to the Main view, the Login Tab (which belongs to LoginView) button will on the tab bar which I do not want.

Is there another way? I'm pretty new to Flash Builder/Flex 4.5.. Help

I need 10 reputation points to post images =.= Sorry I wanted to post screenshots for better understanding. 4 more points to go ):

Answer 1

You should set the tabBarVisible property in the view element to false and then change it after login as follows:

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    tabBarVisible="false"
    title="My View" />

When you want to show the view, just have your function show the bar by setting this.tabBarVisible to true.

public function loginHandler():void {
    // Do login activities
    this.tabBarVisible = true;
}

---

Here's what I referred to in my comment ...

Main.mxml:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark"
          xmlns:components="components.*"
          creationComplete="creationCompleteHandler(event)">
<fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;

        private static var app:Main;

        public static function login():void {
            app.loginComponent.visible = false;
            app.navigator.visible = true;
        }

        protected function creationCompleteHandler(event:FlexEvent):void {
            app = this;
        }

    ]]>
</fx:Script>

<components:LoginComponent id="loginComponent" left="0" right="0" top="0" bottom="0" />


<s:TabbedViewNavigator id="navigator" left="0" right="0" top="0" bottom="0" visible="false">
    <s:ViewNavigator id="testView1" width="100%" height="100%" label="Test 1" firstView="views.TestView1" />
    <s:ViewNavigator id="testView2" width="100%" height="100%" label="Test 2" firstView="views.TestView2" />
</s:TabbedViewNavigator>

What I've done here is create a default application which contains a simple login component as follows ...

LoginComponent.mxml:

<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
    <![CDATA[
        protected function login(event:MouseEvent=null):void {
            Main.login();
        }
    ]]>
</fx:Script>

<s:VGroup left="0" right="0" top="0" bottom="0" horizontalAlign="center" horizontalCenter="0"
          verticalAlign="middle" verticalCenter="0">
    <s:HGroup left="0" right="0" height="75" horizontalAlign="left" verticalAlign="middle">
        <s:Label text="User Name"/>
        <s:Spacer width="10" height="10"/>
        <s:TextInput id="usernameInput" width="200"/>
    </s:HGroup>
    <s:HGroup left="0" right="0" height="75" verticalAlign="middle">
        <s:Label text="Password"/>
        <s:Spacer width="18" height="10"/>
        <s:TextInput id="passwordInput" width="200" displayAsPassword="true" enter="login()"/>
    </s:HGroup>
    <s:HGroup left="0" right="0" height="75" verticalAlign="middle" horizontalAlign="center" gap="20">
        <s:Button label="Login" click="login(event)" id="btnLogin"/>        
    </s:HGroup>
</s:VGroup>

This allows me to have a login screen which I've just created in a component and embedded in the main app as a launch screen and the TabbedViewNavigator can be shown/hidden at will. I haven't tried using from one app launch to the next to see how state is maintained (i.e. if you want to have a persistent login, you might be able to do some verification in the creation complete handler, but that's on you at this point).