|< Day Day Up >|
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.
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
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 are lines that contain instructions for the application that is processing the XUL or XML. An example of a processing instruction is
This instruction tells the application that the version of XML is 1.0.
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:
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.
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.
Next, we create a toolbox that holds one or more toolbar widgets. The flex="1" part describes how unused space is divided between children.
This creates a container that will hold menu items.
This line creates a top-level menu item labeled File.
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');" />
<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.
A menu separator draws a line between pop-up menu items.
This is the last pop-up menu item.
This line closes the pop-up menu.
And this line closes the File menu.
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.
This ends the Edit menu.
And this ends the menu bar.
Now we end the toolbox.
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.
|< Day Day Up >|