Home arrow XML arrow An Introduction to XUL Part 5

An Introduction to XUL Part 5

Learn about XUL, a subset of XML used to describe user interfaces, that helps you to make rich user interfaces with nothing more complicated than a text editor. In the fifth part of this series you will receive an introduction to XPCOM, the object model used by XUL, and take a close look at a basic example of the combination of Mozilla components and interfaces that make up the abstraction layer.

  1. An Introduction to XUL Part 5
  2. Buttons, JavaScript, and XPCOM
  3. The nsIFilePicker interface
  4. The keyset element
By: Dan Wellman
Rating: starstarstarstarstar / 9
June 20, 2005

print this article



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:

<dialog id="mydialog"
  there.is.only.xul" buttons="accept,cancel">

<dialogheader title="Warning"/>

<description>The action you have selected will render your
  computer completely inoperable.  Do you wish to continue?


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:

RDF:Bag about="urn:mozilla:package:root">
    <RDF:li RDF:resource="urn:mozilla:package:mydialog2"/>

<RDF:Description about="urn:mozilla:package:mydialog2"

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:

<?xml version="1.0"?>
  title="Dialog test"

  function openD() {
    "chrome", "dialog");


<button id="button1" label="Napalm my C: drive!"


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.

>>> More XML Articles          >>> More By Dan Wellman

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Google Docs and Xpath Data Functions
- Flex Array Collection Sort and Filtering
- The Flex Tree Control
- Flex List Controls
- Working with Flex and Datagrids
- How to Set Up Podcasting and Vodcasting
- Creating an RSS Reader Application
- Building an RSS File
- An Introduction to XUL Part 6
- An Introduction to XUL Part 5
- An Introduction to XUL Part 4
- An Introduction to XUL Part 3
- An Introduction to XUL Part 2
- An Introduction to XUL Part 1
- XML Matters: Practical XML Data Design and M...

Developer Shed Affiliates


Dev Shed Tutorial Topics: