comment créer un rendu cellulaire personnalisé pour une liste de tuiles en flash

Question

J'ai besoin de mettre en œuvre un cell renderer personnalisé dans un de mes projets, j'ai fait quelques recherches sur google mais je n'ai pas trouvé ce dont j'avais besoin.

J'ai besoin de chacun cell dans le tile list pour afficher 2 icônes avec un couple de labels. J'ai besoin d'un bon exemple pour le démarrer.

Si possible, j'ai besoin d'un moyen de concevoir le modèle en tant que MovieClip et le passer à la liste pour le rendu des cellules.

Answer 1

créer un fichier appelé MyRenderer.mxml, collez:

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

dans la liste des tuiles, écrire ceci:

<mx:TileList itemRenderer="MyRenderer" ... /> 

Answer 2

Pour construire une CellRenderer personnalisée dont vous avez besoin d'étendre une classe de choix de le listClasses disponible. ImageCell semble être un bon début pour votre projet.

vous devez:

1. Étendre la classe de liste
2. ajouter vos propres bits (étiquettes/TextField, etc.)
3. override fonctions protégées pour régler la nouvelle cellule à vos besoins (un exemple est la méthode drawLayout où vous devez positionner vos objets soigneusement).

Voici un exemple très simple:

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

Un très bon exemple pour ce que vous avez besoin est sur ce post. La cellule personnalisée condition:

1. Prise en charge d'un arrière-plan personnalisé (en définissant la peau cellulaire)
2. Utilise un champ de texte d'étiquette.

HTH