3 Replies Latest reply on Feb 24, 2010 1:22 PM by Flex harUI

    TileList - Scroll problem -> superimposed images

    SophieTC

      Hello,

       

      From a few days, I've got a weird problem with a TileList component (Flex Builder 3 - Flex SDK 3.2 + This problem is also reproduced with Flex SDK 3.5).

       

      I've got a table of 30 images (molecules constructed dynamically) displayed with a TileList of 4 columns and 8 rows (but only 3 displayed rows).

      When the application is launched, all my molecules are correctly displayed. But when I scroll down, I have 2 superimposed molecules : the one which should be displayed in the cell + the former one which was in this cell before the scroll down.

      Apparently, I've got a refresh problem. I saw that the parent class ListBase of the class TileList has a protected method : clearDataVisible() but it's impossible to use it -> compilation error.

       

      How can I refresh my TileList to avoid superimposed molecules ?

      Thanks in advance for helping me.

       

       

       

      Here's my code :

       

      My TileList is created in a mxml file with an itemRenderer (the Molecule) and a dataProvider (which allows to read the input file with molecules description and to create Molecules).

       

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
                         
      xmlns:views="views.*"
                         
      layout="absolute"
                         
      creationComplete="initApp()"
                         
      >
             
      <mx:Script>
              <![CDATA[
                      import mx.events.FlexEvent;
                      import mx.events.ScrollEvent;
                      import model.Molecule;
                      import model.MLVModel;
                      import views.MoleculeRenderer;
                      import controller.MoleculeReader;
                      import mx.containers.Canvas;
                     
                      [Bindable]
                      private var urlLoader:URLLoader;

                      public function initApp():void
                      {                      
                              var request:URLRequest=new URLRequest("molecules.sdf");
                              urlLoader = new URLLoader(request);
                              urlLoader.addEventListener(Event.COMPLETE, readStream);
                              mylist.addEventListener(ScrollEvent.SCROLL, handleScrolling);
                      }
                     
                      private function handleScrolling(event:ScrollEvent):void {
                              this.mylist.invalidateList();
                              this.mylist.validateNow();
                      }
                     
                      public function readStream(event:Event):void {
                              var mr:MoleculeReader = new MoleculeReader();
                              mylist.dataProvider = mr.processDataStream(event);
                      }

                      ]]>
             
      </mx:Script>

      <mx:TileList id="mylist"
                     
      rowHeight="300"
                     
      columnWidth="300"
                     
      width="100%"
                     
      height="100%"
                     
      itemRenderer="views.MoleculeRenderer" />

       

       

      In my ItemRenderer, I have overriden the data setter and the  commitProperties function and I've used dataChange instead of  createComplete

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
                        
      width="300" height="300"
                        
      horizontalScrollPolicy="off"
                        
      verticalScrollPolicy="off"
                        
      borderStyle="solid"
                        
      dataChange="handleDataChange()">
             
              
      <mx:Script>
                      <![CDATA[
                              import model.MLVModel;
                              import mx.events.FlexEvent;
                              import controller.DrawMolecule;
                              import model.Molecule;
                             
                              private var dm:DrawMolecule;
                              private var factor:Number=1;
                              private var _dataChanged:Boolean;
                             
                              [Bindable]
                              private var mol:Molecule;
                             
                              private function handleDataChange():void {
                                      if (mol) {
                                              MLVModel.getInstance().currentMolecule = mol;
                                              _dataChanged = true;
                                              invalidateProperties();
                                      }
                              }
                                                     
                              public override function set data(value:Object) :void {
                                      if (!value)  return;
                                     
                                      super.data = value;
                                     
                                      if (data is Molecule) {
                                              mol = this.data as Molecule;
                                      }
                              }
                             
                             
                              override protected function commitProperties():void {
                                 super.commitProperties();
                     
                                 if (_dataChanged)
                                 {
                                    if (mol) {
                                      this.drawMolecule();
                                    }
                              
                                    this._dataChanged = false;
                              
                                 }
                              }
                 
                 
                              public function drawMolecule():void {
                                      if (!mol) {
                                              mol = MLVModel.getInstance().currentMolecule;
                                      }                              
                                     
                                      if (mol) {
                                              dm = new DrawMolecule(mol, this, factor);
                                              dm.draw();
                                             
                                      }                                                              
                              }
                      ]]>
              
      </mx:Script>          
      </mx:Canvas>