return undefined;

flexmdi sans MXML

Posted in AS3, Flex, flexmdi by Ben Clinkinbeard on the March 11th, 2008

Update: I have slightly modified the code below to correct a mistake in the original post. Thanks to Brindy for pointing it out.

Every now and then I come across a request of how to use FlexMDI using only ActionScript. Its completely straightforward but I have finally gotten around to getting an example up. The first code snippet shows how to do this while still utilizing MDICanvas for some of the convenience it provides.

PLAIN TEXT
Actionscript:
  1. import flexmdi.containers.MDICanvas;
  2. import flexmdi.containers.MDIWindow;
  3. import flexmdi.effects.effectsLib.MDIVistaEffects;
  4.  
  5. private function init():void
  6. {
  7.     var mdic:MDICanvas = new MDICanvas();
  8.     mdic.percentWidth = mdic.percentHeight = 100;
  9.     mdic.effects = new MDIVistaEffects();
  10.    
  11.     var win1:MDIWindow = new MDIWindow();
  12.     win1.title = "First Window";
  13.     win1.width = 300;
  14.     win1.height = 200;
  15.     mdic.windowManager.add( win1 );
  16.    
  17.     var win2:MDIWindow = new MDIWindow();
  18.     win2.title = "Second Window";
  19.     win2.width = 300;
  20.     win2.height = 200;
  21.     win2.x = 325;
  22.     win2.y = 50;
  23.     mdic.windowManager.add( win2 );
  24.  
  25.     var btn:Button = new Button();
  26.     btn.label = "Awesome Button";
  27.     win2.addChild( btn );
  28.    
  29.     addChild( mdic );
  30. }

This next example shows how to turn a basic Canvas component into the container for an MDI implementation.

PLAIN TEXT
Actionscript:
  1. import flexmdi.containers.MDICanvas;
  2. import flexmdi.containers.MDIWindow;
  3. import flexmdi.effects.effectsLib.MDIVistaEffects;
  4. import flexmdi.managers.MDIManager;
  5.  
  6. import mx.containers.Canvas;
  7.  
  8. private function init():void
  9. {
  10.     var canvas:Canvas = new Canvas()
  11.     canvas.percentWidth = canvas.percentHeight = 100;
  12.    
  13.     var mgr:MDIManager = new MDIManager( canvas, new MDIVistaEffects() );
  14.    
  15.     var win1:MDIWindow = new MDIWindow();
  16.     mgr.add( win1 );
  17.     win1.title = "First Window";
  18.     win1.width = 300;
  19.     win1.height = 200;
  20.     win1.x = win1.y = 10;
  21.    
  22.     var win2:MDIWindow = new MDIWindow();
  23.     mgr.add( win2 );
  24.     win2.title = "Second Window";
  25.     win2.width = 300;
  26.     win2.height = 200;
  27.     win2.x = 350;
  28.     win2.y = 100;
  29.  
  30.     var btn:Button = new Button();
  31.     btn.label = "Awesome Button";
  32.     win2.addChild( btn );
  33.    
  34.     addChild( canvas );
  35. }

Hopefully this clears up some of the uncertainty around how to use FlexMDI without our good friend MXML but feel free to ask questions in the comments.

12 Responses to 'flexmdi sans MXML'

Subscribe to comments with RSS or TrackBack to 'flexmdi sans MXML'.

  1. Am said,

    on March 12th, 2008 at 2:34 pm

    hi,
    does that mean that it can be used in a pure actionscript project and not a flex project?
    thanks!

  2. Ben said,

    on March 12th, 2008 at 2:43 pm

    Unfortunately, no. MDIWindow is a subclass of Panel. Sorry.

  3. userk said,

    on March 28th, 2008 at 9:21 am

    Thanks for this soft!
    When load image 640x480 in windows from example code
    http://boris3gl.narod.ru/PV3D/WOW/WowStepSwitch/mdi.html
    don't see all image
    when use resize function
    http://boris3gl.narod.ru/PV3D/WOW/WowStepSwitch/mdi1.html
    all work , but when event's are windowMaximize,
    windowRestore how get win.width and win.hight ?..
    some code for function for resize

    private function windowResiseForFocusedWin(event:Event):void{
    var mgrEvent:MDIManagerEvent = event as MDIManagerEvent;
    var tmpWin:MDIWindow = mgrEvent.window;
    var tmpImg_ar:Array = tmpWin.getChildren();
    if(tmpWin.getChildren().length > 0){
    var tmpImg:Image = tmpImg_ar[0];
    var tmpImgW:Number = tmpImg.width;
    var tmpImgH:Number = tmpImg.height;
    tmpImg.scaleX = tmpImg.scaleY = tmpWin.width/640;

    //fool code, delete this and windowMaximize,windowRestore no work
    if(mgrEvent.type == 'windowMaximize'){
    tmpImg.scaleX = tmpImg.scaleY = 1;//tmpWin.width/640;
    tmpImg.x = (mdiCanvas.width - tmpImg.width)/2; //no work
    }
    if(mgrEvent.type == 'windowRestore')
    tmpImg.scaleX = tmpImg.scaleY = 0.5;//tmpWin.width/640;
    }//if
    }//windowResise()

    rest code
    http://pastebin.com/m5bbb92b5

  4. Ben said,

    on March 28th, 2008 at 11:12 am

    Hi Userk,

    I'm sorry but I don't understand your question.

    Ben

  5. userk said,

    on March 28th, 2008 at 12:23 pm

    Click Add 2-3 windiw, then Tile or Cascade - win and image start resize . When click windowMaximize,windowRestore - image don' t resize with windows.

  6. Ben said,

    on March 28th, 2008 at 12:53 pm

    Ah, I see. Unfortunately I think you are running into an issue that has been brought up a few times recently. The RESIZE events are only dispatched from manual resize events using the draggable edges/corners of the windows. Things like maximize, restore, tile, etc do not trigger these events.

    We are looking into implementing this in a future version though.

    Sorry,
    Ben

  7. userk said,

    on March 28th, 2008 at 1:13 pm

    Thanks . Wait for future version and finished proect later
    http://boris3gl.narod.ru/PV3D/WOW/WowStepSwitch/WOW_SPIRAL.html
    Next question,( sorry)
    when use
    win.horizontalScrollPolicy = 'false' ;
    win.verticalScrollPolicy = 'false';
    all work, but when after this use
    win.horizontalScrollPolicy = 'true' ;
    win.verticalScrollPolicy = 'true';
    no work ?
    how dispatch to this?

  8. frederic said,

    on May 16th, 2008 at 5:31 am

    Hello and congratulation for your works.

    i would like to create a main application that manage windows in order to open external MXML Components/Files in each window .. is that possible ?

    thanks for your help

    fred from Mauritius
    ps: sorry for my poor english

  9. Ben said,

    on May 16th, 2008 at 9:04 am

    Hi Fred,

    Yes, you can definitely load modules into MDIWindows and/or use SWFLoader to load external SWFs into them. A full discussion of those is too large and complex to be had here but there is lots of good info in the docs.

    I have to say I think its pretty cool that someone as far away as Mauritius reads my blog. :) Best of luck with your application!

    Ben

  10. brindy said,

    on August 26th, 2008 at 2:52 pm

    Hi,

    I tried the first example and it didn't work until I changed
    mdic.addChild( win )
    to
    mdic.windowManager.add( win )

    Using the first method I was getting the following error:
    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at flexlib.mdi.containers::MDIWindow/onTitleBarPress()[/Users/dougmccune/Documents/Flex Builder Moxie/flexlib/trunk/src/flexlib/mdi/containers/MDIWindow.as:1406]

    Cheers,
    Brindy

  11. Ben Clinkinbeard said,

    on August 26th, 2008 at 3:01 pm

    Hi Brindy,

    Sorry about that, I recently realized that adding a child to an MDICanvas does not cause the window to be added to the managed list. I am working to implement that for our next release but in the meantime your workaround is correct.

    Thanks,
    Ben

  12. flex2colombia said,

    on September 3rd, 2008 at 5:13 pm

    Hi...
    this is an offtopic question...

    Is it possible to use css styles with MDIWindow?

Leave a Reply