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

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

Posted in Flex 3.0 | 4 Comments »