dispatchEvent()™

As promised I’m back with more goodies! This time I’ve extended the simple window manager to support document windows as well as application windows. I also included a class that binds to your MenuBar in an empty menu and keeps it populated with a list of windows. Clicking a window name in the menu will activate, unminimize, and bring the window to the front.

Application windows are windows that can always be brought up, like an activity window, or an about window. When you create an application window, it is created and hidden. Pressing the close button on the window is captured to hide the window rather than allowing it to be destroyed. Thus, it occupies a permanent position on the Window menu.

Document windows are windows which can be created and destroyed. You can have many instances of the same view class. These are useful for new mails or text files or what-have-you.

The main window has a special use. When you attempt to close it, it attempts to close all the child windows as well — so you can have an opportunity to save your unfinished document windows.

This is the windowing toolkit at work on an Apollo app I’m finishing up now. File→New Mail… creates a new document window with the compose view, and adds it to the Window menu. As you change the subject, the title of the window and its name in the Window menu are updated. The Window menu also permanently has several application-wide windows which the close button appears to close. The Window menu brings them and any other window back, even if they are minimized, hidden, or stacked on the bottom.

After the cut, let’s take a look at how this is set up in code.

First, we’ll add the application windows somewhere inside our app’s initialization:

var wm:WindowManager = WindowManager.getInstance();
wm.newApplicationWindow("About", AboutView,
   {maximizable: false, resizable: false, minimizable:false}, 620, 300);
wm.newApplicationWindow("Application Window 1", TestView1,
   {maximizable: false, resizable: false}, 300, 100);

That part looks pretty much like the original window manager from the last post. Now let’s see how we set up a menu item to create new document windows. Here’s the (abridged) XML source of our menu:

protected var menuBarXml:XMLList = <>
	<menuitem label="File">
		<menuitem label="New Mail..." data="newDocument"/>
		<menuitem type="separator"/>
		<menuitem label="Exit" data="exit"/>
	</menuitem>
	<menuitem label="Window"/>
</>;

And the menu bar:

<mx:MenuBar width="100%" id="menubar" labelField="@label"
   itemClick="invokeMenuItem(event.item as XML)"/>

And the event listener:

protected function invokeMenuItem(item:XML):void
{
  var str:String = item.@data;
  switch (str)
  {
    case "newDocument":
      WindowManager.getInstance().newDocumentWindow(ComposeView, "New Mail");
      break;
    //... more cases ...
  }
}

That’s all you have to do to make a new document window! It’s automatically created and tracked by the WindowManager.

Now let’s see what it took to make that empty Window menu live. There’s a utility class, WindowMenuAddon, that takes care of everything for you. All you have to do is create it and give it references to the MenuBar and the node within your menu XML to populate, and it does the rest:

var windowMenu:XML = menuBarXml.(@label == "Window")[0];
new WindowMenuAddon(menubar, windowMenu);

I was pretty happy with how simple this made dealing with windows in the application I’m building. You’ll see that there’s a bunch of methods that let you mess around with windows after they’re created, too, and without bothering to do your own bookkeeping on where they are.

This code was all written last night and I still need to document it and clean it up a little bit, but here it is.

com.partlyhuman.apollo.windowing.* Browse Source | Download (.ZIP, 7k)

This entry was posted on Sunday, April 8th, 2007 at 2:16 pm and is filed under AIR, Flex. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.