XML User Interface Language (XUL)

Karl Strength

April 16, 2006

What is XUL?

A language that you can use to manipulate user interfaces (UI).

It is very much like HTML. Its appearance can be modified by CSS.

XUL Widgets

Allow developers to easily create menus, toolbars and tabbed panels.

Widgets allow XUL programs to be cross-platform and cross-device.

The major drawback

It is only supported by a few browsers. Firefox being the most notable one.

XUL Widgets

Buttons and Text Boxes are implemented with widgets.

There are predefined widgets, but because of the open source anyone can make as many widgets to do anything.

Starting a XUL document

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

id=“anything”title="XUL page" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

…All elements you want on the page…</window>

A button

<?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id=“button” title="Buttons" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <button label="Button 1" /> </window>

Event Handlers

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

<window onclick="alert(event.target.tagName); return false;" id="findfile-window" title="Find Files" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <button id="find-button" label="Find" default="true"/> <button id="cancel-button" label="Cancel"/></window>

Things to remember

All events and attributes must be written in lowercase.

All strings must be double quoted. Every XUL widget must use close tags (either

<tag></tag> or <tag/>) to be well-formed. All attributes must have a value.

XUL sites

XUL Periodic Table XUL Planet Mozilla XUL

Exercise

Create a XUL document that uses various widgets to display city names and a list of attractions.