XML/XUL

Obiettivi di apprendimento

• Breve panoramica di che cosa è XUL
• Ulteriori informazioni sulla libreria di tag/widget di base
• Creare alcune pagine web XUL semplici e statiche
• Aggiungere gestori di eventi a una pagina XUL

XUL (pronunciato zool), che sta per eXtensible User interface Language, è un linguaggio di interfaccia utente basato su XML originariamente sviluppato per il browser Netscape. Ora è gestito da Mozilla. Fa parte di Mozilla Firefox e molte altre applicazioni di Mozilla, ed è disponibile come parte di Gecko, il motore di rendering sviluppato da Mozilla. Infatti, XUL è abbastanza potente che l'intera interfaccia utente nell'applicazione Firefox è implementata in XUL.

Come in HTML, in XUL è possibile creare un'interfaccia utilizzando un linguaggio di marcatura relativamente semplice, definire l'aspetto con fogli di stile CSS e utilizzare JavaScript per manipolare il comportamento dell'interfaccia. Diversamente dall'HTML, tuttavia, XUL fornisce un ricco set di widget dell'interfaccia utente per creare, ad esempio, menu, barre degli strumenti e pannelli a schede.

Per dirla in termini semplici, XUL può essere utilizzato per creare interfacce utente leggere, multipiattaforma e cross-device.

Molte applicazioni sono sviluppate utilizzando le funzionalità di una piattaforma specifica che la creazione di software multipiattaforma dispendiosa in termini di tempo e denaro. Alcuni utenti potrebbero voler utilizzare un'applicazione su tecnologie diverse dai computer tradizionali, come piccoli dispositivi portatili. A oggi, sono già state sviluppate soluzioni multipiattaforma. Java, ad esempio, è stato creato proprio per questo scopo. Tuttavia, la creazione di interfacce grafiche con Java è alquanto complessa. In alternativa, XUL è stato progettato per creare interfacce utente portatili in modo facile e veloce. È disponibile sulla maggior parte delle versioni di Windows, Mac OS X, Linux e Unix. Yahoo! attualmente utilizza XUL e le tecnologie correlate per la sua barra degli strumenti Yahoo! (estensione di Firefox) e la sua applicazione Photomail.

Per illustrare il potenziale di XUL, questo modulo funzionerà attraverso alcuni esempi. Le funzionalità complete di XUL vanno oltre lo scopo di questo modulo, che è progettato per fornire al lettore una prima occhiata al potenziale di XUL. Un'altra cosa da notare: per lavorare con XUL avrete bisogno di un browser basato su Gecko (come Firefox o Mozilla Suite) o XULRunner.

Le basi

XUL è XML e, come tutti i buoni file XML, anche un buon file XUL inizia con la dichiarazione della versione XML standard. Attualmente XUL sta utilizzando la versione XML 1.0.

Per dare alla tua pagina XUL un bell'aspetto, devi includere un foglio di stile globale . L'URI del foglio di stile predefinito è href = "chrome://global/skin/". Mentre è possibile caricare quanti fogli di stile desideri, è consigliabile caricare inizialmente il foglio di stile globale. Guardando il primo esempio, si noterà il riferimento a "chrome". Il chrome è la parte della finestra dell'applicazione che si trova al di fuori dell'area di contenuto di una finestra. Barre degli strumenti, barre dei menu, barre di avanzamento e barre dei titoli delle finestre sono tutti esempi di elementi che sono tipicamente parte del chrome. Chrome è il termine descrittivo usato per nominare tutti gli elementi in un'applicazione XUL. Puoi paragonarlo al cromo all'esterno di un'auto. È quello che cattura il tuo sguardo. Gli elementi in un file XUL sono quelli che vedi nella finestra del browser.

Tutti i documenti XML devono avere una dichiarazione del namespace. Gli sviluppatori di XUL hanno fornito un namespace che mostra dove hanno trovato il nome XUL (il riferimento è dal film Ghostbusters, per chi non lo sapesse).

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
   id="window identifier"
   title="XUL page"
   orient="horizontal"
   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   ...  (aggiungi elementi qui)
</window>

La prossima cosa da notare è il tag <window>. Questo tag è analogo al tag <body> in HTML. Tutti gli elementi vivranno all'interno del tag della finestra. Nell'esempio, il tag <window> ha tre attributi che sono molto importanti. L'attributo id è importante in quanto identifica la finestra in modo che gli script possano farvi riferimento. Sebbene l'attributo title non sia necessario, è buona prassi fornire un nome descrittivo. Il valore del titolo verrà visualizzato nella barra del titolo della finestra. L'attributo successivo è molto importante: indica al browser in quale direzione tracciare gli elementi descritti nel file XUL. horizontal significa proprio questo. Stesi in successione attraverso la finestra. Il verticale è il contrario; aggiunge gli elementi in formato colonna. Vertical è il valore predefinito, quindi se non dichiari questo attributo otterrai un orientamento verticale.

Come affermato in precedenza, un documento XUL viene utilizzato per creare interfacce utente. Le interfacce utente sono generalmente piene di componenti interattivi come caselle di testo, pulsanti e simili. Un documento XUL realizza questo con l'uso di widget, che sono componenti autonomi con comportamento predefinito. Ad esempio i pulsanti risponderanno ai clic del mouse e le barre dei menu possono contenere i pulsanti. Tutte le azioni normalmente accettate dei componenti della GUI sono integrate nei widget. Esiste già una ricca libreria di widget predefiniti, ma poiché questo è open source, ognuno può definire un widget o un insieme di widget a proprio uso.

I widget sono "scollegati" finché non sono programmati per funzionare insieme. Per un esempio semplice può bastare JavaScript, mentre un'applicazione più complessa può essere fatta usando C++ o Java. In questo modulo utilizzeremo JavaScript per illustrare gli usi e le potenzialità di XUL.

Inoltre, un file XUL dovrebbe avere l'estensione .xul. Il browser Mozilla lo riconoscerà automaticamente e saprà cosa fare quando si farà clic su di esso. È possibile utilizzare anche un'estensione .xml, ma è necessario aprire il file all'interno del browser.

Ci sono infine alcune regole di sintassi da seguire:

• Tutti gli eventi e gli attributi devono essere scritti in lettere minuscole.
• Tutte le stringhe devono essere doppie.
• Ogni widget XUL deve utilizzare tag vicini (sia <tag></tag> o <tag/>) per essere ben formati.
• Tutti gli attributi devono avere un valore.

Un primo esempio

Quale modo migliore per iniziare del buon vecchio esempio di "Hello World"? Apri un editor di testo (non MS Word) come Blocco note o TextPad e digita:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window
id="Hello"
title="Hello World Example"
orient="vertical"
persist="screenX screenY width height"
xmlns= "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<description style='font-size:24pt'>Hello World</description>
<description value='Hello World' style='font-size:24pt'/>
<label value = 'Hello World'  style='font-size:24pt'/>
</window>

Salvalo ovunque ma assicurati di dare al file l'estensione .xul. Ora basta fare doppio clic su di esso e dovrebbe aprirsi in Firefox. Dovresti ottenere "Hello World" tre volte, una sopra l'altra. Notare i diversi modi in cui è stato stampato "Hello World": due volte da un tag description e una volta da un tag label. Sia <description> sia <label> sono tag relativi al testo. L'uso del tag description è l'unico modo per scrivere del testo che non sia il contenuto di un attributo 'value'. Ciò significa che è possibile scrivere testo che non è necessariamente assegnato a una variabile. Nel secondo e nel terzo esempio il testo viene espresso come attributo rispettivamente alla descrizione o all'etichetta del tag. Puoi vedere qui che l'attributo orient in window è impostato su vertical. Questo è il motivo per cui il testo viene emesso in una colonna. Altrimenti, se l'orientamento era impostato su horizontal, tutto il testo si sarebbe trovato su una riga.

Ora iniziamo ad aggiungere alcuni elementi più interessanti.

Aggiungere widget

Come ricordato in precedenza, XUL ha una ricca libreria di elementi chiamati widget. Questi includono pulsanti, caselle di testo, barre di avanzamento, cursori e una miriade di altri oggetti utili. Un buon elenco è il riferimento del programmatore XUL.

Diamo un'occhiata ad alcuni semplici pulsanti. Inserisci il codice seguente in un blocco note o in un altro editor di testo che non sia MS Word.

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window
id="findfile-window"
title="Find Files"
orient="horizontal"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<button id="find-button" label="Find" default="true"/>
<button id="cancel-button" label="Cancel"/>

</window>

Salvalo e dai al file l'estensione .xul. Apri Firefox e apri il file dal browser. Dovresti vedere un pulsante "trova" e un pulsante "annulla". Da qui è possibile aggiungere più funzionalità e creare interfacce elaborate.

Ci deve essere un posto dove mettere tutte queste cose e come il tag <body> in HTML, il tag <box> in XUL è usato per ospitare i widget. In altre parole, le scatole sono contenitori che incapsulano altri elementi. Esistono diversi tipi di <box>. In questo esempio useremo <hbox>, <vbox>, <toolbox> e <tabbox>.

<hbox> e <vbox> sono sinonimi degli attributi orient = "horizontal" e orient = "vertical", che formano rispettivamente il tag <window>. Utilizzando queste due caselle, le sezioni discrete della finestra possono avere il proprio orientamento. Questi due elementi possono contenere tutti gli altri elementi e possono anche essere annidati.

I tag <toolbox> e <tabbox> servono a scopi speciali. <toolbox> viene utilizzato per creare barre degli strumenti nella parte superiore o inferiore della finestra, mentre <tabbox> imposta una serie di fogli a schede nella finestra.

Prendi il framework XUL del primo esempio e sostituisci "... (aggiungi elementi qui)" con una coppia di tag <vbox> (sono entrambi tag aperti e chiusi). Questo sarà il contenitore esterno per il resto degli elementi. Ricorda, <vbox> significa che gli elementi saranno posizionati verticalmente in ordine di apparizione. Aggiungi l'attributo flex = "1": ciò farà sì che la barra dei menu si estenda lungo tutta la finestra.

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window
id="findfile-window"
title="Find Files"
orient="horizontal"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<vbox flex="1">
    (... add elements here)
</vbox>

</window>

L'attributo flex ha bisogno di qualche spiegazione, dato che è il modo primario per ridimensionare e posizionare gli elementi in una pagina. Flex è un modo dinamico per dimensionare e posizionare i widget in una finestra. Maggiore è il numero di flex (1 è il più alto), più il widget ottiene il ridimensionamento e il posizionamento prioritari sui widget con impostazioni flex inferiori. Tutti gli elementi hanno attributi di dimensione, come larghezza e/o altezza, che possono essere impostati su un numero esatto di pixel, ma usando flex assicura lo stesso dimensionamento relativo e il posizionamento quando si verifica il ridimensionamento di una finestra.

Ora metti prima una coppia di tag <toolbox> e <tabbox> all'interno dei tag <vbox> con <toolbox>. Come è stato detto, <toolbox> viene utilizzato per creare barre degli strumenti, quindi aggiungere una barra degli strumenti simile a quella nella parte superiore del browser.

Questo è il codice finora:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

<window
id="findfile-window"
title="Find Files"
orient="horizontal"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<vbox flex="1">

<toolbox>

<menubar id="MenuBar">
<menu id="File" label="File" accesskey="f">
<menupopup id="FileMenu">
<menuitem label="New" accesskey="n"/>
<menuitem label="Open..." accesskey="o"/>
<menuitem label="Save" accesskey="s"/> 
<menuitem label="Save As..." accesskey="s"/>  
<menuitem label=" ... "/> 
<menuseparator/>
<menuitem label="Close" accesskey="c" />
</menupopup>
</menu>

<menu id="Edit" label="Edit" accesskey="e">
<menupopup id="EditMenu">
<menuitem label="Cut" accesskey="t" acceltext="Ctrl + X"/>
<menuitem label="Copy" accesskey="c"  acceltext="Ctrl + C"/>
<menuitem label="Paste" accesskey="p" disabled="true"/>
</menupopup>
</menu>

<menu id="View" label="View" accesskey="v">
<menupopup id="ViewMenu">
<menuitem id="Tool Bar1" label="Tool Bar1"
type="checkbox" accesskey="1" checked="true"/>
<menuitem id="Tool Bar2" label="Tool Bar2"
type="checkbox" accesskey="2" checked="false"/>
</menupopup>
</menu>
</menubar>

</toolbox>

<tabbox>

</tabbox>

</vbox>

</window>

Ora dovrebbe esserci una barra dei menu con dentro i bottoni "File", "Modifica" e "Visualizza", e dovrebbero espandersi ogni volta che si fa clic su di essi. Esaminiamo più da vicino gli elementi e i loro attributi per vedere come funzionano.

Anzitutto <menubar> contiene tutte le voci del menu (File, Modifica, Visualizza). Successivamente ci sono le tre diverse voci di menu. Ogni menu ha un insieme di elementi e attributi. Il <menupopup> fa solo quello che dice: crea il menu popup che si apre quando si fa clic sull'etichetta del menu. Nel menu popup c'è l'elenco delle voci di menu. Ognuno di questi ha un attributo accesskey. Questo attributo sottolinea la lettera e fornisce il riferimento per creare un tasto di scelta rapida per quella voce di menu. Si noti che nel menu Modifica, sia "Taglia" sia "Copia" hanno etichette di testo acceleratore. Nel menu File c'è un tag <menueperator/>, che posiziona una linea attraverso il menu che funge da separatore visivo. Nel menu Modifica, la voce di menu "Incolla" ha un attributo: disabled = "true". Ciò fa sì che l'etichetta Incolla venga visualizzata in grigio in quel menu e infine nel menu Visualizza le voci di menu sono in realtà caselle di controllo. Il primo è selezionato per default e il secondo no.

Ora su <tabbox>. Facciamo tre fogli diversi con diversi elementi su di loro. Inserisci questo codice tra i tag <tabbox>:

<tabbox flex="1">
<tabs>
   <tab id="Tab1" label="Sheet1" selected="true"/>
   <tab id="Tab2" label="Sheet2"/>
   <tab id="Tab3" label="Sheet3"/>
</tabs>

<tabpanels flex="1">
   <tabpanel flex="1" id="Tab1Sheet" orient="vertical" >
   <description style="color:teal;">
      This doesn't do much.
      Just shows some of the style attributes.
   </description>
   </tabpanel>

   <tabpanel flex="1" id="Tab2Sheet" orient="vertical">
   <description class="normal">
      Hey, the slider works (for free).
   </description>
   <scrollbar/>
   </tabpanel>

   <tabpanel flex="1" id="Tab3Sheet" orient="vertical">
   <hbox>
      <text value="Progress Meter" id="txt" style="display:visible;"/>
      <progressmeter id="prgmeter" mode="undetermined"
         style="display:visible;" label="Progress Bar"/>		  
   </hbox>
   <description value="Wow, XUL! I mean cool!"/>   
   </tabpanel>
</tabpanels>
</tabbox>

Le schede sono prima definite con <tab>. Hanno un ID e un'etichetta. Successivamente, viene creata una serie di pannelli associati, ciascuno con contenuti diversi. Il primo mostra come i fogli di stile HTML possono essere applicati in linea. I secondi due fogli hanno in essi elementi di tipo componente. Guarda come funziona lo slider, e la barra di avanzamento funziona da sola.

XUL ha vari tipi di elementi per la creazione di caselle di elenco. Una casella di riepilogo visualizza gli elementi sotto forma di elenco. Qualsiasi elemento in un particolare elenco può essere selezionato. XUL fornisce due tipi di elementi per creare elenchi, un elemento listbox per creare caselle di riepilogo a più righe e un elemento menulist per creare caselle di riepilogo a discesa, come già visto.

La casella di elenco più semplice utilizza l'elemento listbox per la casella stessa e l'elemento listitem per ciascun elemento. Ad esempio, questa casella di riepilogo avrà quattro righe, una per ciascun elemento.

<listbox>
  <listitem label="Butter Pecan"/>
  <listitem label="Chocolate Chip"/>
  <listitem label="Raspberry Ripple"/>
  <listitem label="Squash Swirl"/>
</listbox>

Puoi assegnare un valore usando l'attributo value. La casella di riepilogo verrà impostata su una dimensione normale, ma è possibile modificare le dimensioni a un determinato livello utilizzando gli attributi di riga. Impostalo sul numero di righe da visualizzare nella casella di riepilogo. Una barra di scorrimento verrà automaticamente visualizzata per consentire all'utente di vedere il resto degli elementi nella casella di elenco se la casella è troppo piccola.

<listbox rows="3">
  <listitem label="Butter Pecan" value="bpecan"/>
  <listitem label="Chocolate Chip" value="chocchip"/>
  <listitem label="Raspberry Ripple" value="raspripple"/>
  <listitem label="Squash Swirl" value="squash"/>
</listbox>

L'assegnazione di valori a ciascuno dei listitem consente all'utente di farvi riferimento in un secondo momento utilizzando lo script. In questo modo, altri elementi possono fare riferimento a questi elementi da utilizzare per scopi alternativi.

Tutti questi elementi sono molto belli e facili da inserire in una finestra, ma da soli non fanno nulla. Ora dobbiamo collegare le cose con un altro codice.

Aggiungere gestori di eventi e di risposta agli eventi

Per rendere le cose veramente utili, è necessario eseguire un tipo di script o codifica a livello di applicazione. Nel nostro esempio, verrà utilizzato JavaScript per aggiungere funzionalità ai componenti. Questo è fatto in modo simile allo scripting con HTML. Con HTML, un gestore di eventi è associato a un elemento e alcune azioni vengono avviate quando viene attivato quel gestore. La maggior parte dei gestori utilizzati con HTML si trovano anche in XUL, oltre ad alcuni specifici per XUL. Lo scripting può essere fatto in righe aggiuntive di codice, ma un modo più efficiente è creare un file separato con gli script necessari al suo interno. Ciò consente alla pagina di caricarsi più velocemente poiché il motore di rendering non deve decidere cosa fare con i tag script incorporati.

Detto questo, anzitutto aggiungeremo un semplice script, in linea, come primo esempio.

Aggiungiamo un gestore di eventi 'onclick' per attivare una finestra di avviso quando viene selezionato un elemento. All'interno del tag <window> aggiungi la riga che inizia con onclick:

<window
   onclick="alert(event.target.tagName); return false;"
   id="findfile-window"
   title="Find Files"
   orient="horizontal"
   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
       (... add elements here)
</window>

Ora quando fai clic su un elemento qualsiasi nella finestra, hai creato una finestra di avviso che mostra il nome dell'elemento. Una cosa interessante da notare: quando fai clic sul testo racchiuso dal tag description la risposta non è definita ma quando fai clic sul testo racchiuso dal tag label ottieni l'etichetta tabName.

Ciò implica che un tag description non sia realmente un elemento. Dopo aver giocato con la casella di avviso, elimina quella linea e aggiungila all'interno del tag di apertura della voce di menu 'Chiudi' nel menu 'File':

oncommand="window.close()"

Ora quando si fa clic su "Chiudi" o si usa la "C" come tasto di scelta rapida, l'intera finestra si chiude. Il gestore di eventi oncommand è in realtà preferito a onclick perché oncommand può gestire hot keys e altri eventi non di tipo mouse.

Proviamo un'altra cosa. Aggiungilo subito dopo il tag <window> di apertura.

<script>
function show()
{
  var meter=document.getElementById('prgmeter');
  meter.setAttribute("style","display: visible;");
  var tx=document.getElementById('txt');
  tx.setAttribute("style","display: visible;");
}

function hide()
{
  var meter=document.getElementById('prgmeter');
  meter.setAttribute("style","display: none;");
  var tx=document.getElementById('txt');
  tx.setAttribute("style","display: none;");
}

</script>

Queste due funzioni recuperano innanzitutto un riferimento al misuratore di avanzamento e all'elemento di testo usando i loro id. Quindi entrambe le funzioni impostano gli attributi di stile del misuratore di avanzamento e dell'elemento di testo per avere una visualizzazione di "visible" o "none" che farà proprio questo: nascondere o visualizzare questi due elementi (Per visualizzare queste azioni, deve essere visualizzato il pannello per il misuratore di avanzamento).

Ora aggiungi due pulsanti che consentiranno all'evento di attivare questi due metodi. Innanzitutto, aggiungi un nuovo elemento casella per contenere i pulsanti. L'attributo width della casella deve essere impostato, altrimenti i pulsanti verranno disposti per estendere la lunghezza della finestra.

<box width="200px">
  <button id="show" label="Show" default="true" oncommand="show();"/>
  <button id="hide" label="Hide" default="true" oncommand="hide();"/>
</box>

Fogli di stile

I fogli di stile possono essere usati sia per creare temi, sia per modificare elementi per interfacce utente più elaborate. XUL usa i CSS (Cascading Style Sheets) per questo. Un foglio di stile è un file che contiene informazioni di stile per gli elementi. Il foglio di stile consente di applicare determinati caratteri, colori, bordi e dimensioni agli elementi di tua scelta. Mozilla applica un foglio di stile predefinito a ciascuna finestra XUL. Finora, questo è il foglio di stile che è stato usato per tutti i documenti XUL:

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

Quella riga dà al documento XUL il foglio di stile predefinito: chrome://global/skin/. In Mozilla, questo sarà tradotto come file global.css, che contiene informazioni di stile predefinite per gli elementi XUL. Il foglio di stile applica font, colori e bordi specifici per il tema, per rendere gli elementi più adatti. Anche se i fogli di stile possono fornire un file migliore, l'aggiunta di stili non può sempre fornire una vista migliore. Alcune proprietà CSS non influiscono sull'aspetto di un widget, come quelle che modificano la dimensione o i margini. In XUL, l'uso dell'attributo flex: dovrebbe essere utilizzato invece di impostare dimensioni specifiche, ma esistono anche altri casi in cui il CSS non si applica; questo però sarebbe un argomento troppo avanzato per questo tutorial.

Nel caso tu voglia usare un foglio di stile che hai già realizzato, devi solo inserire una riga di codice in più che punta al tuo file CSS.

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

Questa seconda riga di codice fa riferimento al foglio di stile e prenderà il posto del foglio di stile predefinito utilizzato per il documento XUL. A volte si desidera non avere lo stile fornito con il file CSS predefinito.

Conclusione

Gli esempi mostrati in questo modulo si limitano una visione di superficie delle potenzialità di XUL. Anche se questi esempi sono molto semplici, si può vedere quanto sarebbe facile creare interfacce utente più complesse con XUL. Con un set completo di componenti standard come pulsanti e caselle di testo a disposizione, il programmatore può scrivere in XUL qualsiasi cosa che possa essere scritta in HTML.