Questo ultimo esempio è sviluppato in Flash MX, e si avvale dei metodi del component ListBox.
Il file XML
Il file XML che useremo per l'esempio è strutturato in questo modo:
<?xml
version="1.0" encoding="UTF-8" ?>
<nodo_principale>
<nodo_figlio_0 attributo1="valore"
attributo2="valore" ....>
<nodo_figlio_1 attributo1="valore"
..../>
</nodo_figlio_0>
<nodo_figlio_0 attributo1="valore"
attributo2="valore" ....>
<nodo_figlio_1 attributo1="valore"
..../>
</nodo_figlio_0>
</nodo_principale>
Abbiamo un nodo principale, che contiene una serie di nodi figlio. Ogni nodo figlio ha degli attributi, e a sua volta contiene un nodo figlio anch'esso dotato di attributi.
In particolare, trattandosi di un elenco di automobili, abbiamo:
- il nodo principale, con nome "elenco"
- una serie di nodi figlio, con nome "auto", e attributi "modello", "cilindrata" e "foto"
- ogni nodo "auto" ha un nodo figlio, "info", con gli attributi "casa" (produttrice) e "link"
Contenuto del file XML
Quindi, per raggiungere:
- il primo nodo, useremo:
this.firstChild - l'elenco dei nodi figlio:
this.firstChild.childNodes - gli attributi del nodo figlio:
this.firstChild.childNodes[n].attributes - il nodo figlio del singolo nodo figlio:
this.firstChild.childNodes[n].firstChild - gli attributi di quest'ultimo:
...childNodes[n].firstChild.attributes
Il filmato
- creiamo un nuovo filmato in Flash MX
- trasciniamo sullo stage, dal pannello Component, un'istanza del component ListBox
- assegniamo al component il nome di istanza "lista_lb"
- nello stesso frame, inseriamo un movieclip vuoto, con nome di istanza "loader"
MovieClip "loader"
- aggiungiamo, sempre nello stesso frame, 4 campi di testo dinamici, rispettivamente con i nomi di istanza "nome_txt", "modello_txt", "cilindrata_txt", "casa_txt" (assegnabili tramite il pannello "Properties", come mostrato dalla figura).
Nome di istanza del campo di testo
Il codice del caricamento
Allo stesso frame in cui abbiamo inserito i campi di testo e il component ListBox, associamo uno script con la seguente struttura:
// creazione dell'istanza della Classe XML
dati_xml = new XML();
// settaggio per ignorare gli spazi vuoti nel file XML
dati_xml.ignoreWhite = true;
/* salvataggio in una variabile del riferimento
alla timeline in cui giace lo script */
dati_xml.path = this;
/* definizione della funzione da invocare
al caricamento completo delle variabili */
dati_xml.onLoad = function(success)
{
// se il caricamento è andato a buon fine
if(success){
// script di inserimento dati
// • popolamento del ListBox
// • definizione del changeHandler del ListBox
// • selezione forzata del primo elemento
// altrimenti
} else
{
// script di escape
// • messaggio di errore per l'utente
}
};
// caricamento dati
dati_xml.load("lista.xml");
All'interno della funzione associata all'evento onLoad, prevedendo il caso in cui il file non venga caricato correttamente (e quindi quando "success" è falsa), inseriamo il codice per mostrare un messaggio informativo nel ListBox, e per disabilitarne la selezione.
// script di escape
this.path.lista_lb.addItem("lista non disponibile");
this.path.lista_lb.setEnabled(false);
Al contrario, per il caso in cui il caricamento sia avvenuto in modo corretto, inseriamo il codice che sviluppa i dati raccolti e che permette il funzionamento del ListBox:
var nodes = this.firstChild.childNodes;
for(var i = 0; i < nodes.length; i++){
var label = nodes[i].attributes.nome;
var data = {dati:nodes[i].attributes, info:nodes[i].firstChild.attributes};
this.path.lista_lb.addItemAt(i, label, data);
}
this.path.lista_lb.setChangeHandler("aggiorna");
this.path.aggiorna = function(component)
{
var item = component.getSelectedItem().data;
loader_mc.loadMovie(item.dati.foto);
nome_txt.text = " " + item.dati.nome;
modello_txt.text = " " + item.dati.modello;
cilindrata_txt.text = " cm³ " + item.dati.cilindrata;
casa_txt.html = true;
casa_txt.htmlText = "<font color='#006699'><a href='" + item.info.link + "'
target='_blank'> " + item.info.casa + "</a></font>";
};
this.path.lista_lb.setSelectedIndex(0);
Commentato:
/* salviamo nella variabile "nodes" un riferimento
all'elenco dei nodi figlio principali */
var nodes = this.firstChild.childNodes;
// con un ciclo for a tante iterazioni quanti sono i nodi figlio
for(var i = 0; i < nodes.length; i++){
/* creiamo la variabile temporanea "label", nella quale
inseriamo il contenuto dell'attributo "nome" del nodo
figlio con indice "i" */
var label = nodes[i].attributes.nome;
/* creiamo la variabile temporanea "data": si tratta di
un oggetto, con due proprietà, "dati" e "info". la prima
proprietà corrisponde all'array associativo "attributes"
del nodo figlio indicato. la seconda è l'array associativo
"attributes" del singolo nodo figlio del nodo figlio indicato */
var data = {dati:nodes[i].attributes, info:nodes[i].firstChild.attributes};
/* aggiungiamo al ListBox, raggiungibile tramite la variabile "path"
che ne serba il percorso, un elemento in posizione "i", la cui etichetta
e i dati associati sono indicati dalle due variabili appena create */
this.path.lista_lb.addItemAt(i, label, data);
}
/* indichiamo il nome della funzione che il ListBox dovrà
richiamare quando viene cambiato l'elemento selezionato */
this.path.lista_lb.setChangeHandler("aggiorna");
/* definiamo la funzione che verrà chiamata al cambiamento
di stato del ListBox. la funzione riceve il parametro "component"
cioè il riferimento al ListBox stesso */
this.path.aggiorna = function(component)
{
/* creiamo la variabile temporanea "item", contenente
i dati associati all'elemento selezionato nel ListBox */
var item = component.getSelectedItem().data;
/* carichiamo nel movieclip vuoto "loader" l'immagine
il cui nome e percorso sono indicati nella proprietà
"foto" dell'oggetto "dati", proprietà di "item": si tratta
dell'attributo "foto" del nodo figlio */
loader_mc.loadMovie(item.dati.foto);
// riempiamo i campi di testo con gli altri dati
nome_txt.text = " " + item.dati.nome;
modello_txt.text = " " + item.dati.modello;
cilindrata_txt.text = " cm³ " + item.dati.cilindrata;
// abilitiamo l'interpretazione html per il campo di testo "casa_txt"
casa_txt.html = true;
// creiamo un link al sito della casa produttrice, modificandone il colore
con i relativi tag html
casa_txt.htmlText = "<font color='#006699'><a href='" + item.info.link + "'
target='_blank'> " + item.info.casa + "</a></font>";
};
// forziamo la selezione del primo elemento del ListBox
this.path.lista_lb.setSelectedIndex(0);
