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.