Welcome!

AJAX & REA Authors: John Funnell, Bob Little, Kevin Hoffman, Maureen O'Gara, Onkar Singh

Related Topics: Adobe Flex, ColdFusion

Adobe Flex: Article

Adobe Flex Interface Customization - Themes, Styles, Skins

The basics of themes, styles, and skins
By Tariq Ahmed
Article Rating:
June 12, 2007 11:15 AM EDT
Reads:
 62,517

Fairly painless wouldn't you say? Well, you may notice there's a bit of an issue; when it comes to scaling, your image gets distorted. You want only the middle to scale, not the corners.

There's a simple remedy for this and it's called Scale-9 formatting. It's similar in spirit to using HTML tables to create a header at the top of your Web page that resizes properly by repeating the cell backgrounds, while using non-repeating images for the parts that remain fixed in dimension. Except in Flex the inner part of the image will scale as needed, corners won't scale, and the top and bottom parts will stretch accordingly.

This is done by using four additional attributes called scaleGridTop, scaleGridBottom, scaleGridLeft, and scaleGridRight when embedding the image. For example:

[Embed(source="button_over.png",scaleGridTop="18",scaleGridBottom="31",scaleGridLeft="8",scaleGridRight="158")]

The numbers are relative to the top and to the left as follows:

Now you've got a skin that will preserve itself more proportionally!

Image H

Conclusion
The goal of this article was to warm you to altering the look-and-feel of your Flex apps by relating the things that you're used to when building HTML-based ColdFusion apps with how they're done in Flex.

There's actually a lot more to discuss such as Style inheritance, limitations, programmatic styling, and skins, using SWFs for themes and graphical assets, compiling theme SWC files, and a whole lot more.

Published June 12, 2007 – Reads 62,517
Copyright © 2007 SYS-CON Media, Inc. — All Rights Reserved.
Syndicated stories and blog feeds, all rights reserved by the author.

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.