On dispose aujourd'hui de 3 interfaces possibles : Windows, Mac et Unix. Pour chacun de ces mondes, il faut à
chaque fois au moins 3 ingénieurs pour développer une même fonctionnalité (exemple : afficher un bouton).
Mozilla propose une solution qui permet de décrire l'interface graphique de son application qui sera nativement
compatible sur les 3 environnements.
De ce besoin est né le langage XUL. Il s'agit d'une description au format XML pour écrire des interfaces
graphiques. D'où le nom de XUL pour XML User Interface Language.
XUL permet donc de décrire des interfaces graphiques dans des fichiers textes, celles-ci pouvant contenir des
widgets (boutons, barres, menus), des éléments textes et des éléments graphiques.
Afin de démystifier tout de suite le XUL, je vous propose un exemple de source en XUL.
<?xml version="1.0"?>
<?xml-stylesheet
href="chrome://global/skin/" type="text/css"?>
<window
title=Find Files
orient="horizontal"
xmlns="http://www.mozilla.org/keymaster
/gatekeeper/there.is.only.xul">
<button id="find-button" label="Find"/>
<button id="cancel-button" label="Cancel"/>
</window>
Une fois l'application lancée (vous pouvez essayer de créer un fichier texte
"button.xul" avec l'exemple
ci-dessus, et de l'ouvrir dans Firefox), vous verrez s'afficher à l'écran :
Maintenant que nous savons dessiner des widgets graphiques, il suffit de leur
associer les actions possibles via le système d'événements.
Ici nous voyons un exemple de bouton qui réagit au clic via son attribut "oncommand"
par l'appel à la méthode JavaScript "playSound()".
<button id="play-button" label="Play"
oncommand=playSound()/>
Créer une interface graphique en XML représente de facto plusieurs avantages
:
1. XML est un standard connu et reconnu
2. Un langage simple et intuitif
3. Pas de compilation car les fichiers sont interprétés à la volée. Le gain de
temps est immédiat
4. Les développeurs qui sont déjà formés au DHTML (Dynamic HTML) et à la création de sites Internet en
général peuvent se familiariser rapidement avec le XUL.
Le XUL intègre aussi des technologies qui augmentent ses possibilités :
1. Une possible redéfinition des balises et des attributs via le langage XBL (XML Binding Language5)
2. Un système appelé "overlays" qui permet d'inclure plusieurs fichiers
XUL dans une même fenêtre. C'est très puissant pour construire des menus en fonctions
des extensions installées
3. Un système de représentation de données sous forme de graphe permettant d'échanger, de stocker et
de représenter des données : RDF (Resource Description Framework). Idéal pour gérer des données
de types favoris, profils utilisateurs, échanges d'information pour les mises à jour
La mise en forme est aussi un aspect important à prendre en considération lors
du développement d'interfaces graphiques. A la manière d'un site Internet, le
standard utilisé est CSS6 (Cascading Style Sheets). Cela permet de rajouter des
styles graphiques sur un ou plusieurs éléments de l'application. CSS est puissant
car il permet de déporter tout l'aspect "design" dans des fichiers textes
séparés ; les graphistes peuvent donc ne manipuler que ces fichiers pour travailler
sur les aspects de taille et couleur de toute l'application.
Nous pourrions écrire un article entier sur le langage XUL, en attendant si vous voulez en savoir plus, vous
pouvez consulter le tutorial de Mozilla7.
