Question

I have a HGroup with some buttons inside which is my application’s menu.

<s:HGroup id="nav">
    <s:Button id="homeButton" label="Home" />
    <s:Button id="showroomButton" label="Showroom" />
    <s:Button label="Catalogue" />
    <s:Button label="Offers" />
    <s:Button label="My Account" />
    <s:Button label="My Orders" />
</s:HGroup>

What I want is when I click for example the #homeButton to change it’s state to “over”, become disabled and reset all other buttons to the “up” state.

I’ve written this function

    private function resetNavState():void {
        for(var i:int = 0,ii:int = nav.numChildren-1;i<ii;i++) {
        Button(nav.getChildAt(i)).mouseEnabled = true;
        Button(nav.getChildAt(i)).skin.setCurrentState("up",true);
    }
}

And then on the homeButton click handler for example i use

protected function homeButton_clickHandler(event:MouseEvent):void
{
    resetNavState();
    currentState = "home";
    homeButton.skin.setCurrentState("over",true);
    homeButton.mouseEnabled = false;

}

I resets the states of the #nav buttons but it doesn’t change the state of the pressed button.

Any ideas?

Thanx in advance

Answer 1

You’ll want to place your buttons in a in a <s:ButtonBar /> control rather than the HGroup.