XBL – XML Binding Language /1

Questo è il primo di tre articoli dedicati al linguaggio XBL, lo scopo è quello di cominciare a fare conoscenza con il linguaggio
che permette di creare componenti riutilizzabili scritti in XML che sono alla base della piattaforma Mozilla.

Questo primo appuntamento descrive come creare un nuovo widget, nel secondo si vedrà come usare i gestori di eventi ed i metodi.

Ogni volta che si legge un acronimo contenente la lettera X (a meno che non siano tre di fila) si pensa immediatamente a qualche parentela con l’XML.
Non fa eccezione XBL che è un linguaggio la cui sintassi è gerarchica come l’XML ed il cui utilizzo consiste nel creare interfacce utente basate su HTML/XHTML/SVG/XUL.


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 è href="http://developer.mozilla.org/en/docs/XUL">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


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




    
    

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


    
    

bene, questo è esattamente il compito di XBL!

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


  

  
      
          
          
      
  

  

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/>




    

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 href="http://www.xulplanet.com/references/elemref/ref_menuitem.html"><menuitem/>
e posizionare l’immagine al centro.


  
    
      
    
  

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.


  
  

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.

Immagine centrata nel menu.

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 href="http://stacktrace.it/site_media/luambo/uploads/2008/03/09/xbl-test.xpi">XBLTest
contenente quanto visto sino ad ora. Dal menu contestuale sarà
possibile accedere alla dialog con i file picker ed il menu.

Comments

  1. Bell’articolo! Non ho mai seguito queste tecnologie ma l’hai reso interessante. Bravo!

Policy per i commenti: Apprezzo moltissimo i vostri commenti, critiche incluse. Per evitare spam e troll, e far rimanere il discorso civile, i commenti sono moderati e prontamente approvati poco dopo il loro invio.