|
Menu gerarchico a cascata
Massimo Valente
Rappresenta la soluzione più efficace per
consentire al visitatore la navigazione ordinata e funzionale di un sito Web che abbia un
minimo di complessità. Un esempio ci permette di illustrarne codice e struttura
La staticità del linguaggio standard del Web, infatti, non ha
finora permesso linserimento di elementi dinamici, se non attraverso ladozione
di controlli ActiveX o Applet Java. Le potenzialità del Dynamic Html permettono di
evitare luso di applicazioni esterne, grazie allinserimento nel documento di
codice JavaScript e allutilizzo di fogli stile a cascata (CSS). Lesempio di
menu gerarchico a cascata esaminato in queste pagine non è il solo reperibile in Rete
né, probabilmente, il più semplice da comprendere e configurare. Tale complessità è
giustificata dalla presenza di codice «multipiattaforma», che rende compatibile
lesempio con le versioni di quarta generazione dei due browser più diffusi.
Sul CD-ROM allegato alla rivista è presente un altro esempio di menu gerarchico (con
diversa struttura) compatibile esclusivamente con MS Internet Explorer. Vi rimandiamo a
quellesempio per un confronto col codice che andremo a esaminare.
HTML 4.0 consente fogli stile e codice Javascript in file esterni indipendenti dal
documento, assegnando loro unestensione css e js. In questo modo si ha un duplice
vantaggio: la struttura del codice sorgente del documento Html è alleggerita e
semplificata e, soprattutto, il file esterno .js o css viene condiviso, grazie a un
semplice richiamo, da più documenti i quali non dovranno far altro che recuperarlo dalla
cache del browser. In questo modo il volume di trasferimento dati che si genera dal lato
server al lato client diminuisce considerevolmente. La struttura del menu gerarchico che
si va a esaminare si compone di quattro file:
menu.htm
menu.js
arrays.js
immagine.gif
Lesempio è rivolto alla realizzazione di un menu che visualizzi un massimo di tre
livelli gerarchici, ma altri possono essere aggiunti o rimossi. Essendo una struttura
gerarchica i menu superiori annidano, a loro volta, menu inferiori. Seguendo la sintassi
JavaScript si definiscono «parent» i menu che annidano altri menu, e «child» quelli
annidati.
È ovvio, alla luce di quanto descritto, che il menu intermedio tra il più alto e il più
basso della gerarchia è annidato in quello superiore e annidi contemporaneamente quello
inferiore.
Menu.htm
Il file menu.htm contiene allinterno del tag <HEAD> una parte, seppur minima,
di codice JavaScript.
La prima parte contenuta tra <SCRIPT></SCRIPT> determina tipo e versione dei
browser che possono accedere al documento. Come precedentemente accennato,
questesempio è visualizzabile solo con le versioni 4 di Netscape Navigator e
Internet Explorer. La seconda parte contiene alcuni parametri variabili che permettono di
modificare, attraverso la manipolazione dei valori, laspetto e la struttura del
menu. Nel dettaglio, i parametri modificabili sono riportati nella tabella. Il parametro
overFnt modifica dinamicamente il colore del testo quando la voce di menu viene
selezionata (da black a white). Tale effetto però, per le ben note incompatibilità tra
Navigator ed Explorer, è apprezzabile solo per gli utenti del browser Microsoft. In IE,
poi, il puntatore del mouse assume, quando è selezionata una voce attiva, laspetto
di una mano (hand). La terza parte di codice JavaScript richiama, attraverso i due
riferimenti:
document.write("<SCRIPT LANGUAGE='JavaScript'
SRC='arrays.js'><\/SCRIPT>");
document.write("<SCRIPT LANGUAGE='JavaScript'
SRC='menu.js'><\/SCRIPT>");
i due file .js esterni contenenti il codice necessario al corretto funzionamento del menu.
Tali riferimenti sono fondamentali e non possono in alcun modo essere omessi; a meno che
il codice JavaScript venga inserito allinterno del documento Html, ovvero venga
cambiato nome ai file collegati.
Allinterno del tag <BODY> vengono definiti i livelli delloggetto array,
attraverso lassegnazione di variabili con prefisso arMenu:
<A HREF="/" onMouseOver="popUp('elMenu1',event)"
onMouseOut="popDown('elMenu1')">Menu gerarchico a cascata</A>
Il gestore di eventi onMouseOver considera la posizione del puntatore del mouse in
riferimento a un collegamento ipertestuale, e richiama la funzione popUp. elMenu è il
primo argomento di popUp e non va confuso con loggetto array. Gli argomenti sono
oggetti, valori o variabili richiesti per lelaborazione di un metodo o di una
funzione, e lavorano esclusivamente con riferimento a esse. In particolare, onMouseOver è
attivato quando il puntatore del mouse abbandona larea del link testuale. Al
contrario onMouseOut viene attivato quando il puntatore entra nellarea di link. La
funzione popDown è necessaria a Navigator, mentre Internet Explorer passa implicitamente
loggetto event a ogni funzione che lo richiami.
Arrays.js
Gli array rappresentano, in JavaScript, uno strumento per indicizzare le
informazioni come collezioni ordinate di dati. Il file arrays.js
sviluppa, in questottica, il contenuto di ogni voce presente nel menu.
arMenu1 = new Array
("Argomento A","http://inews.tecnet.it",1,)
Il testo da assegnare alla voce di menu e il relativo link, vanno inseriti tra apici
doppi. Il valore 1 indica lesistenza di un menu «child» annidato. Un valore pari a
0, invece, indica lassenza di link annidati.
Loggetto array arMenu1 si trova al livello più alto della gerarchia, e da esso
discendono tutti gli altri. arMenu1 viene richiamato dallelemento elMenu1 presente
nel file menu.htm. Per creare livelli che discendono da arMenu1 è necessario creare
ulteriori menu «child». Per fare questo si adotta una numerazione progressiva:
arMenu1_1 = new Array
arMenu1_2 = new Array
arMenu1_3 = new Array
Per inserire un altro menu «child» a un livello gerarchico inferiore, per esempio, in
arMenu1_1, è sufficiente inserire una numerazione del tipo:
arMenu1_1_1 = new Array
arMenu1_1_2 = new Array
Si consideri, come esempio chiarificatore, di voler aggiungere un terzo livello di menu
inferiore (di nome «Argomento A3») al seguente codice:
arMenu1_1 = new Array(
"Argomento A1","http://inews.tecnet.it",1,
"Argomento A2","http://inews.tecnet.it",1
Va inserita una semplice stringa di codice con suffisso 1, che aggiunge il riferimento al
nuovo livello «child»:
arMenu1_1 = new Array
("Argomento A1","http://inews.tecnet.it",1,
"Argomento A2","http://inews.tecnet.it",1,
"Argomento A3","http://inews.tecnet.it",1)
Già sono presenti due livelli «child» che fanno riferimento a
Argomento A1 e Argomento A2:
arMenu1_1_1 = new Array
("Link 01","http://inews.tecnet.it",0,)
arMenu1_1_2 = new Array
("Link 01","http://inews.tecnet.it",0,)
A questi va aggiunto un terzo livello di nome arMenu1_1_3:
arMenu1_1_3 = new Array
("Link 01","http://inews.tecnet.it",0,)
Menu.js
Il file menu.js contiene gran parte del codice JavaScript. La sua
struttura è complessa e risente, come già accennato, della pesantezza dovuta al doppio
codice per il corretto funzionamento con Navigator ed Explorer.
Per esempio, la funzione popUp che assegna al mouse le coordinate X e Y deve essere
espressa così:
function popUp(menuName,e){
if (!areCreated) return;
hideAll();
currentMenu = eval(menuName);
xPos = (NS4) ? e.pageX : event.x;
yPos = (NS4) ? e.pageY : event.y;
currentMenu.moveTo(xPos,yPos);}
Ciò in quanto Navigator assegna le coordinate in riferimento a xPos e yPos, mentre
Explorer si serve di event.x ed event.y.
Le numerose incompatibilità tra i due browser più diffusi sono tra le cause principali
dello scarso utilizzo di Dynamic Html da parte degli sviluppatori Web. La complessa
struttura dellesempio esaminato in queste pagine, è sintomatica dei limiti
oggettivi che lutenza non professionale può incontrare nella gestione di codice
doppio. La causa di una tale stortura va ricercata nelle diverse strategie di sviluppo che
Microsoft e Netscape hanno adottato. Limpressione, supportata dai fatti, è che da
tale contrapposizione sarà il modello di Microsoft a imporsi come standard per il futuro
Dynamic Html.
Il modello proposto da Netscape ha nei layer e nei JSSS i suoi punti qualificanti; ma
proprio su tali strumenti il W3C si è pronunciato negativamente, rifiutandone la
standardizzazione.
I layer sono stati introdotti in Navigator 4, che a tuttoggi è lunico browser
che li supporti. I layer (livelli) sono sezioni indipendenti di una pagina Html, e come
tali possono essere sovrapposti gli uni agli altri fino a un massimo di 10 livelli.
Attraverso manipolazioni più o meno complesse dei singoli livelli, è possibile creare
animazioni ed effetti speciali, oltre a posizionare in modo dinamico testi e oggetti
allinterno della pagina. Netscape riconosce tali strumenti attraverso la marcatura
<LAYER>, <SPAN> o <DIV>, mentre Microsoft riconosce soltanto gli ultimi
due tag.
Altro punto fondamentale della visione di Netscape per DHTML sono i fogli di stile Java
Assisted (JSSS). Attraverso i JSSS, Netscape controlla la formattazione del testo e la
disposizione degli elementi della pagina. Per fare questo, JSSS introduce tre nuovi
modelli: «tags», «classes» e «ids», che permettono di definire il valore di ogni
singolo attributo del documento. Il limite maggiore dei fogli di stile JSSS è
nellimpossibilità di modificare il contenuto della pagina una volta caricata. A
differenza di quanto accade con i fogli di stile CSS1, infatti, allatto del
caricamento di un documento, gli stili diventano definitivi. La soluzione al problema
delle incompatibilità tra Netscape ed Explorer, va trovata nella ricerca di uno standard
comune che porti i due contendenti su una strada di sviluppo univoco. Agli sviluppatori di
siti Web non rimane che sperare nel futuro e, nel breve periodo, servirsi di un editor
(come Macromedia Dreamweaver) che generi automaticamente codice compatibile con IE4 e NN4.
(mvalente@tecnet.it)
|