Popupboutton avec tiléliste et rendu personnalisé

Question

J'ai préparé un cas de test simple pour une popupboutton ouvrant un tiléliste avec des entrées noires et rouges et cela fonctionne surtout, mais a 2 ennuis.

J'ai cherché beaucoup, j'ai essayé plusieurs variantes (ajouté [Membres [liés] dans mon rendu; membre de la couleur ajouté au tableau des enchères; créé mon Données de réglage du public () méthode; .. .) Et a eu des réponses aussi, mais elles sont trop générales.

J'apprécierais que quelqu'un puisse suggérer du code pour corriger les 2 problèmes de mon code:

1) Le défilement "TL2" à droite ne fonctionne pas bien: les entrées sont affichées dans un mélange de rouge et de noir. Je sais que le témoin Tilelist réutilise, mais comment puis-je résoudre le problème?

2) En mode de débogage, j'ai de nombreux avertissements: AVERTISSEMENT: Impossible de se lier à la propriété 'L'étiquette' sur la classe 'objet' (la classe n'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 que ce n'était pas correct d'utiliser {data.label} dans mon étiquette), mais le "TL2" a toujours des problèmes de défilement.

nouveau myRenderer.mxml (a toujours 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 problèmes en remplacement de la méthode de données définie 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>

Étant donné que les rendriers sont réutilisés, le meilleur moyen de s'assurer qu'elles sont correctement mises à jour consiste à utiliser la méthode de données définie car elle est toujours appelée lorsqu'un rendu est réutilisé.Cela se débarrasse également de votre avertissement de liaison car vous ne pouvez plus contrailer à Data.Label.Remarque: Je n'ai pas testé ce code, cela peut avoir besoin de peaufiner :) espère que cela aide.

Edit: Votre problème "TL2" semble être causé par le défilement horizontalement de votre liste de tuiles, alors que le tiléliste semble être optimisé pour le défilement vertical.Étant donné que votre ensemble de données est fini et relativement petit, je ferais la liste de la liste de carreaux pour afficher tous les éléments (éliminant la réutilisation du rendu d'élément) et l'envelopper dans une toile réglée sur les dimensions souhaitées et laissez la toile de manipuler le défilement..Probablement pas la réponse que vous recherchez, désolé.