PopUpButton avec TileList et le moteur de rendu personnalisé

Question

J'ai préparé un cas de test simple pour un PopUpButton ouvrant un TileList avec des entrées noires et rouges et cela fonctionne principalement, mais a 2 inconvénients.

J'ai beaucoup cherché, essayé plusieurs variantes (ajouté [Bindable] membres dans mon renderer, membre de la couleur ajoutée au tableau des offres, créé mes données de jeu de public override() méthode, ...) et eu aussi des réponses, mais elles sont trop générales.

Je vous serais reconnaissant si quelqu'un peut suggérer un code pour fixer les 2 numéros dans mon code:

1) Scrolling « TL2 » droite-gauche ne fonctionne pas bien: les entrées sont affichées dans un mélange de rouge et noir. Je sais que TileList réutilise itemRenderer, mais comment puis-je résoudre le problème?

2) En mode debug je reçois de nombreux avertissements: avertissement: incapable de se lier à la propriété 'label' la classe 'Object' (classe est pas un IEventDispatcher)

Merci, Alex

MyRenderer.mxml:

<?xml version="1.0" encoding="utf-8"?> 
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
      verticalScrollPolicy="off" horizontalScrollPolicy="off" 
      width="100%" height="100%"> 
    <mx:Script> 
     <![CDATA[ 
      public static function findColor(str:String):uint { 
       return (str.indexOf('♥') != -1 || 
        str.indexOf('♦') != -1) ? 0xFF0000 : 0x000000; 
      } 
     ]]> 
    </mx:Script> 

    <mx:Label truncateToFit="true" width="60" 
       text="{data.label}" color="{findColor(data.label)}"/> 
</mx:Canvas> 

MyTest.mxml:

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
       creationPolicy="all" applicationComplete="init(event);"> 
    <mx:Style> 
     @font-face { 
      src:url("C:\\WINDOWS\\Fonts\\arial.ttf"); 
      fontFamily: myFont; 
      unicodeRange: 
       U+0020-U+0040, /* Punctuation, Numbers */ 
       U+0041-U+005A, /* Upper-Case A-Z */ 
       U+005B-U+0060, /* Punctuation and Symbols */ 
       U+0061-U+007A, /* Lower-Case a-z */ 
       U+007B-U+007E, /* Punctuation and Symbols */ 
       U+0410-U+0451, /* cyrillic */ 
       U+2660-U+266B; /* card suits */ 
     } 
     List, CheckBox, Label, Button, PopUpButton, TileList { 
      fontFamily: myFont; 
      fontSize: 24; 
     } 
    </mx:Style> 

    <mx:Script> 
     <![CDATA[ 
      import mx.controls.*; 
      import mx.events.*; 

      [Bindable] 
      private var bids:Array; 
      private var tl:TileList; 

      private function init(event:FlexEvent):void { 
       bids = createBids(); 
       pub.popUp = createList(bids); 
      } 

      private function createBids():Array { 
       var arr:Array = [{label: 'Pass'}]; 
       for (var i:uint = 6; i <= 10; i++) 
        for (var j:uint = 0; j < 5; j++) 
         arr.unshift({label: i+'♠♣♦♥ '.charAt(j%5)}); 

       return arr; 
      } 

      private function createList(arr:Array):TileList { 
       tl = new TileList(); 
       tl.maxColumns = 5; 
       tl.width = 350; 
       tl.height = 250; 
       tl.dataProvider = arr; 
       tl.itemRenderer = new ClassFactory(MyRenderer); 
       tl.addEventListener('itemClick', itemClickHandler); 

       if (arr.length > 0) { 
        tl.selectedIndex = arr.length - 1; 
        pub.label = arr[tl.selectedIndex].label; 
       } 

       return tl; 
      } 

      private function itemClickHandler(event:ListEvent):void { 
       var index:uint = tl.columnCount * event.rowIndex + event.columnIndex; 
       var label:String = bids[index].label; 
       pub.label = label; 
       pub.setStyle('color', MyRenderer.findColor(label)); 
       pub.close(); 
       tl.selectedIndex = index; 
      } 
     ]]> 
    </mx:Script> 

    <mx:Panel title="TileList scrolling problem" height="100%" width="100%" 
       paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10"> 

     <mx:Label width="100%" color="blue" text="Select your bid:"/> 

     <mx:TileList id="tl2" height="200" width="200" 
        maxColumns="5" rowHeight="30" columnWidth="60" 
        dataProvider="{bids}" itemRenderer="MyRenderer"/> 
    </mx:Panel> 

    <mx:ApplicationControlBar width="100%"> 
     <mx:Spacer width="100%"/> 
     <mx:CheckBox id="auto" label="Auto:"/> 
     <mx:Button id="left" label="&lt;&lt;"/> 
     <mx:PopUpButton id="pub" width="90"/> 
     <mx:Button id="right" label="&gt;&gt;"/> 
    </mx:ApplicationControlBar> 
</mx:Application> 

Mise à jour:

Merci Wade, l'avertissement est parti maintenant (je suppose qu'il n'a pas été autorisé à utiliser {} data.label dans mon étiquette), mais les « TL2 » problèmes a toujours le défilement.

New MyRenderer.mxml (a encore des problèmes de défilement):

<?xml version="1.0" encoding="utf-8"?> 
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
      verticalScrollPolicy="off" horizontalScrollPolicy="off" 
      width="100%" height="100%"> 
    <mx:Script> 
     <![CDATA[ 

      override public function set data(value:Object):void { 
       super.data = value; 

       var str:String = String(value.label); 
       myLabel.text = str; 
       myLabel.setStyle('color', findColor(str)); 
      } 

      public static function findColor(str:String):uint { 
       return (str.indexOf('♥') != -1 || 
        str.indexOf('♦') != -1) ? 0xFF0000 : 0x000000; 
      } 
     ]]> 
    </mx:Script> 

    <mx:Label id="myLabel" truncateToFit="true" width="60"/> 
</mx:Canvas> 

Answer 1

Vous pouvez prendre soin de vos deux questions en redéfinissant la méthode des données définies sur votre article renderer:

<?xml version="1.0" encoding="utf-8"?> 
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
      verticalScrollPolicy="off" horizontalScrollPolicy="off" 
      width="100%" height="100%"> 
    <mx:Script> 
     <![CDATA[ 
      override public function set data(value:Object):void { 
       super.data = value; 
       var str:String = value.label; 
       this.myLabel.text = str; 
       this.myLabel.setStyle("color", (str.indexOf('♥') != -1 || 
        str.indexOf('♦') != -1) ? 0xFF0000 : 0x000000); 
      } 
     ]]> 
    </mx:Script> 

    <mx:Label id="myLabel" truncateToFit="true" width="60"/> 
</mx:Canvas> 

Depuis les rendus sont réutilisés, la meilleure façon de s'assurer qu'ils sont correctement mis à jour est d'utiliser la méthode set data puisqu'elle est toujours appelée quand un rendu est réutilisé. Cela supprime également votre avertissement de liaison, car vous n'êtes plus lié à data.label. Note: Je n'ai pas testé ce code, il faudra peut-être le peaufiner :) J'espère que ça aide.

EDIT: Votre problème "tl2" semble provenir d'un défilement horizontal de votre liste de tuiles, alors que TileList semble être optimisé pour le défilement vertical. Puisque votre jeu de données est fini et relativement petit, je ferais en sorte que la liste des tuiles soit pleine pour montrer tous les éléments (en éliminant la réutilisation du rendu) et l'entourer d'un jeu de toile aux dimensions désirées. . Probablement pas la réponse que vous cherchez, désolé.