如何通过单击 Flex4 中应用程序组件中的注销按钮返回主应用程序？

Question

请检查代码并告诉我在单击应用程序组件中的注销后如何返回登录页面。

项目.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" 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>

导航.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>

Answer 1

您应该创建一个自定义事件：

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");
        }
    }
}

现在您应该分派此事件：

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

最后，您应该处理它并关闭窗口：

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

Answer 2

最快的方法是：

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

然而，康斯坦丁的方法是正确的方法。

---

另外，如果您使用的是 Flex 4，为什么不使用 Spark Form、FormItem、Panel 和 HGroup （而不是 HBox）