Changing the appearance of a single thumbnail in TileList Component

Question

I'm trying to create a listing of thumbnails using the TileList component, and so far it's working great. Is there a way to change the appearance of a single ImageCell within the component.

I'm bringing in the thumbnail data as XML, and I have an attribute for whether it's a "new" image or not. I would like it to display a small badge over the individual thumbnail in my application.

I should note that I made a subclass of the ImageCell class (implementing ICellRenderer) to set my custom skins, but when I tried adding conditional code here (checking for the "new" parameter I set, It simply doesn't work (no error messages).

Does anyone have any ideas on how to achieve this?

Thanks!

• Scott

Answer 1

I assume you are using an itemRenderer for the rendering of the thumbnail. You can use conditionals inside the binding to decide which thumbnail to show or use the "new property" to hide/show a 2nd image. For example,

<mx:TileList id="mylist"
  labelField="thumbnail"
  dataProvider="{photoFeed}"
  width="600" height="200"
    <mx:itemRenderer>
          <mx:Component>
              <mx:Canvas horizontalAlign="center">
                 <mx:Image id="badge" source="{data.badgeurl}" visible="{data.new}"/>
                 <mx:Image id="thumb" height="75" width="75"
                   source="{data.thumburl}"/>
              </mx:Canvas>
          </mx:Component>
    </mx:itemRenderer>
</mx:TileList>

Hope this helps, including code might help as well.

Answer 2

You need to also extend TileListData and add an isNew property or something. A quick workaround is to use the icon property to store your Boolean, since it's an Object in ListData.as, then in your class, access that and use it to toggle the visibility of your NEW graphic.

e.g.

package
{
    import fl.controls.listClasses.ICellRenderer;
    import fl.controls.listClasses.ImageCell;
    import fl.controls.listClasses.ListData;
    import fl.controls.listClasses.TileListData;
    import fl.controls.TileList;
    import fl.data.DataProvider;
    import fl.managers.StyleManager;
    import flash.events.EventDispatcher;
    import flash.events.*;
    import flash.display.Sprite;
    import fl.containers.UILoader;

    public class CustomImageCell extends ImageCell implements ICellRenderer
    {  

        protected var isNewGraphic:Sprite;

        public function CustomImageCell() 
        {
            super();

            //do other stuff here

            loader.scaleContent = false;
            loader.addEventListener(IOErrorEvent.IO_ERROR, handleErrorEvent, false, 0, true);
            loader.addEventListener(Event.COMPLETE, handleCompleteEvent, false, 0, true);

            useHandCursor = true;
        }
        override protected function configUI():void {
            super.configUI();
            //add your NEW graphic here
            isNewGraphic = new Sprite();
            isNewGraphic.graphics.beginFill(0x990000,0.75);
            isNewGraphic.graphics.lineTo(10,0);
            isNewGraphic.graphics.lineTo(30,30);
            isNewGraphic.graphics.lineTo(30,40);
            isNewGraphic.graphics.lineTo(0,0);
            isNewGraphic.graphics.endFill();
            addChild(isNewGraphic);
        }

        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!
            //position NEW graphic here
            isNewGraphic.x = width-isNewGraphic.width;
        }
        //toggle graphic here based on data provider for item 
        override public function set listData(value:ListData):void {
            _listData = value;
            label = _listData.label;
            var newSource:Object = (_listData as TileListData).source;
            if (source != newSource) { // Prevent always reloading...
                source = newSource;
            }
            isNewGraphic.visible = Boolean(_listData.icon);//hacky use of the icon property
        }
        //make sure NEW graphic is on top when the load is complete
        protected function handleCompleteEvent(event:Event):void{
            swapChildren(loader,isNewGraphic);
        }
        override protected function handleErrorEvent(event:IOErrorEvent):void {
            trace('ioError: ' + event);
            //dispatchEvent(event);
        }
    }
}

and here is some test timeline code:

import fl.controls.*;
import fl.data.DataProvider;

var tileList:TileList = new TileList ();
tileList.move(10,10);
tileList.setSize(400, 300);
tileList.columnWidth = 215;
tileList.rowHeight = 300;
tileList.direction = ScrollBarDirection.VERTICAL;
tileList.setStyle("cellRenderer", CustomImageCell);
addChild(tileList);

tileList.dataProvider = getRandomDP(10);

function getRandomDP(size:int):DataProvider {
    var result:DataProvider = new DataProvider();
    for(var i:int = 0; i < size; i++)   result.addItem({label:'item'+i,source:'http://digitalsubdivide.com/wp-content/uploads/2010/08/stackoverflow-300.png',icon:Math.random() > .5});
    return result;
}

HTH