Adding dock functionality to FlexMDI Part I

Ben Clinkinbeard gave a great presentation at 360|Flex Atlanta about an open source project he's working on called FlexMDI (MDI stands for multiple document interface). I won't go into a lot of detail, but it's a really amazing windowing system (based on mx.controls.Panel) that has minimize, maximize, etc., and is fully resizable & skinnable. I've been working on a similar project, so I thought I'd see if I could combine them.

Here's the plan:
My goal is to extend this library to support docking. I'd like to take a cue from Adobe's CS3 product line, and enable three different types of docking:

  1. Dragging or resizing a window to within a certain distance of another will cause it to "snap" into alignment.
  2. Dragging a window onto the bottom section of another will cause them to combine into a window stack that moves and resizes as a single unit.
  3. Dragging a window onto the title bar of another window will create a single window with a tab bar at the top.

To keep things simple, I'm tackling these one at a time. Here's part I:

Application - Source

The FlexMDI guys have graciously accepted my offer to include this in a future update of FlexLib, but the code will likely get refactored a bit first. To illustrate the added functionality, I separated it out into two new classes: MDIDockCanvas and MDIDockManager. These will probably end up getting merged back into the MDICanvas and MDIManager classes respectively.

About this entry

You’re currently reading “Adding dock functionality to FlexMDI Part I,” an entry by Ryan Phelan

Published:
03.09.08 / 4pm
Category:
Flex