XBL - XML Binding Language /1

Quali ambienti supportano XBL

XBL è stato creato da Mozilla ed è quindi presente in tutte quelle applicazioni basate su Gecko (Firefox, Thunderbird, Flock, KomodoEdit).

Esiste una specifica del W3C che ne definisce le caratteristiche ma è compatibile con la versione Mozilla solo parzialmente.

Il linguaggio che trae maggiori benefici da XBL è XUL che serve a definire le interfacce grafiche nelle applicazioni Gecko. XUL descrive un intero documento, ad esempio una pagina web, XBL invece descrive un singolo componente da usare all'interno di un documento.

Caratteristiche

Le caratteristiche principali permettono di

• creare nuovi componenti o aggiungere funzionalità a quelli esistenti
• avere l'ereditarietà tra componenti a livello di codice XML
• scrivere event handler, metodi anche getter e setter associati ai componenti
• usare CSS per creare binding XUL

Creare un nuovo componente

Si supponga di voler inserire in un documento XUL un widget che permetta la selezione di un file, qualcosa di simile al controllo HTML

<input type="file" id="upfile-image" />

Un solo controllo che il browser visualizza con il campo di testo che contiene il percorso del file ed, alla sua destra, il pulsante di selezione.

Volendo fare la stessa cosa in XUL dovremmo esplicitamente dichiarare due widget, oltretutto per essere sicuri di averli affiancati sulla stessa riga dovremmo racchiuderli in un box orizzontale

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

<hbox>
    <textbox id="file-picker-path" />
    <button id="file-picker-button" oncommand="browseFile()" />
</hbox>

</dialog>

Risulta evidente che

• il codice XML è prolisso
• non è facilmente riutilizzabile
• la presenza di più picker riduce enormemente la leggibilità del documento XML

Sarebbe più semplice se esistesse un componente da utilizzare come mostrato di seguito

<dialog
 xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <filepicker id="file-path-one" />
    <filepicker id="file-path-two" />
</dialog>

bene, questo è esattamente il compito di XBL!

E' possibile creare un proprio componente facendo il binding di più oggetti come mostrato di seguito

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

  <content>
      <xul:hbox>
          <xul:textbox />
          <xul:button oncommand="onPickFile();" />
      </xul:hbox>
  </content>

  </binding>
</bindings>

Notare che:

• la dichiarazione esplicita del namespace XUL, questo è necessario perché XBL ha elementi con lo stesso nome
• il nodo content contiene tutti gli elementi che compongono il nostro nuovo widget
• il binding ha un id associato che è obbligatorio e serve in fase di inclusione

Questo secondo documento XML è il nuovo widget completo e funzionante (diciamo visualizzabile).

Rendere il binding disponibile ai file XUL

Restano aperti due interrogativi:

• Come si includono i componenti in nuovi documenti?
• Da dove viene preso il nome filepicker utilizzato all'interno della dialog?

Il nuovo documento è la dialog che contiene il filepicker e l'inclusione viene fatta tramite CSS con al direttiva di preprocessing <?xml-stylesheet/>

<?xml-stylesheet
 href="chrome://xblfilepicker/skin/filepicker.css"
 type="text/css"?>

<dialog
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <filepicker id="configPath"/>
</dialog>

Il file filepicker.css al suo interno ha un selettore che effettua il binding

filepicker {
  -moz-binding: url('chrome://.../filepicker.xml#filepickerbinding')
}

dove il nome del selettore è il nome del componente e la dichiarazione -moz-binding prende da filepicker.xml il binding filepickerbinding

Modificare un componente esistente

Si è visto come creare un nuovo componente mettendo insieme quelli già esistenti ma la capacità espressiva di XBL permette di ereditare l'aspetto di uno esistente e modificarlo secondo le proprie esigenze.

Tutti i componenti XUL possono essere estesi: radio, checkbox, button, menuitem e così via.

Prendiamo ad esempio i menuitem, XUL permette di crearli e di associare ad essi un'immagine che viene mostrata a fianco del testo del menu, se però volessimo centrare l'immagine non potremmo farlo perché XUL non mette nativamente a disposizione un componente simile. La soluzione consiste nell'ereditare le proprietà dell'oggetto XUL <menuitem/> e posizionare l'immagine al centro.

<binding id="menuitemImageCenterBinding"
  extends="chrome://global/content/bindings/menu.xml#menuitem">
  <content>
    <xul:hbox align="center" pack="center" flex="1">
      <xul:image xbl:inherits="src=boundimage"/>
    </xul:hbox>
  </content>
</binding>

Il binding precedente ha un attributo nuovo extends che dice al nostro componente di ereditare dal menuitem standard l'aspetto (ed il comportamento) e che esso stesso è un menuitem. Notare anche che <xul:image/> ha l'attributo xbl:inherits utilizzato per mappare i nomi degli attributi riconosciuti dal tag con nuovi nomi.

Il tag <xul:image/> si aspetta la url dell'immagine da visualizzare nell'attributo src di cui boundimage è un suo sinonimo. Questo viene fatto per evitare conflitti tra i nomi degli attributi, infatti è buona regola creare sempre dei propri alias.

Definiamo il nome del componente nel CSS

.menuitem-image-center {
  -moz-binding:
    url('chrome://.../filepicker.xml#menuitemImageCenterBinding')
}

Notare che abbiamo definito un selettore di classe (il punto all'inizio del nome) e non di tag questo perché non abbiamo creato un nuovo componente ma specializzato uno esistente questo implica che lo useremo nell'attributo class di un menuitem come mostrato di seguito.

<popup id="contentAreaContextMenu">
  <menuitem id="xblfilepickerMenuItem"
            boundimage="chrome://.../file_remote.png"
            class="menuitem-image-center"/>
  <menuitem id="xblfilepickerMenuItem"
            boundimage="chrome://.../folder_remote.png"
            class="menuitem-image-center"/>
</popup>

Si noti come viene passata la url dell'immagine attraverso l'attributo boundimage e che class corrisponde al nome usato nel CSS.

Il risultato è visibile in Figura 1.

Figura 1. Immagine centrata nel menu

Conclusioni

Abbiamo visto come creare nuovi componenti da zero e come adattare quelli esistenti, al di là delle mere considerazioni implementative va notato come tramite XBL sia possibile creare oggetti componentizzabili e riutilizzabili scritti completamente in XML.

E' possibile creare una propria libreria di oggetti ed utilizzarla semplicemente includendo il CSS nel documento di destinazione, che poi è quello che si fa già quando si lavora con XUL.

Vedremo prossimamente come implementare gestori di eventi e definire metodi, non solo look&feel ma anche funzionalità, i più impazienti possono installare l'estensione Firefox XBLTest contenente quanto visto sino ad ora. Dal menu contestuale sarà possibile accedere alla dialog con i file picker ed il menu.