The Button control is a commonly used rectangular button. Button controls look like they can be pressed. They can have a text label, an icon, or both on their face. Button controls typically perform an action when clicked. However, toggle-style Button controls stay pressed when clicked and act like a radio button. When a user clicks a Button control, it broadcasts a click event. You can customize the look of a Button control and change its functionality from push to toggle.
The Button control extends the SimpleButton class. It adds a label and text with layout, and the ability to resize without distorting the skin.
Note: The Button control does not respond to the valueChanged event, even though it is defined in the UIComponent class. You cannot set the skinning properties inherited from the SimpleButton control in MXML.
MXML Syntax
The <mx:Button> tag inherits all the properties of its parent classes, and the following properties:
Broadcast when the user clicks on the button. The target property of the event object contains a reference to the component that triggered the event. The type property contains the name of the event, click.
Type:
Number
CSS Inheritance:
no Thickness of button border "ring". A value of 0 means no border. Any value greater than 2 creates a glowing "ring" around the button. The default value is 3.
cornerRadius
Type:
Number
CSS Inheritance:
no Radius of button corners. The default value is 5.
horizontalGap
Type:
Number
CSS Inheritance:
no Gap between the buttons label and icon, when labelPlacement = "left" or "right". The default value is 2.
textRollOverColor
Type:
Number
Format:
Color
CSS Inheritance:
yes Text color of the label as you move the mouse pointer over the button. The default value is 0x2B333C.
textSelectedColor
Type:
Number
Format:
Color
CSS Inheritance:
yes Text color of the label as you press it. The default value is 0x000000.
verticalGap
Type:
Number
CSS Inheritance:
no Gap between the buttons label and icon, when labelPlacement = "top" or "bottom". The default value is 2.
Symbol name of the icon to appear on this Button. The default value is undefined, meaning that no icon should appear.
The icon must be embedded at compile time as a symbol in the SWF file, as opposed to being downloaded as an image from the server at runtime. To embed the icon in the SWF file, use the @Embed MXML compiler directive: icon="@Embed('relativeOrAbsoluteURL')" The URL can be for a JPEG, GIF, PNG, SVG, or SWF image on the server. The MXML compiler embeds the image as a symbol and replaces the @Embed directive with the symbol name it generated.
The relative placement of the button's label and icon is determined by the labelPlacement property.
label
label:
String
Text to appear on the Button. The default value is an empty string.
labelPlacement
labelPlacement:
String
Orientation of the label in relation to a specified icon. Possible values are right, left, bottom, and top. The default is right.
version
static
version:
String
Version string for this class.
Examples
ButtonExample.mxml
<?xml version="1.0"?>
<!-- Simple example to demonstrate the Button control -->
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" backgroundColor="#FFFFFF"
height="100%" width="100%">
<mx:Script>
<![CDATA[
function printMessage(event)
{
message.text += newline + event.target.label + " pressed";
}
]]>
</mx:Script>
<mx:Panel title="Button Panel" height="100%" width="100%">
<!-- The button can contain an image, as in the "Button with Icon" button -->
<mx:Button id="iconButton" icon="@Embed('FlexLogo.gif')" label="Button with Icon"
labelPlacement="right" color="#993300" click="printMessage(event)"/>
<!-- The size of the button and the label attributes can be customized -->
<mx:Button label="Customized Button" color="#993300" toggle="true" selected="true"
textAlign="left" fontStyle="italic" fontSize="13" width="{iconButton.width}" click="printMessage(event)"/>
<!-- By default, the look and feel of the customized button is similar to the Default Button. -->
<mx:Button label="Default Button" click="printMessage(event)"/>
<mx:TextArea id="message" text="" editable="false" height="100%" width="100%"
color="#0000FF"/>
</mx:Panel>
</mx:Application>
