Dans cette section, nous allons voir comment créer un contenu avec XBL (eXtended Binding Language).
Le contenu XBL
XBL peut être utilisé pour ajouter automatiquement un ensemble d'éléments à l'intérieur d'un autre élément. Le fichier XUL a uniquement besoin de spécifier l'élément externe tandis que l'élément interne est décrit dans un fichier XBL. C'est utile pour créer un élément graphique simple qui est construit à partir d'un ensemble d'autres éléments, mais qui peut être référencé comme un seul élément graphique. Des mécanismes sont fournis pour ajouter des attributs aux éléments internes qui étaient spécifiés dans l'élément externe.
Exemple de déclaration d'une barre de défilement
L'exemple ci-dessous montre comment une barre de défilement pourrait être déclarée (il a été un peu simplifié par rapport à la réalité) :
<bindings xmlns="https://www.mozilla.org/xbl"
xmlns:xul="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="scrollbarBinding">
<content>
<xul:scrollbarbutton type="decrement"/>
<xul:slider flex="1">
<xul:thumb/>
</xul:slider>
<xul:scrollbarbutton type="increment"/>
</content>
</binding>
</bindings>
Ce fichier contient une seule liaison, déclarée avec l'élément binding. L'attribut id doit être déclaré avec l'identifiant de la liaison. De cette façon il y est fait référence au travers de la propriété CSS -moz-binding.
La balise content est utilisée pour déclarer le contenu anonyme qui sera ajouté à la barre de défilement. Tous les éléments à l'intérieur de la balise content seront ajoutés au sein de l'élément auquel la liaison est liée. Cette liaison sera vraisemblablement liée à une barre de défilement, bien qu'elle puisse ne pas l'être. Chaque élément dont la propriété CSS -moz-binding est déclarée avec l'URL de la liaison, va l'utiliser.
L'utilisation de la liaison ci-dessus a pour résultat que la ligne de XUL ci-dessous soit interprétée comme suit, en supposant que la barre de défilement est liée au XBL ci-dessus :
<scrollbar>
devient :
<scrollbar>
<xul:scrollbarbutton type="decrement"/>
<xul:slider flex="1">
<xul:thumb/>
</xul:slider>
<xul:scrollbarbutton type="increment"/>
</scrollbar>
Les éléments au sein de la balise content sont ajoutés anonymement à la barre de défilement. Bien que le contenu anonyme soit affiché à l'écran, vous ne pouvez pas y accéder à l'aide d'un script par la voie normale. Dans XUL, c'est comme s'il n'y avait qu'un seul élément, bien qu'il se compose en réalité de plusieurs éléments.
Si vous observez une barre de défilement dans une fenêtre Mozilla, vous verrez qu'elle est composée d'un bouton en forme de flèche, d'une zone de coulissement, d'une poignée à l'intérieur et d'un second bouton en forme de flèche à la fin, ce sont les éléments qui apparaissent dans le contenu XBL ci-dessus. Ces éléments pourraient à leur tour être liés à d'autres liaisons qui utilisent les éléments XUL de base. Notez que les éléments de contenu ont besoin de l'espace de nommage de XUL (ils apparaissent précédés de xul:), parce que ce sont des éléments de XUL et qu'ils ne sont pas valides dans XBL. Cet espace de nommage a été déclaré dans la balise bindings. Si vous n'utilisez pas l'espace de nommage sur les éléments de XUL, Mozilla supposera que ce sont des éléments XBL et il ne les comprendra pas, et vos éléments ne fonctionneront pas correctement.
Exemple d'un champ de saisie de nom de fichier
Un autre exemple, cette fois pour un champ dans lequel vous pourriez entrer un nom de fichier :
<binding id="fileentry">
<content>
<textbox/>
<button label="Parcourir..."/>
</content>
</binding>
L'attachement de cette liaison sur un élément lui fera contenir un champ de saisie de texte, suivi d'un bouton 'Parcourir...'. Ce contenu interne est créé anonymement et ne peut être vu en utilisant le DOM (Modèle Objet de Document).
Remplacement de l'élément de liaison
Le contenu anonyme est créé automatiquement chaque fois qu'une liaison est attachée à un élément. Si vous placez des éléments fils à l'intérieur du contenu XUL, ils vont écraser les éléments fournis par la liaison. Par exemple, prenez cet extrait XUL, en supposant qu'il soit lié à la barre de défilement XBL de tout à l'heure :
<scrollbar/> <scrollbar> <button label="Écraser"/> </scrollbar>
Puisque la première barre de défilement n'a pas de contenu qui lui est propre, celui-ci sera généré à partir de la définition de la liaison du fichier XBL. La seconde barre de défilement a son propre contenu donc elle l'utilisera à la place du contenu XBL, ce qui a pour résultat quelque chose qui ne ressemble plus à une barre de défilement. Notez que beaucoup d'éléments natifs de construction, comme les barres de défilement, ont leur définition XBL stockée dans des fichiers situés dans le répertoire "bindings" du paquetage toolkit.jar.
Ce mécanisme s'applique seulement aux éléments définis à l'intérieur de la balise content. Les propriétés, les méthodes et d'autres aspects d'XBL restent disponibles, que le contenu provienne d'XBL ou que XUL fournisse son propre contenu.
Utilisation de l'élément children
Il peut y avoir des fois où vous souhaitez que soient montrés à la fois le contenu XBL et celui fournit par le fichier XUL. Il vous suffit d'utiliser l'élément children. Les éléments fils dans XUL sont ajoutés en lieu et place de l'élément children. C'est pratique pour créer des éléments graphiques de menu personnalisés. Par exemple, une version simplifiée d'un élément menulist éditable, pourrait être créée comme ceci :
XUL:
<menu class="dropbox">
<menupopup>
<menuitem label="1000"/>
<menuitem label="2000"/>
</menupopup>
</menu>
CSS:
menu.dropbox {
-moz-binding: url('chrome://example/skin/example.xml#dropbox');
}
XBL:
<binding id="dropbox">
<content>
<children/>
<xul:textbox flex="1"/>
<xul:button src="chrome://global/skin/images/dropbox.jpg"/>
</content>
</binding>
Cet exemple crée un champ de saisie suivi d'un bouton. Le menupopup sera ajouté au contenu à l'emplacement spécifié par l'élément children. Notez que pour les fonctions du DOM, le contenu apparaîtra comme s'il était dans le fichier XUL, ainsi le menupopup sera un fils du menu. Le contenu XBL est caché ainsi le développeur d'une application sous XUL n'a même pas besoin de savoir qu'il est là.
Le contenu résultant serait :
<menu class="dropbox">
<menupopup>
<menuitem label="1000"/>
<menuitem label="2000"/>
</menupopup>
<textbox flex="1"/>
<button src="chrome://global/skin/images/dropbox.jpg"/>
</menu>
Attribut includes
Dans certains cas, vous souhaiterez n'inclure que des types de contenus spécifiques et non d'autres. Ou bien, vous souhaiterez placer différents types de contenus à différents endroits. L'attribut includes peut être utilisé pour n'autoriser que certains éléments à apparaître dans le contenu. Sa valeur doit être déclarée pour un simple nom de balise, ou pour une liste de balises séparées par des barres verticales (Le symbole |).
<children includes="button">
Cette ligne va ajouter tous les boutons qui sont fils de l'élément lié en lieu et place de la balise children. Les autres éléments ne correspondront pas avec cette balise. Vous pouvez placer plusieurs éléments children dans une liaison pour placer différents types de contenus à différents endroits. Si un élément dans XUL ne correspond pas aux éléments children, cet élément (et les autres n'y correspondant pas) sera utilisé à la place du contenu lié.
Voici un autre exemple. Disons que nous voulions créer un élément graphique qui affiche une image avec un bouton de zoom "Agrandir" et un bouton de zoom "Réduire" de part et d'autre. Il pourrait être créé avec une boîte qui contiendrait l'image et deux boutons. L'élément image doit être placé à l'extérieur du fichier XBL car il sera différent selon l'usage.
XUL:
<box class="zoombox">
<image src="images/happy.jpg"/>
<image src="images/angry.jpg"/>
</box>
XBL:
<binding id="zoombox">
<content>
<xul:box flex="1">
<xul:button label="Agrandir"/>
<xul:box flex="1" style="border: 1px solid black">
<children includes="image"/>
</xul:box>
<xul:button label="Réduire"/>
</xul:box>
</content>
</binding>
Les fils explicites dans le fichier XUL seront placés à l'endroit où se trouve la balise children. Il y a deux images, ainsi toutes les deux seront ajoutées à côté de l'une et l'autre. Cela a pour conséquence un affichage équivalent au code suivant :
<binding id="zoombox">
<content>
<xul:box flex="1">
<xul:button label="Agrandir"/>
<xul:box flex="1" style="border: 1px solid black">
<image src="images/happy.jpg"/>
<image src="images/angry.jpg"/>
</xul:box>
<xul:button label="Réduire"/>
</xul:box>
</content>
</binding>
D'un point de vue du DOM, les éléments fils sont toujours à leur emplacement original. En effet, la boîte XUL externe a deux fils qui sont les deux images. La boîte interne avec la bordure a un fils, la balise children. C'est une distinction importante lorsqu'on utilise le DOM avec XBL. Elle s'applique également aux règles du sélecteur CSS.
Les éléments fils multiples
Vous pouvez également utiliser plusieurs éléments children et avoir certains éléments placés à un endroit et d'autres éléments placés à un autre. En ajoutant l'attribut includes contenant une liste de nom de balises séparés par des barres verticales, vous pouvez placer uniquement les éléments correspondants à cet endroit. Par exemple, le fichier XBL suivant va faire apparaître des libellés et des boutons à un endroit différent des autres éléments :
Exemple 1 : Source
<binding id="navbox">
<content>
<xul:vbox>
<xul:label value="Libellés et boutons"/>
<children includes="label|button"/>
</xul:vbox>
<xul:vbox>
<xul:label value="Autres éléments"/>
<children/>
</xul:vbox>
</content>
</binding>
Le premier élément children n'inclut que les éléments label et button, comme indiqué dans son attribut includes. Le second élément children, parce qu'il n'a pas d'attribut includes, ajoute tous les éléments restants.
Dans la prochaine section, nous verrons comment des attributs peuvent être hérités dans le contenu anonyme.
Interwiki