Skin Attributes
The template attribute is not the only way to apply a template on a component instance in SMXML. Some higher level components such as input components offer 'skin attributes' specifying which template composition to use for each state or element of the particular component. See each component's documentation on particular attributes.
In the example below we apply the buttonSkin and buttonSkinOver templates as default and over states of a couple of button component instances by setting their skin and skinover attributes to 'buttonSkin' and 'buttonSkinOver'.
Note that some components use default replace pattern IDs for certain purposes such as the button component does label. See each component's documentation on particular reserved pattern IDs..
SMXML
<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/smxml.dtd">
<composer>
<style>
<fill style="fillOrange" type="solid">
<color>0xffcc00</color>
</fill>
<fill style="fillRed" type="solid">
<color>0xff0000</color>
</fill>
<textformat style="sampleTextFormat">
<align>center</align>
<autosize>0</autosize>
<color>0xffffff</color>
<font>Impact, Helvetica, Arial</font>
<size>16</size>
</textformat>
</style>
<template>
<composer template="buttonSkin" width="100%" height="100%">
<box width="100%" height="100%" fill="fillRed" rounded="8"/>
<textblock y="2" width="100%" height="100%" textformat="sampleTextFormat">___label___</textblock>
</composer>
<composer template="buttonSkinOver" width="100%" height="100%">
<box width="100%" height="100%" fill="fillOrange" rounded="8"/>
<textblock y="2" width="100%" height="100%" textformat="sampleTextFormat">___label___</textblock>
</composer>
</template>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<button id="submitButton" skin="buttonSkin" skinover="buttonSkinOver" width="72" height="24" x="50" y="45" interactive="1" rounded="8"><![CDATA[submit]]></button>
<button id="cancalButton" skin="buttonSkin" skinover="buttonSkinOver" width="72" height="24" x="150" y="45" interactive="1" rounded="8"><![CDATA[cancel]]></button>
</composer>
<composer>
<style>
<fill style="fillOrange" type="solid">
<color>0xffcc00</color>
</fill>
<fill style="fillRed" type="solid">
<color>0xff0000</color>
</fill>
<textformat style="sampleTextFormat">
<align>center</align>
<autosize>0</autosize>
<color>0xffffff</color>
<font>Impact, Helvetica, Arial</font>
<size>16</size>
</textformat>
</style>
<template>
<composer template="buttonSkin" width="100%" height="100%">
<box width="100%" height="100%" fill="fillRed" rounded="8"/>
<textblock y="2" width="100%" height="100%" textformat="sampleTextFormat">___label___</textblock>
</composer>
<composer template="buttonSkinOver" width="100%" height="100%">
<box width="100%" height="100%" fill="fillOrange" rounded="8"/>
<textblock y="2" width="100%" height="100%" textformat="sampleTextFormat">___label___</textblock>
</composer>
</template>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<button id="submitButton" skin="buttonSkin" skinover="buttonSkinOver" width="72" height="24" x="50" y="45" interactive="1" rounded="8"><![CDATA[submit]]></button>
<button id="cancalButton" skin="buttonSkin" skinover="buttonSkinOver" width="72" height="24" x="150" y="45" interactive="1" rounded="8"><![CDATA[cancel]]></button>
</composer>
There are no comments on this page. [Add comment]