Exercice 1.6 : Réalisation de la navigation dynamique du site Web
Vous devez avoir effectué l'exercice 1.5 :
Application d'un modèle de page au site Web avant de pouvoir commencer
la réalisation de la navigation dynamique du site Web.
Lorsque vous avez conçu la structure du site Web dans
l'exercice 1.2, vous avez pris des
décisions sur les relations entre les pages. Rappelez-vous de la façon
dont vous avez agencé les icônes de page avec les lignes les connectant :

Il existe plusieurs moyens d'associer une page à une autre.
Ces relations sont identiques aux relations d'une famille.
Dans cet exemple, Affichage de toutes les petites annonces est la page
parente et les trois autres pages sont ses pages enfant. De plus, ces
trois pages sont des éléments de même niveau.
Ces relations de page permettent de générer des liens de navigation, tels
des barres de navigation et des onglets. Chaque page crée automatiquement ses
liens de navigation en fonction des pages auxquelles elle est liée. Ce processus est
appelé navigation dynamique.
Vérification de la structure du site
Vous devez vérifier que la structure du site a été configurée pour spécifier
les pages à inclure dans la navigation. Vous pouvez spécifier dans Web
Site Designer les pages à inclure en tant que liens dans la navigation dynamique, les
pages à inclure dans les plans du site ainsi que d'autres options de navigation dépendant
de la structure du site et des relations de page.
La spécification de ces éléments est utile lorsque vous avez des pages qui doivent être incluses
dans le site mais n'a aucun intérêt pour les fonctions de navigation. Par
exemple, une page d'erreur peut s'afficher lorsque le site rencontre un
problème. Toutefois, vous pouvez ne pas afficher la page d'erreur lors de la
navigation.
- Cliquez deux fois sur Navigation sur le site Web dans la vue Explorateur
de projets afin d'afficher la structure du site.
- Vous pouvez voir que l'option Afficher dans la navigation
est sélectionnée par défaut pour toutes les pages car l'icône Afficher
dans la navigation (
) est visible. Cette option doit être sélectionnée pour chaque
page que vous souhaitez inclure dans une barre de navigation. Vous pouvez également désactiver
une page afin qu'elle ne s'affiche pas dans la navigation. Vous devez désactiver la page
des résultats de la recherche, Listes filtrées, dans la navigation car l'utilisateur
est placé dans cette page une fois l'option de recherche sélectionnée à la page Affichage
de toutes les petites annonces.
- Cliquez deux fois sur l'icône de page Listes filtrées.
- Sélectionnez Navigation > Afficher dans la navigation pour annuler
la sélection de cette icône. L'icône Afficher dans la navigation doit être grisée sur l'icône
de page Listes filtrées.
- Vous devez également désactiver la page Mise à jour des listes car l'utilisateur
est placé dans cette page une fois l'option de mise à jour sélectionnée
à la page Affichage de toutes les petites annonces. Cliquez à l'aide du bouton
droit de la souris sur l'icône de page Mise à jour de listes.
Sélectionnez ensuite Navigation
> Afficher dans la navigation pour annuler la sélection de cette icône. L'icône Afficher dans la navigation doit être grisée sur l'icône de page Mise à jour de listes.
- Vous devez définir une racine de navigation pour le site. La page principale, généralement
la première page créée dans le site, est souvent définie comme racine de navigation. Cliquez à l'aide
du bouton droit de la souris sur l'icône de page Affichage de toutes les petites annonces et cliquez
sur Navigation > Définir la racine de navigation. L'icône
(
) se trouvant en haut de l'icône de page est
l'icône racine. La racine de navigation est importante car elle détermine les niveaux de lien utilisés lors
de la génération de la navigation de site Web, comme les barres de navigation.
Remarque : Les options par défaut définies par la navigation de
site pour la page Affichage de toutes les petites annonces et Envoi d'une liste doivent être
sélectionnées.
- Appuyez sur les touches Ctrl+S pour sauvegarder les modifications.
Ajout d'un composant de navigation au modèle de page
- Retournez au modèle de page en cliquant deux fois sur le fichier modèle.jtpl
dans la vue Explorateur de projets.
- Dans la vue Palette, cliquez sur Navigation sur le site Web pour ouvrir
le tiroir qui contient les composants de navigation. Il existe plusieurs types de composant
dynamique de navigation que vous pouvez ajouter à votre site Web, incluant un plan de site.
Le composant de base est la barre horizontale qui est composée d'une ligne de liens dépendant
de la structure du site.
- Bien que vous ayez besoin d'une ligne de liens dans la partie supérieure de chaque page
permettant à tous les utilisateurs d'accéder aux autres pages du site, vous souhaitez
également ajouter un intérêt visuel à la navigation. Déplacez le composant
Onglets horizontaux à la deuxième ligne du modèle de page. Ce composant crée les liens
dynamiques d'une ligne comportant des onglets. L'assistant Insertion
d'onglets horizontaux s'affiche.
- Acceptez la valeur par défaut afin d'utiliser un composant de navigation Exemple.
- Acceptez la valeur par défaut des images miniatures (horizontal-tab01.jsp)
et remarquez que la zone Nom du fichier est remplie automatiquement.Cliquez sur Suivant.
- Sélectionnez le type de lien que vous souhaitez voir dans la barre de navigation
en fonction des relations de page. Pour faire en sorte que la page principale du site ainsi que
toutes les pages de même niveau et les enfants de la page s'affichent dans la navigation, vérifiez
que les pages suivantes sont sélectionnées :
- Page principale
- Enfants de la page principale
- Pages de même niveau
- Page en cours
Si vous avez sélectionné des liens suivants ou précédents, vous pouvez indiquer
un libellé qui apparaîtra pour ces liens, tels que Précédent et Suivant.
- Cliquez sur Suivant. Acceptez les valeurs
par défaut de la page Paramètres facultatifs du fichier de spécification de cet assistant. Si vous
voulez générer les liens lors de l'exécution à l'aide de balises personnalisées JSP, sélectionnez
Navigation JSP. Si vous souhaitez générer des liens
lors de l'exécution à l'aide de balises personnalisées HTML, sélectionnez Navigation HTML.
Si vous ajoutez une balise personnalisée HTML dans une page JSP Faces, cliquez sur la case
à cocher Utilisation d'un lien Faces afin de créer une balise outputLink pour Faces.
- Cliquez sur Terminer. L'icône Composant de navigation (
)
s'affiche sur le modèle de page.
- Sauvegardez les modifications dans le modèle de page. Lorsque vous sauvegardez
le modèle de page, les modifications de navigation dynamique sont appliquées à toutes les
pages du site.
- Cliquez deux fois sur Navigation sur le site Web dans la vue Explorateur
de projets afin d'afficher la structure du site. Etant donné que les pages Web ont maintenant
un composant de navigation, l'icône (
) indiquant que la page ne dispose pas de navigation de site
Web ne s'affiche pas sur l'icône de page.

Le composant de navigation ajoute plusieurs fichiers au projet Web.
Une fois le modèle sauvegardé, notez que la vue Explorateur de projets
contient un nouveau fichier .jsp et plusieurs fichiers .gif. Ces fichiers
affichent les onglets dans les pages :
Aperçu de la navigation
Si vous souhaitez voir une instance de l'aspect de la navigation sur
les pages et non dans le modèle, cliquez deux fois sur tous_les_enregistrements.jsp dans
la vue Explorateur de projets puis cliquez sur l'onglet Aperçu dans Page
Designer. Vous pouvez voir que les noms qui apparaissent dans les onglets sont
les libellés de navigation pour les pages et non pour les noms de fichier.
Notez également que la page en cours est affichée sous la forme d'onglet
mis en évidence. Lorsque vous naviguez dans le site, la page en cours sera
toujours l'onglet mis en évidence.
Conseil : Si vous modifiez la structure du site dans
la vue Navigation, les liens de navigation dynamique sont automatiquement
mis à jour en fonction de la nouvelle structure.
Maintenant que vous avez configuré la navigation dynamique, vous êtes prêt à commencer
l'exercice 1.7 : Aperçu du site Web.