Creating toggle and emphasized Button controls in Flex

Pretty basic stuff, but if you’ve never used a toggle button in Flex or Flash, you may find this useful. The following example creates two Button controls. The first button sets the toggle property to true and determines whether the button is currently selected by watching the button’s selected property. The second button simply sets the emphasized property to true, which gives the button a nice visible border, making it stand out a little more than the other buttons. This is great for highlighting a default button in a form.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/20/creating-toggle-and-emphasized-button-controls-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Number id="buttonWidth">200</mx:Number>

    <mx:Button id="button1"
            label="toggle= true; selected = {button1.selected}"
            toggle="true"
            width="{buttonWidth}" />

    <mx:Button id="button2"
            label="emphasized = true"
            emphasized="true"
            width="{buttonWidth}" />

</mx:Application>

View source is enabled in the following example.