| Creating and Extending Flex 2 Components > Creating ActionScript Components > Creating Custom Style Properties > About styles > About overriding the styleChanged() method | |||
When a user sets a style on a component, Flex calls the component's styleChanged() method, passing to it the name of the style being set. When you create a custom component, you can override the UIComponent.styleChanged() method to check the style name passed to it, and handle the change accordingly, as the following example shows:
var bBackgroundColor:Boolean=false;override public function styleChanged(styleProp:String):void {super.styleChanged(styleProp);// Check to see if style changed.if (styleProp=="backgroundColor"){bBackgroundColor=true;invalidateDisplayList();return;}}
The styleChanged() method first calls superclass's styleChanged() method to let the superclass handle the style change.
After the superclass gets a call to handle the style change, your component can detect that the user set the backgroundColor style, and handle it. By handling the style change after the superclass makes the change, you can override the way the superclass handles the style.
Notice that the method calls the invalidateDisplayList() method, which causes Flex to execute the component's updateDisplayList() method at the next screen update. Although you can detect style changes in the styleChanged() method, you still use the updateDisplayList() method to draw the component on the screen. For more information, see Defining a style property.
Typically, you use a flag to indicate that a style changed. In the updateDisplayList() method, you check the flag and update the component based on the new style setting, as the following example shows:
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth, unscaledHeight);
// Check to see if style changed.
if (bBackgroundColor==true)
{
// Redraw the component using the new style.
...
}
}
By using flags to signal style updates to the updateDisplayList() method, the updateDisplayList() method has to perform only the updates based on the style changes; it may not have to redraw or recalculate the appearance of the entire component. For example, if you are changing only the border color of a component, it is more efficient to redraw only the border, rather than redrawing the entire component every time someone changes a style.
Flex 2.01
Send me an e-mail when comments are added to this page | Comment Report
Current page: http://livedocs.adobe.com/flex/201/html/skinstyle_149_5.html