Windows classic skin for Flex 3

March 19th, 2008 | Posted by sven-
Filed under Flex |

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 a familiar look and feel?

Picture 2 copy.png

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 the cascading style sheet file.

Picture 1.png 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 file, Accordion and ButtonBar are unfinished.

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

 
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);
      }
   }
}

28 Responses to “Windows classic skin for Flex 3”

Fabianv Says:
March 24th, 2008 at 12:11 pm
Hey there, thanks for making this! You’ve done a really good job, you definitely deserve more credit! I can see how this could really come in handy in my AIR applications.

ps. Nice blog
Najier Says:
March 25th, 2008 at 12:54 am
Nice work guy. This demonstrates the breadth of the technology.

Would u publish the source for the demo one day?
Matias Says:
March 29th, 2008 at 5:00 pm
You have done an incredible job!! keep the good work!
Mark Says:
March 29th, 2008 at 5:58 pm
Hi,

May I download the png files in assets folder? the skin will work better with the png files.Thanks

Mark
sven- Says:
March 30th, 2008 at 12:21 am
The assets files used in the demo are downlodable:
http://sven.mindtheflex.com/winskin/assets.zip
Warren Poon Says:
April 1st, 2008 at 2:05 am
Hello Sven,
I came across your WinSkin on ScaleNine. It looks fantastic!
However, I’ve run into a small bug it seems, when importing it into Flex Builder 3 (Final release SDK).
The following screenshot:
http://wrentech.ca/samples/winSkinBorder.gif

I’ve made a simple panel with Absolute layout, and added 3 buttons. The first button is at coordinate x,y (0,0) - however, 0,0 begins at the outermost corner, and covers the Panel’s title. Have you experienced this problem with the SDK as well? I never had these problems before with the Builder 3 Beta 3.0 - only with Final SDK.

The only resolution I have found so far, is creating a Canvas in the Panel, (set either x=30, or top=30) and putting the buttons inside the Canvas. However this is not an ideal solution, because every skin has different heights (MXML code needs to be dynamic).

Any input you have would be greatly appreciated!!!
Thanks,
Warren
Vasile Says:
April 1st, 2008 at 10:07 pm
I will tell you just a word: awesome!!!
sven- Says:
April 1st, 2008 at 10:19 pm
Thanks Warren,
For testing purposes, I have just created a blank Flex skin from the default template in Flash. Importing it into the new Flex project, sounds like the same problem occures: http://sven.mindtheflex.com/test/f3panel
sven- Says:
April 2nd, 2008 at 2:43 am
http://bugs.adobe.com/jira/browse/SDK-14806
Mark Says:
April 2nd, 2008 at 3:53 pm
The Alert.show doesn’t look good.Why?
SnakeMedia Says:
April 3rd, 2008 at 7:47 pm
Hello guy your nice work I want to know , how do you build that dragable icons on the desktop of our background?

I want to know. if i work to Flex OS with “drag able” Icons like our demo..

I need dragable icons on my sample Desktop of Flex OS. How do i create simple panel when panel loads from web directory like our application loads from operating system directory. Did you know? For Windows: executable panels, Mac OS X: applicationable panel..

I need configable and idragable iconlinker like icon on the desktop.

How did i now?
sven- Says:
April 4th, 2008 at 1:34 am
The MXML file used in the example looks like this
And the appropriate actionscript code in behind.
Mark Says:
April 5th, 2008 at 4:14 am
Please help me to know how to build a SuperPanel(panel with close and change size) with the library.I need to know the syntax.

I am very interested in the library.would you please release some documentation for the library.

Thanks a lot

Mark
x3m Says:
April 12th, 2008 at 3:12 pm
Hi
Very cool skin
I just tried to use but it gives me plenty errors about not resolved sources
What is the file structure to use?

thx
Jay Says:
April 16th, 2008 at 12:06 am
I can’t get the datagrid border skin to work.

See here: http://img260.imageshack.us/my.php?image=datagridborderskinih5.png

Any hints on this problem? May it be related to the latest changes in Moxie regarding the way that Panel and Datagrid are skinned?
Fidel Viegas Says:
April 16th, 2008 at 9:15 pm
Hi Sven,

You have done an exceptional work with this skin. However, I have run into the same problem as Warren. As it seems we have to use absolute layout for all containers, right? That is a pain in the but if you are using the SDK as opposed to Flex Builder. But anyway, keep up with the good work. I am going to try to play a little bit with it.

Fidel.
Fidel Viegas Says:
April 16th, 2008 at 9:50 pm
Ok, I was trying the Fieldset as you have described, but I get a weird behaviour. I am putting a form inside it, and it renders a box on the top-left corner of the parent container. Do you have an example of using the Fieldset?

Thanks,

Fidel.
Jay Says:
April 17th, 2008 at 2:06 am
@Fidel: you can set the “x” property of the TextField in the Fieldset class to a positive value, this will shift it left and fix the problem. It worked for me.
Fidel Viegas Says:
April 17th, 2008 at 2:47 am
Hi Jay,

My problem was not really related to the positioning of the label, but since you mentioned it I checked the other properties, and found out that for some reason the height of the TextField was too high, and since it had background = true, it was covering the Form I had below.

There is one other limitation, which is the width of the TextField. It isn’t resizable, but that is fixable.

Once again thanks for the tip.
sven- Says:
April 17th, 2008 at 2:53 am
Hi Fidel,

Since the fieldset is just a (extended) Panel, it can be declared like this:

<Fieldset> width="100%" height="100%" headerHeight="34" fieldsetLabel="Extended Panel 3" layout="absolute" styleName="fieldset"> ... </Fieldset>

And in the CSS:
Fieldset { borderSkin: Embed(skinClass="Fieldset_borderSkin"); }
Jay Says:
April 17th, 2008 at 9:06 am
Hey Fidel,

Are you getting the same problem that I mentioned above with the Datagrid border?

It’s not 3D-ish like the Tree component and ListBox component are.
Fidel Viegas Says:
April 17th, 2008 at 9:32 am
Hi Jay,

Yes, I am experiencing the same thing and I have tried messing around with the style, but nothing worked. I can’t still get it to render properly. I have tried the TextArea just to see if it shows the same problem as well, but it didn’t. It works fine.

I really don’t know what the problem is.

Sven, do you have an idea of what the problem may be?
Fidel Viegas Says:
April 17th, 2008 at 9:33 am
Hi Sven,

Thanks for the example.
sven- Says:
April 17th, 2008 at 10:35 am
Hi Jay,

The datagrid border problem appeared in FB3 release.
It definitely worked in beta 3 and even 2
I have created a blank Flex skin from the default template in Flash.
http://sven.mindtheflex.com/test/dgrid.png
Fidel Viegas Says:
April 17th, 2008 at 10:34 pm
Hum… so is this a bug? Has anyone found a workaround? I have searched the web and found the following link http://butterfliesandbugs.wordpress.com/2008/03/06/understanding-flex-3-migration-issues-part-ii/

Do you think it may be fixed as he suggests?
Abhisek Jana Says:
May 9th, 2008 at 7:58 am
Hi Sven,
Simply great …. the application looks simply great. If possible, could you please share the code.
Thanks a lot for sharing the demo … its rocks …
Ranga Says:
September 4th, 2008 at 9:46 pm
Hi Sven,

Its awesome,

But why the windows are not getting resized when we resize the browser??
Cleon Says:
June 4th, 2009 at 10:14 pm
Awesome work! I love it!

To Mark,

RE: “The Alert.show doesn’t look good.Why?”

I wondered the same thing, a quick fix would be to put two “new line” characters (\n\n) before your message. I am new to flex so i dont know if the skin can be edited or if the author would like that but the above is quick and dirty as a temporary workaround.

Mind the Flex

the flex programmer’s team

Windows classic skin for Flex 3

28 Responses to “Windows classic skin for Flex 3”

Leave a Reply

Most Popular Posts

Categories

Bookshelf

Blogroll

Docs

Flex Community Resources

Jobs

Mailing Lists

Tools and frameworks