doublecolorpicker.mxml

Flex2StyleExplorer form Adobe

<?xml version="1.0" encoding="utf-8"?>
<mx:FormItem xmlns:mx="http://www.adobe.com/2006/mxml" label="{pickerLabel}" width="100%" creationComplete="setDefault()"
	 mouseOver="colorWheelImg.visible = true" mouseOut="colorWheelImg.visible = false">
	
	<mx:HBox horizontalGap="2">
		<mx:ColorPicker height="20" width="55" id="cp1" dataProvider="{dataProvider}"
			 close="{this.styleValue = [cp1.selectedColor, cp2.selectedColor]; dispatchMyEvent(); }" />
		<mx:ColorPicker height="20" width="55"  id="cp2" dataProvider="{dataProvider}"
			  close="{this.styleValue = [cp1.selectedColor, cp2.selectedColor]; dispatchMyEvent(); }" />
			 
		<mx:HBox id="colorWheelImg" visible="false" >
			<mx:Image source="{colorWheel}" buttonMode="true" useHandCursor="true" 
   			 mouseDown="doColorPicker(cp1.selectedColor, 1)" />
   			<mx:Image source="{colorWheel}" buttonMode="true" useHandCursor="true" 
   			 mouseDown="doColorPicker(cp2.selectedColor, 2)" />
		
		</mx:HBox>
	
	</mx:HBox>
	
<mx:Script>
	<![CDATA[
		import mx.events.FlexEvent;
		import mx.managers.PopUpManager;
		include "../as/assets.as";
		
		[Bindable]
		public var pickerLabel:String;
		
		[Bindable]
		public var styleValue:Array;
		
		[Bindable]
		public var dataProvider:Array;
		
		private function dispatchMyEvent():void {
                this.dispatchEvent( new Event("dataChange") );
            }
                 
			private function doColorPicker(whatColor:Number, whichPicker:Number):void {
				stage.frameRate = 120;
				var pop1:* = PopUpManager.createPopUp(this, advancedColorPicker, false);
				pop1.setColorRGB(whatColor);
				pop1.lastColor = whatColor;
    			pop1.addEventListener(MouseEvent.CLICK, setColor);
	
				function setColor():void {
					if (whichPicker == 1) {
						cp1.selectedColor = pop1.getColorRGB();
					} else {
						cp2.selectedColor = pop1.getColorRGB();
					}
					
					styleValue = [cp1.selectedColor, cp2.selectedColor];
					dispatchMyEvent();
				}
	
		}

		  [Bindable]
			public var defaultValue:Array;
           
           public function setDefault():void {
           		defaultValue = styleValue;
           		cp1.selectedColor = styleValue[0];
           		cp2.selectedColor = styleValue[1];
           }
           
           public function restoreDefault():void {
           		styleValue = defaultValue;
           		cp1.selectedColor = defaultValue[0];
           		cp2.selectedColor = defaultValue[1];
           }
		
	]]>
</mx:Script>

<mx:Metadata>
        [Event("dataChange")]
    </mx:Metadata>

</mx:FormItem>