flex4のアプリケーションのコンポーネントにあるログアウトボタンのクリックでメインアプリケーションに戻る方法は？

Question

コードを確認し、アプリケーションのコンポーネントにあるログアウトをクリックした後、どのようにログインページに戻るのか教えてください。

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

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> 

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

しかし、Constantinerの方法は適切な方法です。 （代わりのHBoxの）

---

また、あなたはフレックス4を使用している場合は、なぜ火花を使用しないForm、FormItem、PanelとHGroup