« Updated: Flex Style Explorer (Background Images & Halo Themes) | Main | Flex Style Explorer on DevNet »
June 28, 2005
Windows XP Theme for Flex
Recently had an engagement where we were tasked with accurately simulating a Microsoft Windows application with Flex. In the process, we created a Windows XP skin for Flex Components that we’re now offering up to the Flex community as a whole.
Why should or why shouldn't you use this skin? There are instances, like the one we were tasked with, where the requirements call for an accurate simulation, or perhaps a rapid prototype of a Windows Application. However, we wouldn't recommend using this skin in most other cases. We try to advocate appropriate user-experiences, and throwing a Windows XP skin on a Flex App that will likely run in a Windows XP window just for the sake of it is anything but an appropriate user experience.
With the previous posts about the Flex Style Explorer, you might be noticing a theme emerging here. The Flex Style Explorer, of course, is all about styling Flex applications with CSS. This approach uses a combination of CSS and a Skin (a .swc file created in Flash Authoring). This, of course, opens up the whole debate about whether to style (CSS) or skin (SWC). I'll avoid going long on this post and just make a couple points, and leave it to your comments to fuel the Style/Skin debate.
- First, skinning takes significantly more development time than styling with CSS. This skin took roughly 40 hours to create, whereas a CSS style could conceivable be done in a matter of minutes to hours, depending on the intended design
- Second, styling is more easily updatable than skins, which require you to fire up Flash Authoring, work with some drawing tools, and export as a SWC rather than changing a few lines of code
- Third, since skinning requires graphical assets, it may increase the file size of your app beyond that which is desireable. (You'll notice the sample app below is 208K)
That all said, skinning does give you a bit more control over the design of the app than styling does. My personal advice would be see what you can do with styling before venturing into skinning.
Finally, I should mention that this skin is not completely perfect (specifically with menus, we ended up going Custom, but the styled menus included are a start).
To see a sample of the XP skins, Click Here.
To download the files, click here.
Posted by Peter Baird at June 28, 2005 04:14 AM
Comments
Now, we await the OSX theme to compliment it (ie have to be fair and all heheh).
I've found skinning to be a pain, and i'm guessing you folks are on the same level - that being said, hopefully FLEX 2.0 will be easier :)
One thing to note, are you able to release the source for the SWC? ie to allow folks to get a code-based understanding of what processes you undertook?
Posted by: Scott Barnes at June 28, 2005 04:01 PM
Please preview the demo in Firefox, the html sound like have problem
Posted by: luar at June 28, 2005 05:29 PM
Sorry about the Firefox problem, and thanks for catching it. It's working fine now in FireFox.
As for the source, I should have been somewhat clearer in mentioning that this was a Graphical Skin, not programmatic. (I can't even begin to imagine the pain involved in doing this programmatically). Making the source .fla file public wouldn't add much more that already exists with pulseBlue.fla or pulseOrange.fla. In fact, I actually used pulseOrange and replaced the appropriate graphics.
Posted by: Peter Baird at June 29, 2005 07:53 AM
Thats killer! Did you guys implement the silver theme as well? ;)
Posted by: Alan Musselman at July 19, 2005 10:40 AM
when I try to user rsl='winXp.swc', it tells me it's imcompatible, and it never works;
also, the rsl cannot use the theme resource inside the swc, this sucks so much!!
Posted by: apple at December 5, 2005 05:22 AM
Hi,
While loading an application from a parent application using Loader control, the theme specified for the parent application is not applied to loaded child application.
Any help is appreciated.
Thanks,
Charly
Posted by: Charly at January 2, 2006 11:25 PM
Back to Scott's comments, wouldn't it be really cool to have OS X theme built entirely with just CSS. With the new style properties if Flex 2.0, it would seem possible, right? ;-) ... keep your eyes posted.
Posted by: Peter Baird at March 6, 2006 01:08 PM
I need somone who know how to make skins for this new chat made by yang gang of china it is off to a great start but the flex 2 skinny sucks
Posted by: Michael at April 1, 2006 06:32 PM
Anyone have anything like this for Flash 8 components?
Posted by: rd at July 6, 2006 06:48 AM
Is there a version of this skin for flex builder 2 available? I tried to compile it into a flex 2 app and it will not work with the older swc.
Posted by: Todd at July 25, 2006 02:00 PM
kickass stuff.. For few seconds i actually felt that i was working on a windows screen!
sky's the limit
Posted by: Prakaz at August 24, 2006 11:04 PM
the html sound like have problem
Thanks
Posted by: Regimages at December 13, 2006 08:15 PM
While loading an application from a parent application using Loader control, the theme specified for the parent application is not applied to loaded child application.
Any help is appreciated.
Posted by: wow gold at April 21, 2007 04:29 PM