0 Replies Latest reply on May 28, 2009 12:12 PM by firdosh

    Maintaining State For Item Renderers

    firdosh Level 1

      Hey guys,

                      I have a custom item renderer CustomRenderer.as and CustomRendererData.as. The item renderer component has a loading animation and each renderer reads the loading percent , wether its in Uploading state and the color of the progressbar from the data class . The issue I run into is when these animations are playing and the user is dragging and dropping them sometimes the progress bar does not maintain its state , animation plays again or has a color from the previous item renderer .

       

      When you click the LoadData button the animations will start and if you start to drag and drop them around you can see sometimes the states gets confused for example

       

      1. data1 is red
      2. data2 is green
      3. data3 is blue
      4. data4 never loads because its isUploading property is false

       

      Sometimes data4 will have the progress bar animating even though it should never animate or data3 would have a red progress bar. I have attached the source as a zip file and a image of the error state. Any help is much appreciated. Thanks

       

       

      Below is the custom Item renderer class CustomRenderer.as

      package
      {
           import flash.geom.ColorTransform;
      
           import gs.TweenLite;
      
           import mx.controls.Label;
           import mx.controls.listClasses.IListItemRenderer;
           import mx.core.FlexShape;
           import mx.core.IDataRenderer;
           import mx.core.UIComponent;
      
           public class CustomRenderer extends UIComponent implements IListItemRenderer, IDataRenderer
           {
                protected var _progressBar:FlexShape;
                protected var _data:CustomRendererData;
      
                protected var _percentValue:int;
                protected var _percentChanged:Boolean;
                protected var _progressBarTween:TweenLite;
                
                protected var _title:Label;
                protected var _titleValue:String;
                protected var _titleChanged:Boolean;
                
                protected var _uploadingChanged:Boolean;          
      
                public function CustomRenderer()
                {
                     super();
                }
      
                override protected function createChildren():void
                {
                     super.createChildren();
                     if (!_progressBar)
                     {
                          _progressBar=new FlexShape();                    
                          _progressBar.x=_progressBar.y=4;
                          __drawProgressBar();
                          addChild(_progressBar);
                     }
      
                     if (!_title)
                     {
                          _title=new Label();
                          _title.setActualSize(100,22);                    
                          _title.x=4;
                          _title.y=120;     
                          _title.text ="data";
                          _title.setStyle("color" , 0xffffff);               
                          addChild(_title);
                     }
      
                     this.graphics.beginFill(0x333333, 1);
                     this.graphics.drawRect(0, 0, 124, 148);
                     this.graphics.endFill();
      
                     _percentChanged = false;
                     _titleChanged = false;
                     _uploadingChanged = false; 
                     _percentValue = 0;
                }
      
                private function __drawProgressBar():void
                {
                     _progressBar.graphics.beginFill(0xffffff, 1);
                     _progressBar.graphics.drawRect(0, 0, 1, 87);
                     _progressBar.graphics.endFill();
                     _progressBar.width=0;
                }
      
                override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                {
                     super.updateDisplayList(unscaledWidth, unscaledHeight);
                }
      
                override protected function commitProperties():void
                {
                     super.commitProperties();
      
                     if (_data)
                     {
                          if(_percentChanged && _data.isUploading == true)
                          {
                               _percentChanged = false;
                               if(_progressBarTween)
                               {                         
                                    TweenLite.removeTween(_progressBarTween);                                        
                               }
                               var colorTransform:ColorTransform;
                               colorTransform=_progressBar.transform.colorTransform;
                               colorTransform.color = _data.color;
                               _progressBar.transform.colorTransform=colorTransform;     
                               const newWidth:int = Math.round((_data.percent * 116) / 100);
                               _progressBarTween=TweenLite.to(_progressBar, _data.time, {width:newWidth});                         
                          }
                          
                          if(_titleChanged)
                          {
                               _titleChanged = false;
                               _title.text = _titleValue;
                          }
                     }
                }
                public function set data(obj:Object):void
                {
                     _data=obj as CustomRendererData;
      
                     if(_data)
                     {
                          if(_data.percent != _percentValue)
                          {
                               _percentValue = _data.percent;                         
                               _percentChanged = true;
                          }
                          
                          if(_titleValue != _data.title)
                          {
                               _titleValue = _data.title;                         
                               _titleChanged = true;
                          }
                     }
                     
                     invalidateProperties();
                     invalidateDisplayList();
                }
      
                public function get data():Object
                {
                     return _data;
                }
      
                override protected function measure():void
                {
                     super.measure();
      
                     measuredWidth=124;
                     measuredHeight=148;
                     measuredMinWidth=124;
                     measuredMinHeight=148;
                }          
           }
      }
      
      

       

       

      This is the data class CustomRendererData.as

       

      package
      {
           [Bindable]
           public class CustomRendererData
           {          
                public var percent:int=0;
                
                public var title:String;
                
                public var color:uint;
                
                public var time:int;
                
                public var isUploading:Boolean = false;          
                
                public function CustomRendererData(){}
           }
      }
      

       

      Main application class CustomTileList.mxml

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                          layout="vertical"
                          xmlns:local="*" applicationComplete="init();" height="375">
           <mx:Script>
                <![CDATA[
                     import mx.collections.ArrayCollection;
                     
                     public var data1:CustomRendererData = new CustomRendererData();
                     public var data2:CustomRendererData = new CustomRendererData();
                     public var data3:CustomRendererData = new CustomRendererData();
                     public var data4:CustomRendererData = new CustomRendererData();
                     
                     
                     [Bindable]
                     public var coll:ArrayCollection=new ArrayCollection([data1, data2, data3, data4]);
                          
                     private function init():void
                     {
                          data1.title ="data1";
                          data1.color = 0xff0000;
                          data1.time = 8;
                          data1.isUploading = true;
                          
                          data2.title ="data2";
                          data2.color = 0x00ff00;
                          data2.time = 11;
                          data2.isUploading = true;
                          
                          data3.title ="data3";
                          data3.color = 0x0000ff;
                          data3.time = 9;
                          data3.isUploading = true;
                          
                          data4.title ="data4";
                          data4.color = 0x00ffff;
                          data4.time = 2;
                          data4.isUploading = false;
                     }
                
                     public function itemClick():void
                     {
                          trace(list.selectedIndex);
                     }
                ]]>
           </mx:Script>
           <mx:TileList id="list"
                                itemRenderer="CustomRenderer"
                                width="640"
                                height="228"
                                verticalScrollPolicy="off"
                                useRollOver="false"
                                dataProvider="{coll}"
                                columnWidth="150"
                                itemClick="itemClick();"
                                dropEnabled="true"
                                dragEnabled="true"
                                dragMoveEnabled="true">
      
           </mx:TileList>
           <mx:Button label="LoadData" click="{data1.percent=100;data3.percent=100;data2.percent=100;}"/>
      </mx:Application>