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

[valdhor]

The binding errors are due to your item renderer binding to the data
property which is an object. As the error says you cannot bind to a
plain object.

Modify your class as follows:

             [Bindable]private var myLabel:String;

             public override function set data(value:Object):void
             {
                 super.data = value;
                 if(value != null)
                 {
                     myLabel = data.label;
                 }
             }

             <mx:Label truncateToFit="true" width="60" text="{myLabel}"
color="{findColor(myLabel)}"/>

As to the scrolling problem, I couldn't see why that was happening. Play
around with the renderer a bit and you might figure it out.

--- In flexcoders@yahoogroups.com, Alexander Farber
<alexander.far...@...> wrote:
>
> 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>
>