Flex Examples

I was going through my blog the other night and it occurred to me, I do a pretty half-assed job of explaining things on my blog. For instance, take something basic like styling a Button. Usually I’ll just show how to use a single style, property, method, or technique and call it a day. Very rarely would I demonstrate a few different ways of accomplishing a task. For the most part this isn’t a huge deal, but in some cases it seems like I’m somehow cutting corners.

So, with that in mind, the following example shows a few different ways you can apply a style to a Button control. Note, these aren’t really in any sort of particular order, just whichever way I thought of them and typed them into Flex Builder.

First up is what I consider the easiest form of styling. Just specify the style name and value directly in the MXML tag. Simple and right to the point. Probably not the most flexible approach as if you did this throughout an entire application and then wanted to change something, its a lot of search and replace and a bit of a headache.

<mx:Button label="Button 1" borderColor="red" />

While I really appreciate the simplicity of it, I have to admit that it is a bit difficult to see if borderColor is a property, or style, or event, or…

Next, similar to the first method, you can specify the borderColor property in a nested <mx:borderColor> block. Personally I don’t see a big advantage to this method over the first method. It is a bit more typing and doesn’t seem to add much. Although I must admit that I will use this in my code for more complex values, such as defining data grid columns, or data providers.

<mx:Button label="Button 2">
    <mx:borderColor>red</mx:borderColor>
</mx:Button>

Again, for something simple like the borderColor style, probably a bit of overkill.

Next, styling using an <mx:Style> block. There are a few different ways you can do this too. You could specify a style for the Button class generically, and that would apply to each Button instance on the display list. Or, you could specify a custom style name (as shown below) and apply that style individually to certain Button instances within your application instead of every Button instance automatically.

<mx:Style>
    .MyButton {
        borderColor: red;
    }
</mx:Style>

<mx:Button label="Button 3" styleName="MyButton" />

As you can see we created a new style in our <mx:Style /> block, and gave it a name of “MyButton”. To apply that specific style to a Button (or any other container or control, for that matter), simply set the styleName property (inherited from the UIComponent class) to the name of the style (minus the leading period, so in this example set the style name to “MyButton” and NOT “.MyButton”).

If you wanted to style ALL Button controls, you could use the following code instead:

<mx:Style>
    Button {
        borderColor: red;
    }
</mx:Style>

<mx:Button label="Button 3" />

Note that we no longer need to specify the styleName property since the Button style will automatically be used for each Button control on the display list.

Also note that you can move the style declarations into an external file and load them in at compile-time using the following code:

<mx:Style source="styles.css" />

<mx:Button label="Button 3" />

And then create a file named “styles.css” which is in the same directory as your MXML file. So, for the following example I created a styles.css file and added the following content:

/* CSS file */
Button {
    borderColor: red;
}

Moving the CSS declarations out of the MXML and into their own separate files has the added benefit of being a lot more reusable when working with larger applications. Plus, it can be a lot easier to manage styles if they’re all kept neatly in one single place instead of distributed throughout multiple MXML files.

The fourth way to set styles on a container or control is to call the setStyle() method (also inherited from the UIComponent class) from ActionScript. The following example shows how you can create and call an ActionScript method which sets the borderColor style using the setStyle() method:

<mx:Script>
    <![CDATA[
        private function button4_init():void {
            button4.setStyle("borderColor", "red");
        }
    ]]>
</mx:Script>

<mx:Button id="button4"
        label="Button 4"
        creationComplete="button4_init();" />

Note that you wouldn’t typically want to set styles in this exact way (creating a creationComplete event handler which sets the style in question), but I just wanted to show how the setStyle() method was used and keep the code as copy-paste as possible.

Yes, there are still probably a few more ways to style components (notably loading in CSS at runtime and using the StyleManager), but I’ll either save that for another entry, or update this entry at a later date.

Anyways, hopefully this helps shed some light on a few of the different ways that you can change styles from within Flex.

Feel free to leave some comments if there is something you think I missed or want me to add to the post.

As always, play safe, and Happy Flexing!