Created
December 28, 2011 09:46
-
-
Save nsdevaraj/1527361 to your computer and use it in GitHub Desktop.
Color Picker List Skin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" | |
xmlns:fb="http://ns.adobe.com/flashbuilder/2009" xmlns:local="*" alpha.disabled=".5" minWidth="24" | |
currentStateChange="if (currentState == 'open') prepOpenState()" xmlns:components="com.cognizant.awcoe.tailor.components.*"> | |
<!-- host component --> | |
<fx:Metadata> | |
<![CDATA[ | |
/** | |
* @copy spark.skins.spark.ApplicationSkin#hostComponent | |
*/ | |
[HostComponent("spark.components.ComboBox")] | |
]]> | |
</fx:Metadata> | |
<fx:Script fb:purpose="styling"> | |
<![CDATA[ | |
import spark.components.ComboBox; | |
import spark.events.IndexChangeEvent; | |
/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */ | |
static private const contentFill:Array = ["bgFill"]; | |
/** | |
* @private | |
*/ | |
override public function get contentItems():Array {return contentFill}; | |
/** | |
* @private | |
*/ | |
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void | |
{ | |
if (getStyle("borderVisible") == false) | |
{ | |
if (border) | |
border.visible = false; | |
if (background) | |
{ | |
background.left = background.top = background.right = background.bottom = 0; | |
} | |
if (swatchpanel) | |
{ | |
swatchpanel.left = swatchpanel.top = swatchpanel.right = swatchpanel.bottom = 0; | |
} | |
} | |
else | |
{ | |
if (border) | |
border.visible = true; | |
if (background) | |
{ | |
background.left = background.top = background.right = background.bottom = 1; | |
} | |
if (swatchpanel) | |
{ | |
swatchpanel.left = swatchpanel.top = swatchpanel.right = swatchpanel.bottom = 1; | |
} | |
} | |
if (dropShadow) | |
dropShadow.visible = getStyle("dropShadowVisible"); | |
openButton.setStyle("cornerRadius", getStyle("cornerRadius")); | |
if (borderStroke) | |
{ | |
borderStroke.color = getStyle("borderColor"); | |
borderStroke.alpha = getStyle("borderAlpha"); | |
} | |
super.updateDisplayList(unscaledWidth, unscaledHeight); | |
} | |
private function prepOpenState():void | |
{ | |
if (preview) | |
previewColor.color = hostComponent.selectedItem as uint; | |
} | |
public function handleEnter():void | |
{ | |
hostComponent.selectedItem = previewColor.color; | |
//hostComponent.closeDropDown(true); | |
hostComponent.dispatchEvent(new IndexChangeEvent(IndexChangeEvent.CHANGE)); | |
} | |
]]> | |
</fx:Script> | |
<s:states> | |
<s:State name="normal" /> | |
<s:State name="open" /> | |
<s:State name="disabled" /> | |
</s:states> | |
<!--- | |
The PopUpAnchor control that opens the drop-down list. | |
<p>In a custom skin class that uses transitions, set the | |
<code>itemDestructionPolicy</code> property to <code>none</code>.</p> | |
--> | |
<s:PopUpAnchor id="popUp" displayPopUp.normal="false" displayPopUp.open="true" includeIn="open" | |
left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto" | |
popUpPosition="below" popUpWidthMatchesAnchorWidth="false"> | |
<!--- | |
This includes borders, background colors, scrollers, and filters. | |
@copy spark.components.supportClasses.DropDownListBase#dropDown | |
--> | |
<components:FocusGroup id="dropDown" > | |
<!--- @private --> | |
<s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.45" distance="7" | |
angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/> | |
<!--- @private --> | |
<s:Rect id="border" left="0" right="0" top="0" bottom="0"> | |
<s:stroke> | |
<!--- border stroke @private --> | |
<s:SolidColorStroke id="borderStroke" weight="1"/> | |
</s:stroke> | |
</s:Rect> | |
<!-- fill --> | |
<!--- Defines the appearance of drop-down list's background fill. --> | |
<s:Rect id="background" left="1" right="1" top="1" bottom="1" > | |
<s:fill> | |
<!--- | |
The color of the drop down's background fill. | |
The default color is 0xFFFFFF. | |
--> | |
<s:SolidColor id="bgFill" color="0xFFFFFF" /> | |
</s:fill> | |
</s:Rect> | |
<s:VGroup id="swatchpanel" left="0" top="0" right="0" bottom="0" > | |
<s:HGroup> | |
<s:Rect id="preview" width="50" height="20" > | |
<s:fill> | |
<s:SolidColor id="previewColor" /> | |
</s:fill> | |
</s:Rect> | |
</s:HGroup> | |
<s:Group> | |
<s:Rect left="0" top="0" right="0" bottom="0" width="220" height="132" > | |
<s:fill> | |
<s:SolidColor color="0x0" /> | |
</s:fill> | |
</s:Rect> | |
<s:DataGroup id="dataGroup" left="0" top="0" right="0" bottom="0" width="220" height="132" > | |
<s:layout> | |
<s:TileLayout verticalGap="0" horizontalGap="0" requestedColumnCount="20" requestedRowCount="12"/> | |
</s:layout> | |
<s:itemRenderer> | |
<fx:Component> | |
<s:ItemRenderer rollOver="outerDocument.previewColor.color = uint(data);outerDocument.handleEnter()"> | |
<s:states> | |
<s:State name="normal" /> | |
<s:State name="hovered" /> | |
<s:State name="selected" /> | |
</s:states> | |
<s:Rect id="swatch" width="10" height="10"> | |
<s:fill> | |
<s:SolidColor color="{data}" /> | |
</s:fill> | |
<s:stroke> | |
<s:SolidColorStroke color="0xFFFF00" alpha.hovered="1" alpha="0" /> | |
</s:stroke> | |
</s:Rect> | |
</s:ItemRenderer> | |
</fx:Component> | |
</s:itemRenderer> | |
</s:DataGroup> | |
</s:Group> | |
</s:VGroup> | |
</components:FocusGroup> | |
</s:PopUpAnchor> | |
<!--- The default skin is DropDownListButtonSkin. | |
@copy spark.components.supportClasses.DropDownListBase#openButton | |
@see spark.skins.spark.DropDownListButtonSkin --> | |
<s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false" | |
skinClass="com.cognizant.awcoe.tailor.components.ColorPickerListButtonSkin" /> | |
<s:Rect id="currentColor" left="2" right="2" top="2" bottom="2" width="20" height="20" radiusX="2"> | |
<s:fill> | |
<s:SolidColor id="current" /> | |
</s:fill> | |
</s:Rect> | |
</s:SparkSkin> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment