Ask a Jedi: Stylin' with Flex

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 developer advocate. He focuses on JavaScript, serverless 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 https://www.raymondcamden.com

Comments