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
New Developer
Posts: 18
Registered: ‎12-29-2010
My Device: Torch 9800
Accepted Solution

Custom CellRenderer - Rows get drawn over when scrolling List

Hi,

 

Before I begin, I have a background in Java and am new to Flex, so this might already be known.

 

I am extending the CellRenderer class, and thought I would share what I have learned, and maybe someone will point out anything that I am doing wrong. I found that when you have a List that you can scroll up and down, the items in the list just get drawn over and over, so if you have text in a cell and scroll up and down the text will become unreadable. See Image:

 

playbook_garbled.jpg

 

To fix this, I ended up adding a function to remove all the children in the drawLabel() function: (my app displays content from twitter)

 

 

public class TweetRenderer extends CellRenderer
{	
	public function TweetRenderer()
	{
		super();
		this.label.visible = false;
	}
	
	override protected function onAdded():void
	{
		super.onAdded();
	}
	
	override protected function onRemoved():void
	{
		super.onRemoved();
	
		this.clear();	
	}
	
	override protected function init():void
	{
		super.init();
	}
	
	override protected function drawLabel():void
	{
		this.clear();
		
		super.drawLabel();		
		
		if(this.data)
		{	
			var tweet:Object = this.data.data;
						
			var profilePic:Image = new Image();
			profilePic.height = 48;
			profilePic.width = 48;
			profilePic.x = 10;
			profilePic.y = 10;
			profilePic.setImage(tweet['profile_image_url']);
			
			var text:Label = new Label();
			text.x = 10*2 + profilePic.width;
			text.width = this.width - text.x;
			text.wordWrap = true;
			text.htmlText = "<b>" + tweet['from_user'] + "</b> " + tweet['text'];
						
			this.addChild(profilePic);
			this.addChild(text);
		}
	}
	
	protected function clear():void
	{
		while(this.numChildren > 0)
		{
			this.removeChildAt(0);
		}
	}
}

 

 

Developer
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10

Re: Custom CellRenderer - Rows get drawn over when scrolling List

[ Edited ]

Adding children and removing children should only need to be done in the onAdded and onRemoved methods.  Your clear() method will also remove children added from the base class (the label).  If you put a trace on, you will see how each of the override methods gets called when the lists gets scrolled around (not intuitive as you will see).

 

Your image has not been approved yet, so once that becomes available, I might be able to comment further.

Developer
Posts: 1,004
Registered: ‎12-12-2010
My Device: Z10 (red Limited Edition)

Re: Custom CellRenderer - Rows get drawn over when scrolling List

There is also a function draw you can override, perhaps you can experiment with that a bit? I come from a Java background as well and I haven't really figured out the logic in the CellRenderers as well. It just seems so random sometimes.

 

I have a list as well that displays both images and text, allow me to post my basic code:

 

 

package renderer
{
	import flash.display.Bitmap;
	import flash.display.Shape;
	import flash.text.TextFormat;
	
	import flashx.textLayout.formats.TextAlign;
	
	import qnx.ui.display.Image;
	import qnx.ui.listClasses.CellRenderer;
	import qnx.ui.text.Label;
	
	public class PreviewListRenderer extends CellRenderer
	{
		private var image: Image = new Image();
		private var text: Label = new Label();
		private var background: Shape = new Shape();
		private var myFormat:TextFormat;
		private const rectWidth:int = 22;
		private const rectHeight:int = 16;
		
		public function PreviewListRenderer()
		{
			super();
			image.y = 0;
			
			myFormat = new TextFormat;
			myFormat.size = 9;
			myFormat.align = TextAlign.CENTER;
			myFormat.color = 0xFFFFFF;
			
			background.graphics.beginFill(0x000000);
			background.graphics.drawRect(0,0,rectWidth,rectHeight);
			background.graphics.endFill();
			
			this.label.visible = false;
		}
		
		override protected function onAdded():void{
			super.onAdded();
			addChild(image);
			addChild(background);
			addChild(text);
		}
		
		override protected function onRemoved():void{
			super.onRemoved();
			removeChild(text);
			removeChild(background);
			removeChild(image);
		}
		
		override protected function drawLabel():void{
			super.drawLabel();
			if(data){
				if(data.icon){
					image.setImage(data.icon);
					image.width = data.icon.width;
					image.height = data.icon.height;
					image.x = (this.width - image.width)/2;
					image.y = (this.height - image.height)/2;
					text.x = image.x;
					text.y = image.y;
					text.text = data.label;
					text.format = myFormat;
					text.width = rectWidth;
					background.x = image.x;
					background.y = image.y;
				}
			}
		}
	}
}

 

I have no such issues as you mentioned.

 

-------------------------------------------
BlackBerry Certified Builder for Native Application Development -- Proud member of the Belgian BlackBerry Developer group
Samples: Park in Ghent
Feeling generous? Nominate me for BB Elite member!
Developer
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10

Re: Custom CellRenderer - Rows get drawn over when scrolling List

Since it is obvious you're working on an Twitter client of some sort, have you been able to fully use the OAuth authentication to them?

New Developer
Posts: 18
Registered: ‎12-29-2010
My Device: Torch 9800

Re: Custom CellRenderer - Rows get drawn over when scrolling List

I haven't tried working with OAuth yet. Sorry. If I do I will post something here.

Developer
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10

Re: Custom CellRenderer - Rows get drawn over when scrolling List

The image also looks like a text wrapping issue.  Just in case, truncate your text to see if that is a potential problem (mystr.substr( 0,30 ) ).

New Developer
Posts: 18
Registered: ‎12-29-2010
My Device: Torch 9800

Re: Custom CellRenderer - Rows get drawn over when scrolling List

Thanks zezke, I refactored my class to look more like yours. I used member variables instead of local variables for my profilePic and text variables and it fixed my overlap problem. I understand now what was going on: in my code in the original post, I kept calling addChild() every time drawLabel() was called, and adding new Image and Label instances, so they just kept being drawn on top.  My bad. Thanks for the help!