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

Here is the custom component for a titlewindow

package com.healthways.components.windows
{
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:fill>

<s:LinearGradient rotation=“90”>

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

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

</s:LinearGradient>

</s:fill>

</s:Rect>

Something like this would go in your style sheet

@namespace windows "com.mwallace.components.windows.*";

windows|CustomTitleWindow
{
skin-class: ClassReference("skins.TitleWindowSkin");
}