First Program
To write a XUL interface, you need for two things:
- A simple text editor.
- The Firefox browser who will display code XUL.
The code of a XUL graphic interface is composed of defined XML tags and JavaScript code to process events made by actions of user. Other elements, other formats could also be used, but we will see this later.
XUL code starts with a definition of a namespace with the xmlns property which is always the same one:
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
It a property of a window, which is created with the <window> tag.
That gives the following complete model:
<?xml version="1.0" encoding="iso-8859-1"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> </window>
Once defined this rather obscure model, one will re-use it by copy-paste and will not need more, in the first time at least to deal with what it means.
Displaying a text
Our first example will display simply the text "Hello the World!".
In this goal, it is necessary to place into the window we have created with
the <window> tag, a textual component.
The component is the "description" tag and the text is assigned with the attribute "value" of this tag:
<description value= "Hello the World!"/>
The complete example
We give a identifier to the window
id="hello"
as well as dimensions with the attributes height and width:
width="300" height="300"Thus finally:
<?xml version="1.0" encoding="iso-8859-1"?> <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="hello" width="300" height="300" > <description value="Hello the World!" /> </window>
- Demo code.zip.