Écrit par Neil Deakin.
Traduit par Nadine Henry (27/07/2004).
Page originale :
http://www.xulplanet.com/tutorials/xultu/xblcontent.html
Dans cette section, nous allons voir comment créer un contenu avec 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.
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="http://www.mozilla.org/xbl"
xmlns:xul="http://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 devrait être déclaré avec l'identifiant de la liaison. De cette façon il
peut y être 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 serait vraisemblablement liée à une barre de défilement,
bien qu'elle le ne doive pas. Chaque élément dont la propriété CSS -moz-binding
est déclarée avec l'URL de la liaison, va l'utiliser.
Utiliser la liaison ci-dessus a pour résultat la ligne de XUL ci-dessous 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 est montré à 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 réellement d'un certain nombre d'é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 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, ne les comprendra
pas, et vos éléments ne fonctionneront pas correctement.
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>
Attacher cette liaison à un élément fera qu'il contiendra un champ de texte, suivi d'un bouton "Parcourir". Ce contenu interne est créé anonymement et ne peut être vu en utilisant le DOM.
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 de XUL, ils vont écraser les éléments fournis par la liaison. Par exemple, prenez ce morceau de XUL, en supposant qu'il est lié à la barre de défilement XBL de tout à l'heure :
<scrollbar/>
<scrollbar>
<button label="Overridden"/>
</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 de construction comme les barres de défilement, ont leur définition XBL stockées dans des fichiers situés dans le répertoire "binding" du paquet 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 sont encore disponibles, que le contenu provienne d'XBL ou que XUL fournisse son
propre contenu.
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. Vous pouvez faire cela en utilisant 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 suit :
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
XUL n'a même pas besoin de savoir qu'il est là.
Le contenu qui en résulte serait :
<menu class="dropbox">
<menupopup>
<menuitem label="1000"/>
<menuitem label="2000"/>
</menupopup>
<textbox flex="1"/>
<button src="chrome://global/skin/images/dropbox.jpg"/>
</menu>
Dans certains cas, vous pouvez souhaiter n'inclure que des types de contenus spécifiques et non
les autres. Ou bien, vous pouvez souhaiter placer différents types de contenus en différents
endroits. L'attribut includes peut être utilisé pour n'autoriser que
certains éléments à apparaître dans le contenu. Sa valeur pourrait être déclarée à un simple nom de
balise, ou à 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.
D'autres éléments ne correspondront pas à 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 chaque autre 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 "diminuer" de part et d'autre. Ceci 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 différera à chaque utilisation.
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="Zoom In"/>
<xul:box flex="1" style="border: 1px solid black">
<children includes="image"/>
</xul:box>
<xul:button label="Zoom Out"/>
</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 suivant :
<binding id="zoombox">
<content>
<xul:box flex="1">
<xul:button label="Zoom in"/>
<xul:box flex="1" style="border: 1px solid black">
<image src="images/happy.jpg"/>
<image src="images/angry.jpg"/>
</xul:box>
<xul:button label="Zoom Out"/>
</xul:box>
</content>
</binding>
D'un point de vue du DOM,
les éléments fils sont toujours à leur emplacement
original. Ceci, parce que 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.
Cela s'applique également aux règles du sélecteur CSS.
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, cela vous permet de placer uniquement les éléments correspondants à cet endroit. Par
exemple, le fichier XBL suivant va faire apparaître des étiquettes et des boutons de texte à un
endroit différent des autres éléments :
Exemple 10.2.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'inclus que les éléments label et bouton,
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.