Flex - 步驟嚮導帶有8個按鈕的標題點擊按鈕需要高亮按鈕

Question

我用focus焦點樣式屬性設置了焦點方法，但是如果設置了該選項，那麼該步驟中窗體的標籤順序不起作用，因爲焦點是設置在該步驟按鈕上

如何突出顯示按鈕而無需將焦點置於該按鈕上？

我在一個延伸組件試圖爲這個MX：按鈕

UI圖像>>https://picasaweb.google.com/117672211821251548555/February12012?authuser=0&feat=directlink#5704169045108382770

僞碼

class StepButton extends Button{ 
    { 

    init(){ 
    addEventListener(MouseEvent.CLICK,showFocus); 
    } 


    private function showFocus(e:MouseEvent):void{    
         this.invalidateDisplayList 
         this.setStyle("borderColor", "green"); 
         this.setStyle("borderStyle", "solid"); 
         this.setStyle("borderThickness", "10"); 

    } 


        } 
       } 

    } 


    } 

Answer 1

我能創造這個>>

定製組件>> Vbox >> mx：按鈕

on s爲所有其他人選擇按鈕重置樣式，並更改爲已點擊的樣式。 我用這個事件發送到容器，所有這些按鈕在hbox中。

自定義按鈕有兩個方法selectButton和deSelectButton

---

StepButton.mxml

---

<?xml version="1.0" encoding="utf-8"?> 
<mx:Button xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:mx="library://ns.adobe.com/flex/mx" 
      width="500" height="100" creationComplete="init()" > 


    <fx:Metadata> 
     [Event(name="stepchanged", type="com.salpe.ClearOtherSteps")] 
    </fx:Metadata> 


    <fx:Script> 
     <![CDATA[ 

      import mx.controls.Alert; 


      [Embed(source="bin-debug/assets/images/4.png")] 
      [Bindable] 
      public var imgCls:Class; 

      [Embed(source="bin-debug/assets/images/1.png")] 
      [Bindable] 
      public var resetcls:Class; 



      public function init():void{ 

       addEventListener(MouseEvent.CLICK ,clicked); 
       //addEventListener(FocusEvent.FOCUS_OUT ,out); 

       setStyle("verticalAlign", "middle"); 
      } 

      public function clicked(even:MouseEvent):void{ 

       //Alert.show("Test clcik"); 
       /* var step:Step = this.parent as Step ; 
       step.setStyle("backgroundColor" ,0xFF0000); 
       step.invalidateDisplayList(); */ 

      var evt :ClearOtherSteps = new ClearOtherSteps(ClearOtherSteps.STEP_CHANGE);    
      evt.step = this;    
      trace("StepButton.clicked(even)"); 


      this.dispatchEvent(evt); 


      } 


      public function selectButton():void{ 
       var step:Step = this.parent as Step ; 
       step.setStyle("backgroundColor" ,0xFF0000); 
       step.invalidateDisplayList(); 
      } 

      public function deSelectButton():void{ 

       var step:Step = this.parent as Step ; 
       step.setStyle("backgroundColor" ,0xFFFFFF); 
       step.invalidateDisplayList(); 
      } 

    /*  public function out(even:FocusEvent){ 

       if(even.relatedObject is StepButton){ 

        var other :StepButton = even.relatedObject as StepButton; 

        other.setStyle("backgroundColor" ,0xFFFFFF); 
        other.invalidateDisplayList(); 



       } 
      } */ 

     ]]> 
    </fx:Script> 

    </mx:Button> 

---

Step.mxml

---

<?xml version="1.0" encoding="utf-8"?> 
<mx:VBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:mx="library://ns.adobe.com/flex/mx" 
      xmlns:salpe="com.salpe.*" paddingTop="1" paddingBottom="1" paddingRight="1" paddingLeft="1" mouseChildren="true" creationComplete="init()" horizontalAlign="center" verticalAlign="middle"> 
    <fx:Style> 
     .multipleImageButtonStyle 
     { 

      upSkin: Embed("bin-debug/assets/images/1.png"); 
      downSkin: Embed("bin-debug/assets/images/1.png"); 
      overSkin: Embed("bin-debug/assets/images/1.png"); 
      ; 

     } 


    </fx:Style> 
    <fx:Script> 
     <![CDATA[ 

    public function init(){ 
     setStyle("verticalAlign", "middle"); 


    } 


     ]]> 
    </fx:Script> 
    <salpe:StepButton id="stepBtn" label="Button Test" height="20" width="100" styleName="multipleImageButtonStyle" buttonMode="true" /> 
</mx:VBox> 

---

TestComponet.mxml

---

<?xml version="1.0" encoding="utf-8"?> 
<mx:HDividedBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:mx="library://ns.adobe.com/flex/mx" 
       width="120%" height="120%" creationComplete="init()" xmlns:salpe="com.salpe.*"> 


    <fx:Script> 
     <![CDATA[ 

      import mx.controls.Alert; 
      import mx.controls.Label; 



      public function init():void{ 

       this.addEventListener(ClearOtherSteps.STEP_CHANGE,check); 

      } 


      public function check(evt:ClearOtherSteps){ 
       trace("In listner "); 
       //Alert.show("Test check"); 
       var arr:Array = bx.getChildren() 
       for (var i:int = 0; i < arr.length; i++) 
       { 
        var step:Step = arr[i] as Step; 



        step.stepBtn.deSelectButton(); 


       } 

       evt.step.selectButton(); 

      } 

     ]]> 
    </fx:Script> 

    <mx:List id="menu" width="20%" height="120%" change="{changeEvt(event)}" dataProvider="{list}" labelField="label"> 
    </mx:List> 
    <mx:VBox id="content" width="80%" height="120%" backgroundColor="0xFFFFFF"> 
     <mx:HBox id="bx" width="120%" height="120%" horizontalScrollPolicy="auto"> 
     <salpe:Step id= "test1" label="Button Test" height="30" width="120" styleName="multipleImageButtonStyle" buttonMode="true" color="0xFFFFFF" /> 
     <salpe:Step id= "test2" label="Button Test" height="30" width="120" styleName="multipleImageButtonStyle" buttonMode="true" color="0xFFFFFF" /> 
     <salpe:Step id= "test3" label="Button Test" height="30" width="120" styleName="multipleImageButtonStyle" buttonMode="true" color="0xFFFFFF" /> 
     <salpe:Step id= "test4" label="Button Test" height="30" width="120" styleName="multipleImageButtonStyle" buttonMode="true" color="0xFFFFFF" /> 
     <salpe:Step id= "test5" label="Button Test" height="30" width="120" styleName="multipleImageButtonStyle" buttonMode="true" color="0xFFFFFF" /> 
      </mx:HBox> 
    </mx:VBox> 
</mx:HDividedBox> 

---

ClearOtherSteps.as

---

package com.salpe 
{ 
    import flash.events.Event; 

    public class ClearOtherSteps extends Event 
    { 
     // Define static constant. 
     public static const STEP_CHANGE:String = "stepchanged"; 

     public var step:StepButton; 

     public function ClearOtherSteps(type:String){ 

      super(type,true, false); 
     } 


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

    } 
}