状態遷移を取り消して別のビューに直接移動する

Question

私は3つの状態のスキンを持っています。私は将来もっと多くの州を持つかもしれない。しかし、これは通常の状態のツールバーであり、拡大表示は一度に1つの拡大表示のみが表示されるはずです。

私が2つの州を持っていたとき、私は以下の移行コードを使って2つの州に簡単に移行できました。しかし、今私は二次状態が閉じていない3つの状態を持っている。私が二次的な状態になっているなら、私は最初にそれを終了したい。ここで

は、スキンクラスから私のコードです：

<?xml version="1.0" encoding="utf-8"?> 
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx"> 

    <fx:Script> 
     <![CDATA[ 
      protected function imageViewButton_clickHandler(event:MouseEvent):void 
      { 

       if (currentState==NORMAL_VIEW) { 
        currentState = IMAGE_VIEW; 
       } 
       else { 
        currentState = NORMAL_VIEW; 
       } 
      } 

      protected function linkViewButton_clickHandler(event:MouseEvent):void 
      { 
       if (currentState==NORMAL_VIEW) { 
        currentState = LINK_VIEW; 
       } 
       else { 
        currentState = NORMAL_VIEW; 
       } 
      } 

      public static var NORMAL_VIEW:String = "normal"; 
      public static var LINK_VIEW:String = "linkView"; 
      public static var IMAGE_VIEW:String = "imageView"; 
     ]]> 
    </fx:Script> 


    <s:transitions> 
     <s:Transition fromState="normal" toState="*"> 
      <s:Sequence duration="250"> 
       <s:Resize target="{this}"/> 
       <s:AddAction target="{linkViewButton}"/> 
       <s:Fade target="{linkViewButton}"/> 
      </s:Sequence> 
     </s:Transition> 

     <s:Transition fromState="linkView" toState="*"> 
      <s:Sequence duration="250"> 
       <s:Fade target="{linkViewButton}"/> 
       <s:Resize target="{this}"/> 
      </s:Sequence> 
     </s:Transition> 

     <s:Transition fromState="imageView" toState="*"> 
      <s:Sequence duration="250"> 
       <s:Fade target="{imageViewButton}"/> 
       <s:Resize target="{this}"/> 
      </s:Sequence> 
     </s:Transition> 
    </s:transitions> 

    <s:states> 
     <s:State name="normal"/> 
     <s:State name="linkView"/> 
     <s:State name="imageView"/> 
    </s:states> 


    <s:VGroup width="100%"> 
     <s:HGroup width="100%" >  
      <s:Button label="Button 1" /> 
      <s:Line height="100%"> 
       <s:stroke> 
        <s:SolidColorStroke color="#B3C2B8"/> 
       </s:stroke> 
      </s:Line> 
      <s:ToggleButton id="gotoLinkView" label="Link Details" click="linkViewButton_clickHandler(event)"/> 
      <s:Line height="100%"> 
       <s:stroke> 
        <s:SolidColorStroke color="#B3C2B8"/> 
       </s:stroke> 
      </s:Line> 
      <s:ToggleButton id="gotoImageView" label="Image Details" click="imageViewButton_clickHandler(event)"/> 
      <s:Line height="100%"> 
       <s:stroke> 
        <s:SolidColorStroke color="#B3C2B8"/> 
       </s:stroke> 
      </s:Line> 
     </s:HGroup> 

     <s:Button id="linkViewButton" label="Link View" 
        includeIn="linkView" 
        itemCreationPolicy="immediate" width="100%"/> 

     <s:Button id="imageViewButton" label="Image View" 
        includeIn="imageView" 
        itemCreationPolicy="immediate" 
        width="100%"/> 
    </s:VGroup> 
</s:WindowedApplication> 

Answer 1

ここでは、開いている状態がある可能性のある複数の状態と、別の開いた状態に移行する前に開いた状態から外したり、元の状態に戻したりする完全な例を示します。ロジックエラーのキャッチは@Vesperに感謝します。

<?xml version="1.0" encoding="utf-8"?> 
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" 
         applicationComplete="windowedapplication1_applicationCompleteHandler(event)" 
         stateChangeComplete="windowedapplication1_stateChangeCompleteHandler(event)"> 

    <fx:Script> 
     <![CDATA[ 
      import mx.events.FlexEvent; 

      public static var NORMAL_VIEW:String = "normal"; 
      public static var LINK_VIEW:String = "linkView"; 
      public static var IMAGE_VIEW:String = "imageView"; 

      public var deferredState:String; 
      public var deferredToggle:Object; 

      protected function linkViewButton_clickHandler(event:MouseEvent):void 
      { 
       if (currentState!=LINK_VIEW) { 
        if (currentState != NORMAL_VIEW) { 
         deferredState = LINK_VIEW; 
         currentState = NORMAL_VIEW; 
         deferredToggle = event.currentTarget; 
         deselectToggles(deferredToggle); 
         return; 
        } 

        currentState = LINK_VIEW; 
       } 
       else { 
        currentState = NORMAL_VIEW; 
       } 
      } 

      protected function imageViewButton_clickHandler(event:MouseEvent):void 
      { 

       if (currentState!=IMAGE_VIEW) { 
        if (currentState != NORMAL_VIEW) { 
         deferredState = IMAGE_VIEW; 
         currentState = NORMAL_VIEW; 
         deferredToggle = event.currentTarget; 
         deselectToggles(deferredToggle); 
         return; 
        } 

        currentState = IMAGE_VIEW; 
       } 
       else { 
        currentState = NORMAL_VIEW; 
       } 
      } 

      protected function windowedapplication1_stateChangeCompleteHandler(event:FlexEvent):void 
      { 
       //trace("State change complete"); 

       if (currentState==NORMAL_VIEW) { 
        //trace("Normal state"); 
       } 

       if (deferredState!=null) { 
        currentState = deferredState; 
        deferredState = null; 
        deferredToggle = null; 
       } 
      } 

      public function deselectToggles(selectedToggle:Object=null):void { 
       var toggle:ToggleButton; 

       for (var i:int = 0; i < toggles.length; i++) 
       { 
        toggle = toggles[i] as ToggleButton; 

        if (toggle!=selectedToggle) { 
         toggle.selected = false; 
        } 
       } 

      } 

      protected function windowedapplication1_applicationCompleteHandler(event:FlexEvent):void 
      { 
       toggles.push(gotoLinkView, gotoImageView); 
      } 

      public var toggles:Array = []; 
     ]]> 
    </fx:Script> 


    <s:transitions> 
     <s:Transition fromState="normal" toState="linkView" interruptionBehavior="stop" autoReverse="true"> 
      <s:Sequence duration="250" 
         effectStart="trace('normal to link view')" 
         > 
       <s:Resize target="{borderContainer}"/> 
       <s:AddAction target="{linkViewButton}"/> 
       <s:Fade target="{linkViewButton}"/> 
      </s:Sequence> 
     </s:Transition> 

     <s:Transition fromState="normal" toState="imageView" interruptionBehavior="stop" autoReverse="true"> 
      <s:Sequence duration="250" 
         effectStart="trace('normal to image view')" 
         > 
       <s:Resize target="{borderContainer}"/> 
       <s:AddAction target="{imageViewButton}"/> 
       <s:Fade target="{imageViewButton}"/> 
      </s:Sequence> 
     </s:Transition> 

    </s:transitions> 

    <s:states> 
     <s:State name="normal"/> 
     <s:State name="linkView"/> 
     <s:State name="imageView"/> 
    </s:states> 


    <s:BorderContainer width="100%" id="borderContainer"> 
     <s:layout> 
      <s:VerticalLayout/> 
     </s:layout> 
     <s:HGroup width="100%" >  
      <s:Button label="Button 1" /> 
      <s:Line height="100%"> 
       <s:stroke> 
        <s:SolidColorStroke color="#B3C2B8"/> 
       </s:stroke> 
      </s:Line> 
      <s:ToggleButton id="gotoLinkView" label="Link Details" click="linkViewButton_clickHandler(event)"/> 
      <s:Line height="100%"> 
       <s:stroke> 
        <s:SolidColorStroke color="#B3C2B8"/> 
       </s:stroke> 
      </s:Line> 
      <s:ToggleButton id="gotoImageView" label="Image Details" click="imageViewButton_clickHandler(event)"/> 
      <s:Line height="100%"> 
       <s:stroke> 
        <s:SolidColorStroke color="#B3C2B8"/> 
       </s:stroke> 
      </s:Line> 
     </s:HGroup> 

     <s:Button id="linkViewButton" 
        label="Link View" 
        height="100" 
        includeIn="linkView" 
        itemCreationPolicy="immediate" width="100%"/> 

     <s:Button id="imageViewButton" 
        height="100" 
        label="Image View" 
        includeIn="imageView" 
        itemCreationPolicy="immediate" 
        width="100%"/> 
    </s:BorderContainer> 
</s:WindowedApplication> 

Answer 2

簡単な論理エラーが検出されました。コードでは、すべてのボタンを認識するか（押された/離された場合に状態を変更する）か、各ボタンが自分の状態のみを知って他のコードの影響を受けないようにする必要があります。あなたのアプローチでは、私はあなたが2番目の変種を行うべきだと言います。

 protected function imageViewButton_clickHandler(event:MouseEvent):void 
     { 

      if (currentState!=IMAGE_VIEW) { 
       currentState = IMAGE_VIEW; 
      } 
      else { 
       currentState = NORMAL_VIEW; 
      } 
     } 

     protected function linkViewButton_clickHandler(event:MouseEvent):void 
     { 
      if (currentState!=LINK_VIEW) { 
       currentState = LINK_VIEW; 
      } 
      else { 
       currentState = NORMAL_VIEW; 
      } 
     } 

あなたは、あなたの「肌」がNORMAL_VIEW状態にあることを前提とし、代わりに（ボタンごとに異なることができ、各ボタンの目的の状態をチェックするが望まないにに変更し、事前に定義された通常の状態に変更すべきではありませんあなたが必要なはずですが、最高の状態にしておくことをお勧めします）。