Programmazione.it v6.4
Ciao, per farti riconoscere devi fare il login. Non ti sei ancora iscritto? Che aspetti, registrati adesso!
Info Pubblicità Collabora Autori Sottoscrizioni Preferiti Bozze Scheda personale Privacy Archivio Libri Corsi per principianti Forum
Un tutorial su XUL: barre degli strumenti (17/25)
Scritto da Christian Bencivenni il 06-04-2009 ore 11:43
Intel Parallel Studio XE
Una toolbar è un componente (in termine tecnico spesso viene indicata anche come widget) delle più usate interfacce utente; di solito è una barra orizzontale o verticale, che raccoglie, sotto forma di icone, i collegamenti alle funzioni più usate di un software. La maggior parte degli applicativi, e anche alcuni provider di servizi come Google o eBay, mettono a disposizione gratuitamente una barra degli strumenti da integrare nel proprio browser, tramite la quale utilizzare diverse funzioni per i propri portali.

Una toolbar è un particolare tipo di box, che contiene bottoni (o altre componenti grafiche), impostata orizzontalmente in automatico e che supporta il grippy, in sostanza una box puntata, che permette di raggruppare bottoni che si compattano a scomparsa con un clic. Vediamo ora le componenti.

Il pulsante da posizionare all’interno della barra è toolbarbutton e viene trattato diversamente dall’interprete XUL. L'icona toolbargrippy permette l’espansione della barra stessa; toolbarseparator è un separatore all’interno della barra simile a quello visto per i menu, ma con la differenza fondamentale che è personalizzabile in base al tema della barra.

Il toolbarspacer è invece uno spazio bianco che è possibile mettere tra due bottoni. Infine, nel caso si vogliano integrare oggetti diversi da bottoni e spazi all’interno della barra esiste un componenti generico chiamato toolbaritem. Ma vediamo un esempio creando una interfaccia dotata di una barra degli strumenti con qualche bottone e qualche elemento grafico. La barra viene definita in questo modo:
  1. <toolbox> 
  2.     <toolbar>
  3.     </toolbar>
  4. </toolbox>
Aggiungiamo due bottoni Apri e Salva, immaginando di avere delle icone da posizionarci sopra invece di un’etichetta di testo:
  1. <toolbox> 
  2.    <toolbar> 
  3.         <toolbarbutton image="apri.gif"/> 
  4.         <toolbarbutton image="salva.gif"/>
  5.         <textbox>
  6.         </textbox>
  7. </toolbox>
Per aggiungere elementi diversi dai bottoni, in questo caso un’etichetta di testo e un campo di inserimento dati utilizziamo toolbaritem:
  1. <toolbaritem> 
  2.     <description value="Inserire un indirizzo URL"/>
  3.     <textbox/> 
  4. </toolbaritem>
Infine è necessario associare ai bottoni i comandi da eseguire. Come per i menu è necessario effettuare una associazione univoca tramite id e gestore degli eventi. L’esempio completo è il seguente:
  1. <?xml version='1.0'?>
  2. <window 
  3.    id="bar"  
  4.    title="Toolbar" 
  5.  width="400" 
  6.  height="300" 
  7.  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
  8. <toolbox>
  9. 	<toolbar>
  10. 		<toolbarbutton id="openButton" image="apri.gif"  /> 
  11. 		<toolbarbutton id="saveButton" image="salva.gif"  /> 
  12. 		<toolbarseparator />
  13. 		<toolbaritem>
  14. 			<description value=" Inserire un indirizzo URL" />
  15. 			<textbox>
  16. 			</textbox>
  17. 		</toolbaritem>
  18. 	</toolbar>		
  19. </toolbox>	
  20.  
  21. <script>
  22. 	function openFun(event)
  23. 	{
  24. 		alert("Apre il documento");
  25. 	}
  26.  
  27. 	function closeFun(event)
  28. 	{
  29. 		alert("Chiude il documento");
  30. 	}
  31.  
  32. 	document.getElementById("openButton").addEventListener('command', openFun, true);
  33. 	document.getElementById("saveButton").addEventListener('command', closeFun, true);
  34.  
  35. </script>
  36. </window>
Come ultima parentesi, se volessimo cambiare l’orientamento di una barra, è sufficiente specificare l’attributo orient:
  1. <toolbox orient="horizontal">
  2.   <toolbar orient="vertical">
  3.     <button value="Indietro"/>
  4.     <button value="Avanti"/>
  5.   </toolbar>
  6. </toolbox>
Manda ad un amico Aggiungi ai preferiti Sottoscrivi la discussione Stampa
Commenta
Precedente: Scientific Linux, una distro per scienziati
Successiva: Una nuova architettura per i data warehouse
Copyright Programmazione.it™ 1999-2013. Alcuni diritti riservati. Testata giornalistica iscritta col n. 569 presso il Tribunale di Milano in data 14/10/2002. Pagina generata in 0.305 secondi.