XBL – XML Binding Language /2

Si è visto nel primo appuntamento come creare un componente XBL e come modificarne uno esistente, in entrambi i casi si è agito esclusivamente
sull’aspetto grafico ma sappiamo che è possibile anche definire dei metodi che permettono di controllarne il funzionamento.
Il seguente articolo descriverà come XBL permetta di creare “nuovi” tag con i propri attributi e la propria logica applicativa.

Gli elementi grafici di XBL

Sappiamo che la gerarchia di un documento XBL prevede il nodo root
bindings, uno o più nodi binding
contenenti a loro volta il nodo content dentro il
quale sta la “forma” grafica dell’oggetto. Riprendendo l’esempio
del file picker il content risulta composto da un
campo di testo e da un pulsante XUL.


  

  
      
          
          
      
  

  

Il risultato è visibile in Figura 1

FilePicker

Figura 1. Il risultato del FilePicker

Questi sono i tag principali che XBL mette a disposizione per
creare nuovi “oggetti” grafici.

Si noti che i children di content possono essere nodi
di qualunque dialetto XML, nel nostro caso sono nodi XUL ma
potrebbero essere nodi SVG o XHTML tutto sta ad avere uno strato
capace di lavorare con i binding XBL, i prodotti Mozilla sono tra
questi.

Un interessante esempio (risalente al 2004) di SVG con XBL è
presente su mozillazine.

Gli altri elementi di XBL

Senza voler far inorridire i puristi si può affermare che XBL
descrive in XML quella che in altri linguaggi è una classe ovvero
una entità dotata di metodi, attributi e costruttore di default,
capace anche di fare information hiding.


    
      

      
      

      

      
        
        
    
        
        
    
      

      
        
      

    

Il codice riportato sopra mostra come il nodo
sia il contenitore dei costrutti di
comportamento del componente.

La tabella seguente descrive gli elementi che dopo una prima fase
di smarrimento risultano intuitivi.

Nodi di implementation
Nodo Descrizione
constructor Costruttore di default richiamato quando il componente viene creato nel documento ospitante, ad esempio la dialog
destructor richiamato quando un binding viene rimosso da un elemento, utilizzato per fare operazioni di cleanup
field Rappresenta un campo privato della classe (information hiding), l’attributo name contiene il nome del campo
property Equivale all’attributo di un tag, si pensi ad src come attributo del tag image.
method Un metodo privato del componente XBL, può avere dei parametri

La sintassi di property merita un approfondimento.

Essa prevede la presenza, non obbligatoria, di un setter e di un
getter che possono essere dichiarati con due sintassi. La prima
sintassi utilizza gli attributi onget e
onset ed andrebbe usata quando il codice risulta
molto compatto ad esempio una semplice assegnazione, la seconda
forma usa i nodi e e
andrebbero utilizzati quando il codice ha più linee o comunque la
sua leggibilità è importante.

Da un punto di vista strettamente tecnico è indifferente quale
sintassi si usa ma la differenza può farla la presenza di
caratteri particolari. Si pensi all’uso di doppie virgolette e
apici dentro un attributo XML per rendersi conto immediatamente
che cosa preferire.

Un esempio pratico

E’ tutto affascinante (si spera) ma privo di concretezza senza un
esempio chiarificatore.

A tale scopo riprendiamo il file picker aggiungendo delle
funzionalità. Il nostro file picker dovrà, come funzionalità
minima, permettere la selezione di un nome di file che poi verrà
visualizzato nel campo di testo.

Si osservi il codice riportato di seguito, a parte l’attributo id
tutti gli altri sono propri del componente XBL.


Attributi del file picker
Attributo Descrizione
mode Tipo di selezione open per aprire un file esistente, save per salvare un file
onfilechoosen La funzione callback javascript da eseguire che riceve due argomenti, isOk se l’utente ha scelto il file (potrebbe aver annullato la selezione)
ed il percorso del file, ritorna true se il file viene accettato false altrimenti
pickTitle Il testo visualizzato come titolo sulla dialog di selezione file
filters I tipi di file che è possibile selezionare (xml, testo, immagini)

Costruttore, property e method sotto la lente d’ingrandimento

Il nostro costruttore deve inizializzare l’array con i tipi di
file supportati da filters e dare un valore di
default a onfilechoosen nel caso in cui l’utente non
lo abbia impostato. In buona sostanza il costruttore serve a dare
autoconsistenza all’instanza creata.



Come si può vedere l’accesso agli attributi del tag
filepicker viene fatto tramite funzioni DOM standard
getAttribute e hasAttribute. L’instanza
dell’oggetto filepicker è accessibile tramite il
“puntatore” this così come in molti altri linguaggi.

L’attributo onfilechoosen può essere letto ed
impostato tramite la sua property contenente i corrispondenti
setter e getter.


  

Riprendendo il codice dei widget si nota che il nostro pulsante
richiama il metodo onPickFile() che e’ un metodo
privato del nostro componente.


  
      
      
  

Il codice apre la dialog di selezione file in base ai valori delle
varie property, richiama mFileChoosen impostata con
l’attributo onfilechoosen e se tutto va bene copia il
percorso del file nel campo di testo.


  

onPickFile chiama altri metodi come
makeFilePicker() che crea l’oggetto XPCOM nsIFilePicker.

Questi elementi costituiscono il componente non c’è altro, come si
vede XBL ha pochi costrutti ma che hanno una capacità espressiva
assai potente.

Fermiamoci qui

Il nostro viaggio nei meandri di XBL è quasi al termine, abbiamo
visto come creare logica e come leggere ed impostare il valore
degli attributi di un componente, poi abbiamo visto che XBL di
fatto ci permette di aggiungere tag scritti interamente in XML e
Javascript e che ha dei costrutti simil Object Oriented. Resta da
vedere come ereditare gli attributi e come accedere da
dentro
ai vari widget che formano il componente e come usare
i gestori di evento. Tutto questo sarà oggetto del prossimo
appuntamento in attesa del quale si può installare l’estensione xblfilepicker-st.xpi

Comments

  1. unwiredbrain says:

    Questa serie si fa sempre più interessante! Non vedo l’ora di leggere il prossimo episodio 🙂

  2. unwiredbrain says:

    PS
    Gente! Avete problemi di spam pazzeschi!
    Il feed dei commenti ne è invaso!

  3. Superbrain says:

    Fantastico, Davide! Fantastico.

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.