XUL Tutorial - Content Panels

In this section, we'll look at how to add panels that can display HTML pages or other XUL files.

Adding Child Panels

There may be times when you want to have part of a document loaded from a different page. Sometimes, you will want to change part of the window. A good example is a setp-by-step wizard that guides you through a number of screens, asking a set of questions. Each time the user clicks the Next button, the next screen of the wizard is displayed.

You could create a wizard interface by opening a different window for each screen. There are three problems with this approach. First, each window could appear in a different location (although there are ways around this). Second, the elements such the Back and Next buttons are the same throughout the interface. It would be much better if just the content area of the wizard changed. Third, it would be difficult to co-ordinate scripts when running in different windows.

A better approach is to use the iframe element, which works much like the HTML version of it. It creates a separate document within the window. It has the advantage that it can be placed anywhere and the contents can be loaded from a different file. You can use a script to change the contents of the iframe without affecting the main window.

In the Mozilla browser window, the area where the web page is displayed is created by using an iframe. When the user enters a URL or clicks on a link in a document, the source of the frame is changed.

The following is an example of using an iframe:

<box orient="vertical">
 <toolbox>
  <toolbar>
    <button value="Back"/>
    <button value="Forward"/>
    <textfield id="urlfield"/>
  </toolbar>
 </toolbox>

 <iframe id="content-body" src="welcome.html"/>

</box>

The example here has created a very simple interface for a web browser, although it isn't functionally complete. A box has been created containing two elements: a toolbox and an iframe. A Back button, a Forward button and a field for typing is URLs has been added to the only toolbar. The web pages would appear inside the iframe. In this case, the file welcome.html would appear by default.

Because iframes can go anywhere is a XUL window, you can position them inside the wizard interface in such a way that you just need to change its contents between screens.

The inner frame can point to an HTML file or another XUL file.

(Next) Next, we'll look at how to create a splitter.

Examples: 4.8.1