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

           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()
                override protected function createChildren():void
                     if (!_progressBar)
                          _progressBar=new FlexShape();                    
                     if (!_title)
                          _title=new Label();
                          _title.text ="data";
                          _title.setStyle("color" , 0xffffff);               
                     this.graphics.beginFill(0x333333, 1);
                     this.graphics.drawRect(0, 0, 124, 148);
                     _percentChanged = false;
                     _titleChanged = false;
                     _uploadingChanged = false; 
                     _percentValue = 0;
                private function __drawProgressBar():void
                     _progressBar.graphics.beginFill(0xffffff, 1);
                     _progressBar.graphics.drawRect(0, 0, 1, 87);
                override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                     super.updateDisplayList(unscaledWidth, unscaledHeight);
                override protected function commitProperties():void
                     if (_data)
                          if(_percentChanged && _data.isUploading == true)
                               _percentChanged = false;
                               var colorTransform:ColorTransform;
                               colorTransform.color = _data.color;
                               const newWidth:int = Math.round((_data.percent * 116) / 100);
                               _progressBarTween=TweenLite.to(_progressBar, _data.time, {width:newWidth});                         
                               _titleChanged = false;
                               _title.text = _titleValue;
                public function set data(obj:Object):void
                     _data=obj as CustomRendererData;
                          if(_data.percent != _percentValue)
                               _percentValue = _data.percent;                         
                               _percentChanged = true;
                          if(_titleValue != _data.title)
                               _titleValue = _data.title;                         
                               _titleChanged = true;
                public function get data():Object
                     return _data;
                override protected function measure():void



      This is the data class CustomRendererData.as


           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"
                          xmlns:local="*" applicationComplete="init();" height="375">
                     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();
                     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
           <mx:TileList id="list"
           <mx:Button label="LoadData" click="{data1.percent=100;data3.percent=100;data2.percent=100;}"/>