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!
on September 11th, 2007 at 1:18 pm
Very nice! I can see where the MDI framework would be very useful.
on September 11th, 2007 at 1:50 pm
[...] Update: The project is live! [...]
on September 11th, 2007 at 5:54 pm
That’s really cool
on September 11th, 2007 at 6:35 pm
It’s an amazing thing! Congratulations!
Now, it’s time to spend some time to write a good documentation.
Regards,
Ved
on September 11th, 2007 at 8:28 pm
Hi Ved, the asdocs are in the svn repository but I will see about getting them posted somewhere a little more easily accessible.
on September 12th, 2007 at 2:57 am
Hey guys,
You have created a great thing! I was playing with this idea in my head for a long time but didn’t find the time to work it out and now I don’t have to anymore! Looking great and working really smooth! Keep it up! And thanks for the shout out:)
on September 12th, 2007 at 8:38 am
This is awesome guys.
Very nicely done and well documented already.
Can’t wait to get a project that requires an MDI manager to try this out.
on September 12th, 2007 at 2:38 pm
Hello guys,
First i want to say: excellent work ! Here in Brazil we are developing a similar project around Flex. Its really funny see other having the same idea around the world.
You can take a look: http://www.riabrasil.org/labs/mdi/
We can share some thoughts later…
Best regards, (Rodrigo e Odilon)
on September 12th, 2007 at 7:54 pm
Ah, MDI… Brings me back to my days of MFC programming…
on September 12th, 2007 at 8:01 pm
[...] return undefined; flexmdi I was just trolling through the flexcoders mailing list and found this announcement from the ‘return undefined;’ [...]
on September 13th, 2007 at 1:42 am
This MDI is awesome and probably the best today! Congratulations!
I’ve seen your note regarding the focus on making this MDI easily customizable and extandable, this is great, but I think there is one customization that many developers will try to do: adding the taskbar, which is always visible and let’s user:
- view the list of minimized windows when any other window is maximized
- switch to another window using the taskbar
From customer experience perspective I think these are commonly used features, and this product would be even greater if these were implemented by default.
on September 13th, 2007 at 8:07 am
Outstanding guys! Demos are sweet. Can’t wait to try it out on my environment.
on September 13th, 2007 at 10:09 am
Wow talk about right on time, I’m pretty sure I’m going to use this one right away, looking pretty solid!
on September 13th, 2007 at 11:11 am
Hi Djam,
I’ve got some good news. While we haven’t implemented (or even thought of to be honest) the concept of a taskbar that is always visible and has representations of open windows as well as minimized ones, we do provide the ability to always see your minimized windows. MDIManager has a property called showMinimizedTiles that when set to true does just that. Maximized windows will not cover up minimized windows, even if there is more than one row. In fact, it will even resize an already maximized window if you minimize enough windows to require a second row.
I do like the idea of better mimicking MS Windows and allowing devs to always show a taskbar though. I will run that by the team and get their thoughts. Better yet, code it up and send it in! :)
Thanks for the feedback.
Ben
on September 13th, 2007 at 11:33 am
HI,there maybe a bug~~
do the follows~
1, Maximize a window
2. resize this maximized window
3. maximize the window
then ,it can’t work.
on September 13th, 2007 at 11:38 am
Hi Nshen,
Thanks for pointing out that you can resize a maximized window. I just fixed that in the code base. However, I am still able to work with the window after doing so. What do you mean by can’t work?
Thanks,
Ben
on September 13th, 2007 at 12:16 pm
I means in this example
http://www.returnundefined.com/flexmdi/explorer/
when after doing these 3 steps
1, Maximize a window
2. resize this maximized window
3. maximize the window
you can’t restore and drag the window ~~
on September 13th, 2007 at 12:29 pm
This is one of the single best things to happen to Flex, well since Flex. Thank you for your work!
on September 13th, 2007 at 2:16 pm
At first I could get the resize event to do anything because in the MDIWindow.as, the events are pointing to the wrong package name. mdi.events.MDIWindowEvent. I had to change to flexmdi.events.MDIWindowEvent. Then, tried listening to the event MDIWindowEvent.RESIZE and it seems to be colliding with the Flex’s resize event.
on September 13th, 2007 at 2:28 pm
Hi Thai, thanks for pointing out the package problem, I see a few of those now. Regarding the event collision, that is something we ran into during development and after talking to Alex Harui learned is pretty much unavoidable. The approach he recommended (and that MDIManager uses) is to have your listener accept a regular Event class and then just do check inside the function like this:
if(event is MDIWindowEvent)
… do stuff …
Glad you brought it up though as I think it should be mentioned in a tutorial at some point. We are planning on releasing a 1.1 early next week to fix some of the bugs we’ve had reported thus far.
Thanks,
Ben
on September 14th, 2007 at 4:35 am
Will the flexmdi:MDICanvas be a limitation to be integrated to some other applications, we have to put all other components in MDICanvas?
on September 14th, 2007 at 9:13 am
Hi Jove,
Not at all. MDICanvas was created solely to allow quick implementations in MXML, you don’t have to use it at all. MDIManager’s constructor requires a container argument, so you can point it at any container you wish. (Its currently typed as UIComponent but I think it should probably be changed to Container or something similar.) So, at least in my experience, a much more common implementation might look like this:
var mgr:MDIManager = new MDIManager(myAwesomeContainer);
… add windows, etc …
HTH,
Ben
on September 18th, 2007 at 3:37 pm
I’m trying to play around with your sample, but I keep getting “unable to load SWC flexmdi.swc” in flexbuilder. Any ideas?
on September 18th, 2007 at 4:40 pm
Hi Diegobu,
Do you mean the explorer? The view source link on it doesn’t lead to a self contained example. If you would like to work with the code I would suggest downloading the ZIP from http://code.google.com/p/flexmdi/. It includes the explorer in the examples folder, but you will still probably need to point your project to the SWC.
HTH,
Ben
on September 18th, 2007 at 4:52 pm
Ben,
Thank you for the response.
I went to http://code.google.com/p/flexmdi/ and downloaded the zip file. I extracted its contents into a temp file. Then I created a new Flex project in Flexbuilder. Then I’ve added flexmdi.swc from the temp directory (Properties -> Flex Build Path -> Add SWC) After adding flexmdi.swc I get a message in the following message in the Problems window: “unable to load SWC flexmdi.swc.” and I’m not able to use the flexmdi library in the project.
Thanks,
Diego
on September 18th, 2007 at 8:41 pm
Hi Diego,
I seem to have the same problem. Not sure whats going on, this is the first we’ve heard of it. Will definitely get this resolved but in the meantime you can add the flexmdi folder as a source folder to your project and it should work.
Thanks,
Ben
on September 18th, 2007 at 10:06 pm
Diegobu, Ben,
It seems that problem is that it’s compiled with moxie and not flex 2.01.
Brian..
on September 24th, 2007 at 4:20 pm
Will there be an update to SWC to compile it with FLEX 2.01 as opposed to Moxie?
on September 24th, 2007 at 6:30 pm
Hi Vince,
We’ve got an update release coming within the week and the SWC will be compiled for 2.0.1. Sorry for any inconvenience.
Thanks,
Ben
on September 25th, 2007 at 10:49 am
Great thanks BTW nice work guys…
on September 28th, 2007 at 12:10 pm
[...] return undefined; blog announcement [...]
on October 4th, 2007 at 5:58 pm
First off thanks for all your hard work this looks great!
I’m curious, I want to incorporate the idea of ‘workspaces’ in my app in addition to MDI. It looks like I just need to manage each of my containers w/ the MDIManager. Assuming this is correct, is it possible to also share windows across the various containers it’s managing?
TIA,
Greg
on October 4th, 2007 at 10:45 pm
Hi Greg,
Do you just mean different window arrangements/sizes saved as sets? MDIManager is really only set up to manage the windows in a sense of positioning and some interactions, it doesn’t have any notion of a “set” of windows.
You could basically just keep track of your different sets as an array of objects and then use that data to update the screen. MDIWindow has a method called savePanel() that is currently private that we should/will make public. (Of course you can change that now in your private copy). Calling savePanel() sets a property on MDIWindow called savedWindowRect which you could later use to reposition/resize the window.
I’m not sure I completely understand your sentence about sharing windows across containers, but it might be helpful to remember that you’re still dealing with the same DisplayList API that exists in all Flex development scenarios. MDIWindow is just a subclass of Panel and MDIManager is just a class to keep track of windows. MDIWindows are still children of a container so all the normal rules still apply.
HTH,
Ben
BTW, were you the one who asked about this in the Boot Camp session?
on October 5th, 2007 at 1:46 pm
Hi Ben,
No I’m not the one from boot camp. I’m just trying to incorporate an idea that HP VUE and later CDE(UNIX world back in the early 90’s) used to carve the screen into workspaces and allow the user to push windows into one or more of the workspaces. The individual windows size and position stay the same, but which ones appear depends on which workspace is selected. I think what you are suggesting is along the lines of:
- maintain an array of windows.
- store info. for which workspaces they should appear in and simply render
the right windows depending on which workspace is selected.
I just stumbled on to ya’lls stuff a few days ago and see it’s almost everything I was looking for. Before I started hacking away I just wanted to make sure the idea wasn’t already incorporated some how.
Thanks for taking the time to respond - I appreciate it.
Greg
on October 16th, 2007 at 2:49 pm
Ben,
Just want to confirm that this code _can_ be included in a commercial product?
Looks like it can from the info. in the source as long as proper copyright is presented, but I noticed a ‘GNU’ license reference on the google site where it is downloaded from and consequently wanted to double check.
TIA,
Greg
on October 16th, 2007 at 3:09 pm
Hi Greg,
Most definitely. I went ahead and updated the project page to list the license as MIT, I think the GNU selection was an oversight. We’d also love to see where/how you’re using it so if you can post a link that would be awesome.
Thanks,
Ben
on October 17th, 2007 at 10:45 am
Thanks Ben. Once I get to that point, I’ll be glad to.
Greg
on October 23rd, 2007 at 6:11 am
[...] ??????????? [...]
on October 30th, 2007 at 5:13 am
Guys,
I have two app bits, one (mx:Application) is MDICanvas that contains couple of windows, another one is actually mx:Modue that has only one MDIWindow, it loads fine into app, but on click-got-focus, it fires into this error:
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at flexmdi.containers::MDIWindow/bringToFront()
Have you ever tried to use flexmdi in this way?
Evi.
on October 30th, 2007 at 2:45 pm
Hi Evi,
I’ve not really worked with Modules at all, and can’t really diagnose your problem with the info provided, but here are a few shots in the dark. Is the MDIWindow in the module associated with an MDIManager? I also know Modules can have issues with shared code (singleton manager classes for example) so if you’re using MDIManager.global that could be causing some issues. Hopefully one of those things will lead you to a solution.
Ben
on December 26th, 2007 at 2:28 am
how to load flexmdi.swc to the WEB-INF Folder. My system is LiveCycle Data Services ES 2.5.1, I use mxml to connect to website. How to load the file? BTW, I develope in Flex Data Services project that I can’t add flexmdi.swc to FLEX.
THANKS!
on December 26th, 2007 at 2:43 am
Flex2
Jrun4
WEB-INF for LiveCycle Data Services ES 2.5.1
ERROR:
12/24 04:43:33 ERROR
unable to load SWC flexmdi.swc
12/24 04:43:33 ERROR unable to load SWC flexmdi.swc
at flex2.compiler.swc.SwcCache.getSwc(SwcCache.java:230)
at flex2.compiler.swc.SwcCache.getSwcs(SwcCache.java:174)
at flex2.compiler.swc.SwcCache.getSwcGroup(SwcCache.java:78)
at flex2.compiler.swc.SwcCache.getSwcGroup(SwcCache.java:67)
at flex2.compiler.CompilerSwcContext.load(CompilerSwcContext.java:52)
at flex.webtier.server.j2ee.IncrementalCompileFilter.fullCompile(IncrementalCompileFilter.java:182)
at flex.webtier.server.j2ee.IncrementalCompileFilter.compileMxml(IncrementalCompileFilter.java:109)
at flex.webtier.server.j2ee.BaseCompileFilter.mxmlToSwf(BaseCompileFilter.java:321)
at flex.webtier.server.j2ee.BaseCompileFilter.invoke(BaseCompileFilter.java:60)
at flex.webtier.server.j2ee.RecompileFilter.invoke(RecompileFilter.java:37)
at flex.webtier.server.j2ee.PathExistsFilter.invoke(PathExistsFilter.java:42)
at flex.webtier.server.j2ee.MxmlServlet.doGet(MxmlServlet.java:161)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:740)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:853)
at flex.bootstrap.BootstrapServlet.service(BootstrapServlet.java:113)
at jrun.servlet.ServletInvoker.invoke(ServletInvoker.java:106)
at jrun.servlet.JRunInvokerChain.invokeNext(JRunInvokerChain.java:42)
at jrun.servlet.JRunRequestDispatcher.invoke(JRunRequestDispatcher.java:286)
at jrun.servlet.ServletEngineService.dispatch(ServletEngineService.java:543)
at jrun.servlet.http.WebService.invokeRunnable(WebService.java:172)
at jrunx.scheduler.ThreadPool$ThreadThrottle.invokeRunnable(ThreadPool.java:428)
at jrunx.scheduler.WorkerThread.run(WorkerThread.java:66)
on December 26th, 2007 at 12:56 pm
Hi,
I am new in flex. It is really cool feature. I download the source files for the sample. but when I ran it, I got a compile error:
Could not resolve to a component implementation.
Do I need extra libs?
Thanks.
Rose
on January 3rd, 2008 at 4:04 am
Hi,
Where can I get the last version of flexmdi ? Version 1.0 available on http://code.google.com/p/flexmdi/ still have some bugs. I also need the taskbar and custom button features (MDIWindow.addControl() is still private).
Thanks
on January 3rd, 2008 at 10:13 am
hi,
This is nice framework.
i downloaded the source along with SWC, and i tried to use this flexmdi in one mine project. i have flex builder 2.0.1.
i added the flexmdi.swc to library path using “add swc”, and added namespace defination at tag.
i didnt got any tag which works……… and it shows error like
cannot resolve component implementation.
later i removed the swc and i added the source folder to library path …… then also it is not worked ……….
so what might b the reason….
plese post the exact step-by-setp instructions what to do after downloaded the .ZIP folder……. so i may help lots of begnniers…
thnx
shrikant
on January 3rd, 2008 at 7:12 pm
@Azly,
The 1.0 version posted is the latest stable release. I have recently started work on some enhancements for the window controls stuff but it is not yet ready to be released. It should be in the next couple of weeks. The whole team, myself included, got a bit burnt out on the project after the release and haven’t had any pressing needs to make updates. If you’ve encountered bugs that have yet to be added to the issues list on Google Code please add them. There are currently no plans to provide the taskbar functionality; that was more of a proof of concept. Though you should be able to implement it with the bits currently available as far as I know. Thanks and stay tuned for the updates, I think they’re good!
@shrikant,
Not sure why adding the SWC is not working, I see the same behavior. I was able to add the flexmdi folder as a source path though and have it work immediately. I don’t have time to investigate or post a detailed tutorial right now so I apologize. I will put that on my list of things to cover when we release the update. In the meantime maybe ask on flexcoders, I know there are people there who have gotten it to work. Thanks!
on January 4th, 2008 at 12:47 am
hi,
Thnks for response…
As i have project in hand and i m in deadline of the project, i need to implement the MDI interface in the application… so there only one way for me. i.e flexmdi. but i m strucked with the above probs… please give me steps to include the flexmdi.swc…
reagrds
shriaknt
on January 4th, 2008 at 11:58 am
Hi, Ben
how can you add the flexmdi folder as a source path?
I currently have a project with flex. I whould like to use flexmdi feature. My project is running under Tomcat. I downloaded flexmdi v1.0, extracted it under tomcat\webapps\mxlm directory, and downloaded mdi example, also extracted under the same dir. when I run the mxml file:MDIExampleExplorer.mxml, it gave me the following error:
Could not resolve flexmdi:MDICanvas to a component implementation
Not sure what I miss.
Thanks
Rose
on January 11th, 2008 at 6:52 am
Hi Ben,
I’m also having problems getting FlexMDI working with FB 2.01. I keep
getting the errors “Unable to load SWC flexmdi.swc” and “An internal
build error has occurred. Please check the Error Log.”
I took a look at your 1.0 release downloaded from the project site, and checked the catalog.xml in the swc, and it’s actually compiled for Flex 3, version 1.1. which is probably why FB is having a coniption fit.
Ben, do you have a version of the FlexMDI swc compiled in Flex 2.01? Seems like you might have uploaded the wrong file?
Thanks,
Joseph
on January 11th, 2008 at 6:54 am
Darn, the XML didn’t show up in my last comment. Let’s see if this works.
Here’s what’s in the catalog.xml file in the 1.0 swc on the project site:
<versions>
<swc version="1.1" />
<flex version="3.0" build="172357" />
</versions>
on January 11th, 2008 at 10:10 am
Hi Joe, I responded to your post on flexcoders about this issue. http://tech.groups.yahoo.com/group/flexcoders/message/98630
on January 11th, 2008 at 12:56 pm
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! :)
on February 8th, 2008 at 8:31 am
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.
on February 8th, 2008 at 9:26 am
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”.
on February 8th, 2008 at 2:04 pm
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!
on February 10th, 2008 at 8:37 am
Ben, that’s great news! I’m looking forward to the new release. Your work is a valuable contribution to the Flex framework.
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