We've already seen some features of windows. We'll look at some more in this section.
Creating Another Window
You can create a second window for your application in the same manner as you would create the first one. Just create a second XUL file with the window code in it. As in HTML, you can use the
window.open() function to open the second window. This function will return a reference to the newly opened window. You can use this reference to call functions of the other window.
The open function takes three arguments. The first is the URL of the file you wish to open. The second is an internal name of the window. The third is a list of display flags. The flag 'chrome' is important to open the window as a chrome file. If you do not add the 'chrome' flag, the file will open up as the content in a browser window.
var myWin = window.open("chrome://findfile/content/findfile.xul","findfile","chrome");
Specifying the Width and Height
You should have noticed that whenever elements were added to a window, the window's width expanded to fit the new elements. The window is really just a box which is flexible and defaults to vertical orientation. You can also specify the width and height directly on the
tag. This, of course, causes the window to be displayed in a specific size. If you leave it out, the size is determined by the elements that are in it.
<window id="findfile-window" title="Find Files" width="400" height="450" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
In this example, the window will open with a width of 400 pixels and a height of 450 pixels. Even if there aren't enough elements to fit this size, the window will still open at this size and there will be blank space in the remaining area. If there are too many elements, the window will not be large enough to fit the elements. The user will have to resize the dialog. You have to be careful when specifying a width and height that the window is not too small or too big. You should also consider that a user might be using a different theme or locale.
Note that you must specify both the width and the height. If you only specify one, the other will be set to 0. To have the window set its size automatically, leave both the width and height out.
The width and height only specify the initial size of the window. The user may still resize the window to another size, assuming that the window is resizable.
Other Window Features
- The window will always appear behind other windows.
- The window will always appear above other windows.
- The window will be centered on the screen when it is opened.
- The window will always appear relative to the window that opened it. If the window that opened the new window is moved, the new window is moved relative to it.
- The window is a dialog box, which may appear differently.
- The dialog is modal. The window that opened the modal window can't be interacted with until the modal window is closed.
- The user can resize the window.
See also DOM window.open() reference
Next, we'll look at how to open secondary dialogs.