Tariq Ahmed

Subscribe to Tariq Ahmed: eMailAlertsEmail Alerts
Get Tariq Ahmed: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


Related Topics: ColdFusion on Ulitzer

CFDJ: Article

Adobe Flex Interface Customization - Themes, Styles, Skins

The basics of themes, styles, and skins

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"/>

More Stories By Tariq Ahmed

Tariq Ahmed is the manager of product development at Amcom Computer Services, a former project lead at eBay, and host of www.cflex.net. He specializes in leveraging technology with process engineering to reduce operating costs while maximizing revenue potential. You can find him on the Web at www.dopejam.com.

Comments (6) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
WebDDJ Duty Online Editor 08/14/06 06:07:57 AM EDT

Please go right ahead, Dreamer. Perhaps you would post the URL back to this thread too - thanks!!

Web Developer's & Designer's Journal
SYS-CON Media

Dreamer 08/14/06 04:07:57 AM EDT

wonderful post.
I am a Chinese.Can I translate this post into Chinese and publish on the web?Of course,with links to the original post. I want more people to know Flex.Thanks

SYS-CON India News Desk 08/10/06 01:06:15 PM EDT

One of the great things about Flex is that you get to spend most of your time working on the business logic and workflow, and less on the cosmetic aspect. This is because the Flex default's look-and-feel is great! The only problem of course is that most people won't spend much time customizing the look, resulting in many Flex apps looking the same. In Flex 1.5 many folks customized the color scheme, but few ventured into modifying the actual skins of the components.

SYS-CON Italy News Desk 08/09/06 07:37:26 PM EDT

One of the great things about Flex is that you get to spend most of your time working on the business logic and workflow, and less on the cosmetic aspect. This is because the Flex default's look-and-feel is great! The only problem of course is that most people won't spend much time customizing the look, resulting in many Flex apps looking the same. In Flex 1.5 many folks customized the color scheme, but few ventured into modifying the actual skins of the components.

Web Developer's & Designer's Journal 08/09/06 04:14:54 PM EDT

One of the great things about Flex is that you get to spend most of your time working on the business logic and workflow, and less on the cosmetic aspect. This is because the Flex default's look-and-feel is great! The only problem of course is that most people won't spend much time customizing the look, resulting in many Flex apps looking the same. In Flex 1.5 many folks customized the color scheme, but few ventured into modifying the actual skins of the components.

Web Developer's & Designer's Journal 08/09/06 02:40:45 PM EDT

One of the great things about Flex is that you get to spend most of your time working on the business logic and workflow, and less on the cosmetic aspect. This is because the Flex default's look-and-feel is great! The only problem of course is that most people won't spend much time customizing the look, resulting in many Flex apps looking the same. In Flex 1.5 many folks customized the color scheme, but few ventured into modifying the actual skins of the components.