Creating a XUL Application

To create a first "Hello World!" example program, we must install a development environment and create into a directory the file structure needed by XULRunner.

The development environment

Begin with the XULRunner download and install it in a directory, for example:

c:\xulrunner

This is not necessary if you have installed Firefox 3.

File Structure

Any application that uses XUL must have at least four files:

application.ini. This file describes the application and its environment.
chrome.manifest. Defines the path of files of the application.
pref.js. Specifies the name of the main file.
hello.xul. The interface file, there may be others. Its name depends on the application.

These files are stored in a tree, created in the application directory:

chrome
   | content
       | hello.xul
   | chrome.manifest
defaults
   | preferences
       | pref.js
application.ini

It has two main directories: chrome and default. Each one has at least one subdirectory. Beside content could also be added a local subdirectory for foreign translations.

The application.ini file

This file indicates the version of Gecko required to run the application. It also contains version information relating to it and eventually the copyright:

[App]
Version=1.0
Vendor=Me
Name=hello
BuildID=number
ID={id generated by some tool}
[Gecko]
MinVersion=1.8

The variable of version MinVersion and possibly MaxVersion correspond to the version of XULRunner used to develop the program. The variables Name (the name of the application, included in chrome.manifest) and BuildID are required.

The chrome.manifest file

This file defines paths where will be found files necessary for the application. It is placed in the root directory of chrome, and it indicates the path of XUL files and other resources, normally in content and possibly local.
Usually these two directories are also at the root of chrome.

content hello file:content/

In this example, the application files hello was recorded directly into the subdirectory content. So if the application is in the directory MyApplication, the path will be:

c:\MyApplication\chrome\content\hello.xul

The prefix may be either file: for a file or jar: for an archive.

The preferences file

The pref.js file is used by XULRunner to start the application. It contains the URI of the core XUL interface file, which can use other XUL files.

pref("toolkit.defaultChromeURI", "chrome://MyApplication/content/hello.xul");

The suffix chrome means not for the chrome subdirectory in the path on the disc, but indicates a specific file structure. The directory chrome is implied.

First Program

It shows "Hello World !" in a window, as in the example given previously.

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="someID" title="Hello" width="600" height="600" 
     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<description value="Hello World!" />
</window>

The namespace xmlns is standard, the other parameters depend on the application. The stylesheet is the default file, one must choose an id and assign it to id, as for title and size of the window.

Launching the program

The program is given as a parameter to the XULRunner executable:

\xulrunner\xulrunner.exe application.ini

You can launch also the application with the executable firefox.exe for Firefox 3 in place of xulrunner.exe.

Example

Code.