<?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: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 ardisia.utils.ColorUtils;
import components.colorPicker.WildColorPickerSkin;
public function creationComplete():void
{
}
protected function removedFromStageHandler(event:Event):void
{
}
]]>
</fx:Script>
<fx:Declarations>
<fx:Array id="basicDP">
<fx:Number>#FF0000</fx:Number>
<fx:Number>#00FF00</fx:Number>
<fx:Number>#0000FF</fx:Number>
<fx:Number>#FFFF00</fx:Number>
<fx:Number>#00FFFF</fx:Number>
<fx:Number>#FF00FF</fx:Number>
<fx:Number>#FF6600</fx:Number>
<fx:Number>#8000FF</fx:Number>
</fx:Array>
<fx:Array id="colorDescriptionsDP">
<fx:Object name="Red" color="#FF0000" />
<fx:Object name="Green" color="#00FF00" />
<fx:Object name="Dark Blue" color="#0000FF" />
<fx:Object name="Yellow" color="#FFFF00" />
<fx:Object name="Cyan" color="#00FFFF" />
<fx:Object name="Violet" color="#FF00FF" />
<fx:Object name="Orange" color="#FF6600" />
<fx:Object name="Purple" color="#8000FF" />
</fx:Array>
<fx:Object id="cursor" data="@Embed(source='ardisia/components/colorPicker/themes/assets/cursors/eyedropper.png')"/>
</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="ColorPicker Description"
description="Spark version of a color picker. Extended functionality over the Halo ColorPicker. Additional support for skinning, transparency, a color space picker, native cursors, and other visual and customization enhancements. Users can select any color displayed on the screen. See example #1."
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="Enable Transparency:">
<s:CheckBox id="showTranselect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to display the button for users to select transparent as the selected color."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Enable ColorSpacePicker:">
<s:CheckBox id="colorSpacePickerEnabledSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to display the button for users to open a ColorSpacePicker to select a color."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Display Text:">
<s:CheckBox id="showTextFieldSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to display the text field that displays the hex value for the focused or selected color or the text description of the color."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Text Field Editable:"
enabled="{showTextFieldSelect.selected}">
<s:CheckBox id="hexEditable"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to allow the user to edit the hex color text field."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Show Custom Cursor:">
<s:CheckBox id="showCursorSelect"
selected="true"
change="if(showCursorSelect.selected){
colorPicker1.setStyle('colorSelectorCursor', cursor.data);
colorPicker2.setStyle('colorSelectorCursor', cursor.data);
colorPicker3.setStyle('colorSelectorCursor', cursor.data);
colorPicker4.setStyle('colorSelectorCursor', cursor.data);
colorPicker5.setStyle('colorSelectorCursor', cursor.data);
} else{
colorPicker1.setStyle('colorSelectorCursor', null);
colorPicker2.setStyle('colorSelectorCursor', null);
colorPicker3.setStyle('colorSelectorCursor', null);
colorPicker4.setStyle('colorSelectorCursor', null);
colorPicker5.setStyle('colorSelectorCursor', null);
}"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Use a custom native cursor when hovering. Any custom cursor can be used, but an eyedropper is bundled."/>
</s:helpContent>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Web Safe</data:tabLabel>
<data:exampleDescription>Web safe colors only. Typical colors available in a color picker.</data:exampleDescription>
<data:toolbarContent>
<s:FormItem label="Enable Full Screen Color Selection:">
<s:CheckBox id="enableOutsideHoverColorSelectSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to allow users to select colors when hovering outside the color selector popup."/>
</s:helpContent>
</s:FormItem>
</data:toolbarContent>
<data:primaryContent>
<colorPicker:ColorPicker id="colorPicker1"
horizontalCenter="0" verticalCenter="0"
enableOutsideHoverColorSelect="{enableOutsideHoverColorSelectSelect.selected}"
showTransparency="{showTranselect.selected}"
showColorSpacePicker="{colorSpacePickerEnabledSelect.selected}"
showTextField="{showTextFieldSelect.selected}"
selectedColor="#AA0000"
editable="{hexEditable.selected}"/>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #2 -->
<data:PrimaryContentData>
<data:tabLabel>Grayscale</data:tabLabel>
<data:exampleDescription>210 color grayscale example. Grayscale colors retrieved from the ColorUtils class.</data:exampleDescription>
<data:primaryContent>
<colorPicker:ColorPicker id="colorPicker2"
verticalCenter="0" horizontalCenter="0"
showTransparency="{showTranselect.selected}"
showColorSpacePicker="{colorSpacePickerEnabledSelect.selected}"
showTextField="{showTextFieldSelect.selected}"
selectedColor="#CCCCCC"
dataProvider="{ColorUtils.getGreyScaleArray()}"
editable="{hexEditable.selected}"/>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #3 -->
<data:PrimaryContentData>
<data:tabLabel>Custom Colors</data:tabLabel>
<data:exampleDescription>Illustrates how the picker can display a custom array of colors.</data:exampleDescription>
<data:primaryContent>
<colorPicker:ColorPicker id="colorPicker3"
verticalCenter="0" horizontalCenter="0"
showTransparency="{showTranselect.selected}"
showColorSpacePicker="{colorSpacePickerEnabledSelect.selected}"
showTextField="{showTextFieldSelect.selected}"
dataProvider="{basicDP}"
selectedColor="#FFFF00"
editable="{hexEditable.selected}"/>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #4 -->
<data:PrimaryContentData>
<data:tabLabel>Custom Colors - Text Descriptions</data:tabLabel>
<data:exampleDescription>Illustrates how a custom array of colors can also display custom textual descriptions</data:exampleDescription>
<data:primaryContent>
<colorPicker:ColorPicker id="colorPicker4"
verticalCenter="0" horizontalCenter="0"
showTransparency="{showTranselect.selected}"
showColorSpacePicker="{colorSpacePickerEnabledSelect.selected}"
showTextField="{showTextFieldSelect.selected}"
selectedColor="#00FF00"
colorField="color"
labelField="name"
dataProvider="{colorDescriptionsDP}"
editable="{hexEditable.selected}"/>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #5 -->
<data:PrimaryContentData>
<data:tabLabel>Custom Skin</data:tabLabel>
<data:exampleDescription>The look and feel is completely controllable via the skin, even to make the picker hideously ugly like in this example.</data:exampleDescription>
<data:primaryContent>
<colorPicker:ColorPicker id="colorPicker5"
verticalCenter="0" horizontalCenter="0"
showTransparency="{showTranselect.selected}"
enableOutsideHoverColorSelect="true"
showColorSpacePicker="{colorSpacePickerEnabledSelect.selected}"
showTextField="{showTextFieldSelect.selected}"
editable="{hexEditable.selected}"
selectedColor="#FF0000"
skinClass="components.colorPicker.WildColorPickerSkin"/>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>