10.3 Héritage d'attributs XBL

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

Attributs hérités

XBL nous permet de construire des éléments d'interface utilisateurs composites tout en cachant leur implémentation réelle. Cependant, avec les particularités mentionnées jusque là, le contenu anonyme est toujours crée de la même façon. Il serait utile d'ajouter des attributs aux éléments extérieurs, qui modifient 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 si l'attribut pouvait être plutôt spécifié sur la balise searchbox. XBL fournit un attribut inherits qui peut être utilisé pour hériter 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. Ceci permet à la flexibilité de la balise textbox et au libellé de button d'être différent à chaque utilisation de la liaison. En plus, changer 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 nom XBL, en utilisant le préfixe xbl:. L'espace de nom 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 cette 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 champs de saisie avec un libellé, contenant donc un élément label et un élément textbox, l'élément label aura besoin d'hériter son texte à partir de l'attribut value et l'élément textbox aura aussi besoin d'hériter de sa valeur par défaut à partir de l'attribut value. Pour résoudre ceci, nous aurons besoin d'utiliser un attribut différent et le faire pointer sur le bon. L'exemple suivant montre comment il faut faire :

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>

Le 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 pour 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). Changer les attributs de la boîte avec la classe okannuler changera automatiquement les valeurs des boutons. Vous avez probablement aussi remarqué que nous avons crée 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.