Formatting code for UsingListBox
====A basic listbox====
The //""ListBox""// component is designated for capturing single or multi-choice input from the user. It technically consists of a linear list of skinable //Button// component instances that may scroll if they have to.
The example below shows variations on a //""ListBox""// component. The left and middle examples show scrolling listboxes with different scroll styles applied on them. Please see [[http://samplemath.com/smaf/doc/wikka.php?wakka=ScrollStyles Scroll Styles]] for more details.
The middle example also uses the //multiselect// attribute to allow multi-choice selection for the listbox. Hold the SHIFT button to multi-select or deselect options.
The right example showcases using //""ListBox""// as a radio-button style input. Lots of different variations of UI controls maybe achieved via skinning this component and its elements. For skinning listbox options please view [[http://samplemath.com/smaf/doc/wikka.php?wakka=UsingButton Using Button]] for more details.
Please note that the //""ListBox""// component reserves the //label//, //id// and //scroll// pattern ids.
==OUTPUT==
{{flash url="http://samplemath.com/smxml/bin/smxml.swf?url=http://samplemath.com/smxml/example/listbox.smxml" [width="640"] [height="160"] }}
==SMXML==
%%(xml)
<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/smxml.dtd">
<composer>
<style>
<fill style="listBoxBackground" type="solid">
<color>0xdddddd</color>
</fill>
<fill style="listBoxItem" type="solid">
<color alpha="0">0xffffff</color>
</fill>
<fill style="listBoxItemOver" type="solid">
<color>0xb7e288</color>
</fill>
<fill style="listBoxItemSelected" type="solid">
<color>0xffffff</color>
</fill>
<fill style="radioBoxBackground" type="linear" angle="75">
<color ratio="0">0x888888</color>
<color ratio="255">0x555555</color>
</fill>
<fill style="radioBoxItem" type="solid">
<color alpha="0">0xffffff</color>
</fill>
<fill style="radioBoxItemOver" type="solid">
<color>0xb7e288</color>
</fill>
<fill style="radioBoxItemSelected" type="solid">
<color>0xffffff</color>
</fill>
<fill style="gray" type="solid">
<color>0x555555</color>
</fill>
<fill style="grayOver" type="solid">
<color>0x666666</color>
</fill>
<fill style="green" type="solid">
<color>0x22cc22</color>
</fill>
<fill style="greenOver" type="solid">
<color>0x22ff22</color>
</fill>
<scroll style="scrollbarPersistent" type="scrollbar" orientation="vertical">
<persistent>1</persistent>
<size>16</size>
<scrollbarbackground>scrollbarBackground</scrollbarbackground>
<scrollbarbackgroundover>scrollbarBackgroundOver</scrollbarbackgroundover>
<scrollindicator>scrollbarHandle</scrollindicator>
<scrollindicatorover>scrollbarHandleOver</scrollindicatorover>
<wheelspeed>4</wheelspeed>
</scroll>
<scroll style="selectBoxScroll" type="momentum" orientation="vertical">
<size>9</size>
<scrollmargin>16</scrollmargin>
<scrollratio>.04</scrollratio>
<scrollindicatorshown>false</scrollindicatorshown>
<clickpause>false</clickpause>
<mousealignvelocity>2</mousealignvelocity>
<scrollvelocitymax>20</scrollvelocitymax>
<scrollindicator>scrollIndicator</scrollindicator>
<scrolloriginindicator>scrollOriginIndicator</scrolloriginindicator>
</scroll>
<stroke style="radioBoxItem" size="1">
<color>0xffffff</color>
</stroke>
<textformat style="listBoxText">
<color>0x555555</color>
<font>Helvetica Bold, Arial Bold, Verdana Bold</font>
<size>14</size>
</textformat>
<textformat style="radioBoxText">
<color>0xffffff</color>
<font>Helvetica Bold, Arial Bold, Verdana Bold</font>
<size>14</size>
</textformat>
<textformat style="radioBoxTextOver">
<color>0xb7e288</color>
<font>Helvetica Bold, Arial Bold, Verdana Bold</font>
<size>14</size>
</textformat>
</style>
<template>
<composer id="___id___Composer" template="listBoxBackground" width="100%" height="100%">
<box width="100%" height="100%" fill="listBoxBackground"/>
<composer id="___id___Scroller" width="100%" height="100%" scroll="___scroll___"/>
</composer>
<composer id="___id___" template="listBoxItem" width="100%" height="20">
<box width="100%" height="100%" fill="listBoxItem"/>
<textblock x="20" y="1" width="-20" height="-2" textformat="listBoxText"><![CDATA[___label___]]></textblock>
</composer>
<composer id="___id___" template="listBoxItemOver" width="100%" height="20" visible="0">
<box width="100%" height="100%" fill="listBoxItemOver"/>
<textblock x="20" y="1" width="-20" height="-2" textformat="listBoxText"><![CDATA[___label___]]></textblock>
</composer>
<composer id="___id___" template="listBoxItemSelected" width="100%" height="20" visible="0">
<box width="100%" height="100%" fill="listBoxItemSelected"/>
<textblock x="20" y="1" width="-20" height="-2" textformat="listBoxText"><![CDATA[___label___]]></textblock>
</composer>
<composer template="scrollbarBackground" width="100%" height="100%">
<box width="100%" height="100%" fill="gray"/>
</composer>
<composer template="scrollbarBackgroundOver" width="100%" height="100%">
<box width="100%" height="100%" fill="grayOver"/>
</composer>
<composer template="scrollbarHandle" width="100%" height="100%">
<box width="100%" height="100%" fill="green"/>
</composer>
<composer template="scrollbarHandleOver" width="100%" height="100%">
<box width="100%" height="100%" fill="greenOver"/>
</composer>
<composer id="___id___Composer" template="radioBoxBackground" width="100%" height="100%">
<box width="100%" height="100%" fill="radioBoxBackground" rounded="8"/>
<composer id="___id___Scroller" x="8" y="8" width="-16" height="-16" scroll="___scroll___"/>
</composer>
<composer id="___id___" template="radioBoxItem" width="100%" height="20">
<box width="14" height="14" x="2" y="2" fill="radioBoxItem" stroke="radioBoxItem"/>
<textblock x="20" y="1" width="-20" height="-2" textformat="radioBoxText"><![CDATA[___label___]]></textblock>
</composer>
<composer id="___id___" template="radioBoxItemOver" width="100%" height="20" visible="0">
<box width="14" height="14" x="2" y="2" fill="radioBoxItemOver" stroke="radioBoxItem"/>
<textblock x="20" y="1" width="-20" height="-2" textformat="radioBoxTextOver"><![CDATA[___label___]]></textblock>
</composer>
<composer id="___id___" template="radioBoxItemSelected" width="100%" height="20" visible="0">
<box width="14" height="14" x="2" y="2" fill="radioBoxItemSelected" stroke="radioBoxItem"/>
<textblock x="20" y="1" width="-20" height="-2" textformat="radioBoxText"><![CDATA[___label___]]></textblock>
</composer>
</template>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<listbox id="leftListBox" x="160" y="20" height="120" width="120" scroll="scrollbarPersistent" skin="listBoxBackground" itemskin="listBoxItem" itemskinover="listBoxItemOver" itemskinselected="listBoxItemSelected">
<options>
<option id="sp1"><![CDATA[soccer]]></option>
<option id="sp2"><![CDATA[tennis]]></option>
<option id="sp3"><![CDATA[ping pong]]></option>
<option id="sp4"><![CDATA[basketball]]></option>
<option id="sp5"><![CDATA[cycling]]></option>
<option id="sp6"><![CDATA[baseball]]></option>
<option id="sp7"><![CDATA[rafting]]></option>
<option id="sp8"><![CDATA[fencing]]></option>
<option id="sp9"><![CDATA[chess]]></option>
</options>
</listbox>
<listbox id="rightListBox" multiselect="1" x="320" y="20" height="120" width="120" scroll="selectBoxScroll" skin="listBoxBackground" itemskin="listBoxItem" itemskinover="listBoxItemOver" itemskinselected="listBoxItemSelected">
<options>
<option id="sp1"><![CDATA[soccer]]></option>
<option id="sp2"><![CDATA[tennis]]></option>
<option id="sp3"><![CDATA[ping pong]]></option>
<option id="sp4"><![CDATA[basketball]]></option>
<option id="sp5"><![CDATA[cycling]]></option>
<option id="sp6"><![CDATA[baseball]]></option>
<option id="sp7"><![CDATA[rafting]]></option>
<option id="sp8"><![CDATA[fencing]]></option>
<option id="sp9"><![CDATA[chess]]></option>
</options>
</listbox>
<listbox id="radioButtons" x="480" y="10" height="140" width="120" scroll="selectBoxScroll" skin="radioBoxBackground" itemskin="radioBoxItem" itemskinover="radioBoxItemOver" itemskinselected="radioBoxItemSelected">
<options>
<option id="sp1"><![CDATA[soccer]]></option>
<option id="sp2"><![CDATA[tennis]]></option>
<option id="sp3"><![CDATA[ping pong]]></option>
<option id="sp4"><![CDATA[basketball]]></option>
<option id="sp5"><![CDATA[cycling]]></option>
<option id="sp6"><![CDATA[baseball]]></option>
</options>
</listbox>
</composer>
%%
====Skin Attributes====
Skin attributes that can be set on a //""ListBox""// component.
|=|Attribute name|=|Description||
||//skin//||The default skin template for //""ListBox""//.||
||//itemskin//||The default state skin template for a //""ListBox""// option.||
||//itemskinover//||The rollover state skin template for a //""ListBox""// option.||
||//itemskinselected//||The selected state skin template for a //""ListBox""// option.||
====Reserved Pattern IDs====
Reserved pattern IDs used in //""ListBox""// template composition.
|=|Pattern ID|=|Description||
||//id//||The id of each //""ListBox""// option.||
||//label//||The label of each //""ListBox""// option.||
||//scroll//||The scroll style applied on the //""ListBox""//.||
====Applying Styles====
Style attributes that maybe used on a //""ListBox""// component.
|=|Style type|=|Attribute name|=|Description||
||filter||//filter// or //filters//||The filter(s) applied on the //""ListBox""//.||
||scroll||//scroll//||The scroll style applied on the //""ListBox""//.||
See the [[http://samplemath.com/smaf/ref/com/samplemath/input/ListBox.html SMAF reference]] for more information on the //""ListBox""// component.
The //""ListBox""// component is designated for capturing single or multi-choice input from the user. It technically consists of a linear list of skinable //Button// component instances that may scroll if they have to.
The example below shows variations on a //""ListBox""// component. The left and middle examples show scrolling listboxes with different scroll styles applied on them. Please see [[http://samplemath.com/smaf/doc/wikka.php?wakka=ScrollStyles Scroll Styles]] for more details.
The middle example also uses the //multiselect// attribute to allow multi-choice selection for the listbox. Hold the SHIFT button to multi-select or deselect options.
The right example showcases using //""ListBox""// as a radio-button style input. Lots of different variations of UI controls maybe achieved via skinning this component and its elements. For skinning listbox options please view [[http://samplemath.com/smaf/doc/wikka.php?wakka=UsingButton Using Button]] for more details.
Please note that the //""ListBox""// component reserves the //label//, //id// and //scroll// pattern ids.
==OUTPUT==
{{flash url="http://samplemath.com/smxml/bin/smxml.swf?url=http://samplemath.com/smxml/example/listbox.smxml" [width="640"] [height="160"] }}
==SMXML==
%%(xml)
<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/smxml.dtd">
<composer>
<style>
<fill style="listBoxBackground" type="solid">
<color>0xdddddd</color>
</fill>
<fill style="listBoxItem" type="solid">
<color alpha="0">0xffffff</color>
</fill>
<fill style="listBoxItemOver" type="solid">
<color>0xb7e288</color>
</fill>
<fill style="listBoxItemSelected" type="solid">
<color>0xffffff</color>
</fill>
<fill style="radioBoxBackground" type="linear" angle="75">
<color ratio="0">0x888888</color>
<color ratio="255">0x555555</color>
</fill>
<fill style="radioBoxItem" type="solid">
<color alpha="0">0xffffff</color>
</fill>
<fill style="radioBoxItemOver" type="solid">
<color>0xb7e288</color>
</fill>
<fill style="radioBoxItemSelected" type="solid">
<color>0xffffff</color>
</fill>
<fill style="gray" type="solid">
<color>0x555555</color>
</fill>
<fill style="grayOver" type="solid">
<color>0x666666</color>
</fill>
<fill style="green" type="solid">
<color>0x22cc22</color>
</fill>
<fill style="greenOver" type="solid">
<color>0x22ff22</color>
</fill>
<scroll style="scrollbarPersistent" type="scrollbar" orientation="vertical">
<persistent>1</persistent>
<size>16</size>
<scrollbarbackground>scrollbarBackground</scrollbarbackground>
<scrollbarbackgroundover>scrollbarBackgroundOver</scrollbarbackgroundover>
<scrollindicator>scrollbarHandle</scrollindicator>
<scrollindicatorover>scrollbarHandleOver</scrollindicatorover>
<wheelspeed>4</wheelspeed>
</scroll>
<scroll style="selectBoxScroll" type="momentum" orientation="vertical">
<size>9</size>
<scrollmargin>16</scrollmargin>
<scrollratio>.04</scrollratio>
<scrollindicatorshown>false</scrollindicatorshown>
<clickpause>false</clickpause>
<mousealignvelocity>2</mousealignvelocity>
<scrollvelocitymax>20</scrollvelocitymax>
<scrollindicator>scrollIndicator</scrollindicator>
<scrolloriginindicator>scrollOriginIndicator</scrolloriginindicator>
</scroll>
<stroke style="radioBoxItem" size="1">
<color>0xffffff</color>
</stroke>
<textformat style="listBoxText">
<color>0x555555</color>
<font>Helvetica Bold, Arial Bold, Verdana Bold</font>
<size>14</size>
</textformat>
<textformat style="radioBoxText">
<color>0xffffff</color>
<font>Helvetica Bold, Arial Bold, Verdana Bold</font>
<size>14</size>
</textformat>
<textformat style="radioBoxTextOver">
<color>0xb7e288</color>
<font>Helvetica Bold, Arial Bold, Verdana Bold</font>
<size>14</size>
</textformat>
</style>
<template>
<composer id="___id___Composer" template="listBoxBackground" width="100%" height="100%">
<box width="100%" height="100%" fill="listBoxBackground"/>
<composer id="___id___Scroller" width="100%" height="100%" scroll="___scroll___"/>
</composer>
<composer id="___id___" template="listBoxItem" width="100%" height="20">
<box width="100%" height="100%" fill="listBoxItem"/>
<textblock x="20" y="1" width="-20" height="-2" textformat="listBoxText"><![CDATA[___label___]]></textblock>
</composer>
<composer id="___id___" template="listBoxItemOver" width="100%" height="20" visible="0">
<box width="100%" height="100%" fill="listBoxItemOver"/>
<textblock x="20" y="1" width="-20" height="-2" textformat="listBoxText"><![CDATA[___label___]]></textblock>
</composer>
<composer id="___id___" template="listBoxItemSelected" width="100%" height="20" visible="0">
<box width="100%" height="100%" fill="listBoxItemSelected"/>
<textblock x="20" y="1" width="-20" height="-2" textformat="listBoxText"><![CDATA[___label___]]></textblock>
</composer>
<composer template="scrollbarBackground" width="100%" height="100%">
<box width="100%" height="100%" fill="gray"/>
</composer>
<composer template="scrollbarBackgroundOver" width="100%" height="100%">
<box width="100%" height="100%" fill="grayOver"/>
</composer>
<composer template="scrollbarHandle" width="100%" height="100%">
<box width="100%" height="100%" fill="green"/>
</composer>
<composer template="scrollbarHandleOver" width="100%" height="100%">
<box width="100%" height="100%" fill="greenOver"/>
</composer>
<composer id="___id___Composer" template="radioBoxBackground" width="100%" height="100%">
<box width="100%" height="100%" fill="radioBoxBackground" rounded="8"/>
<composer id="___id___Scroller" x="8" y="8" width="-16" height="-16" scroll="___scroll___"/>
</composer>
<composer id="___id___" template="radioBoxItem" width="100%" height="20">
<box width="14" height="14" x="2" y="2" fill="radioBoxItem" stroke="radioBoxItem"/>
<textblock x="20" y="1" width="-20" height="-2" textformat="radioBoxText"><![CDATA[___label___]]></textblock>
</composer>
<composer id="___id___" template="radioBoxItemOver" width="100%" height="20" visible="0">
<box width="14" height="14" x="2" y="2" fill="radioBoxItemOver" stroke="radioBoxItem"/>
<textblock x="20" y="1" width="-20" height="-2" textformat="radioBoxTextOver"><![CDATA[___label___]]></textblock>
</composer>
<composer id="___id___" template="radioBoxItemSelected" width="100%" height="20" visible="0">
<box width="14" height="14" x="2" y="2" fill="radioBoxItemSelected" stroke="radioBoxItem"/>
<textblock x="20" y="1" width="-20" height="-2" textformat="radioBoxText"><![CDATA[___label___]]></textblock>
</composer>
</template>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<listbox id="leftListBox" x="160" y="20" height="120" width="120" scroll="scrollbarPersistent" skin="listBoxBackground" itemskin="listBoxItem" itemskinover="listBoxItemOver" itemskinselected="listBoxItemSelected">
<options>
<option id="sp1"><![CDATA[soccer]]></option>
<option id="sp2"><![CDATA[tennis]]></option>
<option id="sp3"><![CDATA[ping pong]]></option>
<option id="sp4"><![CDATA[basketball]]></option>
<option id="sp5"><![CDATA[cycling]]></option>
<option id="sp6"><![CDATA[baseball]]></option>
<option id="sp7"><![CDATA[rafting]]></option>
<option id="sp8"><![CDATA[fencing]]></option>
<option id="sp9"><![CDATA[chess]]></option>
</options>
</listbox>
<listbox id="rightListBox" multiselect="1" x="320" y="20" height="120" width="120" scroll="selectBoxScroll" skin="listBoxBackground" itemskin="listBoxItem" itemskinover="listBoxItemOver" itemskinselected="listBoxItemSelected">
<options>
<option id="sp1"><![CDATA[soccer]]></option>
<option id="sp2"><![CDATA[tennis]]></option>
<option id="sp3"><![CDATA[ping pong]]></option>
<option id="sp4"><![CDATA[basketball]]></option>
<option id="sp5"><![CDATA[cycling]]></option>
<option id="sp6"><![CDATA[baseball]]></option>
<option id="sp7"><![CDATA[rafting]]></option>
<option id="sp8"><![CDATA[fencing]]></option>
<option id="sp9"><![CDATA[chess]]></option>
</options>
</listbox>
<listbox id="radioButtons" x="480" y="10" height="140" width="120" scroll="selectBoxScroll" skin="radioBoxBackground" itemskin="radioBoxItem" itemskinover="radioBoxItemOver" itemskinselected="radioBoxItemSelected">
<options>
<option id="sp1"><![CDATA[soccer]]></option>
<option id="sp2"><![CDATA[tennis]]></option>
<option id="sp3"><![CDATA[ping pong]]></option>
<option id="sp4"><![CDATA[basketball]]></option>
<option id="sp5"><![CDATA[cycling]]></option>
<option id="sp6"><![CDATA[baseball]]></option>
</options>
</listbox>
</composer>
%%
====Skin Attributes====
Skin attributes that can be set on a //""ListBox""// component.
|=|Attribute name|=|Description||
||//skin//||The default skin template for //""ListBox""//.||
||//itemskin//||The default state skin template for a //""ListBox""// option.||
||//itemskinover//||The rollover state skin template for a //""ListBox""// option.||
||//itemskinselected//||The selected state skin template for a //""ListBox""// option.||
====Reserved Pattern IDs====
Reserved pattern IDs used in //""ListBox""// template composition.
|=|Pattern ID|=|Description||
||//id//||The id of each //""ListBox""// option.||
||//label//||The label of each //""ListBox""// option.||
||//scroll//||The scroll style applied on the //""ListBox""//.||
====Applying Styles====
Style attributes that maybe used on a //""ListBox""// component.
|=|Style type|=|Attribute name|=|Description||
||filter||//filter// or //filters//||The filter(s) applied on the //""ListBox""//.||
||scroll||//scroll//||The scroll style applied on the //""ListBox""//.||
See the [[http://samplemath.com/smaf/ref/com/samplemath/input/ListBox.html SMAF reference]] for more information on the //""ListBox""// component.
