TileListコンポーネントの単一サムネイルの外観を変更する

Question

Tilelistコンポーネントを使用してサムネイルのリストを作成しようとしていますが、これまでのところうまく機能しています。コンポーネント内の単一のイメージセルの外観を変更する方法はありますか？

私はサムネイルデータをXMLとして提供していますが、それが「新しい」画像であるかどうかの属性があります。私のアプリケーションでは、個々のサムネイルに小さなバッジを表示してほしいと思います。

カスタムスキンを設定するためにImageCellクラス（IcellRendererの実装）のサブクラスを作成しましたが、ここで条件付きコードを追加しようとしたとき（設定した「新しい」パラメーターをチェックすると、単に動作しません（エラーなしメッセージ）。

誰かがこれを達成する方法について何かアイデアを持っていますか？

ありがとう！

• スコット

Answer 1

また、TileListDataを拡張して、ISNewプロパティなどを追加する必要があります。簡単な回避策は、を使用することです アイコン booleanを保存するためのプロパティは、listdata.asのオブジェクトであるため、クラスにアクセスして、それを使用してあなたの可視性を切り替えるために使用します 新着 グラフィック。

例えば

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

Hth

Answer 2

サムネイルのレンダリングにアイテムレンダーを使用していると思います。バインディング内の条件を使用して、どのサムネイルを決定して「新しいプロパティ」を表示または使用して2番目の画像を非表示/表示できます。例えば、

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

これが役立つことを願っています。コードを含めることも役立つかもしれません。