Modification de l'apparence d'une vignette unique composant TileList

Question

Je suis en train de créer une liste de vignettes à l'aide du composant TileList, et jusqu'à présent, il travaille beaucoup. Est-il possible de changer l'apparence d'un seul ImageCell dans le composant.

Je porte dans les données de miniatures comme XML, et j'ai un attribut pour que ce soit une image « nouvelle » ou non. Je voudrais à afficher un petit insigne sur la vignette individuelle dans ma demande.

Je tiens à souligner que je fait une sous-classe de la classe ImageCell (mise en œuvre ICellRenderer) pour régler mes skins personnalisés, mais quand j'ai essayé d'ajouter du code conditionnel ici (vérification du jeu de paramètres I « nouveau », il ne fonctionne tout simplement pas (aucun message d'erreur).

Est-ce que quelqu'un a des idées sur la façon d'y parvenir?

Merci!

• Scott

Answer 1

Vous devez également étendre TileListData et ajouter une propriété isNew ou quelque chose. Une solution rapide est d'utiliser le car il est un objet dans ListData.as, puis dans votre classe, propriété icône pour stocker votre booléenne, accès qui et l'utiliser pour activer la visibilité de votre NOUVEAU graphique.

par exemple.

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

et est un code de calendrier de test ici:

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

Je suppose que vous utilisez un itemRenderer pour le rendu de la vignette. Vous pouvez utiliser la liaison conditionals à l'intérieur de décider quelle vignette pour afficher ou utiliser la « nouvelle propriété » pour masquer / afficher une 2ème image. Par exemple,

<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, y compris le code pourrait aider aussi bien.