Thursday, September 07, 2006

Enhanced Flex MDI Interface

Two weeks ago, I posted a prototype MDI (Multiple Document Interface) application. Well, I am very happy to say that this has been seriously improved. I'll say it again, this is one concept that Flex handles very well. I have yet to find anoter web development technology that allows as rich of an interface, with such easy of use, extensibility, and resusability. Hopefully this will help you to spur your own ideas.

Check out the demo (2 MB captivate movie):


...Or try it out yourself.

Basically, here's what I've done to make it better:
  • Animation! Yes, that's correct. There are now animations for minimize, maximize, resize, etc... Inside my WindowComponent class I've taken advantage of Flex effect's easing functions on the animations. It will turn into some neat mac-genie-like effects (but I've toned it down b/c it can also make you nauseous).
  • Did you say resize? Yes, I did. You can click and drag on the bottom right corner of the window to resize it (if resize is enabled).
  • Ability to minimize windows to the bottom of screen (and they stay on the bottom when the screen is resized).
  • Enable/Disable window options. The window options (minimize, maximize, resize, close) can be enabled/disabled per window instance through either mxml code or actionscript.
  • When a window is maximized, it can't be dragged & dropped. It can only be dragged and dropped once it has been minimized or restored to default state.
  • Did I just say that it could be implemented in mxml? Yes, I did. It has been modified so that you can create window components using either mxml or actionscript (your choice). This is the extensibility and resuability that I am talking about. It is extremely easy to build amazing applications using this approach. For example:
    <mdi:WindowComponent title="Example Window" >
    <mdi:content>
    <mx:Text width="100%" height="100%" text="This is a window." />
    </mdi:content>
    </mdi:WindowComponent>

That's all the changes that I can think of off the top of my head, but there could be more... Sorry, I'm not sharing the source of this. If you have questions or comments, feel free to let me know at andrew.trice(at)cynergysystems.com.

Try out the MDI interface for yourself.

4 Comments:

Blogger Nguyen Vu Long said...

This post has been removed by a blog administrator.

Sun Oct 22, 12:38:00 AM EDT  
Blogger Jelly B. Good said...

Why would you have a blog and publish this and then say its closed source? You are obviously using your "blog" to advertise your company/component. At least have the decency to be up front about it.

Wed Aug 06, 06:26:00 PM EDT  
Blogger Kem said...

I sure do wish you would share this MDI windowing code. I have to do exactly this for my next project. Since I'm brand new to Flex, what probably took you weeks to do, will take me months. Don't you want to help train/grow the Flex community??? If you change your mind, or if anyone else out there has similar code you are willing to share, please send it to kvandyken@pervasive.com.

Fri Oct 17, 10:26:00 AM EDT  
Blogger Andrew Trice said...

There is an open source project that is very similar: http://code.google.com/p/flexmdi/

Fri Oct 17, 12:17:00 PM EDT  

Post a Comment

<< Home