Announcing flexmdi: Robust, extensible MDI framework for Adobe Flex
One thing the Flex community has lacked up to this point is a robust, extensible, open source solution for creating MDI interfaces. Today that is changing as myself (Ben Clinkinbeard), Brian Holmes and Brendan Meutzner are excited to announce flexmdi. As the name and my introduction implies, flexmdi is a framework for easily creating MDI interfaces in Adobe Flex. While you can literally get up and running with flexmdi in a matter of seconds, our team focused heavily on allowing developers to easily extend and customize the framework to fit it to their specific needs.
The project has been constructed during nights and weekends over the past month or so since we all have day jobs, but the focus has always been on creating a framework that enables developers to be productive out of the gate while allowing powerful customizations by way of an intuitive and robust API. Some highlights include:
- Draggable, resizable (from any edge/corner) windows
- Default functionality for minimize, maximize/restore and close
- Extensive event model on both a window and manager level
- Externalized effects classes for transitions (allows developers to create their own or extend from our base implementations)
- Cascade, tile and tile plus fill space window management
- Context menu functionality
- Ability to modify/customize default behaviors, not just override them (though you can do that too)
- Construct UIs in MXML or AS
We have a few articles/tutorials put together already, and more are on the way. This is a pretty solid 1.0 release, but we will also be polishing and cleaning things between now and MAX, where we will be giving a short demo during the Flex Boot Camp session. Please send us your feedback! We are eager to hear from other developers about what is good, what is bad, what should be easier, what use cases you would like support for, etc, etc.
So now, onto the links:
- Project Home
- flexmdi Examples Explorer
- flexmdi: Starting out simple with MDICanvas
- Introduction to MDIManager
- flexmdi Effects
Thats all for now, but expect ongoing updates and articles. And once again, got a complaint? Tell us! Like what you see? Tell us! Want to contribute (code, not money) to the project? Tell us!
Enjoy!
PS – Quick shout out to Wietse Veenstra. We used his stylesheet as a starting point and I believe are still using his images for the window controls buttons. Thanks!
You can leave a response, or trackback from your own site.

Hi Joe, I responded to your post on flexcoders about this issue. http://tech.groups.yahoo.com/group/flexcoders/message/98630
Thanks Ben! I don’t have SVN installed on this machine yet, so it never occurred me to look for the 2.01sdk source files.
DOH!
There’s another flaw in the FlexMDI source code. In “MDIWindow.as” the interface mx.core.IUITextField is used. This class is only available in Flex 3, it’s not part of the Flex 2.0.1 SDK.
Also, I just noticed that some of the CSS style names in “styles.css” do not match the style names in the MDIWindowControlsContainer class. For example, the style name “increaseBtn” in the CSS file has to be renamed to “mdiWindowMaximizeBtn”, and “decreaseBtn” should read “mdiWindowRestoreBtn”.
Hi Stefan, you are correct on both accounts. The 2.0.1 compatible download was assembled while the library was in flux and it shows. The controls package, for instance, is no longer present at all. I apologize for any inconvenience and appreciate you pointing these out. Look for an update early next week with some new features that is fully compatible with 2.0.1.
Thanks!
Ben, that’s great news! I’m looking forward to the new release. Your work is a valuable contribution to the Flex framework.
Hi.
I am trying to addButton example is not working. error comes in
//code
this.addControl(menuBtn,0);
//code
anyone please help me. thanks
Hi again!
When I move a window inside the canvas, I can’t get the right side to go out the canvas, like a normal window will done. The same to top, botton and left.
Hi Paulo,
You need to set enforceBoundaries to false.
Thanks,
Ben
That’s it! Thank you.
Hey, another one..
Changing the focus from one window to another is too slow..
I make some changes disabling events to dispatch and get very fast,,
Great work!
However its sad to see that its only available for the Flex community.
Any plans or tips on how to make it on Flash AS3?
Thanks in advance!
Hi Patrick,
FlexMDI utilizes the Flex component lifecycle and several Flex framework classes, so I don’t really think porting it would be very easy. I’ve not done any component development for Flash so I wouldn’t even know where to begin.
Sorry,
Ben
I’m trying to do something very simple: In response to an event I want to add a view defined in MXML. In my case this is an empty DataGrid. If I
say
public class MDIDataWin extends MDIWindow
{
public function addDataGrid( _mdiCanvas:MDICanvas ):void
{
var win:MDIWindow = new MDIWindow();
win.width = 350;
win.title = “Data Grid”;
_mdiCanvas.windowManager.addCenter( win );
win.addChild( DataGridView);
}
}
I get a coercion error as DataGridView is a class and addChild needs a display object. Any simple way to remedy this? I have many such custom views I’ve created for reuse. Obviously I’m missing something.
TIA.
You need to create an instance of DataGridView.
Thanks. It looks like I can do
with no problems. But if I say the following (identical correct imports etc.) I get a runtime 1065 (can’t find DataGridView at getDefinitionByName). I can’t imagine this is a problem with extending MDIWindow:
public class MDIDataWin extends MDIWindow
{
public var component:String = “com.fa.mdi.views.DataGridView”;
public function addDataGrid( _mdiCanvas:MDICanvas ):void
{
var cls:Class = getDefinitionByName( component ) as Class;
var instance:UIComponent = new cls();
var win:MDIWindow = new MDIWindow();
win.width = 350;
win.title = “Data Grid”;
_mdiCanvas.windowManager.addCenter( win );
win.addChild( instance );
}
}
Well, I am new to Flex and Flex builder but I have long programming
background with delphi.
Can u help me in installing FlexMDI in flex builder so that I can Try it out.
A simple how to right from begining will do. I would like compile this component, install it in flex builder and test ur example application
Thanks and Best Regards.
Raja
Hello ben,
Dont mind, I figured out how to use flexMDI I did following
(it is just for newcomers like me who can get started fast)
1> Extract the FlexMDI to some folder.
2> In ur project add .swc to lib path in Project properites
3> Enjoy this awesome component and say thanks to these
Kind and talented developers.
Well before i end this how to I would like to thank all the development
team of this awesome component. I will post my findings and suggestions soon. BTW I am thinking like a desktop database application developer and evaluating this in that perspective.
I would like to take my desktop delphi database application to
Web with Flex Bulder and FlexMDI will be the starting point since
my desktop application uses many forms which need to be
simultaneously open at a time and user should be able to switch between then easily.
Thanks and Best regards.
Raja
hi, im experiencing the issue that a window content loaded by LOADER() doesnt NOT fit within the frame of the MDIwindow, it seems its not attached to it. i can serve code if wanted. anyone ever done ths with Loader() thx tom
You can try this in place of addControl
this.windowControls.addChildAt(menuBtn, 0);
#
Karel said,
on May 7th, 2008 at 12:09 am
Hi.
I am trying to addButton example is not working. error comes in
//code
this.addControl(menuBtn,0);
//code
anyone please help me. thanks
This is a great component.
>> Changing the focus from one window to another is too slow..
How can we make changing focus faster? What events can be disabled to make it faster?
Thanks!
Yao