TileList with MovieClips for cells (Custom Cell Renderer)

programming flash
1

I want to add to the stage a MovieClip with a tilelist with cells that are filled with MovieClips. I have tried everything but just can not get the cells to show up. I can only see a dark skin of TopMovie that I have customized; no cells. Can someone please tell me what exactly am I doing wrong here? I presume it would be something in the cell renderer, but I can’t figure it out. Also, if I add traces to MyTileCellRenderer class, they don’t show up.

Here is my code: (code for addChild(TopMovie) to stage is not included)


package 
{
	import flash.display.MovieClip;
	import fl.controls.TileList;
	import fl.data.DataProvider;
	import flash.filesystem.*;

	import myPackage.*;
	
	public class TopMovie extends MovieClip
	{
		/* The tile list of shops, which will be added to the ScrollPane */
		public var myList:TileList;
		
		/* This array will be used to feed the DataProvider of the TileList */
		private var myData:Array;
		private var myDataProvider:DataProvider;
		
		/* The file location where the saved shops info is stored */
		private var myFile:File;
		
		public function TopMovie():void
		{
			myDataProvider = new DataProvider();
			
			myList = new TileList();
			myList.columnCount = 2;
			myList.rowCount = 10;
			myList.columnWidth = 470;
			myList.rowHeight = 120;
			myList.setSize(940, 600);
			
			/* Setup the TileList now -
			 * 1. Populate the myData array with either data from read from a file.
			 * 2. Set the dataProvider for the tile
			 */
			 
			myFile = File.documentsDirectory;
			myFile = myFile.resolvePath(MyConstants.DATA_FILE);

			var filestr:FileStream = new FileStream();
			filestr.open(myFile, FileMode.READ);
			var readBytes:String = filestr.readUTFBytes(filestr.bytesAvailable);
				
			loadXMLData(readBytes);

			myList.dataProvider = myDataProvider;
			myList.setStyle("cellRenderer", MyTileCellRenderer);
			filestr.close();
		}
		
		private function loadXMLData(str:String):void
		{
			var cellMovie:CellMovie;
			var myXML:XML = new XML(str);
			
			for each (var property:XML in myXML.prop)
			{
				cellMovie = new CellMovie();
				cellMovie.loadCellXML(property); /* Load the data in the cell from the xml */
				myDataProvider.addItem({label:"", data:cellMovie});
			}
		}
	}
}

// myTileCellRenderer code
package
{
	import fl.controls.listClasses.CellRenderer;
	import fl.controls.listClasses.ICellRenderer;
	import fl.controls.listClasses.ImageCell;
	
	import myPackage.*;
	
	public class MyTileCellRenderer extends ImageCell implements ICellRenderer
	{
		private var cellMovie:CellMovie;
		
		public function MyTileCellRenderer():void
		{
			setStyle("upSkin", MyTileCellUpSkin);
		}
		
		override protected function drawLayout():void {
			// Position cell elements; tweak these for your thumbs if needed
			var imagePadding:Number = getStyleValue("imagePadding") as Number;
			loader.move(11, 5);
			
			var w:Number = width-(imagePadding*2);
			var h:Number = height-imagePadding*2;
			
			if (loader.width != w && loader.height != h) {
				loader.setSize(460,110);
			}
			
			cellMovie = data.data;
			trace("MyTileCellRenderer: loader content = " + loader.content);
			loader.drawNow();

			background.width = width+5;
			background.height = height+1;
			textField.visible = false;
		}
	}
}