An Introduction to XUL Part 5

All applications need a way or warning users that something is about to happen, or that something has happened. If you’re working in a word-processing application and you try to exit the application without saving your work, you’ll get a message advising that you’ll lose your data if you don’t save it, and are given the opportunity of canceling the action in order to save the file. Computers and software in particular can be frustrating enough as it is from time to time, without this added layer of program safety. Luckily, XUL is able to provide this same safety net, with the inclusion in its syntax of dialog boxes. Of course, you’ll need more than just the code that draws the box on the screen to make dialog boxes a barrier between yourself and application misery, but initially, we’ll look at the code needed to render them.

The dialog element is used in place of the window element:

As you can see, the XUL namespace still needs to be included. For scripting purposes, the id attribute is also recommended. The dialogheader is used to give the dialog box a separate heading, into which a title and description can be placed. The title is styled automatically to be bold and colored and gives an indication as to the function of the dialog box, whether this be information, a warning, or just a few words of wisdom. 

Dialogs need to be opened using a chrome URL from within Mozilla, which means that in order for Mozilla to know about them, an RDF file needs to contain references to them. Save the above file in the content directory used for the wizard example and update the existing contents.rdf file with the following bag and description:

As before, this will not be recognized by Mozilla until the existing chrome.rdf file has been deleted and regenerated in the Mozilla chrome directory. Now open the dialog using the normal chrome syntax (chrome://filename/content/). The dialog should open, and will have the header, the message and the specified buttons. 

Click one of the buttons to test that they will actually do something, and once again, Mozilla quits abruptly. You’ll also notice that instead of being a separate dialog box, Mozilla has opened it as if it were a window. Both of these things are caused by not calling the dialog from another file, which we can fix easily enough by creating a window that calls the dialog.  Create the following file and save it in your chrome folder:

For this to work properly, it will need to be added to the RDF file and opened with a chrome URL in the normal way. As you can see, you simply add a click event to the button, which calls the function residing within the script tags. This function contains a simple method with some parameters specifying the full chrome URL of the window to open, that it is a chrome file and that it is a dialog. 

When the button file is opened with a chrome URL from Mozilla, you can click the button, and your dialog box will appear in a window of its own. Clicking the ok or cancel buttons (which both do exactly the same thing, as we haven’t scripted these) will close the dialog, but Mozilla itself will remain open. You could do the same thing for the wizard example to prevent Mozilla from closing, and also to give it its own window.