6 Replies Latest reply on Jul 28, 2010 10:47 AM by Flex harUI

    TileList custom itemRenderer has scrolling issues

    afarber Level 1

      Hello,

       

      I have a simple test case for a TileList with a custom itemRenderer for displaying red or black items (depending on a card suit).

       

      Both TileLists (1 is on the stage and the other 1 is behind a PopUpButton) work almost ok, but they have scrolling issues: if you scroll right and then back left, you will see ghost texts with mixed up colors.

       

      I understand, that the issue is probably coming from the fact that the itemRenderer is being reused and I'm not supposed to make any assumptions. But I don't know what exactly is wrong in my code. The answers I've got so far has been too vague, with no code suggestions...

       

      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) {
                          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'}];
                      for (var i:uint = 6; i <= 10; i++)
                          for (var j:uint = 0; j < 5; j++) {
                              var label:String = i+'♠♣♦♥ '.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('♥') != -1 ||
                              str.indexOf('♦') != -1) ? 0xFF0000 : 0x000000;
                  }
                 
                  private function createList(arr:Array):TileList {
                      tl = new TileList();
                      tl.maxColumns = 5;
                      tl.width = 200;
                      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" 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>

       

      Thank you

      Alex