ScaleNine

One of the things I often talk about is trying to separate any styling from MXML. What I mean is preventing the need to go into the MXML to change styling and doing as much as possible from an external CSS file.

Typically I might assign a style to a Button by assigning a class selector for the styleName:

<mx:Button styleName=”blueButton”/>

That works just fine, but let’s say I want to change the Button to use a class selector called “redButton” instead. That is, to make the Button have red styling instead of blue. One option would be to change the styleName above to a “redButton” class selector I create. Or reassign the styling properties in my CSS file for “blueButton”, which could cause confusion.

Another scenario might be using a “task specific” class selector for the styleName. For example, loginButton, addButton, emailButton, etc. However, I may run into an issue if a slight variation is needed in another part of the user interface. Or if the class selector name of “uploadButton” no longer makes sense. Then I’d have to go into the MXML and change the class selector for the styleName.

A great way to avoid having to go into the MXML is using the getStyle method inside of the assignment of the styleName. The MXML for a Button in a Login component might look like this:

<mx:Button label=”Login” styleName=”{getStyle(’loginButtonStyleName’)}”/>

And in my CSS file I have the following:

Login
{
loginButtonStyleName: ‘blueButton’;
}

.blueButton
{
fillColors: #A9DBFF, #0095C6;
fillAlphas: 1,1;
}

With this implemented I can change the style of the login button without having to go into the MXML. For example, if I decide I want the login button to now be grey, I just create a new class selector and assign it to the loginButtonStyleName. Like this:

Login
{
loginButtonStyleName: ‘greyButton’;
}

.greyButton
{
fillColors: #EEEEEE, #AAAAAA;
fillAlphas: 1,1;
}

.blueButton
{
fillColors: #A9DBFF, #0095C6;
fillAlphas: 1,1;
}

If you’re tied to the Design View, this technique may take some getting used to because you’ll only see the results at compile time. One way to get around that might be to do the styling inline and then once you get things looking the way you want to, go and externalize the styling. Then again, the Design View doesn’t really offer as much as it could.

I don’t always use this technique, because it can be a bit overkill for some instances. I use it wherever I think it makes sense and I know it will come in handy in the long run. There’s a few other techniques that I use as well that I’ll try to share. Thanks to Andy McIntosh for sharing the power of this use of the getStyle method.

This entry was posted on Monday, October 1st, 2007 at 4:13 pm and is filed under how-to, tips. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.