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

[Alexander]

Thanks, I don't have warning anymore after I've changed the code.

The horizontal scrolling issue seems to be a Flex 3 bug:
when I change the width and height, so that there is only
a vertical scrollbar - then everything starts to work ok.

===== MyRenderer.mxml:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"; width="100%" height="100%"
        verticalScrollPolicy="off" horizontalScrollPolicy="off">
        
        <mx:Script>
                <![CDATA[
                        override public function set data(value:Object):void {
                                super.data = value;
                                
                                if (value != null && 
value.hasOwnProperty('label')) {
                                        lb.text = value.label;
                                        lb.setStyle('color', value.color);
                                } else {
                                        lb.text = '';
                                }
                        }

                ]]>
        </mx:Script>

        <mx:Label id="lb" truncateToFit="true" width="60"/>
</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', color: 
0x000000}];
                                for (var i:uint = 6; i <= 10; i++)
                                        for (var j:uint = 0; j < 5; j++) {
                                                var label:String = 
i+'&#9824;&#9827;&#9830;&#9829; '.charAt(j%5);
                                                var color:uint = 
findColor(label);
                                                
                                                arr.unshift({label: label, 
color: color});
                                        }
                                
                                return arr;
                        }
                        
                        private function findColor(str:String):uint {
                                return (str.indexOf('&#9829;') != -1 ||
                                                str.indexOf('&#9830;') != -1) ? 
0xFF0000 : 0x000000;
                        }
                        
                        private function createList(arr:Array):TileList {
                                tl = new TileList();
                                tl.maxColumns = 5;
                                tl.width = 150;
                                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;
                                var color:uint = bids[index].color;
                                pub.label = label;
                                pub.setStyle('color', color);
                                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" width="150" height="250"
                                         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>