Изменение внешнего вида одного эскиза в компоненте TileList

Question

Я пытаюсь создать список миниатюр, используя компонент TileList, и пока он отлично работает.Есть ли способ изменить внешний вид одного ImageCell внутри компонента.

Я ввожу данные миниатюр в формате XML, и у меня есть атрибут для того, является ли это «новым» изображением или нет.Я хотел бы, чтобы в моем приложении отображался небольшой значок поверх отдельного эскиза.

Следует отметить, что я создал подкласс класса ImageCell (реализующий ICellRenderer) для установки пользовательских скинов, но при попытке добавитьусловный код здесь (проверяя «новый» параметр, который я установил, он просто не работает (без сообщений об ошибках).

У кого-нибудь есть идеи, как этого добиться?

Спасибо!

• Скотт

Answer 1

Вам также необходимо расширить TileListData и добавить свойство isNew или что-то еще. Быстрый обходной путь - использовать свойство icon для хранения вашего логического значения, поскольку это объект в ListData.as, а затем в вашем классе доступ к нему и использование его для переключения видимости вашего NEW графика.

, например

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);
        }
    }
}

и вот код теста временной шкалы:

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;
}

НТН

Answer 2

Я предполагаю, что вы используете itemRenderer для рендеринга миниатюры. Вы можете использовать условные выражения внутри привязки, чтобы решить, какой эскиз показывать, или использовать «новое свойство», чтобы скрыть / показать второе изображение. Например,

<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>

Надеюсь, это поможет, в том числе и код.