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

One thing you may have noticed when I introduced the out-of-the-box themes - a bunch of them were CSS files. Which begs the question: Can you source them in using the <mx:Style> tag? Yup! As mentioned before, style definitions are the root of your theme.

Just something to remember, though, is that you can't use the <mx:Style> to source in a theme SWC file; and using the -theme compiler option gives you extended flexibility to control what theme files to use during the build and release phase of the project (particularly useful for large projects).

Flex gives you many deployment options here so use whatever's most convenient.

The Skinny on Skins
For those of you who use WinAmp or Firefox you may have played around with their skins and seen how the look can be drastically altered. Flex lets you do the exact same things and more.

There's actually two ways to skin. Graphical skinning uses images to define parts or all of a component, and programmatic skinning lets you use code to define the way a component looks and behaves.

Here we're going to look at the graphical way of using JPEGs, GIFs, and PNGs to define the look of a component. When skinning you take into consideration the states of a component or control; the common states that most controls exhibit are the mouse off, mouse over, and mouse down states. One of the most popular things in HTML to represent graphically is the button, and to add some pizzazz you could use some JavaScript to add a rollover effect that swapped out the default image to a mouse over state image.

It's very simple in Flex; you use CSS/Styles to specify what assets to use for your graphical skins. In the Button Class (mx.controls.Button) documentation you'll notice it supports many Style properties, but namely the following skin-related properties:

  • disabledSkin
  • downSkin (mouse down)
  • overSkin (mouse over)
  • upSkin (mouse not over)
  • selectedDisabledSkin
  • selectedDownSkin
  • selectedUpSkin
  • selectedOverSkin
So using your favorite editor such as Photoshop, create three images to represent the states for mouse down, over, and up. Note that Flex will recognize transparent backgrounds in GIFs, PNGs, and SWFs.

If you want to take it a bit further you can also create images for the disabled state (i.e., <mx:Button enabled="false"/>), as well for the selected skins that are used to skin the background and the border of the button.

To test them quickly, use the inline approach:

<mx:Button label="My Skinned Button"

overSkin="@Embed('button_over.png')"
downSkin="@Embed('button_down.png')"
    upSkin="@Embed('button_up.png')"/>

Compile and run your application and you should see a button that changes when you mouse over it and click down on it.

If your button is big enough to contain the text it will retain its original size, but if it wasn't Flex will automatically scale it to a big enough size. Add a fontSize="25" to your Button tag and see how Flex scales it:

Image G

The whole Embed business is a directive that tells Flex to import the image during compile time. You can abstract the name of the actual image files out of the Button into a script area of your MXML and embed the image elsewhere so that your Button doesn't need to know the exact filenames involved by doing:

<mx:Script>
<![CDATA[
[Embed(source="button_over.png")]
[Bindable]
public var buttonOver:Class;
[Embed(source="button_down.png")]
[Bindable]
public var buttonDown:Class;
[Embed(source="button_up.png")]
[Bindable]
public var buttonUp:Class;
]]>
</mx:Script>

<mx:Button label="My Skinned Button" overSkin="{buttonOver}" downSkin="{buttonDown}" upSkin="{buttonUp}"/>

Of course even better is just wrapping that all up into a Style:

<mx:Style>
   .skinnedButton
{
     overSkin: Embed(source="button_over.png");
     downSkin: Embed(source="button_down.png");
upSkin: Embed(source="button_up.png");
}
</mx:Style>

<mx:Button label="Skin Class" styleName="skinnedButton"/>

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.