<?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:mx="library://ns.adobe.com/flex/mx"
xmlns:separators="ardisia.components.separators.*"
xmlns:textInput="ardisia.components.textInput.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
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="Ardisia TextInput Description"
description="TextInput that adds support for an icon in the text input and a clear button that is displayed when the text property is non-null."
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="Hide Clear Button:">
<s:CheckBox id="hideClearButtonOnFocusOutSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="If true, the clear button will only be displayed if the component has focus and its 'text' property is not null. If false, the clear button will be displayed when the text is non-null, regardless of whether the input has focus or not."/>
</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="This 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>
<separators:HSeparator width="100%"/>
<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="5"/>
</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>TextInput Basic Example</data:tabLabel>
<data:exampleDescription>Example illustrates the clear button and icon support within the TextInput</data:exampleDescription>
<data:toolbarContent>
</data:toolbarContent>
<data:primaryContent>
<textInput:TextInput width="175"
horizontalCenter="0" verticalCenter="0"
hideClearButtonOnFocusOut="{hideClearButtonOnFocusOutSelect.selected}"
iconClass="{iconSelect.selectedItem.icon}"
prompt="Enter Text Here"
iconPaddingTop="{iconPaddingTopSelect.value}"
iconPaddingRight="{iconPaddingRightSelect.value}"
iconPaddingBottom="{iconPaddingBottomSelect.value}"
iconPaddingLeft="{iconPaddingLeftSelect.value}"/>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>