Flex: el asistente de pasos con 8 botones en el encabezado al hacer clic en el botón debe resaltar el botón

Utilicé el método de establecer enfoque con la propiedad de estilo de ancho de enfoque, pero si lo establece, entonces el orden de tabulación para el formulario en ese paso no funciona ya que el enfoque se establece en ese botón de paso

¿Cómo resaltar el botón sin establecer el enfoque en ese botón?

Intenté esto en el componente que se extiende mx: button

IMAGEN DE IU >> https://picasaweb.google.com/117672211821251548555/February12012?authuser=0&feat=directlink#5704169045108382770

Pseudocódigo

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

    }


                    }
                }

    }


    }

preguntado el 01 de febrero de 12 a las 14:02

Por favor ayúdame, esto ha hecho de mi vida un infierno :( -

1 Respuestas

Pude crear esto >>

Componente personalizado >> Vbox >> mx: Botón

al seleccionar el estilo de reinicio del botón para todos los demás y cambiar por uno en el que se hizo clic. Usé el evento para esto, que se envía al contenedor que contiene todos estos botones en hbox.

El botón personalizado tiene dos métodos selectButton y 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);
        }

    }
}

Respondido 01 Feb 12, 23:02

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.