While I generally think that imitating operational system isn’t a good idea at all—in particular old-fashioned Microsoft Windows—however I have found that sometimes it is suitable, and even the best way to sketch-up your new Flex application. Especially when you are rewriting an old Windows legacy software and your client is a Mr. Dursley. Why not let him to use familiar look and feel?

Therefore I created an new skin for Flex. This skin imitates Windows classical look and feel. I have used Flex 3 beta 3 and Flex skin design extensions for Adobe Flash. All you need is to import the skin artwork, or simply put .SWC file your in the Flex project folder. You should use both—Flash .SWC library and cascading style sheet file.

Fieldset (or so-called Windows frame control) is extended Panel (see an example bellow). MenuBar does not use in the demo default List border skin. As a matter of fact I have not finished yet all the UI components: tabs are based purely in the CSS, Accordions and ButtonBar are unfinished.

You can see live demo here. Window management in my demo is based in SuperPanel extension implemented by Wietse Veenstra. Download skin ( 106).

 
package {
 
   import mx.containers.Panel;
   import mx.core.UIComponent;
   import mx.core.UITextField;
 
   public class Fieldset extends Panel {
 
      private var pTitleBar:UIComponent;
      private var t:UITextField = new UITextField();
      public var fieldsetLabel:String;
 
      public function Fieldset() {}
 
      override protected function createChildren():void {
         super.createChildren();
         this.pTitleBar = super.titleBar;
         t.text = fieldsetLabel;
         t.background = true;
         t.backgroundColor = 0xD4D0C8;
         this.pTitleBar.addChild(t);
      }
   }
}