PopupButton con tilleist y renderizado personalizado.

Question

He preparado un caso de prueba simple para un popupbutton que abre un tilleista con entradas negras y rojas y en su mayoría funciona, pero tiene 2 molestias.

He buscado mucho, probó varias variantes (a los miembros [agregados [agotadores] en mi renderizador; Miembro de color agregado a la matriz de ofertas; creó My Datos de anulación pública Datos () Método; .. .) Y también ha estado recibiendo algunas respuestas, pero son demasiado generales.

Agradecería que alguien puede sugerir código para solucionar los 2 problemas en mi código:

1) Desplazamiento "TL2" a la derecha-izquierda no funciona bien: las entradas se muestran en una mezcla de rojo y negro. Sé que el tilleista reutiliza a ItemRenderer, pero ¿cómo puedo solucionar el problema?

2) En modo de depuración, obtengo numerosas advertencias: ADVERTENCIA: No se puede unir a la propiedad 'etiqueta' en la clase 'objeto' (la clase no es un iEventDispatcher)

Gracias, Alex

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

Actualizar:

Gracias Wade, la advertencia se ha ido ahora (Supongo que no estaba bien usarlo {Data.Label} en mi etiqueta), pero el "TL2" todavía tiene problemas de desplazamiento.

New Myrenderer.mxml (todavía tiene problemas de desplazamiento):

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

Puede encargarse de ambos problemas al anular el método de datos establecido en su renderizador de artículo:

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

Dado que los renderizadores se reutilizan, la mejor manera de asegurarse de que se actualizan correctamente es usar el método de datos establecido, ya que siempre se llama cuando un renderizador se reutiliza.Esto también se deshace de su advertencia de unión, ya que ya no está vinculando a los datos.Label.Nota: No he probado este código, es posible que necesite algunos ajustes :) Espero que eso ayude.

Editar: Su problema "TL2" parece que está causado por desplazarse horizontalmente de su lista de azulejos, mientras que el tilleista parece estar optimizado para el desplazamiento vertical.Dado que su conjunto de datos es finito y relativamente pequeño, haría la lista de azulejos de tamaño completo para mostrar todos los elementos (eliminando el reutilización del renderizador del artículo) y envuélvalo en un lienzo establecido en las dimensiones deseadas y deja que el lienzo maneje el desplazamiento.Probablemente no la respuesta que está buscando, lo siento.