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).