You are,
no doubt, familiar with the concept of a window. You are most probably
viewing this tutorial in a browser window under a window-based operating
system such as Microsoft Windows or Mac OS. Windows are fundamental UI
controls in GUI applications. As web applications, also known as WUI (Web
User Interface) applications, increasingly adopt more and more of the
characteristics of GUI applications, the concept of Windows within WUI
applications has materialized. Personally, I can't say that I am overly
enthusiastic about this. Remember that a web application, unlike a GUI
application, is already being run within a document in a GUI application
(the web browser.) Having windows within the document can get confusing.
Also, it is important to note that GUI applications bring with them certain
user expectations. If it looks like a window, it should behave like a
window. The Window component does a good job of emulating window behavior
but it does lack certain functionality, such as minimizing or resizing
a window. Using windows in your web application may make a lot of sense,
depending on the requirements of your application, but simply littering
your application with windows will not guarantee a pleasant or usable
experience for your users.
The Window component contains a draggable frame with title area and,
optionally, a close button. Like the Scroll Pane, you can display a form,
movie clip or external SWF in a Window. Unlike the Scroll Pane, it does
not automatically allow you to scroll the said content. In order to do
this, you need to load your content into a Scroll Pane and load a movie
clip, form or external SWF containing your Scroll Pane into the window.
If you're going to do this, make sure that your Scroll Pane fits perfectly
within the Window (this can be a tricky game of trial and error.)
Since the Window is one of the components that is only available in Flash
MX 2004 Professional and since forms are also only available in this version
of Flash, let's take a look at how to load a form into a Window component.
You should be aware that the Window component cannot display a form that
has external content loaded into it via its contentPath parameter. This
issue is not addressed in the documentation so I cannot say for certain
whether this is a bug or a fact of life (a known design limitation of
the system.)
Create a new Flash Form Application document by selecting File ->
New (Ctrl-N) and Flash Form Application from the list of supported documents
types.
Use the following screenshot as a guide when following the instructions
in the next few steps. The Timeline in a forms-based document defaults
to its minimized state so make sure you click on its title bar to restore
it.
Create a new layer in the Timeline. Label the top layer Actions
and the bottom layer Button.
Drag an instance of the Button component on to the Stage. Give it
the instance name showWindowButton and set its label to read Show Window.
Use the Insert Screen icon to add a new form to your application.
It will get added with the default name of form1. This is fine for the
purposes of this tutorial but in a real-world application you will want
to replace this with a descriptive name.
Click on form1 to select it and rename Layer 1 in its timeline to
Form Content.
With form1 still selected, select File->Import->Import to Stage...
(Ctrl-R) and select the loader_content.swf file from your downloaded
materials. This will place the SWF on Frame 1 of the Form Content layer
within your form. Your stage should now resemble the one in the screenshot
below.
Using the Property Inspector (PI), set the visible parameter of form1
to false. You want the form to appear when the user presses the Show
Window button, not before. The Window component will automatically make
the form visible when necessary.
Click on the main application screen to select it and drag an instance
of the Window component on Stage. After placing it on Stage, delete
it. You will be creating the Window dynamically when the user presses
the Show Window button, using the PopUpManager. Placing the component
on Stage and deleting it adds it to your Library. It is a roundabout
way of doing things but it's currently the only way we have!
Enter the following code on Frame 1 of the Actions layer of the main
application screen:
buttonListener = new Object();
buttonListener.click = function ()
{
myWindow = mx.managers.PopUpManager.createPopUp
(
form1.rootScreen,
mx.containers.Window,
false,
{
title:"A Kitty With an Attitude",
contentPath:"form1"
}
);
myWindow.setSize(320, 240);
}
showWindowButton.addEventListener("click", buttonListener);
I have again used non-standard indentation when calling the createPopUp
method to better illustrate the various arguments that you have to pass
to it. The first argument determines where the Window is drawn. In this
example, it makes sense to have it appear on the main application screen's
timeline. To do this, you need to go get the reference to the timeline
in a roundabout manner, by referring to the rootScreen of the form1
form (referencing application directly does not work.) Next, you need
to specify the class that determines the type of pop-up you are trying
to create. In this case, you want to create a Window and the class for
that is mx.containers.Window. The false argument refers to whether or
not the window should be modal. When a window is modal, the user cannot
interact with any other control in the application. The Window component
achieves this by placing a transparent button underneith the window
to catch all mouse events. A non-modal window, like the one you are
creating here, does not limit the user's freedom to interact with the
rest of the application. The last argument is an activation object.
You use it to pass the title of the window and its contentPath to the
window class. Notice how the content path is simply the name of the
form that contains the content you want to display in the window.
Test the movie and click on the Show Window button. You can see the
completed application in action below.
Download Source Files (5MB!) 
go to previous page 
