BTA Flexing

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

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

MainApplication

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

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute

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

<mx:Script>

<![CDATA[

private function onCreationComplete():void

{

hSlider.value = 25;

}

private function onHSliderChange():void

{

can.w = hSlider.value;

can.invalidateDisplayList();

}

]]>

</mx:Script>

<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:Canvas>

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

</mx:VBox>

</mx:Application>

Can.as

package

{

import mx.containers.Canvas;

public class Can extends Canvas

{

public function Can()

{

super();

this.x = 50;

this.y = 25;

this.setStyle(“backgroundColor”,0xFF0000);

}

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….

Advertisements

4 Responses to “Using updateDisplayList and invalidateDisplayList in creating custom Component”

  1. Harit Kothari said

    Hi Shardul,

    You may use [sourcecode language='xml'] to design and show your code example in editor like way. Go to http://support.wordpress.com/code/ for more idea!
    It’s good to find new post on your blog. 🙂

  2. Andrea said

    Why are you assigning width and height directly instead of using “setActualSize” method?

  3. Sreedhar said

    Yes its good .i really enjoyed

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: