Programmazione.it :: Un tutorial su XUL: alberi dinamici (19/25)

Un tutorial su XUL: alberi dinamici (19/25)

Scritto da Christian Bencivenni il 23-04-2009 ore 07:45

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 elementi treechildren all’interno di elementi treeitem. Se per esempio vogliamo simulare la struttura gerarchica del contenuto di un hard disk possiamo ragionare in questo modo: l’elemento treechildren corrisponde ad una subdirectory, l’elemento treerow contiene il nome della subdirectory, per ogni file nella directory avremo un elemento treeitem che conterrà una treerow che a sua volta conterrà una treecell.

Quindi ogni treechildren contiene una lista di treeitem e ogni treeitem contiene una treerow con all’interno una treecell, con la possibilità di un altro elemento treechildren e così via. Quando poi un treeitem contiene un treechildren deve avere due attributi: container che indica se l’elemento contiene un ulteriore ramo, e open che indica se è aperto all’inizio dell’esecuzione o meno.

<treeitem container="true" open="true" />

Un ramo avrà quindi una struttura del tipo:

<treeitem container="true" open="true">
    <treerow 
        <treecell label="" />
    <treerow>
    <treechildren>
        <treeitem>
            ....
        </treeitem>
        <treeitem>
             ...
        </treeitem>
    </treechildren>
</treeitem>

Se combinassimo la struttura ad albero con quella a tabelle risulterebbe, come unica differenza fondamentale, quella di avere due o più treecol e ovviamente un ugual numero di treecell all’interno di un elemento treerow. Se ad esempio abbiamo tre colonne la struttura sarà:

<treeitem container="true" open="true">
    <treerow 
        <treecell label="" />
        <treecell label="" />
        <treecell label="" />
    <treerow>
    <treechildren>
        <treeitem>
            ....
        </treeitem>
        <treeitem>
             ...
        </treeitem>
    </treechildren>
</treeitem>

A questo punto possiamo dare un’occhiata al lato dinamico della struttura, ad esempio potremmo volere che l’utente avvii dei comportamenti cliccando sugli elementi dell’albero. Anche in questo caso ricorriamo all’event handler onselect di JavaScript e all’attributo currentindex:

<tree onselect="selecting(currentIndex);" >

<?xml version='1.0'?>
<window 
   id="hello"  
   title="Tree" 
   width="500" 
  height="300" 
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
 
<tree flex="1" onselect="selecting(currentIndex);" >
	<treecols >
		<treecol label="Albero" primary="true" width="320" />
	</treecols>
	<treechildren>
		<treeitem container="true" open="true" >
			<treerow>
				<treecell label="Bullock" />
			</treerow>
			<treechildren>
				<treeitem container="true" open="true">
					<treerow>
						<treecell label="Last name" />
					</treerow>					
					<treechildren>
						<treeitem>
							<treerow>
								<treecell label="Sandra" />
							</treerow>
						</treeitem>
					</treechildren>
				</treeitem>
				<treeitem container="true" open="true">
					<treerow>
						<treecell label="Address" />
					</treerow>
					<treechildren>
						<treeitem>
							<treerow>
								<treecell label="Rue" />
							</treerow>	
						</treeitem>		
						<treeitem>	
							<treerow>
								<treecell label="City" />
							</treerow>	
						</treeitem>		
						<treeitem>	
							<treerow>
								<treecell label="name@domain" />
							</treerow>
						</treeitem>	
					</treechildren>	
				</treeitem>
			</treechildren>
		</treeitem>
	</treechildren>
</tree>
<script>
 
function selecting(idx)
{
	alert("Selected " + idx);
}
</script>
</window>

Pubblicazioni correlate:
25-02-2009 Un tutorial su XUL: introduzione (1/25)
26-02-2009 Un tutorial su XUL: documentazione e riferimenti (2/25)
27-02-2009 Un tutorial su XUL: i vantaggi del linguaggio (3/25)
02-03-2009 Un tutorial su XUL: i benefici per la personalizzazione (4/25)
03-03-2009 Un tutorial su XUL: tecnologie esterne (5/25)
06-03-2009 Un tutorial su XUL: approccio al linguaggio (6/25)
10-03-2009 Un tutorial su XUL: struttura del linguaggio (7/25)
11-03-2009 Un tutorial su XUL: i file manifesto (8/25)
16-03-2009 Un tutorial su XUL: un primo programma (9/25)
17-03-2009 Un tutorial su XUL: finestre e box (10/25)
18-03-2009 Un tutorial su XUL: bottoni (11/25)
19-03-2009 Un tutorial su XUL: etichette e testo (12/25)
24-03-2009 Un tutorial su XUL: le immagini (13/25)
27-03-2009 Un tutorial su XUL: liste e tabelle (14/25)
31-03-2009 Un tutorial su XUL: un primo approccio ai menu (15/25)
01-04-2009 Un tutorial su XUL: menu evoluti (16/25)
06-04-2009 Un tutorial su XUL: barre degli strumenti (17/25)
17-04-2009 Un tutorial su XUL: alberi (18/25)