flexmdi: Starting out simple with MDICanvas
The quickest, dirtiest, most basic way to use flexmdi is with the MDICanvas class. MDICanvas essentially wraps the manager (MDIManager) and container (Canvas) into one class, allowing you to define a basic MDI interface purely in MXML. Let's look at some code.
<flexmdi:MDIWindow id="win1" title="Window One" x="10" y="10">
<samples:SampleContent />
</flexmdi:MDIWindow>
<flexmdi:MDIWindow id="win2" title="Window Two" x="250" y="250">
<samples:SampleContent />
</flexmdi:MDIWindow>
<flexmdi:MDIWindow id="win3" title="Window Three" x="100" y="100">
<samples:SampleContent />
</flexmdi:MDIWindow>
</flexmdi:MDICanvas>
As you can probably guess, this will create a 500 x 500 Canvas with three windows in it. The windows are created at the coordinates specified in the MXML, and since no size is specified they are created at the default size of 200 x 200.
As it turns out, thats pretty much all there is to it. You could also use this approach for doing a quick layout in MXML but still use AS to gain a little more control and customize things. You can obviously address any of the windows by their id, but you can also address the MDIManager that is created for you with code like this: mdic.windowManager. I will discuss some of the more advanced topics in subsequent articles but feel free to leave questions or comments.
You can leave a response, or trackback from your own site.
Ben,
Thanks for the quick and informative response!
I got it working with my forms just fine. Now I’m running into the slow resize/redraw issue previously mentioned by another user. If I open two windows (populated with my controls) it gets slow. Even switching focus between the two windows lags for a couple seconds.
Each window contains several flex components (multiple tabs with datagrids, accordion lists, etc.).
I’m willing to pay/donate to get some additional support on this.
Thanks,
Chris
hi guys
could anyone help me with this:
I have an application working with MDICanvas but when I need to add a new MDIWindow in an absolute position I can set the x and y position for the MDIWindow but in the MDICanvas the MDIWindow appears in a different x and y position.
thanks
:::::::::::::::::::::::code::::::::::::::::::::::::::
Create tool, I am using the MDI functionality in an application currently, I do have an issue though, At first launch of application everything is good, then I launch the window, and then minimize, it goes below the screen. But when i resize the browser window and then minimize again the window minimizes to the correct position. i was wondering if you can help me out here, thanks. (Something that I noticed that if I take away my tool-bars its the exact amount of space to the minimized window, don’t know if that will help). Thanks again
This is a wonderful component. Thanks for creating it!!
I have a button on the page that, when clicked, creates a new MDIWindow to display help information. I’ve noticed that I can click the button and create one window after another. The app only needs that one window.
Is the best way to prevent this to call the mdiCanvas.windowManager.removeAll(); before creating the new window. Is there a way to do this that you recommend?
Hi Alex,
It depends on your scenario. I assume you mean what to do when the window is still open and the button is clicked again. In that case I would probably set a var somewhere whenever the window is opened and in your button handler check isHelpWindowOpen before making the call to add the window.
HTH,
Ben
Thanks, Ben. Another question: I’d like to center the new window and allow it to be draggable elsewhere. However, using the following code, when I drag the window and try to drop it somewhere else, it snaps back to the center location,
win.setStyle(“horizontalCenter”,”0″);
mdiCanvas.windowManager.add(win);
mdiCanvas.windowManager.center(win);
Any thoughts on what I’m doing wrong? Without the setStyle() and center(0 calls, the window appears in the top, left and is draggable. Thanks.
Hi Alex,
It snaps back because of the horizontalCenter style. We clear any top, right, bottom left styles when dragging starts but I think horizontalCenter and verticalCenter were overlooked. You should add a feature request to http://code.google.com/p/flexlib/issues/list.
I didn’t even know we had a center() method and the code for it seems to be incorrect. I would just create your own method to center a window manually and use that, and get rid of the existing call to center() and remove the style.
HTH,
Ben
Thanks. Just added a new issue to the bug db. I’m going to search for some code to center a control.
Your example code is missing some critical pieces.
It’s got no xml declaration and contains no xmlns for your flexmdi namespace you’ve used.
Yea, its just an example code snippet. It’s not meant to be a full runnable example.
Hi ,
I am trying to run your source code in flex2 , and have made the following application file
But my flex2 builder is showing me a compile time error as “Definition of base class LayoutContainer was not found”…..
I see this error in MDIWindowControlsContainer ….Seems like this code is not for flex2 as I can’t found this LayoutContainer class in mx.core package…..
Can you kindly guide me where can I find a version of flexmdi for flex2 .
Thanks in Advance
Hi Sajjad,
Wordpress stripped out your code, but LayoutContainer is definitely available in Flex 2. http://livedocs.adobe.com/flex/201/langref/mx/core/LayoutContainer.html
Not sure why you’re having trouble.
Ben
I can’t see the code….
Thanks!
Hi Fred,
Thanks for the heads up. It looks like my old code highlighting plugin hadn’t made the trip over from my old host, but it should be fixed now.
Thanks!
Ben