[flexcoders] PopUpButton with TileList and custom renderer works, but 2 annoyances

[Alexander Farber]

Hello,

I'm trying to use a PopUpButton with a red/black colored TileList
and it does work, but has 2 minor issues, that I can't figure out.

I've prepared a simple test case listed at the bottom, please review it.

1) For some reason I get numerous warnings:
warning: unable to bind to property 'label' on class 'Object' (class
is not an IEventDispatcher)
warning: unable to bind to property 'label' on class 'Object' (class
is not an IEventDispatcher)
but I don't even know where to look, which "label" is it?

2) The TileList tl2 has a scrolling issue. I've searched around
(for example: http://forums.adobe.com/message/2939121 )
and it is probably because the itemRenderer is being reused
and I'm making some wrong assumptions... But where?

Thank you for any hints, please try my code below

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