タリリストとカスタムレンダラー付きポップボートン

Question

私は、黒と赤のエントリーでタリリストを開くポップボートンのための簡単なテストケースを準備しています、そしてそれは主に機能しますが、2つの悩みを持っています。

多くのバリエーションを検索しました。 。）そしていくつかの答えも得られてきましたが、彼らは一般的に一般的です。

私のコードで2つの問題を解決するためのコードを提案できるかどうか感謝します：

1）「TL2」のスクロール右上はうまく機能しません。エントリは赤と黒のミックスに表示されます。 TileList Reuses ItemRendererが知っているが、問題を解決する方法は？

2）デバッグモードでは、多数の警告があります。 警告：クラス 'Object'のプロパティ 'Label'にバインドできません（クラスはIEventDispatcherではありません）

ありがとう、 アレックス

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>

.

更新：

ありがとうございますP>

new 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[

            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

あなたのアイテムレンダラーの設定データメソッドを上書きすることで、両方の問題の世話をすることができます：

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

.

レンダラが再利用されるので、それらが正しく更新されていることを確実にするための最良の方法は、レンダラが再使用されたときに常に呼び出されるのでセットデータメソッドを使用することです。Data.Labelにバインドできなくなったため、これもバインディング警告を取り除きます。注：このコードをテストしていない、それはいくらかの微調整が必要かもしれません:)それが助けることを願っています。

編集：あなたの "TL2"の問題は、タイルリストを水平にスクロールすることによって引き起こされるのに対し、TILLISTは垂直スクロールのために最適化されているように見えます。データセットは有限かつ比較的小さいため、すべての要素を表示する（アイテムレンダラの再利用を排除）、希望の寸法に設定されているキャンバス内に折り返し、キャンバスにスクロールを処理させるためにタイルリストのフルサイズを作成します。。おそらくあなたが探している答えではない、ごめんなさい。