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.

windowsSkin_01.jpg


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.

13 Responses to Windows XP Theme for Flex

  1. Scott Barnes says:

    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?

  2. luar says:

    Please preview the demo in Firefox, the html sound like have problem

  3. Peter Baird says:

    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.

  4. Thats killer! Did you guys implement the silver theme as well? πŸ˜‰

  5. apple says:

    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!!

  6. Charly says:

    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

  7. Peter Baird says:

    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.

  8. Michael says:

    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

  9. rd says:

    Anyone have anything like this for Flash 8 components?

  10. Todd says:

    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.

  11. Prakaz says:

    kickass stuff.. For few seconds i actually felt that i was working on a windows screen!

    sky’s the limit

  12. Regimages says:

    the html sound like have problem

    Thanks

  13. wow gold says:

    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.