a.xul

Com han fet tots els programadors al llarg dels anys quan aprenien un nou lleguatge de programació, anem a fer el famòs “Hello World” amb XUL.

Agafant l’estructura bàsica que vem veure a l’article anterior, afegirem el codi necessari per mostrar una cadena de text. En aquest cas sense utilitzar cap widget (botons, textos, menus, etc.) de XUL, sino amb elements XUL.

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="helloworld" title="Hellow World!!" orient="horizontal"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
	<description>Hello, world!!</description>
	<label value='Hello World!!' />
</window>

<label> i <description> són els dos únics elements que tenim per mostrar text en una aplicació XUL i el seu ús es molt senzill, com es pot veure amb l’exemple.

Els fitxers XUL tenen com a arrel l’element window. Aquest és recomanat que tingui un identificador (id) per tal de manegar els seus nodes còmodament mitjançant el mètode DOM getElementByID.

Com que un fitxer XUL és un XML s’haurà d’iniciar sempre amb la sentència:

<?xml version="1.0" encoding="utf-8"?>

La codificació és opcional i pot no ser utf-8.

Després caldrà vincular els fulls d’estil (CSS) genèrics usant la forma:

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

De la mateixa manera es poden vincular tots els CSS que calguin.

I finalment caldrà declarar l’element arrel del fitxer:

<window
    id="exemple-xul"
    title="titol del fitxer"
    orient="horizontal"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   [...]contingut[...]
</window>

El title serà el text que es mostrarà a la part superior de la finestra, l’orient és l’orientació del fluxe bàsic dels elements i l’xmlns és el namespace del XUL. Si s’utilitzessin més sintàxis s’haurien d’afegir els xmlns corresponents.

El resultat doncs serà:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
    id="exemple-xul"
    title="titol del fitxer"
    orient="horizontal"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   [...]contingut[...]
</window>