XUL Tutorial - 3.2 - Features of a Window
Previous Contents Reference Next

XUL Tutorial - Features of a Window

We've already seen some features of windows. We'll look at some more in this section.

Details about a Window

You should have noticed in the first few sections of this tutorial that whenever elements were added to a window, the window's width expanded to fit the new element.

We then added a vertical box to the window to orient the elements vertically. But we could have achieved the same effect by removing one of the boxes. This is because a window is actually a box in itself. You can place the orient attribute directly on the window tag instead of placing a box around the entire contents. This is useful as it saves as extra box. Obviously, the window defaults to a horizontal box, as elements are placed side by side.

Another feature that is useful only during development is to enable the debugging mode of a window. To do this, add an attribute to the window called debug and give it a value of true. This will cause the window to display the boxes and springs so you can see what is happening. The example below shows how to use it.
<window
  id="findfile-window"
  title="Find Files"
  debug="true"
  xmlns:html="http://www.w3.org/1999/xhtml"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

The image below shows the effect when applied to the find files dialog. Rectangles have been drawn around all of the boxes.

[Image of find files in debugging mode]

In the image, you might notice a number of additional boxes in place. This is because each XUL element is made up of a number of boxes itself. You can normally ignore these. You can actually specify the debug on any box, not just on a window.

Specifying the Width and Height

You can also specify the width and height directly on the window tag. This, of course, causes the window to be displayed in a specific size. If you leave it out, as we have been doing, the size is determined by the elements that are in it. Each time we added elements, the window always opened to fit them.

<window
  id="findfile-window"
  title="Find Files"
  width="400"
  height="450"
  xmlns:html="http://www.w3.org/1999/xhtml"
  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.

Note that must specify both the width and the height. If you only specify one, the other will be set to 0. To have the window 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.

Other Window Features

The flags below can be passed as part of the third argument to the window.open function. Your operating system may not support all of them. You can also use any of the pre-existing flags, which you should find in a JavaScript reference.


(Next) In the next section, we'll look at specifying the sizes of individual elements and how to constrain their sizes.

XUL Tutorial - 3.2 - Features of a Window
Previous Contents Reference Next