<?xml version="1.0" encoding="utf-8"?>
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:autoComplete="ardisia.components.autoComplete.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
public var countries:Array = ["Afghanistan","Albania","Algeria","Andorra","Angola","Antigua and Barbuda","Argentina","Armenia","Australia","Austria","Azerbaijan","Bahamas","Bahrain","Bangladesh","Barbados","Belarus","Belgium","Belize","Benin","Bhutan","Bolivia","Bosnia and Herzegovina","Botswana","Brazil","Brunei","Bulgaria","Burkina Faso","Burundi","Cambodia","Cameroon","Canada","Cape Verde","Central African Republic","Chad","Chile","China","Colombi","Comoros","Congo (Brazzaville)","Congo","Costa Rica","Cote d'Ivoire","Croatia","Cuba","Cyprus","Czech Republic","Denmark","Djibouti","Dominica","Dominican Republic","East Timor (Timor Timur)","Ecuador","Egypt","El Salvador","Equatorial Guinea","Eritrea","Estonia","Ethiopia","Fiji","Finland","France","Gabon","Gambia, The","Georgia","Germany","Ghana","Greece","Grenada","Guatemala","Guinea","Guinea-Bissau","Guyana","Haiti","Honduras","Hungary","Iceland","India","Indonesia","Iran","Iraq","Ireland","Israel","Italy","Jamaica","Japan","Jordan","Kazakhstan","Kenya","Kiribati","Korea, North","Korea, South","Kuwait","Kyrgyzstan","Laos","Latvia","Lebanon","Lesotho","Liberia","Libya","Liechtenstein","Lithuania","Luxembourg","Macedonia","Madagascar","Malawi","Malaysia","Maldives","Mali","Malta","Marshall Islands","Mauritania","Mauritius","Mexico","Micronesia","Moldova","Monaco","Mongolia","Morocco","Mozambique","Myanmar","Namibia","Nauru","Nepa","Netherlands","New Zealand","Nicaragua","Niger","Nigeria","Norway","Oman","Pakistan","Palau","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal","Qatar","Romania","Russia","Rwanda","Saint Kitts and Nevis","Saint Lucia","Saint Vincent","Samoa","San Marino","Sao Tome and Principe","Saudi Arabia","Senegal","Serbia and Montenegro","Seychelles","Sierra leone","Singapore","Slovakia","Slovenia","Solomon Islands","Somalia","South Africa","Spain","Sri Lanka","Sudan","Suriname","Swaziland","Sweden","Switzerland","Syria","Taiwan","Tajikistan","Tanzania","Thailand","Togo","Tonga","Trinidad and Tobago","Tunisia","Turkey","Turkmenistan","Tuvalu","Uganda","Ukraine","United Arab Emirates","United Kingdom","United States","Uruguay","Uzbekistan","Vanuatu","Vatican City","Venezuela","Vietnam","Yemen","Zambia","Zimbabwe" ];
public function creationComplete():void
{
}
protected function removedFromStageHandler(event:Event):void
{
}
]]>
</fx:Script>
<fx:Declarations>
</fx:Declarations>
<s:states>
<s:State name="stockholm" />
<s:State name="london" />
<s:State name="spark" />
</s:states>
<containers:DemoApplicationWrapper id="demoAppWrapper"
width="100%" height="100%"
westRegionTitle="AutoComplete Description"
description="The AutoComplete ComboBox will filter and display results as the user enters text into the ComboBox."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:expandingContainerContent>
<!--- expanding container #1 -->
<data:ExpandingContainerData>
<data:label>API</data:label>
<data:content>
<s:FormItem label="Auto Hide Clear:">
<s:CheckBox id="hideClearSelect"
selected="true" />
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="When true, on focusOut, even if text is still displayed in the text field, the optional clear button will be hidden."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Empty Message:">
<s:TextInput id="emptyMessageSelect"
width="100"
text="No Results"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="When the matched set is empty, this is the message that will be displayed in the ComboBox dropdown."/>
</s:helpContent>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
<!--- expanding container #2 -->
<data:ExpandingContainerData>
<data:label>Styling</data:label>
<data:content>
<s:FormItem label="Icon:">
<s:DropDownList id="iconSelect"
width="100"
requireSelection="true"
labelField="label"
selectedIndex="1">
<s:dataProvider>
<s:ArrayCollection>
<fx:Object label="None" icon="{null}" />
<fx:Object label="Search" icon="@Embed(source='icons/open-iconic-master/magnifying-glass-2x.png')" />
<fx:Object label="Paperclip" icon="@Embed(source='icons/open-iconic-master/paperclip-2x.png')" />
<fx:Object label="Camera" icon="@Embed(source='icons/open-iconic-master/camera-slr-2x.png')" />
</s:ArrayCollection>
</s:dataProvider>
</s:DropDownList>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Component can display bitmap content. Use this field to display a few sample icons. Also supports padding for the icon via custom styles. See the sliders below."/>
</s:helpContent>
</s:FormItem>
<s:FormHeading label="Icon Padding"/>
<s:FormItem enabled="{iconSelect.selectedIndex > 0}"
label="Top:">
<s:HSlider id="iconPaddingTopSelect"
width="100"
minimum="0" maximum="10" value="0"/>
</s:FormItem>
<s:FormItem enabled="{iconSelect.selectedIndex > 0}"
label="Right:">
<s:HSlider id="iconPaddingRightSelect"
width="100"
minimum="0" maximum="10" value="3"/>
</s:FormItem>
<s:FormItem enabled="{iconSelect.selectedIndex > 0}"
label="Bottom:">
<s:HSlider id="iconPaddingBottomSelect"
width="100"
minimum="0" maximum="10" value="0"/>
</s:FormItem>
<s:FormItem enabled="{iconSelect.selectedIndex > 0}"
label="Left:">
<s:HSlider id="iconPaddingLeftSelect"
width="100"
minimum="0" maximum="10" value="4"/>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Example</data:tabLabel>
<data:exampleDescription>Example that allows users to search a list of all the nations of the world. Results will be updated in real-time.</data:exampleDescription>
<data:primaryContent>
<s:HGroup top="100"
gap="40"
height="150"
horizontalCenter="0"
verticalAlign="justify">
<s:VGroup gap="20">
<s:VGroup>
<s:Label text="Select a Nation"
fontWeight="bold"/>
<s:Label text="Start typing to see filtered results..."/>
</s:VGroup>
<autoComplete:AutoComplete id="autoComplete"
width="175"
iconClass="{iconSelect.selectedItem.icon}"
emptySetMessage="{emptyMessageSelect.text}"
hideClearButtonFocusOut="{hideClearSelect.selected}"
dataProvider="{new ArrayCollection(countries)}"
horizontalCenter="0" verticalCenter="0"
iconPaddingTop="{iconPaddingTopSelect.value}"
iconPaddingRight="{iconPaddingRightSelect.value}"
iconPaddingBottom="{iconPaddingBottomSelect.value}"
iconPaddingLeft="{iconPaddingLeftSelect.value}"
change="if (autoComplete.selectedItem) {
selectedItemLabel.text = autoComplete.selectedItem
} else {
selectedItemLabel.text='No Selection'
}"/>
</s:VGroup>
<separators:VSeparator height="100%" />
<s:VGroup width="150"
horizontalAlign="justify"
gap="20">
<s:VGroup>
<s:Label text="Selected Item:"
fontWeight="bold"/>
<s:Label id="selectedItemLabel"
text="No Selection"/>
</s:VGroup>
</s:VGroup>
</s:HGroup>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>