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 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 Using Button for more details.
Please note that the ListBox component reserves the label, id and scroll pattern ids.
OUTPUT
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>
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 SMAF reference for more information on the ListBox component.
There are no comments on this page. [Add comment]