Approfondimenti
di Michael J. Hammel traduzione di Antonio Cartelli



XeoMenu


(continua dalla pagina della Musa della Grafica)

 

L'esempio riportato accanto consente di esaminare i primi elementi del funzionamento di Xeo Menu. Si noti che spostando il mouse su una delle due parole scritte nell'immagine la parola stessa cambia di colore e si sposta leggermente. Questo spostamento era dovuto inizialmente ad un refuso tipografico ma siccome mi è piaciuto molto l'effetto che ne è scaturito ho deciso di lasciarlo così com'è. La parola "Linux", inoltre, nel momento in cui si fa passare il mouse su di essa, consente di accedere ad un menu a tendina che permette la scelta di due semplici opzioni. In definitiva lo spostamento del mouse su una delle due scelte conduce alla possibilità di accedere ad un'altra pagina (sebbene i link in questo esempio siano fittizi visto che non conducono da nessuna parte).

Il codice dell'applet Java di questo primo esempio somiglia molto a quanto riportato di seguito:

Analizziamo innanzitutto, anche se brevemente, che cosa fa ogni riga del testo. La prima riga fa partire l'applet e fissa la directory corrente (per capirci quella dalla quale è stata presa questa pagina) come l'area di riferimento per il codice dell'applet. L'argomento CODE fissa il nome del programma Java. Si noti che non va inclusa l'estensione ".class" (tutti i programmi Java, una volta compilati, hanno un'estensione .class per il nome del file). Gli argomenti relativi alla larghezza ed all'altezza fissano le dimensioni dello spazio nel quale l'applet avrà la sua visibilità. Si noti che il codice sopra riportato è stato disposto subito dopo una tabella all'interno della sezione BODY della pagina HTML. Dopo la riga appena descritta viene l'insieme dei parametri dell'applet, ognuno dei quali viene specificato mediante l'utilizzo del delimitatore HTML PARAM.

Le due righe successive riportano informazioni sul copyright e sui dati dell'autore del programma, consentendo di attribuire i giusti meriti alla Sun Microsystems ed a Patrick Chan per l'elaborazione di questo software. Mi auguro che Sun abbia anche corrisposto il giusto onorario a Chan per lo sviluppo di Xeo e per il suo utilizzo sul sito web Java!

La riga seguente consente di definire un colore di sfondo da utilizzare nelle regioni trasparenti dell'immagine: nel caso specifico di questo primo esempio, comunque, non ci sono aree trasparenti, esse compaiono invece nell'esempio successivo.

L'immagine da utilizzare è specificata mediante la riga che riporta il parametro immagine (image). Il valore che viene utilizzato (nome dell'immagine) con VALUE può essere costituito da un qualsiasi URL valido.

Il separatore è un singolo carattere utilizzato per delimitare i campi nei parametri del menu. I parametri del menu vengono assegnati nelle ultime due righe di tipo PARAM di cui ci occuperemo tra qualche istante. Per il momento si noti soltanto che il separatore è utilizzato quale argomento di VALUE per i parametri del menu.

Si badi che l'uso di questo programma prevede che le singole voci di menu possano essere costituite da più righe; per far sí che XeoMenu riconosca il passaggio alla riga successiva si è utilizzato, nel codice di esempio che stiamo analizzando, il simbolo di accento circonflesso (^).
Nel menu di esempio il passaggio alla riga successiva non è stato utilizzato ma qualora lo si fosse voluto bastava inserire l'accento circonflesso nel testo previsto, tra i parametri del menu.

Le due righe successive specificano le caratteristiche e la grandezza del font da utilizzare per il testo scritto nel menu. Stando a quanto riportato nel manuale di XeoMenu vi sono esclusivamente tre tipi di font: Helvetica, TimesRoman e Courier. Questa potrebbe essere una limitazione eccessiva nell'utilizzo delle prime librerie delle classi Java, ma non ne sono sicuro al 100%.

Marginh e marginv sono due parametri utilizzati per delimitare la regione intorno al testo del menu mediante l'utilizzo di spazio vuoto. I valori sono espressi in pixel.

Seguono poi i parametri per il colore del testo. Innanzitutto ci sono i colori del testo in primo piano e quelli dello sfondo, da usare allorché il cursore non viene spostato sul testo stesso, in effetti si tratta dei normali colori per redigere testo. Gli ultimi due specificano i colori da utilizzare quando il cursore viene a trovarsi sulle righe di menu. Si noti che nel primo esempio i colori di sfondo sono gli stessi, ma quelli di primo piano sono diversi. Sicuramente questo tipo di esperimento non è da raccomandare in quanto gli effetti possono essere imprevedibili; esso dà però un'idea di come i colori possono contribuire a realizzare variazioni di effetti.

L'ultima riga prima delle due relative ai parametri di menu è, allo stato attuale, commentata (rappresenta una riga di commento), ma viene riportata per amore di completezza. Questo parametro viene utilizzato da XeoMenu come il frame per visualizzare le voci di un menu avente per indice degli URL, nel momento in cui questo venisse selezionato.

Alla fine vengono le due righe con i parametri relativi ai menu. Xeomenu riconosce ogni parametro cui sia premessa la parola chiave "menu" e che sia fatto seguire da un valore numerico che funga da indicatore della voce di menu. Questo campo contenente diversi parametri contiene anche un insieme di valori delimitati da separatori mediante i quali definire la collocazione video, il contenuto, e gli URL corrispondenti ad ogni voce di menu. Il primo insieme di 4 valori numerici rappresente l'hotspot (zona sensibile). Questa regione, individuata da una coppia di coordinate x, y e dalle dimensioni della sua larghezza e della sua altezza, rappresenta la zona nella quale deve entrare il mouse perché XeoMenu inizi a gestire le caratteristiche dei menu dell'immagine. I 4 numeri successivi specificano un'ulteriore zona dell'immagine da sovrapporre alla precedente allorché il mouse entra nella zona sensibile. Gli ulteriori due numeri specificano l'offset (scostamento) all'interno dell'immagine originaria con il quale riprodurre la porzione di immagine da sovrapporre. Nell'esempio che stiamo esaminando gli offset vengono specificati in maniera che la sovrapposizione avvenga sopra la zona sensibile, sovrapponendosi interamente ad essa. Ovviamente questo non è l'unico modo di utilizzare tale caratteristica poiché la sovrapposizione può essere effettuata su qualunque parte dell'immagine. Si noti che tutte le coordinate x, y sono date come coordinate in pixel all'interno dell'immagine.

Subito dopo l'offset viene un singolo carattere, che può essere una "d" o una "u". La "d" viene utilizzata per far scorrere i menu che compariranno sull'immagine verso il basso, mentre la "u" li farà scorrere verso l'alto. La posizione dell'angolo in alto a sinistra per i menu che scorrono verso il basso (come pure quella dell'angolo in basso a sinistra per i menu che scorrerano verso l'alto) è la stessa dell'offset specificato per le aree di sovrapposizione (in effetti i due numeri che precedono la "d" e la "u").

Subito dopo viene l'URL di default, che è anche l'URL che verrà utilizzato se l'utente cliccherà sull'area sensibile senza ricorrere ad alcun menu. Segue infine la definizione dei menu: si tratta del testo che costituisce le singole voci del menu alle quali è collegato un URL che normalmente viene riportato subito dopo il testo stesso. Si noti che nel secondo parametro di menu viene specificato un solo URL - quello di default. Ciò significa che allorché si dispone il mouse sull'area sensibile rappresentata da Gazette non viene visualizzato alcun menu a tendina anche se viene utilizzata la sovrapposizione di immagini.

Nell'esempio che segue, invece, entrambe le regioni di testo utilizzano dei menu. Una utilizza un menu che scorre verso l'alto e l'altra utilizza un'area di sovrapposizione che non va a disporsi direttamente sull'area sensibile originaria. Per di più quest'immagine ha una zona trasparente. Siete in grado di fare qualche ipotesi sul come realizzare quest'esempio? Prima di andare a vedere il codice sorgente si provi a farlo da soli!
 
 
indent
 

[ La pagina della Musa ] [ Indice ]


Per l'articolo originale: © 1998 Michael J. Hammel - Pubblicato sul n. 26 della Linux Gazette
Per l'edizione italiana: © 1998 A. Cartelli - Pubblicato sul n. 3 anno II di LGEI a cura del LUGBari