Highlight the selected button in controlbar

Question

I have 3 buttons(say b1,b2,b3) in my app which are under the controlbar on clicking those buttons it will open new view(components) suppose if button b1 is clicked it should highlight the button b1(bg color change). how to go about this sorry if it is noob question as am new to this

Thanks

score 1 · Answer 1 · answered Apr 27 '11 at 12:14

1

Set toggle property for buttons to true as in documentation and then manage selected property for buttons (set it to true for active button).

answered Apr 27 '11 at 12:14

Constantiner

14,231
4
27
34

Imran · Accepted Answer · 2011-04-27T12:49:20.103

1

I think you should use ToggleButton here is example also check Button Bar to group buttons

EDITED by you question i think you need to switch views on Button click in that case you may see Tab Navigator

hopes thst helps

edited Apr 27 '11 at 12:49

answered Apr 27 '11 at 12:18

Imran

2,906
1
19
20

any other options other than button bar – vardit Apr 27 '11 at 12:35
how to do it in the case of link button – UI Dev Dec 24 '13 at 09:03

score 0 · Answer 3 · answered Apr 27 '11 at 12:45

Try this example,since you are looking for a solution without any button bars

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" minWidth="955" minHeight="600">

    <mx:Script>
        <![CDATA[
            import mx.core.UIComponent;
            protected function button1_clickHandler(event:MouseEvent):void
            {
                for each(var child:UIComponent in hbox.getChildren())
                {
                    if(child.className == 'Button')
                    {
                        Button(child).selected = false;
                    }
                }
                event.currentTarget.selected = true;
            }
        ]]>
    </mx:Script>

    <mx:HBox id="hbox">
        <mx:Button label="B1" toggle="true" click="button1_clickHandler(event)"/>
        <mx:Button label="B2" toggle="true" click="button1_clickHandler(event)"/>
        <mx:Button label="B3" toggle="true" click="button1_clickHandler(event)"/>
    </mx:HBox>
</mx:Application>

For controlling the background color of the buttons in selected state,define selectedUpSkin,selectedOverSkin,selectedDownSkin(and selectedDisabledSkin)

P.S:If you are using only buttons in the control bar,you can use Button as the type of child and avoid that if statement

Highlight the selected button in controlbar

3 Answers3