Apache flex Flex-Step向导在标题中有8个按钮，单击按钮时需要亮起按钮

我在focuswidth样式属性中使用了set focus方法，但若您设置了该属性，那个么在该步骤中表单的制表符顺序将不起作用，因为在该步骤按钮上设置了焦点

如何突出显示按钮而不将焦点设置在该按钮上

我在扩展mx:button的组件中尝试了这个

用户界面图像>>

伪码

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

    }


                    }
                }

    }


    }

---

我能够创建此>>

自定义组件>>Vbox>>mx:按钮

在“选择”按钮上，为所有其他按钮重置样式，并为单击的按钮更改样式。 我使用事件发送到hbox中包含所有这些按钮的容器

自定义按钮有两种方法selectButton和DecelectButton

---

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>

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

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

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

    }
}