Page 2 of 4   « previous page   next page »

If all goes well you've instantly transformed your application from this:

Image C

To this:

Image D

Get Your Style On
Let's take things a bit farther and talk about the essence of styles. For all intensive purposes, styles are your theme and give you a vast amount of control.

At the basic level there are three ways of defining your styles and the style properties.

The first is called the Inline Style, and this is the same as in HTML where you style on-the-fly as needed. For example in HTML, you could use an Inline Style to customize some text:

<span style="font-size:18px;font-family:Tahoma">Hello Style!</span>

Similarly in Flex, you can use Inline Styles that are implemented as properties on the component or control that you're using. For example:

<mx:Text text="Hello Style!" fontFamily="Tahoma" fontSize="18"/>

The second and more flexible approach is to use a local style definition. This would be similar to using the <style> tag in HTML somewhere in your Web page.

As in HTML, there are two types of these definitions. The Type Selector style is one that applies to all instances of that definition, and the Class Selector style let's you apply it to specific components.

In HTML you could do this:

<style>
input
{
       font-family:Tahoma;
       font-size:14px;
       color:#FF9900;
    }
    .myStyle
    {
       font-family:Verdana;
       font-size:18px;
       color:#CC0000;
    }
</style>

<input value="use type definition">
<input value="use class definition" class="myStyle">

Which results in:

Image E

With Flex you can do the same thing using the <mx:Style> tag as follows:

<mx:Style>
   TextInput
     {
       font-family:Tahoma;
       font-size: 14px;
       color:#FF9900;
     }
   .myStyle
     {
       font-family:Verdana;
       font-size:18px;
       color:#CC0000;
     }
</mx:Style>
<mx:TextInput text="use type definition"/>
<mx:TextInput text="use class definition" styleName="myStyle"/>

Which produces nearly the exact same thing:

Image F

Although you can find all the CSS properties for all the components in the Flex documentation, the easiest way to experiment with styles in Flex is to use the Flex Style Explorer ( See figure 1). You'll find the link to this in the Flex Start page (select Help->Flex Start Page), and it provides an interactive tool to generating the style definitions that you can cut and paste into your Flex application.

Lastly, and ultimately the most modular approach would be to store your style definitions in a separate file known of course as the external style sheet. Once again Adobe makes this aspect easy to take advantage of by making it similar to what you already know from the land of HTML.

So pretty straightforward stuff; copy your Type and Class definitions into a .css text file then in your MXML file put the following in the file in use:

<mx:Style source="/path/to/your/stylesheet.css"/>

Page 2 of 4   « previous page   next page »