BTA Flexing

My passion RIAs…………..Shardul Singh Bartwal

Archive for January, 2009

Using updateDisplayList and invalidateDisplayList in creating custom Component

Posted by Shardul Singh Bartwal on January 28, 2009

UpdateDisplayList and InvalidateDisplayList in Flex

I know that all of you have created custom components,and almost of you are very much comfortable with your own approach and logic for that. Here sometimes we create such components which are recreated during the applications. For example if we have simply a canvas and on a slider you have to resize it. I know that you have a multiple ways for achieving this. In flex every UI Component have a method called ‘updateDisplayList’.If we want to recreate our component at runtime then this method is very much supportive for us.We should put our that code inside this method which should be executed when we want to execute this method from somewhere outside. The important thing is that this method is not called with this name, i mean updateDisplayList(). If we want to call this method then we have to call the invalidateDisplayList() method of the instance of this class.On calling invalidateDisplayList() the updateDisplayList() method will be called. In the above example for example we should put the height and width of the component inside updateDisplayList() method. Now on change of slider the width and height will be changed and after that I have to call the invalidateDisplayList() so that the changes will be reflected inside the component.

For your comfort I am also putting the code here.

Example of Custom Component


<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”” layout=”absolute

xmlns:local=”*” creationComplete=”onCreationComplete()”>



private function onCreationComplete():void


hSlider.value = 25;


private function onHSliderChange():void


can.w = hSlider.value;





<mx:VBox width=”100%” horizontalAlign=”center” verticalAlign=”middle” top=”150” left=”150” right=”150>

<mx:Canvas width=”200” height=”150” borderColor=”#0000FF” borderStyle=”solid” backgroundColor=”0xCCCCCC” cornerRadius=”5>

<local:Can id=”can” w=”25/>


<mx:HSlider id=”hSlider” width=”150” maximum=”100” minimum=”0” liveDragging=”true” change=”onHSliderChange()”/>





import mx.containers.Canvas;

public class Can extends Canvas


public function Can()



this.x = 50;

this.y = 25;



private var _w:Number;

public function set w( value:Number):void


_w = value;


public function get w():Number


return _w;


override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void


super.updateDisplayList(unscaledWidth, unscaledHeight);

this.height = w;

this.width = w;




Hope you will enjoy this………………….Enjoy Flexing….


Posted in Flex 3.0 | 4 Comments »