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
Contributor
Posts: 17
Registered: ‎01-25-2011
My Device: Torch 9800
My Carrier: AT&T
Accepted Solution

DropDownCellRenderer question

I'm trying to put section headers in a DropDownList. I can create the DropDownCellRenderer, and only apply it if the label matches whatever I want my header to be, however 2 things still puzzle me:

1) The first time I click on the DropDown...my skin doesn't show. Everytime after that, it shows up fine.

2) Being a header, I don't want the user to click on it. I tried to change it so that if the header's clicked, the selectedIndex is increased by 1, to get the first item under it. While that works...it shifts my skin 1 spot in the opposite direction. 

 

Any thoughts??

 

Main .as file

		private function initializeUI():void
		{
                        camera = new DropDown();
			camera.width = 275;
			camera.height = 50;
			camera.x = 25;
			camera.y = 65;
			camera.setListSkin(SectionDropDown);
			camera.dataProvider= defineCameras();
			camera.rowCount=10;
                        camera.addEventListener(Event.SELECT,cameraSelect);
                }


                private function defineCameras():DataProvider
		{	
			var dp:DataProvider = new DataProvider();
			var arr:Array = [];		
			
			arr.push({label: "Film"});
			arr.push({label: "35mm"});
			arr.push({label: "4x5"});	
			arr.push({label: "Nikon DX Format"});
			arr.push({label: "D300"});
			arr.push({label: "D5000"});			
			arr.push({label: "D7000"});	
			arr.push({label: "D70"});
			arr.push({label: "D80"});		
			arr.push({label: "D90"});	
			arr.push({label: "Nikon FX Format"});	
			arr.push({label: "D700"});	
			arr.push({label: "D3 (and variants)"});	
			
			dp.setItems(arr);
			return dp; 
                  }

 

Custom DropDownCellRenderer file

package{
	import flash.display.Sprite;
	import flash.text.TextFormat;
	
	import qnx.ui.listClasses.DropDownCellRenderer;
	
	public class SectionDropDown extends DropDownCellRenderer
	{
		private var cell:Sprite;
		
		public function SectionDropDown()
		{
			super();
			this.cell = new Sprite();			
		}
		
		override protected function onAdded():void
		{
			super.onAdded();
			if( this.data == null )return;
			
			if( this.label.text == "Nikon DX Format"||this.label.text == "Nikon FX Format"||this.label.text == "Film"){
			this.cell.graphics.clear();
			this.cell.graphics.beginFill( 0xffea00,1 );
			this.cell.graphics.drawRect( 0, 0, 279, 45 );
			this.cell.graphics.endFill();
			
			this.addChild( this.cell );
			this.setChildIndex( this.label, this.numChildren-1 );
			this.label.format = new TextFormat( null, null, 0x000000 );
			}
		}
		
		///////////////////////////////////////////////////////////////
		override protected function onRemoved():void
		{
			super.onRemoved();
			this.removeChild( this.cell );
		}
	}
}
http://appworld.blackberry.com/webstore/vendor/8218?lang=en
Contributor
Posts: 17
Registered: ‎01-25-2011
My Device: Torch 9800
My Carrier: AT&T

Re: DropDownCellRenderer question

I've found that I can place the following in the DropDownCellRenderer to make the individual cell unclickable, which for a header is how it should be.

 

 

this.mouseChildren=false;
this.mouseEnabled=false;

 

I still haven't been able to figure out why my skin doesn't show up the first time I click to display the DropDown List, but shows up each time afterwards.

 

http://appworld.blackberry.com/webstore/vendor/8218?lang=en
Developer
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: DropDownCellRenderer question

hey Tstorm,

 

great job with the renderer so far. havent seen it in action this way. looks pretty good. as for having it show up after you click, the renderer works in weird ways. but here's a workaround:

 

SectionDropDown.as:

 

 

package{
	import flash.display.Sprite;
	import flash.text.TextFormat;
	
	import qnx.ui.listClasses.DropDownCellRenderer;
	
	public class SectionDropDown extends DropDownCellRenderer
	{
		private var cell:Sprite;
		
		public function SectionDropDown()
		{
			super();
			this.cell = new Sprite();			
		}
		
		override protected function drawLabel():void
		{
			super.drawLabel();
			
			if( this.data == null )return;
			
			if( this.label.text == "Nikon DX Format"||this.label.text == "Nikon FX Format"||this.label.text == "Film"){
				this.cell.graphics.clear();
				this.cell.graphics.beginFill( 0xffea00,1 );
				this.cell.graphics.drawRect( 0, 0, 279, 45 );
				this.cell.graphics.endFill();
				
				this.addChild( this.cell );
				this.setChildIndex( this.label, this.numChildren-1 );
				this.label.format = new TextFormat( null, null, 0x000000 );
				this.mouseChildren = false;
				this.mouseEnabled = false;
			}
			
			
		}
	}
}

 

instead of overriding the onAdded() method, you can just override the drawLabel() method. it seems that the drawLabel() is only called once and happens before the user interacts with it. i removed the onRemoved() method as well because it removes the cell you added after a user closes it back up. im going to assume because the drawLabel() is only called once, your cell sprite isnt added again. hope that helps. good luck with the rest of your development!

 

J. Rab (Blog) (Twitter)
--
1. If you liked my post or found it useful please click on the thumbs up and provide a Like!
2. If my post solved your problem please click on the Accept as Solution button. Much appreciated!

Approved Apps: OnTrack | ssShots | Hangman