Come visto nell’articolo precedente XUL possiede un elemento specifico per la creazione di strutture ad albero dinamiche, che può essere o meno utilizzato anche per la generazione di tabelle. Approfondiamo ora l’argomento con alcuni esempi più specifici e alcune varianti. Abbiamo detto che potrebbe capitare di fare un po’ di confusione tra alberi e tabelle, considerato che gli strumenti per realizzarli sono gli stessi. Abbiamo visto che per creare una struttura ad albero è necessario inserire... (continua)

L’oggetto tree è un componente pensato per visualizzare dinamicamente i dati; il contenuto e la struttura varia fin dall’inizio e durante le varie fasi del processo lavorativo. Esso può assomigliare a una lista, a una tabella o, appunto, a una struttura ad albero. Contrariamente alla listbox però la struttura dell’oggetto è divisa tra la parte visualizzata, l’oggetto tree, e il contenuto dinamico, treeview. Cominciamo ad analizzare l’elemento tree: treecols e treecol sono sostanzialmente... (continua)

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... (continua)

Nel capitolo precedente di questo tutorial su XUL abbiamo dato una prima occhiata ai menu, componenti indispensabili di ogni interfaccia grafica. Dopo i fondamenti visti nella precedente lezione, che ci hanno permesso di disegnare un menu rudimentale, vediamo ora alcune varianti per avere a disposizione uno strumento più funzionale e pratico da utilizzare. Abbiamo precedentemente introdotto i componenti menu e menuitem: il primo definisce le singole voci del menu e il secondo le funzioni di... (continua)

Una delle componenti più comuni in qualunque programma o applicazione orientata all’interazione con un utente finale è quella di menu, ovvero barre formattate di accesso a funzioni predefinite. Dato che l’obiettivo fondamentale di XUL è proprio quello di realizzare interfacce evolute, esistono componenti sviluppate appositamente per questo compito e specializzate nella generazione di barre e menu a seconda delle esigenze dello sviluppatore. Cominciamo quindi dicendo che l’oggetto radice, quando... (continua)

Una componente fondamentale per l’ideazione di un’interfaccia utente è la schematizzazione tramite liste e tabelle. Come gli sviluppatori web sanno bene, questi approcci hanno caratterizzato anni di lavoro e molte pagine, oltre al cambio generazionale tra Web 1.0 e 2.0. Prima di passare alla realizzazione di menu, altra componente fondamentale di un’interfaccia evoluta (e argomento del prossimo contributo), approfondiremo le possibilità di XUL riguardo alle tabelle e alle liste. Cominciamo... (continua)

Proprio come abbiamo visto nel capitolo precedente dedicato al testo, in qualunque pagina, pulsante o componente grafica dell’interfaccia è possibile inserire delle immagini. Il codice più elementare per aggiungere un’immagine all’interfaccia è specificandone l’URL: Ovviamente in questo caso l’immagine deve essere nella stessa posizione del file .xul dell’interfaccia. Alternativamente è possibile fornire indirizzi relativi o assoluti, sia in locale che via Web.... (continua)

Nei capitoli precedenti abbiamo cominciato a lavorare sulle interfacce dando una prima schematizzazione grafica dell’applicazione e cominciando a parlare di eventi associati a pulsanti. Il metodo più ovvio per comunicare con l‘utente finale è comunque il contenuto, quindi, prima di proseguire nel nostro tutorial su XUL, approfondiamo l'argomento testo. Facendo un paragone con HTML, per permettere all’utente di immettere testo ci servirebbe un oggetto equivalente al tag input. La controparte di... (continua)

Nel contributo precedente abbiamo cominciato a costruire semplici interfacce utente in XUL schematizzandone la struttura in blocchi. Ma cosa sarebbe un’interfaccia senza bottoni a cui applicare funzioni e comandi? Il prossimo passo sarà quindi l’analisi dei bottoni e della gestione degli eventi ad essi associati. Il componente XUL per disegnare un bottone all’interno della nostra interfaccia è il tab. Per applicare un’etichetta descrittiva, come visto negli esempi precedenti, utilizzeremo... (continua)

Nel contributo precedente abbiamo visto un piccolo esempio di codice per creare una banale interfaccia utente in XUL. Come ricorderete il primo elemento è stato il tag utilizzato appunto per creare una finestra contenitore per il testo. In effetti ogni interfaccia XUL ha come elemento radice una window, ma è possibile aprire diverse finestre in un’unica applicazione web, per scopi diversi, utilizzando il medesimo tag. Come già anticipato nel capitolo precedente, il tag window ha alcuni... (continua)