quadcolorpicker.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="40" id="cp1" close="{
			 	this.styleValue = [cp1.selectedColor, cp2.selectedColor, cp3.selectedColor, cp4.selectedColor]; 
			 	dispatchMyEvent(); }"  dataProvider="{dataProvider}" />
		<mx:ColorPicker height="20" width="40" id="cp2" close="{
			 	this.styleValue = [cp1.selectedColor, cp2.selectedColor, cp3.selectedColor, cp4.selectedColor]; 
			 	dispatchMyEvent(); }" dataProvider="{dataProvider}" />	
		<mx:ColorPicker height="20" width="40" id="cp3" close="{
			 	this.styleValue = [cp1.selectedColor, cp2.selectedColor, cp3.selectedColor, cp4.selectedColor]; 
			 	dispatchMyEvent(); }" dataProvider="{dataProvider}" />
		<mx:ColorPicker height="20" width="40" id="cp4" close="{
			 	this.styleValue = [cp1.selectedColor, cp2.selectedColor, cp3.selectedColor, cp4.selectedColor]; 
			 	dispatchMyEvent(); }" dataProvider="{dataProvider}" />
	</mx:HBox>		 	
	<mx:HBox id="colorWheelImg" visible="false" height="{colorWheelImg.visible == true?(20):0}">
		
		<mx:Image source="{colorWheel}" buttonMode="true" useHandCursor="true" 
   			 mouseDown="doColorPicker(cp1.selectedColor, 1)" />
   		<mx:Spacer width="10" />
   		<mx:Image source="{colorWheel}" buttonMode="true" useHandCursor="true" 
   			 mouseDown="doColorPicker(cp2.selectedColor, 2)" />
		<mx:Spacer width="10" />
		<mx:Image source="{colorWheel}" buttonMode="true" useHandCursor="true" 
   			 mouseDown="doColorPicker(cp3.selectedColor, 3)" />
		<mx:Spacer width="10" />
		<mx:Image source="{colorWheel}" buttonMode="true" useHandCursor="true" 
   			 mouseDown="doColorPicker(cp4.selectedColor, 4)" />
		<mx:Spacer width="10" />
	</mx:HBox>

	
<mx:Script>
	<![CDATA[
		import mx.collections.ArrayCollection;
		import mx.events.FlexEvent;
		import mx.managers.PopUpManager;
		include "../as/assets.as";
		
		[Bindable]
		public var pickerLabel:String;
		
		[Bindable]
		public var dataProvider:Array;
		
		[Bindable]
		public var styleValue: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 if (whichPicker == 2) {
						cp2.selectedColor = pop1.getColorRGB();
					} else if (whichPicker == 3) {
						cp3.selectedColor = pop1.getColorRGB();
					} else if (whichPicker == 4) {
						cp4.selectedColor = pop1.getColorRGB();
					}
					
					styleValue = [cp1.selectedColor, cp2.selectedColor, cp3.selectedColor, cp4.selectedColor];
					dispatchMyEvent();
				}
	
		}
	
	  	[Bindable]
		public var defaultValue:Array;
           
           public function setDefault():void {
           		defaultValue = styleValue;
           		cp1.selectedColor = styleValue[0];
           		cp2.selectedColor = styleValue[1];
           		cp3.selectedColor = styleValue[2];
           		cp4.selectedColor = styleValue[3];
           }
           
           public function restoreDefault():void {
           		styleValue = defaultValue;
           		cp1.selectedColor = defaultValue[0];
           		cp2.selectedColor = defaultValue[1];
           		cp3.selectedColor = defaultValue[2];
           		cp4.selectedColor = defaultValue[3];
           }
		
	]]>
</mx:Script>

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

</mx:FormItem>