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 Applying Scroll Styles for more details.
The middle example also uses the multiselect attribute to allow multi-choice selection for the listbox.
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 Using Button for more details.
Please note that the ListBox component reserves the label, id and scroll pattern ids.
SMXML
<!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>
<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>
OUTPUT
Skin Attributes
Skin attributes that can be set on a listbox component.
| Attribute name | Description |
|---|---|
| skin | The default skin template for listbox. |
| skinover | The rollover state skin template for listbox. |
| skinselected | The selected state skin template for listbox. |
Reserved Pattern IDs
Reserved pattern IDs used in listbox template composition.
| Pattern ID | Description |
|---|---|
| label | The label of the listbox. |
Applying Styles
Like most input components, the only style attribute supported for toggle is filter.
| Style type | Attribute name | Description |
|---|---|---|
| filter | filter or filters | The filter(s) applied to the box. |
See the SMAF reference for more information on the listbox component.
There are no comments on this page. [Add comment]