flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From ha...@apache.org
Subject [1/2] git commit: Added dataProvider and no color support to Color Picker
Date Fri, 05 Apr 2013 10:58:33 GMT
Updated Branches:
  refs/heads/develop 266fe322c -> 66325004f


Added dataProvider and no color support to Color Picker


Project: http://git-wip-us.apache.org/repos/asf/flex-sdk/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-sdk/commit/c6846f8b
Tree: http://git-wip-us.apache.org/repos/asf/flex-sdk/tree/c6846f8b
Diff: http://git-wip-us.apache.org/repos/asf/flex-sdk/diff/c6846f8b

Branch: refs/heads/develop
Commit: c6846f8b74ff8b597c192e7d470cce60db65ad2d
Parents: 266fe32
Author: Harbs <harbs@in-tools.com>
Authored: Fri Apr 5 13:50:15 2013 +0300
Committer: Harbs <harbs@in-tools.com>
Committed: Fri Apr 5 13:50:15 2013 +0300

----------------------------------------------------------------------
 .../src/spark/components/ColorPicker.as            |  430 +++++++++++++--
 .../src/spark/events/ColorChangeEvent.as           |    7 +-
 .../src/spark/skins/ColorPickerSkin.mxml           |  453 +++++++++------
 3 files changed, 656 insertions(+), 234 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/c6846f8b/frameworks/projects/experimental/src/spark/components/ColorPicker.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/experimental/src/spark/components/ColorPicker.as b/frameworks/projects/experimental/src/spark/components/ColorPicker.as
index 9658b5d..d4ad1a5 100644
--- a/frameworks/projects/experimental/src/spark/components/ColorPicker.as
+++ b/frameworks/projects/experimental/src/spark/components/ColorPicker.as
@@ -19,16 +19,18 @@
 package spark.components {
     import flash.display.DisplayObject;
     import flash.events.Event;
-
+    
     import mx.collections.IList;
+    import mx.events.FlexEvent;
     import mx.graphics.SolidColor;
-
+    
     import spark.events.ColorChangeEvent;
     import spark.events.DropDownEvent;
+    import spark.primitives.Line;
     import spark.utils.ColorPickerUtil;
 
     /**
-     * Dispatched when a color is choosed
+     * Dispatched when a color is chosen
      *
      *  @langversion 3.0
      *  @playerversion Flash 10.1
@@ -37,13 +39,22 @@ package spark.components {
      */
     [Event(name="choose", type="spark.events.ColorChangeEvent")]
     /**
-     * Dispatched when a color is hovered. Might be usefull in 'preview' situations
+     * Dispatched when a null color is chosen. Useful for removing color.
      *
      *  @langversion 3.0
      *  @playerversion Flash 10.1
      *  @playerversion AIR 2.5
      *  @productversion Flex 4.5
      */
+	[Event(name="nocolor", type="spark.events.ColorChangeEvent")]
+	/**
+	 * Dispatched when a color is hovered. Might be usefull in 'preview' situations
+	 *
+	 *  @langversion 3.0
+	 *  @playerversion Flash 10.1
+	 *  @playerversion AIR 2.5
+	 *  @productversion Flex 4.5
+	 */
     [Event(name="hover", type="spark.events.ColorChangeEvent")]
     /**
      *  @langversion 3.0
@@ -64,7 +75,9 @@ package spark.components {
          */
         [SkinPart(required="true")]
         public var solidColor:SolidColor;
-
+		
+		[SkinPart(required="false")]
+		public var noColorOrnament:Line;
         /**
          *  @langversion 3.0
          *  @playerversion Flash 10.1
@@ -73,7 +86,14 @@ package spark.components {
          */
         public function ColorPicker() {
             super();
+			if (!isModelInited)
+				loadDefaultPalette();
+
         }
+		/**
+		 *  @private
+		 */
+		private var indexFlag:Boolean = false;
 
         /**
          * Upon children creation, we're setting the dataprovider to the colors list
@@ -85,8 +105,6 @@ package spark.components {
          */
         override protected function childrenCreated():void {
             super.childrenCreated();
-            var util:ColorPickerUtil = new ColorPickerUtil();
-            super.dataProvider = ColorPickerUtil.getColorsList();
             labelFunction = blankLabelFunction;
             labelToItemFunction = colorFunction;
             openOnInput = false;
@@ -126,13 +144,42 @@ package spark.components {
          *  @productversion Flex 4.5
          */
         private function onColorChange(event:Event):void {
+			if(selectedItem === null){
+				solidColor.color = getColor(-1);
+				if(noColorOrnament)
+					noColorOrnament.visible = true;
+				dispatchEvent(new ColorChangeEvent(ColorChangeEvent.NO_COLOR,0));
+				return;
+			}
+			var newColor:uint = getColor(selectedIndex);
             if (solidColor) {
-                solidColor.color = selectedItem;
-                dispatchEvent(new ColorChangeEvent(ColorChangeEvent.CHOOSE, selectedItem));
+                solidColor.color = newColor;
+				if(noColorOrnament)
+					noColorOrnament.visible = false;
             }
+			var ev:ColorChangeEvent = new ColorChangeEvent(ColorChangeEvent.CHOOSE, newColor);
+			if(typeof(selectedItem) == "object"){
+				ev.colorObject = selectedItem;
+			}
+			dispatchEvent(ev);
         }
 
-        /**
+		/**
+		 *  @private
+		 *  The dataProvider for the ColorPicker control.
+		 *  The default dataProvider is an Array that includes all
+		 *  the web-safe colors.
+		 *
+		 */
+		override public function set dataProvider(value:IList):void
+		{
+			super.dataProvider = value;
+			
+			isModelInited = true;
+			
+		}
+
+/*        /**
          * We never allow the dataProvider to be set
          *
          *  @langversion 3.0
@@ -140,10 +187,11 @@ package spark.components {
          *  @playerversion AIR 2.5
          *  @productversion Flex 4.5
          */
+/*
         override public function set dataProvider(value:IList):void {
 
         }
-
+*/
         /**
          * Initialization of the selected color
          *
@@ -155,9 +203,13 @@ package spark.components {
         override protected function partAdded(partName:String, instance:Object):void {
             super.partAdded(partName, instance);
             if (instance == solidColor) {
-                solidColor.color = selectedItem;
-            }
-        }
+                solidColor.color = selectedColor;
+            } else if(instance == textInput){
+				textInput.editable = editable;
+			} else if(instance == noColorOrnament){
+				noColorOrnament.visible = selectedItem === null;
+			}
+		}
 
         /**
          *  @langversion 3.0
@@ -192,33 +244,331 @@ package spark.components {
             super.dropDownController_closeHandler(event);
         }
 
-        /**
-         *  @langversion 3.0
-         *  @playerversion Flash 10.1
-         *  @playerversion AIR 2.5
-         *  @productversion Flex 4.5
-         */
-        override public function set selectedItem(value:*):void {
-            super.selectedItem = value;
-            if (solidColor) {
-                solidColor.color = value;
-            }
-        }
+		//----------------------------------
+		//  selectedColor
+		//----------------------------------
+		
+		/**
+		 *  @private
+		 *  Storage for the selectedColor property.
+		 */
+		private var _selectedColor:uint = 0x000000;
+		
+		[Bindable("change")]
+		[Bindable("valueCommit")]
+		[Inspectable(category="General", defaultValue="0", format="Color")]
+		
+		/**
+		 *  The value of the currently selected color in the
+		 *  SwatchPanel object. 
+		 *  In the &lt;s:ColorPicker&gt; tag only, you can set this property to 
+		 *  a standard string color name, such as "blue".
+		 *  If the dataProvider contains an entry for black (0x000000), the
+		 *  default value is 0; otherwise, the default value is the color of
+		 *  the item at index 0 of the data provider.
+		 *
+		 *  @helpid 4932
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 9
+		 *  @playerversion AIR 1.1
+		 *  @productversion Flex 3
+		 */
+		public function get selectedColor():uint
+		{
+			return _selectedColor;
+		}
+		
+		/**
+		 *  @private
+		 */
+		public function set selectedColor(value:uint):void
+		{
+			if (!indexFlag)
+			{
+				super.selectedIndex = findColorByName(value);
+			}
+			else
+			{
+				indexFlag = false;
+			}
+			
+			if (value != selectedColor)
+			{
+				_selectedColor = value;
+				
+				//updateColor(value);
+				
+				if (solidColor){
+					solidColor.color = value;
+					dispatchEvent(new FlexEvent(FlexEvent.VALUE_COMMIT));
+				}
+				if(noColorOrnament){
+					if(selectedIndex < 0){
+						noColorOrnament.visible = false;
+					} else {
+						noColorOrnament.visible = dataProvider.getItemAt(selectedIndex) === null;
+					}
+				}
+			}
+			
+		}
 
-        /**
-         * Duplicate of selectedItem property, just for naming to be right
-         *
-         *  @langversion 3.0
-         *  @playerversion Flash 10.1
-         *  @playerversion AIR 2.5
-         *  @productversion Flex 4.5
-         */
-        public function set selectedColor(value:uint):void {
-            selectedItem = value;
-        }
+		//----------------------------------
+		//  editable
+		//----------------------------------
+		
+		[Bindable("editableChanged")]
+		[Inspectable(category="General", defaultValue="true")]
+		
+		/**
+		 *  @private
+		 */
+		private var _editable:Boolean = true;
+		
+		/**
+		 *  @private
+		 *  Specifies whether the user can type a hexadecimal color value
+		 *  in the text box.
+		 *
+		 *  @default true
+		 *  @helpid 4930
+		 */
+		public function get editable():Boolean
+		{
+			return _editable;
+		}
+		
+		/**
+		 *  @private
+		 */
+		public function set editable(value:Boolean):void
+		{
+			_editable = value;
+			
+			if (textInput)
+				textInput.editable = value;
+			
+			dispatchEvent(new Event("editableChanged"));
+		}
+		
+		//----------------------------------
+		//  selectedIndex
+		//----------------------------------
+		
+		[Bindable("change")]
+		[Bindable("collectionChange")]
+		[Inspectable(defaultValue="0")]
+		
+		/**
+		 *  Index in the dataProvider of the selected item in the
+		 *  SwatchPanel object.
+		 *  Setting this property sets the selected color to the color that
+		 *  corresponds to the index, sets the selected index in the drop-down
+		 *  swatch to the <code>selectedIndex</code> property value, 
+		 *  and displays the associated label in the text box.
+		 *  The default value is the index corresponding to 
+		 *  black(0x000000) color if found, else it is 0.
+		 *
+		 *  @helpid 4931
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 9
+		 *  @playerversion AIR 1.1
+		 *  @productversion Flex 3
+		 */
+		override public function set selectedIndex(value:int):void
+		{
+			if ((selectedIndex != -1 || !isNaN(selectedColor)) &&
+				value != selectedIndex)
+			{
+				if (value >= 0)
+				{
+					indexFlag = true;
+					selectedColor = getColor(value);
+					// Call super in mixed-in DataSelector
+					super.selectedIndex = value;
+				}
+				
+				if (solidColor)
+					solidColor.color = selectedColor;
+				if(noColorOrnament){
+					noColorOrnament.visible = dataProvider.getItemAt(value) === null;
+				}
+			}
+		}
+		
+		//----------------------------------
+		//  selectedItem
+		//----------------------------------
+		
+		[Bindable("change")]
+		[Bindable("collectionChange")]
+		[Inspectable(defaultValue="0")]
+		
+		/**
+		 *  @private
+		 *  If the dataProvider is a complex object, this property is a
+		 *  reference to the selected item in the SwatchPanel object.
+		 *  If the dataProvider is an Array of color values, this
+		 *  property is the selected color value.
+		 *  If the dataProvider is a complex object, modifying fields of
+		 *  this property modifies the dataProvider and its views.
+		 *
+		 *  <p>If the dataProvider is a complex object, this property is
+		 *  read-only. You cannot change its value directly.
+		 *  If the dataProvider is an Array of hexadecimal color values,
+		 *  you can change this value directly. 
+		 *  The default value is undefined for complex dataProviders;
+		 *  0 if the dataProvider is an Array of color values.
+		 *
+		 */
+		override public function set selectedItem(value:*):void
+		{
+			if (value != selectedItem)
+			{
+				// Call super in mixed-in DataSelector
+				super.selectedItem = value;
+				
+				if (typeof(value) == "object")
+					selectedColor = Number(value[colorField]);
+				else if (typeof(value) == "number")
+					selectedColor = Number(value);
+				
+				indexFlag = true;
+				
+				if (solidColor)
+					solidColor.color = selectedColor;
+			}
+		}
+
+		//----------------------------------
+		//  colorField
+		//----------------------------------
+		
+		/**
+		 *  @private
+		 *  Storage for the colorField property.
+		 */
+		private var _colorField:String = "color";
+		
+		[Bindable("colorFieldChanged")]
+		[Inspectable(category="Data", defaultValue="color")]
+		
+		/**
+		 *  Name of the field in the objects of the dataProvider Array that
+		 *  specifies the hexadecimal values of the colors that the swatch
+		 *  panel displays.
+		 *
+		 *  <p>If the dataProvider objects do not contain a color
+		 *  field, set the <code>colorField</code> property to use the correct field
name.
+		 *  This property is available, but not meaningful, if the
+		 *  dataProvider is an Array of hexadecimal color values.</p>
+		 *
+		 *  @default "color"
+		 *  @helpid 4927
+		 *  
+		 *  @langversion 3.0
+		 *  @playerversion Flash 9
+		 *  @playerversion AIR 1.1
+		 *  @productversion Flex 3
+		 */
+		public function get colorField():String
+		{
+			return _colorField;
+		}
+		
+		/**
+		 *  @private
+		 */
+		public function set colorField(value:String):void
+		{
+			_colorField = value;
+			
+			dispatchEvent(new Event("colorFieldChanged"));
+		}
+
+		/**
+		 *  @private
+		 *  Load Default Palette
+		 */
+		private function loadDefaultPalette():void
+		{
+			// Initialize default swatch list
+			if (!dataProvider || dataProvider.length < 1)
+			{
+				dataProvider = ColorPickerUtil.getColorsList();
+
+			}
+			//selectedIndex = findColorByName(selectedColor);
+		}
+
+		
+		/**
+		 *  @public
+		 *  Find Color by Name
+		 */
+		public function findColorByName(name:Number):int
+		{
+			if (name == getColor(selectedIndex))
+				return selectedIndex;
+			
+			var n:int = dataProvider.length;
+			for (var i:int = 0; i < dataProvider.length; i++)
+			{
+				if (name == getColor(i))
+					return i;
+			}
+			
+			return -1;
+		}
+		
+		/**
+		 *  @public
+		 *  Get the color value of a color object or color value
+		 */
+		public function getColorValue(color:*):uint
+		{
+			return Number(typeof(color) == "object" && color!=null ? color[colorField] : color);
+		}
+
+		/**
+		 *  @public
+		 *  Get the color name of a color object
+		 */
+		public function getColorName(color:*):String
+		{
+			if(typeof(color) == "object"){
+				if(color){
+					return color[labelField];
+				}
+				return "";
+			}
+			return ColorPickerUtil.uint2hex(color as uint);
+		}
+		
+		/**
+		 *  @private
+		 */
+		private var isModelInited:Boolean = false;
+
+		/**
+		 *  @private
+		 *  Get Color Value
+		 */
+		private function getColor(location:int):Number
+		{
+			if (!dataProvider || dataProvider.length < 1 ||
+				location < 0 || location >= dataProvider.length)
+			{
+				return -1;
+			}
+			var item:* = dataProvider.getItemAt(location);
+			if(typeof(item) == "object"){
+				return item === null ? -1 : Number(item[colorField]);
+			}
+			return Number(item);
+		}
 
-        public function get selectedColor():uint {
-            return selectedItem;
-        }
     }
 }

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/c6846f8b/frameworks/projects/experimental/src/spark/events/ColorChangeEvent.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/experimental/src/spark/events/ColorChangeEvent.as b/frameworks/projects/experimental/src/spark/events/ColorChangeEvent.as
index fac9358..5bae91f 100644
--- a/frameworks/projects/experimental/src/spark/events/ColorChangeEvent.as
+++ b/frameworks/projects/experimental/src/spark/events/ColorChangeEvent.as
@@ -25,10 +25,11 @@ package spark.events
 	public class ColorChangeEvent extends Event
 	{
 		public static const CHOOSE:String = "choose";
-
+		public static const NO_COLOR:String = "nocolor";
 		public static const HOVER:String = "hover";
 
 		public var color : uint;
+		public var colorObject:Object;
 
 		public function ColorChangeEvent(type:String, aColor : uint, bubbles:Boolean=false, cancelable:Boolean=false)
 		{
@@ -47,7 +48,9 @@ package spark.events
 		 */
 		override public function clone():Event
 		{
-			return new ColorChangeEvent(type, color, bubbles, cancelable);
+			var ev:ColorChangeEvent = new ColorChangeEvent(type, color, bubbles, cancelable);
+			ev.colorObject = colorObject;
+			return ev;
 		}
 	}
 }

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/c6846f8b/frameworks/projects/experimental/src/spark/skins/ColorPickerSkin.mxml
----------------------------------------------------------------------
diff --git a/frameworks/projects/experimental/src/spark/skins/ColorPickerSkin.mxml b/frameworks/projects/experimental/src/spark/skins/ColorPickerSkin.mxml
index d40ce0b..21e15cb 100644
--- a/frameworks/projects/experimental/src/spark/skins/ColorPickerSkin.mxml
+++ b/frameworks/projects/experimental/src/spark/skins/ColorPickerSkin.mxml
@@ -1,202 +1,271 @@
 <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" alpha.disabled=".5" minWidth="24"
-             currentStateChange="onStateChange(event)">
-    <!--
-    ////////////////////////////////////////////////////////////////////////////////
-    //
-    //  Licensed to the Apache Software Foundation (ASF) under one or more
-    //  contributor license agreements.  See the NOTICE file distributed with
-    //  this work for additional information regarding copyright ownership.
-    //  The ASF licenses this file to You under the Apache License, Version 2.0
-    //  (the "License"); you may not use this file except in compliance with
-    //  the License.  You may obtain a copy of the License at
-    //
-    //      http://www.apache.org/licenses/LICENSE-2.0
-    //
-    //  Unless required by applicable law or agreed to in writing, software
-    //  distributed under the License is distributed on an "AS IS" BASIS,
-    //  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-    //  See the License for the specific language governing permissions and
-    //  limitations under the License.
-    //
-    ////////////////////////////////////////////////////////////////////////////////
-    @author Bogdan Dinu (http://www.badu.ro)
-    -->
-    <fx:Metadata>
+			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled=".5" minWidth="24"
+			 currentStateChange="onStateChange(event)">
+	<!--
+	////////////////////////////////////////////////////////////////////////////////
+	//
+	//  Licensed to the Apache Software Foundation (ASF) under one or more
+	//  contributor license agreements.  See the NOTICE file distributed with
+	//  this work for additional information regarding copyright ownership.
+	//  The ASF licenses this file to You under the Apache License, Version 2.0
+	//  (the "License"); you may not use this file except in compliance with
+	//  the License.  You may obtain a copy of the License at
+	//
+	//      http://www.apache.org/licenses/LICENSE-2.0
+	//
+	//  Unless required by applicable law or agreed to in writing, software
+	//  distributed under the License is distributed on an "AS IS" BASIS,
+	//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+	//  See the License for the specific language governing permissions and
+	//  limitations under the License.
+	//
+	////////////////////////////////////////////////////////////////////////////////
+	@author Bogdan Dinu (http://www.badu.ro)
+	-->
+	<fx:Metadata>
 		<![CDATA[
-        [HostComponent("spark.components.ColorPicker")]
-        ]]>
+		[HostComponent("spark.components.ColorPicker")]
+		]]>
 	</fx:Metadata>
-    <fx:Declarations>
-        <fx:Component id="colorItemRenderer">
-            <s:ItemRenderer rollOver="onRolledOver(event)">
-                <fx:Script>
+	<fx:Declarations>
+		<fx:Component id="colorItemRenderer">
+			<s:ItemRenderer rollOver="onRolledOver(event)" dataChange="onDataChange()">
+				<fx:Script>
 					<![CDATA[
-                    import spark.events.ColorChangeEvent;
-                    import spark.utils.ColorPickerUtil;
-
-                    protected function onRolledOver(event:MouseEvent):void {
-                        outerDocument.previewColor.color = uint(data);
-                        outerDocument.previewTextInput.text = ColorPickerUtil.uint2hex(uint(data));
-                        outerDocument.hostComponent.dispatchEvent(new ColorChangeEvent(ColorChangeEvent.HOVER,
uint(data)));
-                    }
-                    ]]>
+						import mx.events.FlexEvent;
+						
+						import spark.events.ColorChangeEvent;
+						import spark.utils.ColorPickerUtil;
+						
+						[Bindable]private var color:uint;
+						[Bindable]private var noneColor:Boolean;
+						protected function onRolledOver(event:MouseEvent):void
+						{
+							var cVal:uint = outerDocument.hostComponent.getColorValue(data);
+							outerDocument.previewColor.color = cVal;
+							outerDocument.popupTextInput.text = outerDocument.hostComponent.getColorName(data);
+							var ev:ColorChangeEvent = new ColorChangeEvent(ColorChangeEvent.HOVER, cVal);
+							if(typeof(data) == "object"){
+								ev.colorObject = data;
+							}
+							outerDocument.hostComponent.dispatchEvent(ev);
+						}
+						
+						protected function onDataChange():void
+						{
+							if(data === null){
+								// draw a no-color square
+								color = 0xFFFFFF;
+								noneColor = true;
+							} else {
+								color = outerDocument.hostComponent.getColorValue(data);
+								noneColor = false;
+							}
+						}
+						
+					]]>
 				</fx:Script>
-                <s:states>
-                    <s:State name="normal"/>
-                    <s:State name="hovered"/>
-                    <s:State name="selected"/>
-                </s:states>
-                <s:Rect 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>
-    </fx:Declarations>
-    <fx:Script fb:purpose="styling">
+				<s:states>
+					<s:State name="normal"/>
+					<s:State name="hovered"/>
+					<s:State name="selected"/>
+				</s:states>
+				<s:Rect width="14" height="14">
+					<s:fill>
+						<s:SolidColor color="{color}"/>
+					</s:fill>
+					<s:stroke>
+						<s:SolidColorStroke color="0xFFFF00" alpha.hovered="1" alpha="0"/>
+					</s:stroke>
+				</s:Rect>
+				<s:Line xFrom="1" xTo="13" yFrom="1" yTo="13" visible="{noneColor}">
+					<s:stroke>
+						<s:SolidColorStroke color="0xFF0000" weight="2"/>
+					</s:stroke>
+				</s:Line>
+			</s:ItemRenderer>
+		</fx:Component>
+	</fx:Declarations>
+	<fx:Script fb:purpose="styling">
 		<![CDATA[
-        import mx.events.FlexEvent;
-        import mx.events.StateChangeEvent;
-
-        import spark.events.ColorChangeEvent;
-        import spark.events.TextOperationEvent;
-        import spark.utils.ColorPickerUtil;
-
-        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 onEnterKey(e:FlexEvent):void {
-            hostComponent.selectedItem = previewColor.color;
-            hostComponent.closeDropDown(true);
-            hostComponent.dispatchEvent(new ColorChangeEvent(ColorChangeEvent.CHOOSE, previewColor.color));
-        }
+			import mx.events.FlexEvent;
+			import mx.events.StateChangeEvent;
+			
+			import spark.events.ColorChangeEvent;
+			import spark.events.TextOperationEvent;
+			import spark.utils.ColorPickerUtil;
+			
+			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 onEnterKey(e:FlexEvent):void
+			{
+				hostComponent.selectedColor = previewColor.color;
+				hostComponent.closeDropDown(true);
+				var ev:ColorChangeEvent = new ColorChangeEvent(ColorChangeEvent.CHOOSE, previewColor.color);
+				if(typeof(null) == "object"){
+					ev.colorObject = null;
+				}
 
-        protected function onStateChange(event:StateChangeEvent):void {
-            if (currentState == 'open') {
-                if (preview) {
-                    previewColor.color = hostComponent.selectedItem as uint;
-                }
-                previewTextInput.callLater(previewTextInput.setFocus);
-                previewTextInput.text = ColorPickerUtil.uint2hex(previewColor.color);
-            }
-        }
+				hostComponent.dispatchEvent(ev);
+			}
+			
+			protected function onStateChange(event:StateChangeEvent):void
+			{
+				if (currentState == 'open') {
+					if (preview) {
+						previewColor.color = hostComponent.selectedColor;
+					}
+					popupTextInput.callLater(popupTextInput.setFocus);
+					popupTextInput.text = hostComponent.getColorName(hostComponent.selectedItem);
+				}
+			}
 
-        protected function onPreviewTextInputChange(event:TextOperationEvent):void {
-            previewColor.color = uint('0x' + previewTextInput.text);
-        }
-        ]]>
+			protected function onPreviewTextInputChange(event:TextOperationEvent):void
+			{
+				var color:String = TextInput(event.target).text;
+				if (color.charAt(0) == "#"){
+					popupTextInput.maxChars = 7;
+					color = "0x"+color.substring(1);
+				}
+				else if (color.substring(0,2) == "0x"){
+					popupTextInput.maxChars = 8;
+				}
+				else{
+					popupTextInput.maxChars = 6;
+					color = "0x"+color;
+				}
+				previewColor.color = Number(color);
+			}
+			
+			private function onKeyDown(ev:KeyboardEvent):void
+			{
+				if ((ev.ctrlKey && ev.keyCode == Keyboard.UP) ||
+					ev.keyCode == Keyboard.ESCAPE)
+				{
+					if (currentState == 'open'){
+						hostComponent.closeDropDown(false);
+					}
+				}
+			}
+			
+		]]>
 	</fx:Script>
-
-    <s:states>
-        <s:State name="normal"/>
-        <s:State name="open"/>
-        <s:State name="disabled"/>
-    </s:states>
-
-    <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">
-
-        <s:Group id="dropDown">
-            <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"/>
-            <s:Rect id="border" left="0" right="0" top="0" bottom="0">
-                <s:stroke>
-                    <s:SolidColorStroke id="borderStroke" weight="1"/>
-                </s:stroke>
-            </s:Rect>
-
-            <s:Rect id="background" left="1" right="1" top="1" bottom="1">
-                <s:fill>
-                    <s:SolidColor id="bgFill" color="0x1F1F1F"/>
-                </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:TextInput id="previewTextInput" restrict="0123456789abcdefABCDEF"
-                                 change="onPreviewTextInputChange(event)"
-                                 enter="onEnterKey(event)"/>
-                </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"
-                                 itemRenderer="{colorItemRenderer}">
-                        <s:layout>
-                            <s:TileLayout verticalGap="0" horizontalGap="0"
-                                          requestedColumnCount="20"
-                                          requestedRowCount="12" useVirtualLayout="false"/>
-                        </s:layout>
-                    </s:DataGroup>
-                </s:Group>
-            </s:VGroup>
-        </s:Group>
-    </s:PopUpAnchor>
-
-    <s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false"
-              skinClass="spark.skins.ColorPickerButtonSkin"/>
-
-    <s:Rect left="2" right="2" top="2" bottom="2" width="20" height="20" radiusX="2">
-        <s:fill>
-            <s:SolidColor id="solidColor"/>
-        </s:fill>
-    </s:Rect>
-
+	
+	<s:states>
+		<s:State name="normal"/>
+		<s:State name="open"/>
+		<s:State name="disabled"/>
+	</s:states>
+	
+	<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">
+		
+		<s:Group id="dropDown">
+			<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"/>
+			<s:Rect id="border" left="0" right="0" top="0" bottom="0">
+				<s:stroke>
+					<s:SolidColorStroke id="borderStroke" weight="1"/>
+				</s:stroke>
+			</s:Rect>
+			
+			<s:Rect id="background" left="1" right="1" top="1" bottom="1">
+				<s:fill>
+					<s:SolidColor id="bgFill" color="0x1F1F1F"/>
+				</s:fill>
+			</s:Rect>
+			<s:VGroup id="swatchpanel" left="0" top="0" right="0" bottom="0" gap="2">
+				<s:HGroup>
+					<s:Rect id="preview" width="50" height="100%">
+						<s:fill>
+							<s:SolidColor id="previewColor"/>
+						</s:fill>
+					</s:Rect>
+					<s:TextInput id="popupTextInput" restrict="#xa-fA-F0-9" selectable="false" editable="false"
+								 borderVisible="false"
+								 change="onPreviewTextInputChange(event)" keyDown="onKeyDown(event)"
+								 enter="onEnterKey(event)"/>
+				</s:HGroup>
+				<s:Group>
+					<s:Rect left="0" top="0" right="0" bottom="0" width="300" 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="300" height="132"
+								 itemRenderer="{colorItemRenderer}">
+						<s:layout>
+							<s:TileLayout verticalGap="0" horizontalGap="0"
+										  requestedColumnCount="20"
+										  requestedRowCount="12" useVirtualLayout="false"/>
+						</s:layout>
+					</s:DataGroup>
+				</s:Group>
+			</s:VGroup>
+		</s:Group>
+	</s:PopUpAnchor>
+	
+	<s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false"
+			  skinClass="spark.skins.ColorPickerButtonSkin"/>
+	
+	<s:Rect left="2" right="2" top="2" bottom="2" width="20" height="20" radiusX="2">
+		<s:fill>
+			<s:SolidColor id="solidColor"/>
+		</s:fill>
+	</s:Rect>
+	<s:Line xFrom="3" xTo="20" yFrom="3" yTo="20" id="noColorOrnament">
+		<s:stroke>
+			<s:SolidColorStroke color="0xFF0000" weight="2"/>
+		</s:stroke>
+	</s:Line>
+	<s:TextInput id="textInput" visible="false" width="1" height="1"/>
+	
 </s:SparkSkin>


Mime
View raw message