Question

我使用了具有focuswidth样式属性的set focus方法但是如果你设置了那个，那么该步骤中表单的Tab键顺序不起作用，因为焦点设置在该步骤按钮上

如何在不设置焦点的情况下突出显示按钮？

我在扩展mx：button

的组件中尝试了这个

UI IMAGE＆gt;＆gt; 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

我能够创建此＆gt;＆gt;

自定义组件＆gt;＆gt; Vbox＆gt;＆gt; mx：按钮

on为所有其他人选择按钮重置样式，并为单击的按钮重置样式。我使用事件发送到容器，其中包含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);
        }

    }
}

Flex - 步骤向导，单击按钮时标题中有8个按钮需要高亮按钮

1 个答案: