Introduction à XBL

XUL a un langage qui lui est parent, XBL (eXtensible Bindings Language). Ce langage est utilisé pour déclarer le comportement des éléments graphiques de XUL.

Liaisons

Vous pouvez utiliser XUL pour définir la mise en page de l'interface utilisateur d'une application. Vous pouvez adapter l'apparence des éléments en leur appliquant des styles. Vous pouvez aussi créer de nouveaux thèmes en modifiant les styles. L'apparence basique de tous les éléments, comme les barres de défilement et les cases à cocher pourrait être modifiée en ajustant le style ou en déclarant des attributs à l'élément. Cependant, XUL ne fournit aucun moyen de vous permettre de changer le fonctionnement d'un élément. Par exemple, vous pourriez vouloir changer le fonctionnement des composants d'une barre de défilement. Pour cela, vous avez besoin de XBL.

Un fichier XBL contient un ensemble de liaisons. Chaque liaison décrit le comportement d'un élément graphique de XUL. Par exemple, une liaison pourrait être attachée à une barre de défilement. Le comportement décrit les propriétés et méthodes de la barre de défilement en plus de décrire les éléments de XUL qui la composent.

Comme XUL, XBL est un langage XML, ainsi il a des règles syntaxiques similaires. L'exemple suivant montre le squelette basique d'un fichier XBL :

<?xml version="1.0"?>
<bindings xmlns="https://www.mozilla.org/xbl">
  <binding id="binding1">
    <!-- le contenu, propriétés, méthodes et descriptions d'évènements viennent ici -->
  </binding>
  <binding id="binding2">
    <!-- le contenu, propriétés, méthodes et descriptions d'évènements viennent ici -->
  </binding>
</bindings>

L'élément bindings est l'élément racine d'un fichier XBL et contient un ou plusieurs élément binding. Chaque élément binding déclare une seule liaison. L'attribut id peut être utilisé pour identifier la liaison, comme dans l'exemple ci-dessus. Le modèle a deux liaisons, l'une appelée 'liaison1' et l'autre appelée 'liaison2'. L'une pourrait être attachée à une barre de défilement et l'autre à un menu. Une liaison peut être attachée à n'importe quel élément de XUL. Si vous utilisez des classes CSS, vous pouvez utiliser autant de liaisons que vous avez besoin. Notez l'espace de nommage de l'élément bindings dans le modèle ci-dessus. Il déclare que nous sommes en train d'utiliser une syntaxe XBL.

Vous assignez une liaison à un élément en déclarant la propriété CSS -moz-binding avec l'URL des fichiers de liaisons. Par exemple :

scrollbar {
    -moz-binding: url('chrome://findfile/content/findfile.xml#binding1');
}

L'URL pointe vers la liaison avec l'id 'binding1' dans le fichier 'chrome://findfile/content/findfile.xml'. La syntaxe '#binding1' est utilisée pour pointer vers une liaison spécifique, de la même façon que si vous pointiez vers une ancre dans un fichier HTML. Vous mettrez habituellement toutes vos liaisons dans un seul fichier. Le résultat dans cet exemple, est que toutes les barres de défilement auront leur comportement décrit par la liaison "binding1".

Une liaison déclare cinq types de choses :

1. Le contenu : les éléments fils qui sont ajoutés à l'élément auquel la liaison est attachée.
2. Les propriétés : les propriétés ajoutées à l'élément. Elles sont accessibles par un script.
3. Les méthodes : les méthodes ajoutées à l'élément. Elles peuvent être appelées à partir d'un script.
4. Les événements : les événements, comme les clics de souris et les appuis sur les touches auxquels l'élément répondra. La liaison peut ajouter des scripts pour fournir la manipulation par défaut. En plus de cela, de nouveaux événements peuvent être définis.
5. Le style : adapte les propriétés de style que l'élément XBL possède.

Exemple de liaison

L'élément box est suffisamment générique pour que vous l'utilisiez afin de créer des éléments graphiques personnalisés (bien que vous puissiez utiliser d'autres éléments, même un élément composé par vous-même). En assignant un attribut class à une balise box, vous associez une liaison aux boîtes qui possèdent cette classe. L'exemple suivant le démontre :

XUL (example.xul):

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

<window
     xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <box class="okcancelbuttons"/>
</window>

CSS (example.css):

box.okcancelbuttons {
    -moz-binding: url('chrome://example/skin/example.xml#okcancel');
}

XBL (example.xml):

<?xml version="1.0"?>
<bindings xmlns="https://www.mozilla.org/xbl"
         xmlns:xul="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <binding id="okcancel">
    <content>
      <xul:button label="OK"/>
      <xul:button label="Annuler"/>
    </content>
  </binding>
</bindings>

Cet exemple crée une fenêtre avec une seule boîte. La boîte a été déclarée pour avoir un attribut class de valeur 'okcancelbuttons'. La feuille de styles associée au fichier indique que les boîtes avec les classes 'okcancelbuttons' ont une liaison spécialisée, définie dans le fichier XBL. Vous pouvez employer d'autres éléments derrière l'élément box, même pour votre propre balise adaptée.

Nous verrons plus de détails concernant la partie XBL dans la section suivante. Cependant, pour récapituler, cet exemple entraîne l'ajout automatique de deux boutons dans la boîte, un bouton 'Ok' et un autre 'Annuler'.

Dans la prochaine section, nous verrons comment créer un contenu avec XBL.

Interwiki