Wednesday, January 24, 2007

Napkin skins in Flex

How easy is it to skin a Flex application? As an experiment, I tried to create something that looks like the Napkin L&F for a simple Flex app. (The idea of the Napkin L&F is to have your UI look like it was scrawled on a napkin -- which might be useful if you wanted people to get the fact that your mock-up was just a mock-up and not a fully functional app.)

The application is a slightly modified version of the DataGrid sample from the Flex 2 Component Explorer. Here are the "before" and "after" screenshots (click on the screenshot to see the app):
before:

after:

So, was it easy? I'll break it down into three separate stages. The first stage involves adding CSS styles and graphical skins to the app; the second stage involves using programmatic skins; the third stage deals with subclassing Flex framework classes in order to achieve fine-grained control of the look-and-feel.

7 comments:

JabbyPanda said...

Absolutely terrific!

I give us an inspiration to go forward with Flex2 by displaying beautiful things.

BIG THANK YOU.

Juixe said...

Woah! I even think your Flex napkin L&F looks better than the Java version. Great job...

Eylon said...

Update: added links to posts about the three stages.

Mex said...

thanks a lot for this source!!!!!!!!!! I'm just begining as a rich internet application developer an your example was really useful in order to understand skinning merging CSS styles and ActionScript classes. Thanks a lot!!

Anonymous said...

where is the source that was referenced in the above post? WOuld like ot have a look at it if possible... thanks!

Anonymous said...

nevermind - brain farted on this one - duh - view source.... erg

Anonymous said...

Thanks.Best Regards
Erotik Shop, Erotik Market, Erotic shop, Sex shop, Geciktirici, Seks shop, Penis Buyutucu, cialis, kamagra, viagra, sexshop, seksshop, erotic market, virility pills

sex shop -

sex shop -

sex shop -

seks shop -

seks shop -

seks shop -

erotik shop -

erotik shop -

penis buyutucu -

penis buyutucu -

penis buyutucu -

erotik shop -

seks shop -

sex shop -
erotik shop -
erotik market -

vidrom.com -

video share -

file upload -
free file -

image upload -

erotik market -
erotic market -
erotik market -
erotik market -
erotic shop -
erotic shop -
erotic shop -

alisveris -

12 taksit -

feromon -

Kozmetik
Shopseks.com
Hepzinde.com
penis buyutucu -
penis buyutucu -
virility pills -
elektronik sigara -
virility pills -
penis buyutucu -
penis buyutuculer -
bayan ic giyim -
virility pills -
elektronik sigara
feromon