Premier programme XUL

Pour écrire une interface XUL, il vous faut deux choses:
- Un simple éditeur de texte.
- Le navigateur Firefox qui affichera le code XUL.

Le code d'une interface graphique XUL se compose de balises XML prédéfinies, et de code JavaScript pour prendre en compte les actions de l'utilisateur. D'autres élements, d'autres formats pourront aussi être utilisés, mais cela, on le verra plus tard.

Le code XUL commence par une définition d'un espace de nom avec la propriété xmlns, qui est toujours la même:

xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"

Il se place dans une fenêtre, qui se crée avec les balises <window>.
Cela donne le modèle complet suivant:

<?xml version="1.0" encoding="iso-8859-1"?>
<window
   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
</window>

Ce modèle assez obscur une fois défini, on le réutilisera par copier-coller et n'aura plus besoin, dans une premier temps tout au moins de s'occuper de ce qu'il signifie.

Afficher un texte

Notre premier exemple affichera simplement le texte "Salut le Monde!".
Pour ce faire, il faut placer dans la fenêtre que nous avons créée avec les balises <window>, un composant textuel.

Le composant est la balise "description" et le texte est assigné à l'attribut "value" de cette balise:

<description value="Salut le Monde!" />

L'exemple complet

Nous donnons un identifieur à la fenêtre

id="hello"

ainsi que des dimensions avec les attributs height (hauteur) et width (largeur):

width="300" 
height="300"

Donc finalement:

<?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="Salut le Monde!" />
</window>

Voir les fichiers

Démo: code.zip

Forum

Graphiste

02-08-2010 17:41:41

Geoffreyd

Bonjour :-) Je suis designer graphique et je vais être amené à travailler sur un projet développé en XUL, dans un soucis de faciliter et de fluidifier le travail, je souhaite savoir comment un graphiste pourrait-il optimiser son travail (maquettes, images, etc.) pour le donner à un dev qui programme en XUL, afin que ce soit pratique pour lui ? :-) Voilà, j'espère que vous aurez quelques conseils ;-)) Merci, Amicalement, Geoffrey

02-08-2010 18:24:25

webmaster

Bonjour XUL utilise CSS pour le rendu, il remplace le langage HTML ou XHTML par un dialecte de XML, aussi je ne pense pas qu'il y ait quelque chose de très particulier à prévoir quand au graphisme. La balise Canvas qui s'inspire de Canvas de HTML 5 permet de réaliser des graphismes vectoriels. Cela suppose l'outil d'un éditeur tel que Inkscape. A part cela je ne vois pas de différence avec les pages Web.

02-08-2010 23:03:47

Geoffreyd

Un immense merci pour cette réponse :-) c'est donc assez classique pour moi :-) merci encore, amicalement, Geoffrey