Exercice 1.6 : Réalisation de la navigation dynamique du site Web

Présentation visuelle

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 :

Structure du site

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.
  1. Cliquez deux fois sur Navigation sur le site Web dans la vue Explorateur de projets afin d'afficher la structure du site.
  2. 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.
    1. Cliquez deux fois sur l'icône de page Listes filtrées.
    2. 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.
  3. 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.
  4. 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.
  5. Appuyez sur les touches Ctrl+S pour sauvegarder les modifications.

Ajout d'un composant de navigation au modèle de page

  1. Retournez au modèle de page en cliquant deux fois sur le fichier modèle.jtpl dans la vue Explorateur de projets.
  2. 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.
  3. 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.
  4. Acceptez la valeur par défaut afin d'utiliser un composant de navigation Exemple.
  5. 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.
  6. 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 : 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.
  7. 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.
  8. Cliquez sur Terminer. L'icône Composant de navigation () s'affiche sur le modèle de page.
  9. 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.
  10. 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.
    Navigation sur le site Web avec composant de navigation

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 :

Explorateur de projets avec navigation

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.

Onglets Navigation

Maintenant que vous avez configuré la navigation dynamique, vous êtes prêt à commencer l'exercice 1.7 : Aperçu du site Web.

Conditions d'utilisation | Commentaires

(C) Copyright IBM Corporation 2000, 2005. All Rights Reserved.