Use binding in your Flex 4 Skins

On a recent project I stated using Flex 4 and most of all the new
skinning markup. I really like it for the most part. It’s great to
separate a lot of drawing code from the actual component. One thing
that the project requires is to dynamically change colors of some of
the components as the user selects items in a list. Normally you would
have some logic that would redraw graphics or you would set up 3 or 4
css styles to switch in between.

I found that a great solution for this problem was to create a custom
skin, draw all my shapes with the new primitives markup, give them the
Stroke or Fill and bind the color property to the getStyle method like

Here is the custom component for a titlewindow

import spark.components.TitleWindow;

* @author Matthew Wallace
public class CustomTitleWindow extends TitleWindow
private var _baseColor:uint;

public function CustomTitleWindow()

public function get baseColor() : uint
return _baseColor;

public function set baseColor(baseColor : uint) : void
_baseColor = baseColor;

this.setStyle('color', baseColor);
This code will draw a background for my custom component and I bind
color to getStyle()

<s:Rect left=“0” right=“0” top=“0” bottom=“0”radiusX=“5” radiusY=“5”>


<s:LinearGradient rotation=“90”>

<s:GradientEntry color=“{getStyle(‘color’)}” alpha=“0.9”/>

<s:GradientEntry color=“{getStyle(‘color’)}”/>




Something like this would go in your style sheet

@namespace windows "*";

skin-class: ClassReference("skins.TitleWindowSkin");