Ajax JavaScript CSS HTML 5 Gecko XUL

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:

Dans les chapitres à venir, nous verrons l'implémentation de méthodes pour interagir avec l'application.