An Introduction to XUL Part 1

Would you like to learn how to make rich user interfaces with nothing more complicated than a text editor? Welcome to XUL, a subset of XML used to describe user interfaces. This article will get you started.

Many of you may not have heard of XUL. I hadn’t until recently. If, like me, you’re excited by the prospect of making rich user interfaces, quickly and easily, using nothing but a simple text editor, then you’ll want to learn all about XUL, because that’s exactly what it’s for. It’s pronounced to rhyme with “cool” and is a W3C compliant subset of XML that is used specifically to describe user interfaces. It stands for XML User interface Language, and was designed to implement the user interface of the Mozilla suite (including the browser and the Thunderbird email client.) 

If you have even just the browser part of the Mozilla interface installed (or Netscape Navigator, or Firefox), do a quick search for *.xul and see how many files are matched. Okay, so there aren’t hundreds, but there are a few, right? These files (and others tucked away in jar files) are used to present the interface through which you use Mozilla. The side bar, for example is a XUL file that is loaded when the application is launched. Netscape Navigator and Firefox also make extensive use of XUL, and you can too.

Interestingly enough, Netscape Navigator has some built in XUL examples that you can play around with to see at a basic level how XUL works. To see one of these examples in action, open up Netscape Navigator, if you have it installed, and choose the File à Open File command.  If Netscape is installed in the default location, the sample XUL files will be in the following directory:

C:Program FilesNetscapeNetscaperessamples

Open up any of the XUL files, such as toolbarTest1.xul, and see what it’s about.

As I mentioned above, you need no special tools to use XUL, just a simple text editor. XUL does need to be used in conjunction with the Gecko layout engine, which means that you need to use the Mozilla browser to view XUL files, although you do not have to open them via Mozilla if they are simple enough. XUL is compatible with many existing Web technologies, such as XML, JavaScript, and CSS to name a few, but there are many, many other standards with which it can be used.

{mospagebreak title=Getting started} 

Before you start making XUL interface objects, such as windows with menus, toolbars, and so forth, you need to make a modification to your system environment variables (after Mozilla has been installed to the default location, of course). You can do this by using the DOS command line, or you can do it easily with the System applet on your Windows Control Panel. I’m assuming that you have Windows XP installed as your operating system here; if not, this section probably wont help you. XUL itself should still work, though, because this is a cross-platform technology. 

I initially tried to do it using the command line method, which failed repeatedly (although I have no idea why), so I reverted to using the System applet method instead, and it worked the first time. To add the path variable to your system environment using the System method, just go to the System icon in the control panel, select the Advanced tab, and click on Environment Variables. Now click on the bottom New button; in the Variable Name field type “path” (without the quotation marks) and in the Variable Value field type “C:Program Filesmozilla.orgMozilla” (again, without the quotation marks). Make sure that this is typed as it appears here – don’t set the Name field to Path instead of path, for example, because there is already a Path variable present. Now click OK until the System box disappears and you’ll be ready to go.

When producing XUL test files, in order to follow this article and in general, it is a good idea to use the DOS command line to execute the files. You can open the files from within Mozilla once the environment variable has been added correctly, but this will cram your window among the elements of Mozilla’s interface, and will detract from your learning experience. Opening basic files via the Mozilla interface does not appear to give you any extra functionality, although some of the more advanced elements must be opened through Mozilla using a chrome URL. This will be discussed later on. 

You can also create plugins and even entire applications using XUL, but there is far more work that needs to be done, including modifying Mozilla to get it to include your plugin when it launches. In those cases, you wouldn’t need to use the command line. In development however, to execute a file, for example, called myFirstWindow.xul that was stored in a directory called XUL within the root directory, you would need to open a command line instance (by typing cmd in the run bar for those of you that don’t already know) and type: “Mozilla –chrome file://C:/XUL/myFirstWindow.xul” without the quotation marks.  You would get the Mozilla splash screen, and then a window would appear. As you’ll need a directory to store your test XUL files in, you might as well make a XUL folder on the C: drive now.

{mospagebreak title=Follow the rules}

As XUL is an XML technology, the usual XML syntax rules apply; documents must begin with the XML declaration, all elements should be closed correctly, nested correctly, and so forth. All code, with the exception of string values, should be in lowercase, and the XUL namespace must be declared in the root element. Those used to XML will find the syntax of XUL very easy to get the hang of; in fact, it will sometimes seem intuitive.

As stated above, you can create a XUL window using just a Notepad style application, so in Notepad, or the text editor of your choice, create your first XUL interface window by typing the following code:

<?xml version=”1.0″?>
<window
  id=”MyFirstWindow” title=”My First XUL Window!” width=”500″   height=”300″ screenX=”50″ screenY=”100″   xmlns=”
http://www.mozilla.org/keymaster/gatekeeper/
there.is.only.xul
“>
</window>

All XUL documents should begin with the XML declaration, and all XUL elements will need to be contained within the window element, which must include the XUL namespace attribute shown above. As with any XML element, there are certain attributes that you can make use of to modify the appearance of the element in question. Here, the code specifies the id (for scripting purposes), the text that appears on the title bar, the dimensions, and where it should appear on screen.

Now save the file as myFirstWindow.xul, and remember to change the “save as” drop-down to all applications or you’ll just end up with a file called myFirstWindow.xul.txt which won’t do anything interesting at all, even if opened from within Mozilla. Issue the execution command on the command line (Mozilla –chrome file://C:/XULApps/myFirstWindow.xul), and a very plain window should appear. You can make this look a little bit like Mozilla by including the stylesheet reference as follows above the opening window tag:

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

Which at this early stage just gives you a kind of grayish background.
The ref to the CSS file above contains the chrome directory, which forms part of the chrome architecture. The chrome architecture refers to the elements of Mozilla that make up how the interface looks.  Other applications that make use of XUL will also make use of a chrome directory for storing XUL, CSS and RDF files, and when making larger XUL applications, a directory structure that includes a chrome folder is something that you will need to make use of as well. RDF, by the way, stands for Resource Description Framework, and is another W3C recommended XML technology used to describe metadata (information about information).

{mospagebreak title=Adding buttons}

So, moving back to your first XUL window, you might now want to add some buttons. Buttons are added using the button tag, and have quite a few attributes that you can use.  Modify the XUL file like this:

<?xml version=”1.0″?>
<?xml-stylesheet href=”chrome://global/skin/” type=”text/css”?>
<window id=”MySecondWindow” title=”My First XUL Window with buttons!”   width=”400″ height=”300″ screenX=”50″ screenY=”100″   xmlns=”
http://www.mozilla.org/keymaster/gatekeeper/
there.is.only.xul
“>
  <button label=”I am a button!”/>
</window>

And save it as myFirstWindow2.xul, then use the command line to execute it. I’ve called the file myFirstWindow2 instead of mySecondWindow to make it easier for you to type on the command line. As long as you have stored the file in the same directory as the first, you can just press the up arrow on your keyboard to copy the command, and then modify myFirstWindow to myFirstWindow2. When you’re testing out these little files for any considerable time period, this will be a godsend, trust me! The first window file you saved can now be used as a basic template that you can open in Notepad when you design a new window, to save you having to type out the declaration and root element each time.

You should now have a similar window with a big button on it.  To add an image to this button, you could use the following code:

<button label=”I am a button with an image on it!” image=”xul.jpg”/>

A similar button to the first one should appear when the file is executed, and the image it contains will be located to its default left placement.  The placement of the image can be adjusted so that the image appears to the right, above or below the text by using optional attributes:

<button label=”I am a button with an image on it!” image=”xul.jpg” dir=”rtl” />

Would place the image to the right of the text;

<button label=”I am a button with an image on it!” image=”xul.jpg” orient=”vertical”/>

Would place the image above the text, and;

<button label=”I am a button with an image on it!” image=”xul.jpg” orient=”vertical” dir=”rtl”/>

Would place it below the text. The next article will include information on some more of XUL’s basic element tags.

Google+ Comments

Google+ Comments