A basic DropDown
The DropDown component is designated for capturing single-choice input from the user. It technically consists of a skinable Button and a ListBox component instance that may scroll if it has to.
The example below shows variations on a DropDown component. The left and middle examples show scrolling DropDowns with different scroll styles applied on them. Please see Scroll Styles for more details.
The right example showcases using DropDown with a fixed size tray. For skinning DropDown and its options please view Using Button and Using ListBox for more details.
Please note that the DropDown component reserves the label, id and scroll pattern ids.
OUTPUT
SMXML
<!DOCTYPE composer SYSTEM "http://dtd.samplemath.com/smxml.dtd">
<composer>
<style>
<fill style="dropDownBackground" type="solid">
<color>0xdddddd</color>
</fill>
<fill style="dropDownItem" type="solid">
<color alpha="0">0xffffff</color>
</fill>
<fill style="dropDownItemOver" type="solid">
<color>0xb7e288</color>
</fill>
<fill style="dropDownItemSelected" 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>
<textformat style="listBoxText">
<color>0x555555</color>
<font>Helvetica Bold, Arial Bold, Verdana Bold</font>
<size>14</size>
</textformat>
</style>
<template>
<composer template="dropdownButtonSkin" width="100%" height="100%">
<box width="100%" height="100%" fill="dropDownItem" alpha="0"/>
<textblock x="0" right="2" width="14" height="100%" textformat="listBoxText"><![CDATA[v]]></textblock>
</composer>
<composer template="dropdownButtonSkinOver" width="100%" height="100%">
<box width="100%" height="100%" fill="dropDownItemOver" alpha=".1"/>
<textblock x="0" right="2" width="14" height="100%" textformat="listBoxText"><![CDATA[v]]></textblock>
</composer>
<composer template="dropdownButtonSkinSelected" width="100%" height="100%" alpha="0">
<box width="100%" height="100%" fill="dropDownItemSelected"/>
<textblock x="0" right="2" width="14" height="100%" textformat="listBoxText"><![CDATA[v]]></textblock>
</composer>
<composer id="___id___Composer" template="dropDownBackground" width="100%" height="100%">
<box width="100%" height="100%" fill="dropDownBackground"/>
<composer id="___id___Scroller" width="100%" height="100%" scroll="___scroll___"/>
</composer>
<composer id="___id___" template="dropDownItem" width="100%" height="20">
<box width="100%" height="100%" fill="dropDownItem"/>
<textblock x="20" y="1" width="-20" height="-2" textformat="listBoxText"><![CDATA[___label___]]></textblock>
</composer>
<composer id="___id___" template="dropDownItemOver" width="100%" height="20" visible="0">
<box width="100%" height="100%" fill="dropDownItemOver"/>
<textblock x="20" y="1" width="-20" height="-2" textformat="listBoxText"><![CDATA[___label___]]></textblock>
</composer>
<composer id="___id___" template="dropDownItemSelected" width="100%" height="20" visible="0">
<box width="100%" height="100%" fill="dropDownItemSelected"/>
<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>
</template>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<dropdown id="leftListBox" x="160" y="20" height="20" trayheight="120" width="120" scroll="scrollbarPersistent" buttonskin="dropdownButtonSkin" buttonskinover="dropdownButtonSkinOver" buttonskindown="dropdownButtonSkinSelected" listboxskin="dropDownBackground" itemskin="dropDownItem" itemskinover="dropDownItemOver" itemskinselected="dropDownItemSelected">
<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>
</dropdown>
<dropdown id="rightListBox" x="320" y="20" height="20" trayheight="120" width="120" scroll="selectBoxScroll" buttonskin="dropdownButtonSkin" buttonskinover="dropdownButtonSkinOver" buttonskindown="dropdownButtonSkinSelected" listboxskin="dropDownBackground" itemskin="dropDownItem" itemskinover="dropDownItemOver" itemskinselected="dropDownItemSelected">
<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>
</dropdown>
<dropdown id="radioButtons" x="480" y="20" height="20" trayheight="120" width="120" scroll="selectBoxScroll" buttonskin="dropdownButtonSkin" buttonskinover="dropdownButtonSkinOver" buttonskindown="dropdownButtonSkinSelected" listboxskin="dropDownBackground" itemskin="dropDownItem" itemskinover="dropDownItemOver" itemskinselected="dropDownItemSelected">
<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>
</dropdown>
</composer>
<composer>
<style>
<fill style="dropDownBackground" type="solid">
<color>0xdddddd</color>
</fill>
<fill style="dropDownItem" type="solid">
<color alpha="0">0xffffff</color>
</fill>
<fill style="dropDownItemOver" type="solid">
<color>0xb7e288</color>
</fill>
<fill style="dropDownItemSelected" 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>
<textformat style="listBoxText">
<color>0x555555</color>
<font>Helvetica Bold, Arial Bold, Verdana Bold</font>
<size>14</size>
</textformat>
</style>
<template>
<composer template="dropdownButtonSkin" width="100%" height="100%">
<box width="100%" height="100%" fill="dropDownItem" alpha="0"/>
<textblock x="0" right="2" width="14" height="100%" textformat="listBoxText"><![CDATA[v]]></textblock>
</composer>
<composer template="dropdownButtonSkinOver" width="100%" height="100%">
<box width="100%" height="100%" fill="dropDownItemOver" alpha=".1"/>
<textblock x="0" right="2" width="14" height="100%" textformat="listBoxText"><![CDATA[v]]></textblock>
</composer>
<composer template="dropdownButtonSkinSelected" width="100%" height="100%" alpha="0">
<box width="100%" height="100%" fill="dropDownItemSelected"/>
<textblock x="0" right="2" width="14" height="100%" textformat="listBoxText"><![CDATA[v]]></textblock>
</composer>
<composer id="___id___Composer" template="dropDownBackground" width="100%" height="100%">
<box width="100%" height="100%" fill="dropDownBackground"/>
<composer id="___id___Scroller" width="100%" height="100%" scroll="___scroll___"/>
</composer>
<composer id="___id___" template="dropDownItem" width="100%" height="20">
<box width="100%" height="100%" fill="dropDownItem"/>
<textblock x="20" y="1" width="-20" height="-2" textformat="listBoxText"><![CDATA[___label___]]></textblock>
</composer>
<composer id="___id___" template="dropDownItemOver" width="100%" height="20" visible="0">
<box width="100%" height="100%" fill="dropDownItemOver"/>
<textblock x="20" y="1" width="-20" height="-2" textformat="listBoxText"><![CDATA[___label___]]></textblock>
</composer>
<composer id="___id___" template="dropDownItemSelected" width="100%" height="20" visible="0">
<box width="100%" height="100%" fill="dropDownItemSelected"/>
<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>
</template>
<box id="background" width="100%" height="100%" alpha=".1" rounded="24"/>
<dropdown id="leftListBox" x="160" y="20" height="20" trayheight="120" width="120" scroll="scrollbarPersistent" buttonskin="dropdownButtonSkin" buttonskinover="dropdownButtonSkinOver" buttonskindown="dropdownButtonSkinSelected" listboxskin="dropDownBackground" itemskin="dropDownItem" itemskinover="dropDownItemOver" itemskinselected="dropDownItemSelected">
<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>
</dropdown>
<dropdown id="rightListBox" x="320" y="20" height="20" trayheight="120" width="120" scroll="selectBoxScroll" buttonskin="dropdownButtonSkin" buttonskinover="dropdownButtonSkinOver" buttonskindown="dropdownButtonSkinSelected" listboxskin="dropDownBackground" itemskin="dropDownItem" itemskinover="dropDownItemOver" itemskinselected="dropDownItemSelected">
<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>
</dropdown>
<dropdown id="radioButtons" x="480" y="20" height="20" trayheight="120" width="120" scroll="selectBoxScroll" buttonskin="dropdownButtonSkin" buttonskinover="dropdownButtonSkinOver" buttonskindown="dropdownButtonSkinSelected" listboxskin="dropDownBackground" itemskin="dropDownItem" itemskinover="dropDownItemOver" itemskinselected="dropDownItemSelected">
<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>
</dropdown>
</composer>
Skin Attributes
Skin attributes that can be set on a DropDown component.
| Attribute name | Description |
|---|---|
| buttonskin | The default state skin template for the DropDown button. |
| buttonskindown | The open state skin template for the DropDown button. |
| buttonskinover | The rollover state skin template for the DropDown button. |
| listboxskin | The default skin template for the ListBox component instance wrapped inside DropDown. |
| itemskin | The default state skin template for a DropDown option. |
| itemskinover | The rollover state skin template for a DropDown option. |
| itemskinselected | The selected state skin template for a DropDown option. |
Reserved Pattern IDs
Reserved pattern IDs used in DropDown template composition.
| Pattern ID | Description |
|---|---|
| id | The id of each DropDown option. |
| label | The label of each DropDown option. |
| scroll | The scroll style applied on the DropDown. |
Applying Styles
Style attributes that maybe used on a DropDown component.
| Style type | Attribute name | Description |
|---|---|---|
| filter | filter or filters | The filter(s) applied on the DropDown. |
| scroll | scroll | The scroll style applied on the DropDown. |
See the SMAF reference for more information on the DropDown component.
There are 5 comments on this page. [Display comments]