Andrew Trice

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.