How to come back in main application on click of logout button which is in application's component in flex4?

Please check the code and tell me How I will be back in Login Page after click of logout which is in application's component.

Project.mxml

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%" creationComplete="init()">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <mx:StringValidator source="{uname}" id="unameValid" property="text"/>
        <mx:StringValidator source="{password}" id="passwordValid" property="text"/>
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.ValidationResultEvent;
            import mx.validators.Validator;
            private var myValidators:Array = new Array;
            private var nav:Navigation;

            private function init():void{
                btnLogin.addEventListener(MouseEvent.CLICK,validateForm);
                myValidators = [unameValid,passwordValid];
            }

            private function validateForm(event:Event):void{
                //Alert.show("in validate form");
                var errors:Array = Validator.validateAll(myValidators);
                if(errors.length == 0){
                    loginUser();
                }else{
                    Alert.show("in else");
                }
            }

            private function loginUser():void{
                //Alert.show("In login Form");
                nav = new Navigation();
                this.addElement(nav);
            }
        ]]>
    </fx:Script>
    <s:Label text="Login Form" fontWeight="bold" fontSize="16" horizontalCenter="-110" 
             verticalAlign="middle" verticalCen开发者_开发知识库ter="-280"/>
    <mx:Form horizontalCenter="-120" verticalCenter="-200" fontWeight="bold" verticalGap="20">
        <mx:FormItem label="UserName">
            <s:TextInput id="uname" restrict="A-Z a-z" focusIn="uname.errorString = null" text="Priyanka"/>
        </mx:FormItem>
        <mx:FormItem label="Password">
            <s:TextInput id="password" displayAsPassword="true" focusIn="password.errorString = null" text="aamir#23"/>
        </mx:FormItem>
        <mx:FormItem>
            <mx:HBox horizontalGap="20">
                <s:Button label="Login" id="btnLogin" />
                <mx:LinkButton label="Register" id="register"/>
            </mx:HBox>
        </mx:FormItem>
    </mx:Form>
</s:Application>

Navigation.mxml

<mx:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" 
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" width="100%" height="100%" xmlns:local="*">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import spark.components.Application;
            private function logout(event:MouseEvent):void{

            }
        ]]>
    </fx:Script>
    <s:TabBar id="tabs" left="10" y="5" dataProvider="{vs}"/>
    <mx:ViewStack id="vs" width="90%" height="90%" left="10" y="30">
        <s:NavigatorContent label="DashBoard" width="100%" height="100%">
            <s:BorderContainer width="100%" height="100%" borderWeight="2" cornerRadius="3" dropShadowVisible="true">
                <s:Label text="in DashBoard"/>
            </s:BorderContainer>
        </s:NavigatorContent>
        <s:NavigatorContent label="User Information" width="100%" height="100%">
            <s:BorderContainer width="100%" height="100%" borderWeight="2" cornerRadius="3" dropShadowVisible="true">
                <s:Label text="in UserInfo"/>
            </s:BorderContainer>
        </s:NavigatorContent>
    </mx:ViewStack>
    <s:Button x="494" y="1" label="Logout" id="btnLogout" click="logout(event);"/>
</mx:Panel>

You should create a custom event:

package 
{
    import flash.events.Event;

    public class LogoutEvent extends Event
    {
        public static const LOG_OUT:String = "logOut";

        public function LogoutEvent(type:String)
        {
            super(type,false,false);
        }

        public override function clone():Event
        {
            return new LogoutEvent(type);
        }

        public override function toString():String
        {
            return formatToString("LogoutEvent");
        }
    }
}

Now you should dispatch this event:

<mx:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" width="100%" height="100%" xmlns:local="*">
    <fx:Metadata>
        [Event(name="logOut", type="LogoutEvent")]
    </fx:Metadata>
    <fx:Script>
    <![CDATA[
        import spark.components.Application;
        private function logout(event:MouseEvent):void{
            dispatchEvent(new LogoutEvent(LogoutEvent.LOG_OUT));
        }
    ]]>
    </fx:Script>
    <s:TabBar id="tabs" left="10" y="5" dataProvider="{vs}"/>
    <mx:ViewStack id="vs" width="90%" height="90%" left="10" y="30">
        <s:NavigatorContent label="DashBoard" width="100%" height="100%">
            <s:BorderContainer width="100%" height="100%" borderWeight="2" cornerRadius="3" dropShadowVisible="true">
                <s:Label text="in DashBoard"/>
            </s:BorderContainer>
        </s:NavigatorContent>
        <s:NavigatorContent label="User Information" width="100%" height="100%">
            <s:BorderContainer width="100%" height="100%" borderWeight="2" cornerRadius="3" dropShadowVisible="true">
                <s:Label text="in UserInfo"/>
            </s:BorderContainer>
        </s:NavigatorContent>
    </mx:ViewStack>
    <s:Button x="494" y="1" label="Logout" id="btnLogout" click="logout(event);"/>
</mx:Panel>

Finally, you should handle it and close your window:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%" creationComplete="init()">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <mx:StringValidator source="{uname}" id="unameValid" property="text"/>
        <mx:StringValidator source="{password}" id="passwordValid" property="text"/>
    </fx:Declarations>
    <fx:Script>
    <![CDATA[
        import mx.controls.Alert;
        import mx.events.ValidationResultEvent;
        import mx.validators.Validator;
        private var myValidators:Array = new Array;
        private var nav:Navigation;

        private function init():void{
            btnLogin.addEventListener(MouseEvent.CLICK,validateForm);
            myValidators = [unameValid,passwordValid];
        }

        private function validateForm(event:Event):void{
            //Alert.show("in validate form");
            var errors:Array = Validator.validateAll(myValidators);
            if(errors.length == 0){
                loginUser();
            }else{
                Alert.show("in else");
            }
        }

        private function loginUser():void{
            //Alert.show("In login Form");
            nav = new Navigation();
            this.addElement(nav);
            nav.addEventListener(LogoutEvent.LOG_OUT, nav_logOutHandler);
        }

        private function nav_logOutHandler(event:LogoutEvent):void
        {
            removeElement(nav);
            nav.removeEventListener(LogoutEvent.LOG_OUT, nav_logOutHandler);
            nav = null;
        }
    ]]>
    </fx:Script>
    <s:Label text="Login Form" fontWeight="bold" fontSize="16" horizontalCenter="-110" 
        verticalAlign="middle" verticalCenter="-280"/>
    <mx:Form horizontalCenter="-120" verticalCenter="-200" fontWeight="bold" verticalGap="20">
        <mx:FormItem label="UserName">
            <s:TextInput id="uname" restrict="A-Z a-z" focusIn="uname.errorString = null" text="Priyanka"/>
        </mx:FormItem>
        <mx:FormItem label="Password">
            <s:TextInput id="password" displayAsPassword="true" focusIn="password.errorString = null" text="aamir#23"/>
        </mx:FormItem>
        <mx:FormItem>
            <mx:HBox horizontalGap="20">
                <s:Button label="Login" id="btnLogin" />
                <mx:LinkButton label="Register" id="register"/>
            </mx:HBox>
        </mx:FormItem>
    </mx:Form>
</s:Application>

The quickest way would be:

private function logout(event:MouseEvent):void{
    parent.removeElement(this);
}

However, Constantiner's method is the proper way.

Also, if you are using flex 4, why not use the spark Form,FormItem,Panel and HGroup (Instead of HBox)