Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Adobe AIR Development

Reply
Developer
Posts: 64
Registered: ‎04-25-2012
My Device: 9000
My Carrier: Airtel

Customized ColorPicker

Hi All,

 stuck with colorpicker component.actually i have to implement a color picker for playbook  using FLEX platform.and that should be like pallette .I got only mx control for that  .can anyone help me?plz.its urgent

d.dev
Developer
Posts: 1,280
Registered: ‎03-03-2011
My Device: Playbook, Z10, Q10, Z30 with Files & Folders and Orbit of course
My Carrier: Vodafone

Re: Customized ColorPicker

Flex has a built-in colorpicker:

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/ColorPicker.html

 

Alternatively you could use something like this:

http://ensourced.wordpress.com/2012/01/02/color-picker-for-mobile-devices-with-flex-4-5/

 

or this:

http://technoracle.blogspot.nl/2011/05/flexair-mobile-color-picker.html

 

or this:

http://blogs.adobe.com/aharui/2010/01/spark_datefield_and_colorpicke.html

 

Or just show an image and let the user pick a point. Then sample that pixel...

Files & Folders, the unified file & cloud manager for PlayBook and BB10 with SkyDrive, SugarSync, Box, Dropbox, Google Drive, Google Docs. Free 3-day trial! - Jon Webb - Innovatology - Utrecht, Netherlands
Developer
Posts: 40
Registered: ‎07-06-2012
My Device: DevAlpha, PlayBook
My Carrier: BaseDE, BouyguesFR

Re: Customized ColorPicker

I ported the 3 slider version to qnx dialog in case someone needs that, here it is:

 

	import flash.display.Graphics;
	import flash.display.Sprite;
	import flash.events.Event;
	
	import qnx.fuse.ui.core.Container;
	import qnx.fuse.ui.dialog.AlertDialog;
	import qnx.fuse.ui.events.SliderEvent;
	import qnx.fuse.ui.layouts.gridLayout.GridLayout;
	import qnx.fuse.ui.listClasses.ScrollDirection;
	import qnx.fuse.ui.slider.Slider;
	

	public class ColorPickerDialog extends AlertDialog
	{
		public var color:uint = 0x000000;   
		private var newColor:String = new String();
		
		private var rSlider:Slider;
		private var gSlider:Slider = new Slider();
		private var bSlider:Slider = new Slider();		
		private var preview:Sprite  = new Sprite();
		
		public function ColorPickerDialog()
		{
			super();
		}

		
		override protected function createContent(container:Container):void
		{
			super.createContent(container);
			
			addButton("close");
			
			title = "Color picker";

			var grid:GridLayout = new GridLayout();
				grid.numColumns = 1;
				grid.vSpacing = 40;
				grid.padding = 10;
				grid.paddingLeft = 185;
			
			container.layout = grid;
			container.scrollDirection = ScrollDirection.VERTICAL;
			
			updatePreview();
			preview.height = 300;
			preview.width = 170;
			
			rSlider = createSlider(0xFF0000);
			gSlider = createSlider(0x00FF00);
			bSlider = createSlider(0x0000FF);
			
			container.addChild(preview);
			container.addChild(this.rSlider);
			container.addChild(this.gSlider);
			container.addChild(this.bSlider);
		}
		
		private function createSlider(color:uint):Slider
		{
			var slider:Slider = new Slider();
				slider.maximum = 254;
				slider.addEventListener( SliderEvent.MOVE, updateColor );
				slider.addEventListener( SliderEvent.END, notifyChange );
				slider.setThumbSkin(new ColorThumbSkin(color));
				slider.setFillSkin(new ColorSliderFillSkin());
			return slider;
		}
		
		private function updateColor(event:Event=null):void
		{
			var red:String = (rSlider.value).toString(16);
				red = checkLength(red);
			var green:String = (gSlider.value).toString(16);
				green = checkLength(green);
			var blue:String = (bSlider.value).toString(16);
				blue = checkLength(blue);
			
			newColor = "0x" + red + green + blue;

			color = parseInt(newColor,16);
			
			updatePreview();
		}
		
		private function checkLength(s:String):String
		{
			var str:String = s;
			if (str.length < 2)
			{
				str = "0" + str;
			}
			return str;
		}

		private function notifyChange(event:Event=null):void
		{
			//notify listeners registered to this dialog
			dispatchEvent(new Event("change"));
		}
		
		private function updatePreview():void
		{
			var g:Graphics = preview.graphics;
				g.beginFill(color);
				g.drawRect(5, 0, 200, 50);
				g.endFill();
		}
		
		
		public function set rgb(rgb:Array):void
		{
			if((rgb != null)&&(rgb.length == 3)) 
			{
				rSlider.value = rgb[0];
				gSlider.value = rgb[1];
				bSlider.value = rgb[2];					
			}
		}
	}