11.3 Héritage d'attributs XBL

Attention : Ce tutoriel est ancien et n'est pas mis à jour. Bien que beaucoup d'informations soient encore valables pour les dernières versions de gecko, beaucoup sont aussi obsolètes. Il est préférable d'aller consulter cette page sur la version française de ce tutoriel sur developer.mozilla.org.

Dans cette section, nous verrons comment les attributs peuvent être hérités.

l'héritage d'attributs

XBL nous permet de construire des éléments graphiques composites tout en cachant leur implémentation réelle. Cependant, avec les fonctionnalités mentionnées jusque présent, le contenu anonyme est toujours créé de la même façon. Il serait utile de pouvoir ajouter des attributs aux éléments extérieurs pour modifier les éléments intérieurs. Par exemple :

XUL :

<searchbox/>

XBL :

<binding id="searchBinding">
  <content>
    <xul:textbox/>
    <xul:button label="Rechercher"/>
  </content>
</binding>

Dans cet exemple, l'attribut label est placé directement sur l'élément button. Le problème avec cette technique est que le libellé sera le même à chaque fois que la liaison sera utilisée. Dans ce cas, il serait préférable que l'attribut soit plutôt défini sur la balise searchbox. XBL fournit un attribut inherits permettant l'héritage des attributs de l'élément extérieur. Il devra être placé sur l'élément qui héritera de ces attributs, dans notre cas sur le bouton. Sa valeur devra être initialisée par une liste des noms des attributs à hériter, séparés par des virgules.

<xul:textbox xbl:inherits="flex"/>
<xul:button xbl:inherits="label"/>

Lorsque le contenu est généré, textbox obtient l'attribut flex à partir de searchbox et button obtient l'attribut label à partir de searchbox. Ils permettent à la flexibilité du champ de saisie et au libellé du bouton d'être différents à chaque utilisation de la liaison. De plus, le changement de la valeur des attributs de la balise searchbox avec un script mettra aussi à jour la balise textbox et la balise button. Vous pouvez ajouter un attribut inherits sur autant d'éléments que vous le souhaitez, pour hériter de n'importe quel nombre d'attributs.

Remarquez comment l'attribut inherits a été placé dans l'espace de nommage XBL, en utilisant le préfixe xbl:. L'espace de nommage devrait être déclaré quelque part avant, généralement dans l'élément bindings, comme dans l'exemple suivant :

<bindings xmlns:xbl="http://www.mozilla.org/xbl"
          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<xbl:binding id="buttonBinding">
  <xbl:content>
    <xul:button label="OK" xbl:inherits="label"/>
  </xbl:content>
</xbl:binding>

Dans cet exemple, le bouton hérite de l'attribut label, mais cet attribut a aussi une valeur assignée directement dans le XBL. Cette technique est utilisée pour définir une valeur par défaut si l'attribut n'est pas présent. Ce bouton héritera son attribut label de l'élément extérieur. Cependant, si aucun label n'est présent, la valeur OK par défaut lui sera donnée.

Il peut arriver que deux éléments générés aient besoin d'hériter d'un attribut qui a le même nom. Par exemple, pour créer un champ de saisie muni d'un libellé, contenant donc un élément label et un élément textbox, le libellé (label) aura besoin d'hériter son texte à partir de l'attribut value et le champ de saisie (textbox) aura aussi besoin d'hériter sa valeur par défaut également à partir de l'attribut value. Pour résoudre cela, nous aurons besoin d'utiliser un attribut différent et le faire pointer sur le bon. L'exemple suivant montre comment procéder :

XUL :

<box class="textboxlibelle" title="Entrer du texte:" value="OK"/>

CSS :

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

XBL :

<binding id="textboxlibelle ">
  <content>
    <xul:label xbl:inherits="value=title"/>
    <xul:textbox xbl:inherits="value"/>
  </content>
</binding>

L'élément textbox hérite directement de l'attribut value. Pour initialiser l'attribut value du libellé, nous aurons besoin d'utiliser un nom différent d'attribut et le faire pointer vers le vrai attribut. L'attribut inherits sur la balise label obtient son attribut title à partir de l'élément extérieur et le fait pointer vers l'attribut value de l'élément label. La syntaxe <attribut intérieur>=<attribut extérieur> est utilisée ici pour faire pointer un attribut vers un autre. Voici un autre exemple :

XUL :

<box class="okannuler" oktitle="OK" canceltitle="Annuler" image="happy.png"/>

CSS :

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

XBL :

<binding id="okannuler">
  <content>
    <xul:button xbl:inherits="label=oktitle,image"/>
    <xul:button xbl:inherits="label=canceltitle"/>
  </content>
</binding>

La valeur de l'attribut oktitle est projetée vers l'attribut label du premier bouton. L'attribut canceltitle est projeté vers l'attribut label du second bouton. Le premier bouton hérite aussi de l'attribut image. Le résultat est le suivant :

<box class="okannuler" oktitle="OK" canceltitle="Annuler" image="happy.png">
  <button label="OK" image="happy.png"/>
  <button label="Annuler"/>
</box>

Remarquez que les attributs sont dupliqués dans le contenu intérieur (anonyme). La modification des attributs de la boîte avec la classe okannuler affectera automatiquement les valeurs des boutons. Vous avez probablement aussi remarqué que nous avons créé nos propres noms d'attribut. Ceci est valide en XUL.

---

Dans la section suivante, nous regarderons l'ajout de propriétés, méthodes et événements à une liaison.