Esercizio 1.6: Navigazione dinamica del sito Web
Prima di iniziare, è necessario completare l'Esercizio 1.5:
Applicazione di un modello pagina al sito Web.
Quando è stata progettata la struttura del sito Web nell'Esercizio 1.2, è stato necessario operare alcune
decisioni sulle relazioni tra le pagine. Prima di iniziare, esaminare i vari passi
eseguiti per il layout delle icone delle pagine, collegate tra loro da linee:

Esistono vari modi per collegare le pagine tra loro.
Queste relazioni sono simili a quella di una famiglia.
In questo, esempio, View All Classifieds e la pagina principale, mentre le altre
pagine sono le relative pagine secondarie. Inoltre, queste tre pagine sono tra loro
elementi di pari livello.
Queste relazioni tra pagine vengono utilizzate per generare collegamenti di navigazione come
le barre e le schede di
navigazione. Ciascuna pagina crea automaticamente i propri collegamenti di navigazione
sulla base delle pagine alle quali è
collegata. Questo processo è noto come navigazione
dinamica.
Verifica della struttura del sito
Si desidera assicurarsi che la struttura del sito sia stata impostata per specificare
quali pagine includere nella navigazione. È possibile specificare in Web
Site Designer quali pagine includere come collegamenti nella navigazione
dinamica,
quali pagine includere nelle mappe del sito così come in altre opzioni
di navigazione che si basano sulla
struttura del sito e sulle relazioni delle pagine.
Ciò è molto utile quando vi sono pagine da includere nel sito, ma che non sarebbe
logico includere come parte delle funzioni di navigazione. Ad
esempio, è possibile avere una pagina di errore che viene visualizzata quando si
verifica un problema
sul sito; tuttavia, non si desidera visualizzare questa pagina di errore come parte
della navigazione.
- Fare doppio clic su Navigazione del sito Web nella vista Esplora
progetti per visualizzare la struttura del sito.
- È possibile notare che tutte le pagine presentano l'opzione Mostra nella navigazione
selezionata per impostazione predefinita, in quanto l'icona Mostra nella navigazione (
)
è visibile. Questa opzione deve essere selezionata per ciascuna pagina che
si desidera visualizzare in una barra di navigazione. È anche possibile disabilitare una pagina, in modo che non
venga visualizzata nella navigazione. Occorre disabilitare la pagina dei risultati
di ricerca, Filtered Listings, dalla navigazione in quanto l'utente verrà indirizzato
in questa pagina dall'opzione di ricerca che si trova nella pagina View All Classifieds.
- Fare clic con il tasto destro del mouse sull'icona della pagina Filtered Listings.
- Selezionare Navigazione > Mostra nella navigazione per
deselezionarla. L'icona Mostra nella navigazione dovrebbe non disponibile
sull'icona della pagina Filtered Listings.
- Occorre disabilitare la pagina dei risultati
di ricerca, Update Listings, dalla navigazione in quanto l'utente verrà indirizzato
in questa pagina dall'opzione di aggiornamento che si trova nella pagina View All Classifieds. Fare clic con il tasto destro del mouse sull'icona della pagina Update Listing.
Successivamente, selezionare Navigazione
> Mostra nella navigazione per
deselezionarla. L'icona Mostra nella navigazione dovrebbe non essere visualizzata
sull'icona della pagina Update Listing.
- Occorre impostare un primo livello di navigazione per il sito. La pagina iniziale,
di solito la prima pagina del sito che viene creata, viene spesso impostata come primo
livello di navigazione. Fare clic con il tasto destro del mouse sull'icona della pagina View All Classifieds
e fare clic su Navigazione > Imposta primo livello di navigazione. L'icona
(
) nella parte superiore dell'icona della pagina, è
l'icona principale. Il primo livello di navigazione è importante in quanto determina i livelli di
collegamento utilizzati
quando si genera la navigazione del sito Web, come le barre di navigazione.
Nota: le opzioni predefinite impostate per la navigazione del
sito per la pagina View all Classifieds e la pagina Post a Listing
non dovrebbero essere deselezionate.
- Premere Ctrl+S per salvare le modifiche.
Aggiunta di un componente per la navigazione al modello pagina
- Ritornare al modello pagina facendo doppio clic su template.jtpl nella
vista Esplora progetti.
- Nella vista Tavolozza, fare clic su Navigazione del sito Web per aprire
il cassetto che contiene i componenti per la navigazione. Ci sono molti tipi di
componenti per la navigazione dinamica che è possibile aggiungere al sito Web,
compresa una mappa del sito. Il componente base è la Barra orizzontale
che è costituita da una serie di collegamenti sulla base della struttura
del sito.
- Anche se occorre aggiungere una riga di collegamenti all'inizio di ciascuna pagina
per consentire agli utenti di accedere ad altre pagine del sito, è tuttavia possibile
rendere più interessante la navigazione a un punto di
vista visivo. Trascinare il componente Schede
orizzontali nella seconda riga del modello pagina; questo
componente che i collegamenti dinamici disponendoli in orizzontale sotto forma di schede. Si apre
la procedura guidata Inserimento schede orizzontali.
- Accettare l'impostazione predefinita per utilizzare un componente per la navigazione
di esempio.
- Accettare l'impostazione predefinita nelle immagini Miniatura
(horizontal-tab01.jsp) e controllare che il campo Nome file venga
compilato automaticamente. Scegliere Avanti.
- Selezionare il tipo di collegamenti che si desidera visualizzare nella barra
di navigazione, sulla base delle relazioni tra le
pagine. Per specificare che la pagina iniziale del sito e tutte le pagine
di pari livello e secondarie di ciascuna pagina verranno visualizzate nella
navigazione, assicurarsi che le seguenti pagine siano selezionate:
- Pagina iniziale
- Secondarie della pagina iniziale
- Pagine di pari livello
- Pagina corrente
Si noti che se si seleziona il collegamento precedente o successivo, è possibile fornire
un'etichetta per questi collegamenti come, ad esempio,
Indietro e Avanti.
- Scegliere Avanti. Accettare le impostazioni predefinite
nella pagina Impostazioni facoltative per il file di specifica della procedura guidata. Se si desidera
generare i collegamenti al runtime utilizzando le tag di personalizzazione JSP, selezionare
Navigazione JSP. Se si desidera generare
i collegamenti in fase di progettazione utilizzando i tag di personalizzazione
HTML, selezionare Navigazione HTML. Se si desidera aggiungere
un tag di personalizzazione HTML in una pagina Faces JSP, selezionare la casella di controllo
Utilizza collegamento Faces per creare il tag
outputLink per Faces.
- Fare clic su Fine. L'icona Componente di
navigazione (
)
viene visualizzata nel modello pagina.
- Salvare le modifiche apportate al modello pagina. Quando si salva il modello pagina, le modifiche apportate alla navigazione dinamica vengono applicate a tutte le pagine
del sito.
- Fare doppio clic su Navigazione del sito Web nella vista Esplora
progetti per visualizzare la struttura del sito. Poiché le pagine Web a questo punto dispongono di un
componente di navigazione, l'icona (
) che indica che la pagina non dispone di navigazione, non viene visualizzata.

Il componente di navigazione aggiunge numerosi file al progetto Web.
Dopo aver salvato il modello,
controllare che la vista Esplora progetti contenga un nuovo file
.jsp e diversi file .gif. Questi file visualizzano le schede presenti
nelle pagine:
Visualizzazione dell'anteprima della navigazione
Se si desidera controllare come verrà visualizzata la navigazione nelle
pagine piuttosto che nel modello, fare doppio clic su
all_records.jsp nella vista Esplora progetti, quindi fare clic
sulla scheda Anteprima in Page
Designer. È possibile notare che i nomi visualizzati nelle schede sono le
etichette di navigazione per le pagine, anziché i nomi dei file.
Si noti, inoltre, che la pagina corrente
venga visualizzata come scheda evidenziata; durante la navigazione all'interno
del sito, la pagina corrente sarà sempre la scheda evidenziata in alto.
Suggerimento: se si modifica la struttura del sito nella
vista Navigazione, i collegamenti della navigazione dinamica verranno aggiornati
automaticamente per riflettere la nuova
struttura.
Ora che è stata impostata la navigazione dinamica, è possibile passare
all'Esercizio 1.7: Visualizzazione dell'anteprima del sito Web.