Adobe AIR Development

[Tstorm2086]

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 );
		}
	}
}

[Tstorm2086]

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.

[JRab · Accepted solution]

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!