Liaisons XBL

Cette page illustre la façon d'utiliser CSS dans Mozilla pour améliorer la structure d'applications complexes, afin de rendre le code et ses ressources plus facilement réutilisables.

Vous appliquerez cette technique dans une démonstration simple.

Information : les liaisons XBL

La structure fournie par les langages de balisage et CSS n'est pas idéale pour les applications complexes où certaines parties nécessitent d'être indépendantes et réutilisables. Vous pouvez placer les feuilles de style et les scripts dans des fichiers séparés, mais vous devez lier ces fichiers avec le document dans son ensemble.

Une autre limitation structurelle concerne le contenu. Vous pouvez utiliser CSS pour fournir du contenu pour des éléments sélectionnés, mais ce contenu est limité à du texte et des images, et son positionnement est limité à juste avant ou juste après l'élément sélectionné.

Mozilla fournit un mécanisme permettant de surmonter ces limitations : XBL (XML Bindings Language). Vous pouvez utiliser XBL pour lier des éléments sélectionnés à leurs propres :

Feuilles de style
Contenu
Propriétés et méthodes
Gestionnaires d'évènements

Étant donné que vous évitez de lier tout au niveau du document, vous pouvez créer des pièces indépendantes faciles à maintenir et réutilisables.

Plus de détails
Pour plus d'informations à propos des liaisons XBL, consultez la page XBL de ce wiki.

Action : une démonstration de XBL

Créez un nouveau document HTML, doc6.html. Copiez et collez-y le contenu ci-dessous :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>

<HEAD>
<TITLE>Premiers pas en CSS avec Mozilla CSS - Démonstration de XBL</TITLE>
<LINK rel="stylesheet" type="text/css" href="style6.css"></strong>
</HEAD>

<BODY>
<H1>Démonstration de XBL</H1>
<DIV id="square">Cliquez ici</DIV>
</BODY>

</HTML>

Créez un nouveau fichier CSS, style6.css. Cette feuille de style contient le style du document. Copiez et collez-y le contenu ci-dessous :

/*** Démonstration de XBL ***/
#square {
  -moz-binding: url("square.xbl#square");
  }

Créez un nouveau fichier texte, square.xbl. Ce fichier contient la liaison XBL. Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défile pour l'obtenir dans son entièreté :

<?xml version="1.0"?>
<!DOCTYPE bindings>
<bindings xmlns="https://www.mozilla.org/xbl">

<binding id="square">

  <resources>
    <stylesheet src="bind6.css"/>
    </resources>

  <content xmlns="https://www.w3.org/1999/xhtml">
    <div anonid="square"/>
    <button anonid="button" type="button">
      <xbl:children/>
      </button>
    </content>

  <implementation>

    <field name="square"><![CDATA[
      document.getAnonymousElementByAttribute(this, "anonid", "square")
      ]]></field>

    <field name="button"><![CDATA[
      document.getAnonymousElementByAttribute(this, "anonid", "button")
      ]]></field>

    <method name="doDemo">
      <body><![CDATA[
        this.square.style.backgroundColor = "#cf4"
        this.square.style.marginLeft = "20em"
        this.button.setAttribute("disabled", "true")
        setTimeout(this.clearDemo, 2000, this)
        ]]></body>
      </method>

    <method name="clearDemo">
      <parameter name="me"/>
      <body><![CDATA[
        me.square.style.backgroundColor = "transparent"
        me.square.style.marginLeft = "0"
        me.button.removeAttribute("disabled")
        ]]></body>
      </method>

    </implementation>

  <handlers>
    <handler event="click" button="0"><![CDATA[
     if (event.originalTarget == this.button) this.doDemo()
     ]]></handler>
    </handlers>

  </binding>

</bindings>

Créez un nouveau fichier CSS, bind6.css. Cette feuille de style séparée contient le style pour la liaison. Copiez et collez-y le contenu ci-dessous :

/*** Démonstration de XBL ***/
[anonid="square"] {
  width: 20em;
  height: 20em;
  border: 2px inset gray;
  }

[anonid="button"] {
  margin-top: 1em;
  padding: .5em 2em;"
  }

Ouvrez le document dans votre navigateur et appuyez sur le bouton.

Ce wiki ne permet pas d'utiliser JavaScript au sein des pages, il n'est dont pas possible de montrer la démonstration ici. Cela ressemble à ceci, avant et après l'appui sur le bouton :

Démonstration de XBL

Remarques à propos de cette démonstration :

Le document HTML est liée à sa feuille de style comme d'habitude, mais il ne lie vers aucun code JavaScript.
Le document ne contient aucun bouton. Il contient uniquement le texte du label de celui-ci. Le bouton est ajouté par la liaison.
La feuille de style du document est liée à la liaison XBL.
La liaison est liée à sa propre feuille de style, fournit son propre contenu et code JavaScript. Elle est donc totalement indépendante.

Challenges
Modifiez le fichier XBL afin que le carré double sa largeur lorsqu'il change de couleur au lieu de se déplacer vers la droite. Utilisez l'inspecteur DOM pour examiner le document, afin de révéler le contenu ajouté.

Pour continuer

Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa page de discussion.

Dans cette démonstration, le carré et le bouton forment un composant graphique ( widget ) indépendant qui fonctionne au sein d'un document HTML. Mozilla dispose d'un langage de balisage spécialisé pour créer des interfaces utilisateur. La page suivante en donne une démonstration : Interfaces utilisateur XUL.

Liaisons XBL

Information : les liaisons XBL

Action : une démonstration de XBL

Pour continuer

Étiquettes et contributeurs liés au document