A basic button
The example below shows a couple of simple Button component instances.
Please note that the Button component reserves the label pattern id for setting the Button's label. It's not obligatory to use this pattern id in your button skin template composition.
OUTPUT
SMXML
<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/smxml.dtd">
<composer>
<style>
<fill style="buttonDefault" type="linear" angle="79">
<color ratio="0">0xaaaaaa</color>
<color ratio="255">0xdddddd</color>
</fill>
<fill style="buttonFocused" type="linear" angle="79">
<color ratio="0">0xaaaaaa</color>
<color ratio="255">0xcc9944</color>
</fill>
<textformat style="buttonText">
<align>center</align>
<autosize>0</autosize>
<color>0xeeeeee</color>
<font>Helvetica Bold, Arial Bold, Verdana Bold</font>
<size>14</size>
</textformat>
</style>
<template>
<composer template="buttonSkin" width="100%" height="100%">
<box width="100%" height="100%" fill="buttonDefault" rounded="4"/>
<textblock y="2" width="100%" height="100%" textformat="buttonText">___label___</textblock>
</composer>
<composer template="buttonSkinOver" width="100%" height="100%">
<box width="100%" height="100%" fill="buttonFocused" rounded="4"/>
<textblock y="2" width="100%" height="100%" textformat="buttonText">___label___</textblock>
</composer>
</template>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<button x="148" y="70" width="144" height="20" skin="buttonSkin" skinover="buttonSkinOver" interactive="1">SAMPLE BUTTON</button>
<button x="348" y="70" width="80" height="20" skin="buttonSkin" skinover="buttonSkinOver" interactive="1">CANCEL</button>
</composer>
<composer>
<style>
<fill style="buttonDefault" type="linear" angle="79">
<color ratio="0">0xaaaaaa</color>
<color ratio="255">0xdddddd</color>
</fill>
<fill style="buttonFocused" type="linear" angle="79">
<color ratio="0">0xaaaaaa</color>
<color ratio="255">0xcc9944</color>
</fill>
<textformat style="buttonText">
<align>center</align>
<autosize>0</autosize>
<color>0xeeeeee</color>
<font>Helvetica Bold, Arial Bold, Verdana Bold</font>
<size>14</size>
</textformat>
</style>
<template>
<composer template="buttonSkin" width="100%" height="100%">
<box width="100%" height="100%" fill="buttonDefault" rounded="4"/>
<textblock y="2" width="100%" height="100%" textformat="buttonText">___label___</textblock>
</composer>
<composer template="buttonSkinOver" width="100%" height="100%">
<box width="100%" height="100%" fill="buttonFocused" rounded="4"/>
<textblock y="2" width="100%" height="100%" textformat="buttonText">___label___</textblock>
</composer>
</template>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<button x="148" y="70" width="144" height="20" skin="buttonSkin" skinover="buttonSkinOver" interactive="1">SAMPLE BUTTON</button>
<button x="348" y="70" width="80" height="20" skin="buttonSkin" skinover="buttonSkinOver" interactive="1">CANCEL</button>
</composer>
Skin Attributes
Skin attributes that can be set on a Button component.
| Attribute name | Description |
|---|---|
| skin | The default skin template for Button. |
| skinover | The rollover state skin template for Button. |
| skinselected | The selected state skin template for Button. |
Reserved Pattern IDs
Reserved pattern IDs used in Button template composition.
| Pattern ID | Description |
|---|---|
| label | The label of the Button. |
Applying Styles
Like most input components, the only style attribute supported for Button is filter.
| Style type | Attribute name | Description |
|---|---|---|
| filter | filter or filters | The filter(s) applied on the Button. |
See the SMAF reference for more information on the Button component.
There are no comments on this page. [Add comment]