change button appearance on click

Question

I wahnt to change button appearance when it was clicked.

<?xml version="1.0" encoding="utf-8"?>
<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark" 
          xmlns:mx="library://ns.adobe.com/flex/mx"
          creationComplete="init()">        
    <fx:Script>
        <![CDATA[
            public var _clicked:Boolean = false;

            public function init():void{
                addEventListener(MouseEvent.CLICK, changeButtonClickStatus);            
            }

            public function changeButtonClickStatus(event:MouseEvent):void{
                var that:TopMenuButton = event.currentTarget as TopMenuButton;
                that._clicked = !(that._clicked);

                if(that._clicked == true){
                //change button appearance
                }else{
                //change button appearance
                }
            }   
        ]]>
    </fx:Script>
</s:Button>

Is there a method using states? I could then use the skin convention. Thanks in advance for Your help.

Answer 1

If you are looking for a ToggleButton that you can skin the different states of then it already exists in Flex 4.

Check out the source code for ToggleButtonSkin.mxml to see how to skin the different states.

Answer 2

Have a look on the following example:

Applying styles to different states on a Spark Button control in Flex 4