Understanding eXtensible User Interface Language - XUL

XUL (eXtensible User Interface Language) pronounced as zool was first created for the Mozilla browser. It is basically an XML language which is used for creating portable user interfaces. If you know how to use XUL then you can easily create the portable user interfaces very easily and quickly.

Since this is an XML language you can also insert other languages which are XML based like the XHTML, MathML, and SVG. It also has the flexibility to translate into other languages.

Different types of user interfaces can be created using the XUL. Toolbars, Input controls, Menus, Dialogs, Trees, and keyboard shortcuts can be created with XUL. Some examples of the input controls are the textboxes and the check boxes. Popup menus can also be created using XUL. The contents of the controls can also be populated using various data sources such as data supplied in the RDF files.

With XUL you can create different types of applications. Your application can be in such a way to extend the functionality of the Firefox browser. You can even customize the user interface of the browser. Customization of the Mozilla based products can be done with the knowledge of eXtensible User Interface Language.

You can also create standalone applications using XUL. In such standalone applications you will be having your own executable file which is used to run the application. There is no need of a browser for such standalone applications that are developed in XUL.

XUL packages can also be created using XUL which can run with the help of a browser as a separate application. With XUL you can also create applications that run on a remote server. These are the remote applications that are placed in the web server. You need the browser to open such applications.

The capability of such applications is limited due to security concerns. Applications such as extensions, standalone applications and XUL packages can be installed locally in the user’s machine and these applications are capable of accessing the files in your local system and there are no restrictions for these applications. Some of the operations are restricted in such applications, but they can have access to the files.

When you load an XUL file, the file that is being downloaded should be set to the content type of ‘application/vnd.mozilla.xul+xml’ so that the web server can serve that file to the user or the client. The XUL files are stored with an extension .xul. All you need to open such .xul files is the Mozilla browser.

You can just type the URL of the file in the address bar of the browser to open that .xul file. Some knowledge of HTML, CSS and XML is necessary if you want to create applications in XUL. Special tags that give a different meaning for creating the applications are available in XUL.

This makes it very easy to create portable interfaces. For example the tag, <window>....</window> is used to create a new window that can have different controls and text in it. As with the other tags there are attributes associated with these tags.

There are web references available for the complete set of tags in XUL. By going through these tags you can create very easy interfaces. It is possible to attach a stylesheet to the XUL file so that the elements that are displayed in the window can be displayed according to the definitions given in the stylesheet.

A sample code to open a window is as given below:

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

<window
id="myXUL"
title=" my_first_window_in_XUL"
orient="horizontal"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
...
</window>

There is an id attribute that specifically identifies the window. You can give a title for the window that you are creating using the ‘title’ attribute. The ‘orient’ attribute specifies how the controls are aligned in the window.

In our example we have used the ‘horizontal’ value for the ‘orient’ attribute. The stylesheet in our example uses the chrome skin for the browser. This is the default skin for the browser. The namespace for the XUL file is given in the attribute ‘xmlns’. The file indicated in the namespace is recognized internally by the Mozilla browser.

If you want to add a button to your window then you can use the <button> tag. An example of this tag is given below:

<button
id="OKButton"
label="OK"
image="img.jpg"
accesskey="k"/>

The attributes for the button tag includes ‘id’, ‘label’, ‘image’, ‘accesskey’, and ‘disabled’. The ‘label’ attribute indicates the label that is to be displayed on the button. The image attribute indicates the image that is to be displayed in the button.

The shortcut keys to the button are indicated in the attribute ‘k’. Tags like <textbox>, <checkbox>, and <radio> are used as the input controls. For a complete reference to the XUL tags you can refer websites like xulplanet.com. Just like the html files, create the .xul files with the appropriate tags and open them in a browser to see the application you created in action.