Announcing flexmdi: Robust, extensible MDI framework for Adobe Flex

09.11.07Posted by Ben in AS3, Flex, flexmdiComments Off

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:

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!

Both comments and pings are currently closed.

http://www.ericfeminella.com Eric Feminella

Very nice! I can see where the MDI framework would be very useful.
http://www.returnundefined.com/2007/09/custom-flex-components-providing-default-yet-overridable-behavior/ return undefined; » Custom Flex components: Providing default yet overridable behavior

[...] Update: The project is live! [...]
http://www.munkiihouse.com Tony Fendall

That’s really cool
http://www.vedovelli.com.br Ved

It’s an amazing thing! Congratulations!

Now, it’s time to spend some time to write a good documentation.

Regards,

Ved
Ben

Hi Ved, the asdocs are in the svn repository but I will see about getting them posted somewhere a little more easily accessible.
http://www.wietseveenstra.nl Wietse Veenstra

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:)
Boubalou

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.
http://www.riabrasil.org riabrasil

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)
pan69

Ah, MDI… Brings me back to my days of MFC programming…
http://florecista.wordpress.com/2007/09/13/return-undefined-flexmdi/ return undefined; flexmdi « Thinking Differently

[...] return undefined; flexmdi I was just trolling through the flexcoders mailing list and found this announcement from the ‘return undefined;’ [...]
Djam

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.
http://www.m2xtreme.com GregM

Outstanding guys! Demos are sweet. Can’t wait to try it out on my environment.
http://www.jim-media.com ill

Wow talk about right on time, I’m pretty sure I’m going to use this one right away, looking pretty solid!
Ben

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
http://www.nshen.net Nshen

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.
Ben

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
http://www.nshen.net Nshen

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 ~~
Steve Walker

This is one of the single best things to happen to Flex, well since Flex. Thank you for your work!
Thai

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.
Ben

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
http://flex-flex.net Jove

Will the flexmdi:MDICanvas be a limitation to be integrated to some other applications, we have to put all other components in MDICanvas?
Ben

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
Diegobu

I’m trying to play around with your sample, but I keep getting “unable to load SWC flexmdi.swc” in flexbuilder. Any ideas?
Ben

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
Diegobu

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
Ben

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
http://brianjoseph31.typepad.com/smashedapples/ brian.joseph31

Diegobu, Ben,
It seems that problem is that it’s compiled with moxie and not flex 2.01.

Brian..
vince

Will there be an update to SWC to compile it with FLEX 2.01 as opposed to Moxie?
Ben

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
vince

Great thanks BTW nice work guys…
http://booleanbetrayal.com/2007/09/28/the-leetness-that-is-flexmdi/ booleanbetrayal» Blog Archive » the leetness that is flexmdi

[...] return undefined; blog announcement [...]
greg

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
Ben

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?
greg

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
Greg

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
Ben

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
Greg

Thanks Ben. Once I get to that point, I’ll be glad to.

Greg
http://www.riaeye.com/archives/flexmdi THE EYE OF RIA » FlexMDI

[...] ??????????? [...]
http://blog.skitsanos.com/ Evi

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.
Ben

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
mycalf

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!
mycalf

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)
Rose

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
Azly Nacro

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
shrikant

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
Ben

@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!
shrikant

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
Rose

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
http://blog.joeflash.ca Joeflash

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
http://blog.joeflash.ca Joeflash

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>
Ben

Hi Joe, I responded to your post on flexcoders about this issue. http://tech.groups.yahoo.com/group/flexcoders/message/98630
http://blog.joeflash.ca Joeflash

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!
Stefan Schmalhaus

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.
Stefan Schmalhaus

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”.
Ben

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!
Stefan Schmalhaus

Ben, that’s great news! I’m looking forward to the new release. Your work is a valuable contribution to the Flex framework.
Karel

Hi.

I am trying to addButton example is not working. error comes in
//code
this.addControl(menuBtn,0);
//code

anyone please help me. thanks
paulo

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.
http://www.returnundefined.com/ Ben Clinkinbeard

Hi Paulo,

You need to set enforceBoundaries to false.

Thanks,
Ben
paulo

That’s it! Thank you.
paulo

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,,
Patrick

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!
http://www.returnundefined.com/ Ben Clinkinbeard

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
http://none chris skiscim

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.
http://www.returnundefined.com/ Ben Clinkinbeard

You need to create an instance of DataGridView.
http://none chris skiscim

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 );
}
}
Raja Patil

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
Raja Patil

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
tom

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
http://www.maoanz.com Maoan

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
yao

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

Announcing flexmdi: Robust, extensible MDI framework for Adobe Flex

Search

Categories

Archives

Recent Posts

Recent Comments

Contact Ben