how to create a custom cell renderer for a tile list in flash
I need to implement a custom cell renderer
in a project of mine, I have done some search on google but couldn't find what I need.
I need each cell
in the tile list
to display 2 icons with couple of labels
. I need a good example to start it.
I开发者_运维百科f possible I need a way to design the template as a MovieClip
and pass it to the tilelist for rendering the cells.
To build a custom cell renderer you need extend a class of choice from the available listClasses. ImageCell looks like a good start for your project.
You would:
- Extend the list class
- add your own bits in(labels/TextField, etc.)
- override protected functions to adjust the new Cell to your needs (an example is the drawLayout method where you would need to position your items neatly).
Here's a very basic example:
package
{
import fl.controls.listClasses.ICellRenderer;
import fl.controls.listClasses.ImageCell;
import fl.controls.TileList;
import fl.data.DataProvider;
import fl.managers.StyleManager;
import flash.events.EventDispatcher;
import flash.events.*;
import fl.containers.UILoader;
public class CustomImageCell extends ImageCell implements ICellRenderer
{
public function CustomImageCell()
{
super();
//do other stuff here
loader.scaleContent = false;
loader.addEventListener(IOErrorEvent.IO_ERROR, handleErrorEvent, false, 0, true);
useHandCursor = true;
}
override protected function drawLayout():void
{
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(w,h);
}
loader.drawNow(); // Force validation!
}
override protected function handleErrorEvent(event:IOErrorEvent):void {
trace('ioError: ' + event);
//dispatchEvent(event);
}
}
}
A pretty good example for what you need is on this post. The custom cell provided there:
- Supports a custom background( by setting the cell skin )
- Uses a label TextField.
HTH
create a file called MyRenderer.mxml,paste this:
<?xml version="1.0" encoding="utf-8"?>
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Image id="img" width="123" height="123" />
<mx:Script><![CDATA[
override public function set data (value:Object):void {
super.data = value;
// mess with img here
}
]]></mx:Script>
</mx:Box>
in tile list, write this:
<mx:TileList itemRenderer="MyRenderer" ... />
精彩评论