Understanding XML User Interface Language

Firefox makes extensive use of XUL. In the previous section, "Extension Developer," the effect of a simple XUL fragment was shown. Of course, that example is not a full application, but it does show what XUL can do.

XUL Syntax

XML User Interface Language (XUL), which is based on XML, has a syntax that at first glance seems similar to HTML. This syntax is made up of events, widgets, tags, and data. There are some rules that are global and must be followed. Four basic rules are

• Events and attributes must be in lowercase only. No mixed case, except for quoted strings, is allowed.

• Strings must be double quoted.

• Widgets must have close tags. Valid close tags are <tag>, </tag>, and <tag/>.

• Attributes, when specified, must be assigned a value.

Comments

Comments in XUL and XML are begun with the characters <!-- and end with -->. The number of hyphens in a beginning or ending comment must be exactly two no more, no less. Comments must not contain any double hyphens. A sample comment is shown here:

<!-- This is a valid comment --> 

Processing Instructions

Processing instructions are lines that contain instructions for the application that is processing the XUL or XML. An example of a processing instruction is

<$xml version="1.0"$> 

This instruction tells the application that the version of XML is 1.0.

XUL Example

Earlier in "XUL Editor," you created a simple window with a menu. The code was shown previously in Listing 16.1. Now let's take a closer look at this code, on a line-by-line basis:

<?xml version="1.0"?>

This is an application directive specifying the XML version.

<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

This is another application directive specifying the stylesheet used.

<window  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> 

This creates the window and gives it the ID "yourwindow". The XML name space (xmlns) is also specified.

<label value="This is our XUL example of a menu."/>

This creates a label at the top of the window. We specify the text in double quotation marks.

<toolbox flex="1">

Next, we create a toolbox that holds one or more toolbar widgets. The flex="1" part describes how unused space is divided between children.

<menubar >

This creates a container that will hold menu items.

<menu  label="File">

This line creates a top-level menu item labeled File.

<menupopup >

Next, we create a pop-up menu (one that drops down, actually) that is displayed whenever the user clicks the top-level menu item, Files.

<menuitem label="New" oncommand="alert('You clicked on File, New in the menu');" /> 

Our first pop-up menu item is labeled New and has an action that takes place when the user clicks it. The action is a JavaScript alert() box displaying the text specified.

<menuitem label="Open"/> <menuitem label="Save"/>

These are the two additional pop-up menu items. Neither has an action that will take place when it is clicked. Eventually, however, it will be necessary to write the handlers.

<menuseparator/>

A menu separator draws a line between pop-up menu items.

<menuitem label="Exit"/>

This is the last pop-up menu item.

</menupopup>

This line closes the pop-up menu.

</menu>

And this line closes the File menu.

<menu  label="Edit">

Next, we create a second top-level menu item named Edit.

<menupopup >   <menuitem label="Cut"/>   <menuitem label="Copy"/>   <menuitem label="Paste"/>   <menuseparator/>   <menuitem label="Undo"/>   <menuitem label="Redo"/> </menupopup>

This adds a pop-up menu to our Edit menu. None of these items have any actions written for them yet.

</menu>

This ends the Edit menu.

</menubar>

And this ends the menu bar.

</toolbox>

Now we end the toolbox.

</window>

And finally we end the window definition. (A copy of this script is available on the book's website at http://www.quepublishing.com/title/0789734583.)

The best source of reference information for XUL is http://www.xulplanet.com.