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
baibhav
Posts: 11
Registered: ‎12-10-2010
My Device: Not Specified
Accepted Solution

Extending CellRenderer

I was trying to extend the existing CellRenderer to slight modify the behaviour. However I am having a very hard time doing it without actually looking at the code of CellRenderer. Its pretty hard to figure out which methods to override and which variables contain the required data. Is it possible to get access to the code? I am not using FlashBuilder.

 

Thanks.

Please use plain text.
Developer
JRab
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Extending CellRenderer

hey baibhav,

 

there are a few topics discussing ways on modifying cells within a list. i agree though its tough extending a class without knowing the exacting happenings within the class. its more of a trial and error process. but u get a lot out of it in the end! here's what we did find though. if you are extending the cellrenderer classes the two functions that are of most help are the onAdded() and the onRemoved() methods. they are called every time a cell is added or removed and give you access to the data property and its labels that are sent from the list object in the main application. Other methods also exist that you can edit such as the drawLabel and the draw methods. here are a few topics discussing the issue:

 

http://supportforums.blackberry.com/t5/Tablet-OS-SDK-for-Adobe-AIR/Renderer-for-DropDown-working/m-p...

 

http://supportforums.blackberry.com/t5/Tablet-OS-SDK-for-Adobe-AIR/Format-large-text-blocks-to-fit-q...

 

http://supportforums.blackberry.com/t5/Tablet-OS-SDK-for-Adobe-AIR/Adding-a-viewable-2nd-column-to-L...

 

hope that helps. good luck!

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
Please use plain text.
Contributor
baibhav
Posts: 11
Registered: ‎12-10-2010
My Device: Not Specified

Re: Extending CellRenderer

Thanks jrab the first link helped me a lot. However I am still having some problems. All I am trying to do is display a checkbox instead of the regular label. Here is the code for my custom Renderer. I am sure I am missing something very basic.

 

 

package
{
 import flash.display.Sprite;
 import flash.text.TextField;
 import qnx.ui.buttons.CheckBox;
 import qnx.ui.buttons.LabelPlacement
 import qnx.ui.listClasses.*;
 import flash.events.MouseEvent;
 public class CheckBoxCellRenderer extends CellRenderer
 {
 public function CheckBoxCellRenderer()
 {
 super();
 }
 
 override protected function onAdded():void
 {
 super.onAdded();
 removeChild(label);
 
 var cb:CheckBox = new CheckBox();
 cb.width = 150;
 cb.x = (this.x + this.width) + 50;
 cb.label = label.text;
 
 cb.addEventListener(MouseEvent.CLICK, checkBoxEventHandler);
 addChildAt( cb , this.numChildren -1);
 
 }
 
override protected function onRemoved():void
{
super.onRemoved();
}
private function checkBoxEventHandler(e:MouseEvent):void
{
var cb:CheckBox = CheckBox(e.target);
}
}
}

 

Please use plain text.
Contributor
baibhav
Posts: 11
Registered: ‎12-10-2010
My Device: Not Specified

Re: Extending CellRenderer

Oh I also meant to add, that with this code the checkbox doesnt show up at all. The label is gone as I had intended. Any help is much appreciated.

 

Thanks.

Please use plain text.
Developer
JRab
Posts: 2,462
Registered: ‎11-04-2010
My Device: Bold 9700

Re: Extending CellRenderer

[ Edited ]

hey,

 

i wrote up a sample program that does what you need except im trying to figure out how to do the checkbox event listeners. working on that now but this is the code that should get you going. I have to class one main and the other the cell renderer. You had the general idea. I think the only thing you missed was the width and placement of the check box. When you use the this reference you are refering to the cell itself and not the checkbox. i think you might have mixed that. The this reference is to the current class as a whole and not just the control accessing it. Here's the code:

 

ListTests.as

 

 

package
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.MouseEvent;
	import flash.text.TextFieldAutoSize;
	
	import qnx.ui.buttons.LabelButton;
	import qnx.ui.data.DataProvider;
	import qnx.ui.events.DataProviderEvent;
	import qnx.ui.listClasses.List;
	import qnx.ui.text.Label;
	
	
	[SWF(width="1024",height="600",backgroundColor="#CCCCCC",frameRate="30")]
	public class ListTests extends Sprite
	{
		private var myList:List;
		private var myDataProvider:DataProvider;
		private var myArray:Array;
		
		public function ListTests()
		{
			super();
			
			// support autoOrients
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			
			myList = new List();
			myArray = new Array();
			
			for (var i:int = 0; i < 10; i++)
			{
				myArray.push({label: "Some extremely long text. - " + i});
			}
			
			myDataProvider = new DataProvider(myArray);
			
			myList.dataProvider = myDataProvider;
			
			myList.width = 500;
			myList.height = 600;
			myList.scrollable = true;
			myList.setSkin(MyCustomCellRenderer);
			
			addChild(myList);
			
			var newLabel:Label = new Label();
			newLabel.text = "Changes Here";
			newLabel.autoSize = TextFieldAutoSize.LEFT;
			newLabel.setPosition(600,0);
			
			addChild(newLabel);
			
			
		}
	}
}

 

 

MyCustomCellRenderer.as

 

 

package
{
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.text.TextFieldAutoSize;
	
	import qnx.ui.buttons.CheckBox;
	import qnx.ui.buttons.LabelPlacement;
	import qnx.ui.listClasses.AlternatingCellRenderer;
	import qnx.ui.listClasses.List;
	import qnx.ui.text.Label;
	
	public class MyCustomCellRenderer extends AlternatingCellRenderer
	{
		/*
		* Place the object out here so that other methods can
		* access it
		*/
		private var newCheckBox:CheckBox;
		
		public function MyCustomCellRenderer()
		{
			super();

			/*
			 * Add the checkbox here so we dont keep re-adding a check box
			 * whenever the onAdded method is called. other wise there
			 * would be a lot of objects for checkbox
			*/
			newCheckBox = new CheckBox();
		}
		override protected function onAdded():void
		{
			super.onAdded();
			
			/*
			 * Do not want to use the label object at all. we want
			 * to fully customize our cell renderer. for some reason
			 * the label object is not considered a child object
			 * when the drawLabel method is called so we must
			 * removed it in this method where it is considered a
			 * child object
			*/
			removeChild(label);
		}
		override protected function drawLabel():void
		{
			if (this.data)
			{
				/*
				 * Sometimes this function is called prematurely when there
				 * is no data object available and it is null so we only 
				 * do our custom label when there is a data object available
				*/
				newCheckBox.width = 500;
				newCheckBox.label = this.data.label;
				newCheckBox.labelPadding = 10;
				newCheckBox.labelPlacement = LabelPlacement.RIGHT;
				newCheckBox.setPosition(10,10);
				
				addChild(newCheckBox);
			}
		}
		override protected function onRemoved():void
		{
			super.onRemoved();
			
			/*
			* Remember to remove the checkbox object
			*/
			removeChild(newCheckBox);
			
		}
	}
}

 

 

 

I'll update you on the event listener. hope this helps!


Update #1: Fixed several errors in the MyCustomCellRenderer.as file. Thanks ryantan for bringing it to my attention!

 

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
Please use plain text.
New Developer
ryantan
Posts: 20
Registered: ‎11-24-2010
My Device: Not Specified

Re: Extending CellRenderer

Hey J. Rab, any idea why this.data is sometimes null in my onAdded()?

 

It only happens to the tiles that are initially off-screen, the rest of my tiles are showing fine. Using a TileList with custom cell renderer extended from AlternatingCellRenderer

cheers,
Ryan
Please use plain text.
Developer
jtegen
Posts: 6,541
Registered: ‎10-27-2010
My Device: HTC One, PlayBook, LE Z10, DE Q10
My Carrier: Verizon

Re: Extending CellRenderer

Always check if the data is null or not.  The lists may take cells out and add them back in if it is not in the visible range.  It's really odd with the DropDown control.  It is also good to check if the data value being passed to the data provider exists as well.  Like:

 

if( this.data && this.data.myvalue )this.mylabel.text = this.data.myvalue;

 

 

Please use plain text.
New Developer
ryantan
Posts: 20
Registered: ‎11-24-2010
My Device: Not Specified

Re: Extending CellRenderer

Yep jtegen I did check for data== null, but prob is if its always null I can't do my custom logic =)

 

see this thread for the best solution at the moment: http://supportforums.blackberry.com/t5/Tablet-OS-SDK-for-Adobe-AIR/Data-binding-happens-after-onAdde...

cheers,
Ryan
Please use plain text.
Contributor
baibhav
Posts: 11
Registered: ‎12-10-2010
My Device: Not Specified

Re: Extending CellRenderer

Thanks jrab your code fixed my issue. I was mixing up that x,y co-ordinates. I also got the event handlers to work.

Please use plain text.
New Contributor
damvigilante
Posts: 3
Registered: ‎01-07-2011
My Device: Not Specified

Re: Extending CellRenderer

[ Edited ]

Hello, sorry to bring up an older thread, but could you share any tips on how you got the listners to work? I can't seem to get that part down.

 

Thanks

Please use plain text.