<?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:iconButton="ardisia.components.iconButton.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:colorPicker="ardisia.components.colorPicker.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import mx.core.IVisualElementContainer;
import ardisia.components.iconButton.themes.spark.skins.IconButtonBlackSkin;
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="IconButton Description"
description="A button optimized to display an icon and display its label using a flyout animation. For the default skin, the color of the icon is automatically changed to black by default and to white on rollover via a ColorTransform filter in the skin."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Single Button Example</data:tabLabel>
<data:exampleDescription>A single IconButton. The icon changes color to white on rollover via a ColorTransform filter so only one icon is necessary.</data:exampleDescription>
<data:toolbarContent>
<s:HGroup gap="20">
<s:Form>
<s:FormHeading label="Properties"/>
<s:FormItem label="Label:">
<s:TextInput id="labelA"
width="100"
text="Button label goes here"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The label to display on hover."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Icon:">
<s:DropDownList id="iconSelectA"
width="100"
selectedIndex="0"
labelField="label">
<s:ArrayCollection>
<fx:Object label="cross" icon="@Embed(source='icons/cross.png')" />
<fx:Object label="plus" icon="@Embed(source='icons/plus.png')" />
<fx:Object label="arrow left" icon="@Embed(source='icons/arrow-left.png')" />
<fx:Object label="arrow right" icon="@Embed(source='icons/arrow-right.png')" />
<fx:Object label="arrow down" icon="@Embed(source='icons/arrow-down.png')" />
<fx:Object label="arrow up" icon="@Embed(source='icons/arrow-up.png')" />
<fx:Object label="globe" icon="@Embed(source='icons/open-iconic-master/globe-2x.png')" />
<fx:Object label="paperclip" icon="@Embed(source='icons/open-iconic-master/paperclip-2x.png')" />
</s:ArrayCollection>
</s:DropDownList>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Can set any arbitrary icon, but a few sample ones are provided here. By default, the skin will use a ColorTransform filter to make each icon solid black by default and solid white on rollover."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Icon Offset X:">
<s:HSlider id="iconOffsetXA"
width="100"
minimum="-10" maximum="10" value="0"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Custom style to offset the icon along the x axis."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Icon Offset Y:">
<s:HSlider id="iconOffsetYA"
width="100"
minimum="-10" maximum="10" value="0"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Custom style to offset the icon along the y axis"/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Show Flyout Label:">
<s:CheckBox id="showFlyoutSelect"
selected="true"/>
</s:FormItem>
</s:Form>
<s:Form enabled="{showFlyoutSelect.selected}">
<s:FormHeading label="Flyout Properties"/>
<s:FormItem label="Flyout Direction:">
<s:DropDownList id="flyoutDirectionASelect"
width="100"
selectedIndex="1">
<s:ArrayCollection>
<fx:String>above</fx:String>
<fx:String>right</fx:String>
<fx:String>below</fx:String>
<fx:String>left</fx:String>
</s:ArrayCollection>
</s:DropDownList>
</s:FormItem>
<s:FormItem label="Flyout Distance:">
<s:HSlider id="flyoutDistanceSelectA"
width="100"
minimum="0" maximum="200" value="20"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The number of pixels for the flyout label to move."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Duration:">
<s:HSlider id="durationSelectA"
width="100"
minimum="0" maximum="1000" value="500"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The duration of the flyout animation. Set to 0 to skip the animation altogether."/>
</s:helpContent>
</s:FormItem>
</s:Form>
<s:Form enabled="{showFlyoutSelect.selected}">
<s:FormHeading label="Flyout Styles"/>
<s:FormItem label="Flyout Background Color:">
<colorPicker:ColorPicker id="flyoutBackgroundColorSelectA"
selectedColor="#FFFFFF"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The background color of the flyout label."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Flyout Background Alpha:">
<s:HSlider id="flyoutBackgroundAlphaSelectA"
width="100"
minimum="0" maximum="1" value="1" snapInterval="0"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The background alpha of the flyout label."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Flyout Text Color:">
<colorPicker:ColorPicker id="flyoutColorSelectA"
selectedColor="#000000"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The color of the text for the flyout label."/>
</s:helpContent>
</s:FormItem>
</s:Form>
</s:HGroup>
</data:toolbarContent>
<data:primaryContent>
<iconButton:IconButton horizontalCenter="0" verticalCenter="0"
icon="{iconSelectA.selectedItem.icon}"
label="{labelA.text}"
iconOffsetX="{iconOffsetXA.value}"
iconOffsetY="{iconOffsetYA.value}"
flyoutBackgroundColor="{flyoutBackgroundColorSelectA.selectedColor}"
flyoutBackgroundAlpha="{flyoutBackgroundAlphaSelectA.value}"
flyoutColor="{flyoutColorSelectA.selectedColor}"
duration="{durationSelectA.value}"
showFlyoutLabel="{showFlyoutSelect.selected}"
flyoutDirection="{flyoutDirectionASelect.selectedItem}"
flyoutDistance="{flyoutDistanceSelectA.value}"/>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #2 -->
<data:PrimaryContentData>
<data:tabLabel>Multiple Buttons Example</data:tabLabel>
<data:exampleDescription>Example of multiple IconButtons each with a different value for the 'flyoutDirection' property.</data:exampleDescription>
<data:primaryContent>
<s:HGroup horizontalCenter="0" verticalCenter="0">
<iconButton:IconButton icon="@Embed(source='icons/arrow-left.png')"
label="Flyout label for the button"
flyoutDirection="left"/>
<iconButton:IconButton icon="@Embed(source='icons/arrow-up.png')"
label="Flyout label for the button"
flyoutDirection="above"/>
<iconButton:IconButton icon="@Embed(source='icons/arrow-down.png')"
label="Flyout label for the button"
flyoutDirection="below"/>
<iconButton:IconButton icon="@Embed(source='icons/arrow-right.png')"
label="Flyout label for the button"
flyoutDirection="right"/>
</s:HGroup>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #3 -->
<data:PrimaryContentData>
<data:tabLabel>Overflow Example</data:tabLabel>
<data:exampleDescription>Example of how the flyout direction will flip if the label will overflow the screen. For this example, the 'flyoutDirection' property is set to 'right', but since it will overflow the screen, the direction is automatically flipped to 'left'.</data:exampleDescription>
<data:primaryContent>
<iconButton:IconButton verticalCenter="0"
right="10"
icon="@Embed(source='icons/cross.png')"
label="Flyout direction automatically flipped from right to left to avoid screen overflow"
flyoutDirection="right"/>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #4 -->
<data:PrimaryContentData>
<data:tabLabel>Black Style</data:tabLabel>
<data:exampleDescription>The IconButton can be customized via Spark skinning. For this example, the color transform applied to the icon on rollover is black instead of white like in the earlier examples.</data:exampleDescription>
<data:primaryContent>
<iconButton:IconButton id="blackIconButtonA"
verticalCenter="0" horizontalCenter="0"
icon="@Embed(source='icons/arrow-left.png')"
label="Different color transform on this button."
skinClass="ardisia.components.iconButton.themes.spark.skins.IconButtonBlackSkin"/>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>