Flex - Step Wizard с 8 кнопками в заголовке при нажатии на кнопку, чтобы подсветить кнопку - PullRequest
Новая
       14

Flex - Step Wizard с 8 кнопками в заголовке при нажатии на кнопку, чтобы подсветить кнопку

0 голосов
/ 01 февраля 2012

Я использовал метод установки фокуса со свойством стиля focuswidth, но если вы установите его, порядок вкладок для формы на этом шаге не будет работать, так как фокус установлен на кнопке этого шага

Как выделить кнопку без установки фокуса наэта кнопка?

Я пытался сделать это в компоненте, расширяющем mx: button

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

    }


                    }
                }

    }


    }

1 Ответ

0 голосов
/ 01 февраля 2012

Я смог создать это >>

Пользовательский компонент >> Vbox >> mx: Button

при выборе на кнопке сбросить стиль для всех остальных и изменить на нажатой. Для этого я использовал событие, которое отправляет в контейнер, содержащий все эти кнопки в 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);
        }

    }
}
...