• Programmazione » Programmi » Tutorial di Ultradev

Pagina 2 di 8 

Ok.
Il primo passo è fatto per maggiori dettagli, comegià detto rimando all'ottimo tutorial di Zubin.

Studiamo la logica del codice
Per prima cosa, dobbiamo studiare il codice html generato daFw, per capirne la logica e poter intervenirenell'inserimento delle corrette istruzioni per ildatabase.
Abbiamo ottenuto un file html da FW che abbiamo chiamatomenu_demo.html.

Il codice inizia dal tag nascosto

<!-- Fireworks 4.0 Dreamweaver 4.0 target. Created .....-- >

e a seguire apre un tag di < SCRIPT > in cui vienedefinita la funzione: fwLoadMenus() nel cui corpo avviene lagenerazione del menù vero e proprio.
Analizziamo il codice della funzione fwLoadMenus() :

if (window.fw_menu_0) return;

garantisce che le istruzioni che seguono vengano eseguitesolo se non è già definito il menù.
Viene definito un nuovo elemento di menù tramite lafunzione Menu che restituisce appunto un oggetto (menu) etramite la funzione membro addMenuItem vengono aggiunti tantielementi quanti sono le voci del sottomenù.
Viene eseguito il ciclo tante volte quanti sono gli elementidi menù che hanno un sottomenù

// ciclowindow.fw_menu_0_1 = new Menu("Categoria 1" ,68,17,"Verdana, Arial, Helvetica, sans-serif" ,10,"#000033" ,"#000000" ,"#ffffff" ,"#ddffff");fw_menu_0_1.addMenuItem("link 1_1" ,"window.open('#', '_parent');");fw_menu_0_1.addMenuItem("link 1_2" ,"window.open('#', '_parent');");fw_menu_0_1.addMenuItem("link 1_3" ,"window.open('#', '_parent');");fw_menu_0_1.hideOnMouseOut=true;// fine ciclo

Viene assegnata alla variabile hideOnMouseOut il valore trueche permette la sparizione del menù quando il mouseesce dall'area attiva (area dello slice, ricordate?)
La funzione Menu accetta vari parametri e piùprecisamente nell'ordine:

• stringa da visualizzare nel menù
• larghezza menù (px)
• altezza menù (px)
• font del menù
• altezza (corpo) del font
• colore del testo normale
• colore del testo evidenziato
• colore sfondo normale
• colore sfondo evidenziato

La funzione addMenuItem accetta i seguenti parametri:

• stringa da visualizzare nel sottomenù
• stringa contenente il codice javaScript da mandare in esecuzione alla selezione e più precisamente window.open(indirizzo,finestra) quando si vuole aprire una pagina in un'altra finestra o location=indirizzo quando si vuole aprire una pagina nella stessa finestra

Dopo ciò viene creato l'elemento di menùprincipale ("root") che conterrà tutti glialtri,

window.fw_menu_0 = new Menu("root" ,89,17,"Verdana, Arial, Helvetica, sans-serif" ,10,"#000033" ,"#000000" ,"#ffffff" ,"#ddffff");

si aggiungono i menù creati precedentemente che inquesto caso diventano sottomenù di root,

fw_menu_0.addMenuItem(fw_menu_0_1);fw_menu_0.addMenuItem(fw_menu_0_2);

aggiunta di eventuali voci di menù senzasottomenù,

fw_menu_0.addMenuItem("Categoria 3" ,"window.open('#', '_parent');");fw_menu_0.hideOnMouseOut=true;

viene definita quale immagine deve essere usata per indicarela presenza di sottomenù,

fw_menu_0.childMenuIcon="images/arrows.gif";

esecuzione del codice per finire l'elaborazione

fw_menu_0.writeMenus();

Altre parti importanti di codice le troviamo subito dopo ilBODY dove viene eseguita la funzione fwLoadMenus() percaricare il menù e poi nel codice di attivazione dellostesso gestito come roll-over su un link.

La funzione window.FW_showMenu(window.fw_menu_0,24,42)è quella deputata alla visualizzazione del menùed accetta i seguenti parametri:

• oggetto menu da visualizzare
• px inizio area sensibile da sx
• px inizio area sensibile da alto

A questo punto abbiamo identificato il funzionamento delmenù e possiamo passare all'integrazione delcodice con il nostro database.

Continua>>>