Liaisons XBL
Sommaire
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.
| 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="http://www.mozilla.org/xbl">
<binding id="square">
<resources>
<stylesheet src="bind6.css"/>
</resources>
<content xmlns="http://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 :
|
|
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.
| 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.
Page modifiée à 13:30, 15 Déc 2006 par Verruckt