Illustriamo adesso come visualizzare dei dati senza la "paginazione" ma solo attraverso la gestione dell'infinito. Questo metodo ha i suoi vantaggi e i suoi svantaggi, come abbiamo già accennato.
In questo caso possiamo utilizzare lo script ASP crea_xml_db.asp già illustrato nel capitolo Creare un documento XML "bad formed" dinamico con un script lato server. Infatti in questo caso non dobbiamo effettuare la "paginazione" dei risultati e non ci serve nemmeno sapere il numero dei record presenti nel Data Base (che avevamo aggiunto nel caso della "paginazione" con l'elemento <totrec> ).
Partendo sempre dal codice Action Script dell'esempio 8 vediamo le modifiche che dobbiamo apportare per poter visualizzare i dati prelevati dal documento XML.
Codice Action Script (es10.fla)
fscommand ("allowscale", "false");
filexml = "http://www.enricolai.com/guidaflash/crea_xml_db.asp";
paginainiziale="01";
ApriXML();
function ApriXML () {
_root.loading = "Connecting to Data Base for XML data...";
mioxml = new XML();
myarray = new Array();
mioxml.load(filexml + "?rnd=" + random(999999));
mioxml.onLoad = ElaboraXML;
function ElaboraXML (success) {
if (mioxml.loaded) {
myarray = mioxml.childNodes;
Dati();
CreaTabelle();
delete myarray;
delete mioxml;
}
};
};
// Funzione che prende i dati XML e li mette in degli Array
function Dati () {
// Array che contengono i Dati -----------------------
idvolo = new Array();
hpartenza = new Array();
harrivo = new Array();
partenza = new Array();
arrivo = new Array();
// ---------------------------------------------------
for (k=0; k<=myarray.length; k++) {
if (myarray[k].nodeName == "volo") {
idvolo.push(myarray[k].attributes.id);
} else if (myarray[k].nodeName == "partenza") {
hpartenza.push(myarray[k].attributes.h);
partenza.push(myarray[k].childNodes.toString());
} else if (myarray[k].nodeName == "arrivo") {
harrivo.push(myarray[k].attributes.h);
arrivo.push(myarray[k].childNodes.toString());
}
};
};
// Funzione che Crea i clip
// e li posiziona sullo stage del filmato
function CreaTabelle () {
// Parametri utilizzati per gestire lo scroll di barranav tramite il cursore di scrolling
thecounter = 0;
maxelements = idvolo.length-1;
//---------------------------------------------------------------------------------------
_root.loading = "Voli trovati = "+idvolo.length;
for (i=0; i<idvolo.length; i++) {
barranav.attachMovie("clipmsg", "clipmsg"+i, i);
// Attribuisco la coordinata X e Y
_root.barranav["clipmsg"+i]._x = 10
_root.barranav["clipmsg"+i]._y = 25+i*45;
// Passo al clip le variabili che ho preso dall'XML e messo negli Array
_root.barranav["clipmsg"+i].idvolo = idvolo[i];
_root.barranav["clipmsg"+i].hpartenza = hpartenza[i];
_root.barranav["clipmsg"+i].harrivo = harrivo[i];
_root.barranav["clipmsg"+i].partenza = partenza[i];
_root.barranav["clipmsg"+i].arrivo = arrivo[i];
};
};
Possiamo osservare che l'unica modifica sostanziale è stata l'aggiunta della funzione CreaTabelle(). Questa funzione inserisce i movie clip "clipmsg" all'interno del clip "barranav" che è il clip mascherato che gestisce l'infinito. All'interno di esso possiamo posizionare uno sotto l'altro infiniti clip (ovviamente per infinito intendo un numero variabile che potrebbe essere anche molto alto supponendo di avere risorse sufficienti per poterlo fare) che possiamo consultare attraverso lo scroll gestito da una barra o cursore laterale (un po' come viene fatto con un pagina HTML quando abbiamo una lista molto lunga di risultati).
Il codice Action Script associato a "barranav" è il seguente:
onClipEvent (load) {
this._y = 200;
//posy = this._y
// x_fin=8;
}
onClipEvent (enterFrame) {
y = _y;
y_fin = ((-_parent.thecounter)*45)+10;
dy = y_fin-y;
dy /= 2.5;
_y += dy;
// trace(_x)
}
Il codice invece associato alla barra laterale o cursore è il seguente:
onClipEvent (load) {
x_fin = this._x;
x_iniz = this._x;
y_iniz = this._y;
max_escursione = this._y+230;
}
onClipEvent (enterFrame) {
_parent.thecounter = Math.round((_parent.maxelements/230)*(this._y-y_iniz));
}
onClipEvent (mouseDown) {
if (hitTest(_root._xmouse,
_root._ymouse,
true)) {
startDrag (this,
false, x_iniz, y_iniz, x_iniz, max_escursione);
};
}
onClipEvent (mouseUp) {
stopDrag ();
_parent.thecounter = Math.round((_parent.maxelements/230)*(this._y-y_iniz));
}
Non spaventatevi. Cercate solo di osservare attentamente il codice e ragionare su di esso, sono solo delle formule matematiche, niente di più.
Il principio di funzionamento è lo stesso utilizzato per la gestione delle pagine nel primo metodo, solo che in questo caso la gestione dell'infinito è applicata ai risultati e lo scroll avviene in verticale per mezzo di un cursore.
Potevamo fare anche una gestione per mezzo di due pulsanti che facendo variare il parametro "thecounter" facessero eseguire lo scroll di "barranav" ( on-line demo: http://www.enricolai.com/guidaflash/demo_2/barranav.htm ) sotto il livello mascherato, ma questo potrebbe essere un valido esercizio per voi :)
Questo secondo metodo risulta quindi forse più semplice e meno complesso in quanto vi è minore interazione lato server, poiché il documento viene caricato solo una volta. L'unica interazione lato client avviene per mezzo della barra di scroll che permette all'utente di navigare i risultati visualizzati sull'interfaccia Flash.
Vediamo infine il funzionamento della nostra applicazione a questo URL: http://www.enricolai.com/guidaflash/es10.html
Se controlliamo però il peso dei due filmati ci accorgiamo di una differenza sostanziale!
Questo secondo metodo pur essendo più semplice, meno complesso e con meno codice Action Script pesa 27 Kb mentre il filmato del primo metodo pesava solo 9 Kb!!! Un terzo rispetto al secondo metodo!
Come mai???
Questo dipende da una modifica che abbiamo dovuto fare ai campi di testo dinamico all'interno di "clipmsg" ( on-line demo:
http://www.enricolai.com/guidaflash/demo_2/clipmsg.htm ) impostando l'inclusione dei caratteri. Se così non avessimo fatto, il testo non si vedrebbe.
Invece nel caso del primo metodo l'inclusione dei caratteri (solo numeri) è stata fatta per il clip delle pagine. I clip che visualizzano i dati invece non avevano l'inclusione dei caratteri, ma abbiamo usato il font _sans di default.
L'inclusione dei caratteri nei campi di testo dinamici aumenta notevolmente il peso dei filmati Flash, ma allo stesso tempo garantisce una visualizzazione corretta su qualunque computer.
Spesso però l'inclusione dei font, soprattutto quando usiamo dimensioni ridotte come 8 pixel, causa anche la poca leggibilità del testo in quanto Flash applica l'antialiasing. Questa è una cosa che potete notare osservando il filmato dell'esempio 10 soprattutto quando effettuiamo lo scroll dei risultati.
In questi casi è vivamente consigliato usare quando è possibile la qualità del filmato impostata su bassa (_quality="low") e utilizzare dei pixel font includendo solo i caratteri necessari.
