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
Highlighted
Contributor
Posts: 20
Registered: ‎07-25-2011
My Device: Playbook
My Carrier: rogers
Accepted Solution

Extending alternatingcellrenderer

[ Edited ]

Hi,

 

I am exnteding the alternating cell renderer to make it suit my application. 

 

Basically, rather than the light skin, I am changing to darker one. I believe there is black skins but I am not using them because I have to rearrange the fonts and display a bit more information than the basic label.

 

Anyways, I am using a List. My skin extends the AlternatingCellRenderer. I override the set data method and update the background color of the cell. To determine which color to use, I do a simple if (index % 2 == 0). It displays fine. But when I scroll the list, the colors get all screwed up. They dont' alternate and appear randomly. 

 

P.S. I am not setting the background colors in the constructor because the index and row are always 0. But index has a value in the set data method. 

 

Any suggestions?

 

Thanks.

BlackBerry Development Advisor
Posts: 172
Registered: ‎10-25-2010
My Device: Not Specified

Re: Extending alternatingcellrenderer

The items are getting messed up because the index is set and the state is not adjusted.

 

Here is what the AlternatingCellRenderer does, which should work for you as well.

 

		override protected function setState( state:String ):void
		{
			super.setState( state );
			
			if( state != SkinStates.UP )
			{
				skin.state = state;
			}
			else
			{
				var isEven:Boolean = ( index % 2 == 0 );
				
				if( isEven )
				{
					skin.state = SkinStates.UP;
				}
				else
				{
					skin.state = SkinStates.UP_ODD;
				}
			}
		}
		

		override public function set index(value:int):void 
		{
			super.index = value;
			setState( __state );
		}

Hope that helps.

Contributor
Posts: 20
Registered: ‎07-25-2011
My Device: Playbook
My Carrier: rogers

Re: Extending alternatingcellrenderer

Sorry but I'm confused. Right now, I am setting colors in the set data method. The code you have given me; where do I now put my code that sets the color? I tried to put in the set state but my Sprite object I set the color wasn't initialized. So I checked for null and if not set it. But still same problem. Color as messed up on scrolling the list.

Can you tell me what I am doing wrong?

Thanks.
BlackBerry Development Advisor
Posts: 172
Registered: ‎10-25-2010
My Device: Not Specified

Re: Extending alternatingcellrenderer

Can you post your code so I can see exactly what you are doing?
Thanks.
Contributor
Posts: 20
Registered: ‎07-25-2011
My Device: Playbook
My Carrier: rogers

Re: Extending alternatingcellrenderer

[ Edited ]
package myskins
{
	import flash.display.Sprite;
	import flash.text.TextFormat;
	
	import qnx.ui.listClasses.AlternatingCellRenderer;
	import qnx.ui.skins.SkinStates;
	import qnx.ui.text.Label;
	
	public class MyRenderer extends AlternatingCellRenderer
	{
		private var _label:Label;
		private var _format:TextFormat;
		private var _bg:Sprite;
		
		public function MyRenderer()
		{
			super();
			
			_label = new Label();
			_format = new TextFormat();
			_bg = new Sprite();
			
			
			_format.color = 0xffffff;
			_format.size = 24;
			
			
			_label.x = 5;
			_label.y = 3;
			
			_label.setSize(330, 35);
			
			_label.format = _format;
			
			addChild(_bg);
			addChild(_label);
			
			skin.visible = false;
		}
		
		override public function set  data(value:Object):void
		{
			super.data = value;
			
			_label.text = value.text;
		
			if ((index % 2) == 0)
			{
				
				_bg.graphics.beginFill(0x323232);
				_bg.graphics.drawRect(0, 0, 328, 80);
				
				_bg.graphics.lineStyle(1, 0x181818);
				_bg.graphics.drawRect(0, 0, 328, 1);				
				_bg.graphics.drawRect(0, 79, 328, 80);
				
				_bg.graphics.endFill();

			}
			else
			{
				
				_bg.graphics.beginFill(0x6d6d6d);
				_bg.graphics.drawRect(0, 0, 328, 80);
				
				_bg.graphics.lineStyle(1, 0x868686);
				_bg.graphics.drawRect(0, 0, 328, 1);				
				_bg.graphics.drawRect(0, 79, 328, 80);
				
				
				_bg.graphics.endFill();
				
				
			
			}
			
			
		}
		
		override protected function setState( state:String ):void
		{
			super.setState( state );
			
			if( state != SkinStates.UP )
			{
				skin.state = state;
			}
			else
			{
				var isEven:Boolean = ( index % 2 == 0 );
				
				if( isEven )
				{
					skin.state = SkinStates.UP;
				}
				else
				{
					skin.state = SkinStates.UP_ODD;
				}
			}
		}
		
		
		override public function set index(value:int):void 
		{
			super.index = value;
			setState( __state );
		}
	
	}
}

 

 

BlackBerry Development Advisor
Posts: 172
Registered: ‎10-25-2010
My Device: Not Specified

Re: Extending alternatingcellrenderer

What is the rowHeight of your list?

 

I think there is an issue with your drawing.

Specifically this line would mean that the rowHeight would need to be 159 ( 79 + 80) when I think you want it to be 80. This would have caused renderers to appear over each other.

 

_bg.graphics.drawRect(0, 79, 328, 80);

 

Here is a working example of what you are trying to do. I re-worked it for you with the drawing simplified. Hope this gets you going.

 

package
{
	import flash.display.Sprite;
	import flash.text.TextFormat;
	
	import qnx.ui.listClasses.CellRenderer;
	import qnx.ui.text.Label;
	
	public class MyRenderer extends CellRenderer
	{

		private var _bg:Sprite;
		
		public function MyRenderer()
		{
			super();
		}
		
		override protected function init():void
		{
			_bg = new Sprite();
			addChild(_bg);
			super.init();			
			skin.visible = false;
		}
		
		override public function getTextFormatForState(state:String):TextFormat
		{
			 var  format:TextFormat = new TextFormat();
			format.color = 0xffffff;
			format.size = 24;
			return( format );
			
		}
		
		override protected function drawLabel():void
		{
			label.x = 5;
			label.y = 3;
			label.setSize(330, 35);
		}
		
		override public function set  data(value:Object):void
		{
			super.data = value;
			
			label.text = value.highway;
		}
		
		private function drawState():void
		{
			_bg.graphics.clear();
			
			if ((index % 2) == 0)
			{
				
				_bg.graphics.beginFill(0x323232);
				_bg.graphics.drawRect(0, 0, width, height);
				
				_bg.graphics.endFill();
				
			}
			else
			{
				
				_bg.graphics.beginFill(0x6d6d6d);
				_bg.graphics.drawRect(0, 0, width, height);
				
				_bg.graphics.endFill();
			}
		}
		
		override public function set index(value:int):void 
		{
			super.index = value;
			drawState();
		}
	}
}

 

Contributor
Posts: 20
Registered: ‎07-25-2011
My Device: Playbook
My Carrier: rogers

Re: Extending alternatingcellrenderer

Thanks a lot. It works.

 

The reason for the 79 -> 80 was I am trying to create two borders, one at top and bottom. But I am not sure how to do it properly using lines so I just drew a rectangle. 

Developer
Posts: 52
Registered: ‎03-29-2012
My Device: Playbook, Dev Alpha
My Carrier: Telus

Re: Extending alternatingcellrenderer

Perfect thanks. I used this to do every 2 cells with index % 4 < 2