Ask a Jedi: Stylin' with Flex

This post is more than 2 years old.

Today is Flex day, can you tell? Jeff asks:

I have been reading all of your recent posts regarding Flex and I have a question for you. Everytime I have seen a flex app, it always looks the same ... i.e. the greenish background with the silver boxes. I would assume the user interface could be designed differently, but I have yet to be able to find an article or any information on "skinning" a Flex app. Is such a thing possible or am I just looking for the wrong thing?

I call it the "Flex Look". It's nice... but boy do you see a lot of examples with it. Does that mean Flex can't be customized in terms of look and feel? Heck no. Consider this screen shot: (Click for larger image)

This is a screen shot from an application my company built using Flex 1.5. I can't share the URL as it is in a private network, but as you can tell, it looks nothing like a "default" Flex skin. (By the way, I did the code for this tab. It was fun and challenging but not nearly as hard as I thought it would be.)

So keep in mind that I'm still a Flex newbie. It is my understanding that you can customize Flex apps with style sheets and custom components. Components being the UI elements like buttons, etc. So you could build a form control called the Ray if you wanted. I think normally the thing you would tweak the most is the style sheets.

You can do a lot with the styles as evidenced by the screen shot above. From the livedocs for Flex 1.5 I found:

Using Styles and Fonts
Using Themes and Skins

The docs above are for Flex 1.5, so you would probably be better served downloading the docs for Flex 2 and reading the relevant chapters there.

You can also play with an online Flex style explorer. I used this when playing around with ways to improve my CFLib demo.

I know I'm just scratching at the surface, but I just want you to be aware that you definitely can get away from the "default" Flex look.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA

Archived Comments

Comment 1 by Ryan Guill posted on 5/10/2006 at 2:41 AM

Also make sure you check out the flexstore: http://flexapps.macromedia....

Its got a great look and feel to it that is definately not the norm, and if you click in the top right hand corner, it actually changes. So not only can you style it just about any way you want, you can also have it change dynamically (think being able to change colors and schemes based on entries into a form or buttons clicked... even able to do mathmatical operations on colors)

Comment 2 by m00n posted on 5/10/2006 at 6:47 AM is made with flex and it looks like a normal website

Comment 3 by trond h. bendiktsen posted on 5/10/2006 at 11:02 AM

hi ray -- fyi: when browsing to your cflib demo ( all i get is a bluish page, with no content whatsoever.
i am running firefox, and Flash Player 8.0.24.
strange -- or?

Comment 4 by João Fernandes posted on 5/10/2006 at 1:46 PM

trond you'll need Flash Player 9 to see it.

Comment 5 by Jay McConathy posted on 5/10/2006 at 10:10 PM

Hi Ray,

Do you think it would be possible to get a copy of the source for the cflib demo? You do a couple things in there I am curious about and wanted to see an example of.



Comment 6 by Raymond Camden posted on 5/10/2006 at 10:15 PM

Heh, right click, do View Source. :)

Comment 7 by Jay McConathy posted on 5/10/2006 at 10:50 PM

Umm.. well for some reason I thought that woud not work :)I should stop thinking..


Comment 8 by JabbyPanda posted on 9/5/2006 at 2:19 PM

I wonder what does happen if your press "Enlarge View" button for any of the coverage maps.

Do you open a new "window" using PopUpManager with a larger map image or do you reshuffle the positions of all maps displayed at the screen to allow selected map image to become bigger?

Comment 9 by Raymond Camden posted on 9/5/2006 at 2:56 PM

A new window was opened.