Comment construire un composant XUL
Nous allons construire un composant avec un fichier XBL, et dans un second temps y ajouter une interaction avec JavaScript, pour montrer comment utiliser ce composant.
Définition XBL d'un composant
Le format XBL comprend les balises suivantes:
bindings
La balise racine du fichier XML au format XBL. Elle contiendra les définitions d'un ou plusieurs composants.
binding
Définition d'un composant. Un binding pour chaque composant ajouté.
content
Sert à ajouter du contenu dans le composant, donc dans binding.
children
Balise de position qui sert à indiquer où sera placé le contenu d'un composant. Si une boite contient une autre boite dans le code XUL, la balise children dans le code XBL indique la position de cette boite.
Children possède un attribute include qui définit une liste d'éléments, séparés par le code | et qui appartiennent à children.
implementation
Description de la partie comportement du composant.
method
Définition de code pour le comportement du composant.
field
Espace de stockage, donc une variable accessible par les méthodes du composant et l'application qui l'utilise.
property
Une sorte de variable utilisable pour déclencher des évènements ou réagir.
Fichier XBL
Un fichier XBL est donc défini simplement avec quelque balises, et a la forme générale suivante:
<?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <binding id="nomxbl"> <content> ...balises, attributs, méthodes, événements, style... </content> </binding> <binding> ... etc. </bindings>Chaque balise binding à un identifieur id, qui précise le nom du composant XBL (à ne pas confondre avec le nom de classe).
Le nom de classe est utilisé dans l'application XUL et dans le fichier CSS, l'identifieur XBL est utilisé dans le descripteur CSS et dans le fichier XBL.
Ajout du composant
Le fichier XBL est intégré dans le fichier XUL par un descripteur
de feuille de style CSS.
Ce descripteur à le nom de la balise XUL que l'on veut créer
et la propriété -moz-binding qui désigne l'URL
du fichier XBL qui définit ce composant.
Si la balise s'appelle "box", le fichier XBL "xbl.xml",
le descripteur CSS sera:
box.nomclasse { -moz-binding:url(xbl.xml#nomxbl); }
Dans le cas présent, le fichier xbl.css se trouve dans le même
répertoire que l'application XUL.
Dans le chapitre sur les feuilles de style, nous avons vu comment intégrer
un fichier CSS:
<?xml-stylesheet href="xbl.css" type="text/css"?>
Pour relier XUL et le composant, la balise dans le document XUL a pour nom de classe, le descripteur CSS:
<box class="nomclasse" />
Ce nom de classe étant déclaré comme sous-élément dans le descripteur comme on le voit plus haut: box.nomclasse.
Exemple
On va créer un composant qui dispose d'un champ d'entrée de
texte, d'un bouton "Effacer" pour effacer le contenu, et d'un bouton
"Entrer" pour utiliser le texte tapé. Ce composant une fois
défini pourra être réutilisé à volonté
dans des applications que nous ferons interagir avec lui.
Le fichier XBL simplifié sera le suivant:
</bindings> <binding id="nomxbl"> <content> <xul:vbox"> <xul:label value="Taper un texte:" /> <xul:hbox> <ul:textbox /> <xul:button label="Entrer" /> <xul:button label="Effacer" /> </xul:hbox> </xul:vbox> </content> </binding> </bindings>
Le fichier CSS utilise le nom de classe "nomclasse" et le nom XBL "nomxbl".
box.nomclasse { -moz-binding: url('xbl.xml#nomxbl'); }
Le fichier XUL devient alors très simple. Il utilise le nom de classe donné en CSS:
<window> <box class="nomclasse"/> </window>
Les fichiers complets:
- Démo: code.zip
Dans les chapitres à venir, nous verrons l'implémentation de méthodes pour interagir avec l'application.