17 novembre 2007 @ ParisWeb 2007

Laurent Jouanneau (Disruptive Innovations)

Conditions d'utilisation de ce document : CC-nc-sa

• Un langage XML déclaratif
• Permet de modifier/ajouter sur des élements d'un document :
  1. du contenu
  2. des comportements
  3. des styles CSS

• Widgets, composants d'interface
• Améliorer des balises existantes
• Implémentation d'un langage XML non reconnu par le navigateur

• Ne "pollue" pas le document
• Facilite le développement : séparation entre le contenu et le comportement
• Réutilisation
• Solution plus légère que les équivalents en pure javascript

• Aucun ?

Fichier d'un XBL en version 1 (Mozilla)

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
  <binding id="binding1">
    
  </binding>
  <binding id="binding2">
    
  </binding>
</bindings>

Propriété CSS binding()

 div.truc { binding:url('fichierxbl.xml#bind1'); }

  <binding id="binding1">
    <content>
     ....
    </content>
    <implementation>
    ....
    </implementation>
    <handlers>
    ...
    </handlers>
    <resources>
      <stylesheet src="styles.css"/>
    </resources>
  </binding>

• N'importe quelle balise dans <content />
• Héritage d'attributs xbl:inherits
• Placement du contenu original : <children />

• Propriétés
• Champs
• Methodes

balise <handler />

        <handler event="click" button="0">
            if(event.originalTarget.localName != 'button')
                this.page++;
        </handler>
        <handler event="keydown" keycode="VK_SPACE">
                this.page++;
        </handler>

Styles spécifiques pour le widget, qui seront importés dans le document

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

attribut extends

<binding id="binding1" extends="autre_binding.xml#bind2">

Nécessite d'utiliser Firefox pour les voir fonctionner.

• Un date picker (fichier XBL, feuille CSS du XBL, Feuille CSS de la demo)
  (à comparer par exemple avec l'équivalent JS dans la bibliothèque de Yahoo ;-) )
• Slideshow : comment transformer un simple document en visualisateur de slides, sans polluer le document (fichier XBL, Feuille CSS de la demo)

• Spécification écrite par le WHATWG
• Spécification finalisée au sein du Web Application Formats Working Group au W3C
• Stade d'avancement : "Candidate recommandation" depuis le 16 Mars 2007
• http://www.w3.org/TR/2007/CR-xbl-20070316/

• Noms de balises qui changent (bindings->xbl, content->template, children->content, xbl:inherits -> xbl:attr
• Plus de balises method, property ... l'implementation se fait directement dans le langage choisi
• L'espace de nom : http://www.w3.org/ns/xbl
• Possibilité de spécifier des styles CSS juste sur le contenu du template et de limiter ou non la cascade CSS
• pouvoir indiquer un type de pseudo element sur des elements du contenu xbl:pseudo
• L'attribut id n'est pas reconnu de l'exterieur du binding
• Dans l'element ressources, on peut designer des feuilles de styles, images etc
• Externalisation du code dans un fichier séparé (balise script)
• Notion d'heritage au niveau du contenu du template, balise inherited

• Quatres possibilités pour charger un fichier de bindings
  1. <?xbl href="widgets.xml"?>
  2. propriété binding en CSS
  3. DOM : document.loadBindingDocument()
  4. Balises xbl incluses dans le document
• Trois possibilités pour attacher un binding :
  1. attribut element sur binding
  2. propriété binding en CSS
  3. DOM : monElement.addBinding() / removeBinding()
• Plusieurs bindings peuvent être attaché à un même élément
• Un binding peut être attaché à un élement avant que celui-ci soit inséré dans un document

• Implémentation prévue dans Mozilla 2
• Et esperons dans les autres navigateurs...

• Documentation XBL sur developer.mozilla.org
• Vos questions sur xulfr.org