Aspect et convivialité de l'interface utilisateur

Personnalisation de l'aspect et de la convivialité de l'interface utilisateur

Un moyen facile de personnaliser votre Géoportail est de modifier son texte, ses graphiques et sa combinaison de couleurs. Les instructions se trouvent dans les sections suivantes :

• Personnalisation du texte de l'interface du Géoportail
• Changement de la combinaison de couleurs par défaut en une autre prédéfinie
• Création d'un thème personnalisé
• Inversion de l'icône favorite par défaut

Personnalisation du texte de l'interface du Géoportail

La plupart du texte de l'interface du Géoportail est gérée dans le fichier gpt.properties dans le dossier \\geoportal\WEB-INF\classes\gpt\resources. Le texte qui s'affiche sur l'interface est associé à un 'haricot' d'identification unique, qui le mappe en texte dans le fichier gpt.properties. Il est important de réviser le texte dans le fichier gpt.properties et de le mettre à jour selon l'implémentation du Géoportail de votre organisation. Afin de découvrir quel texte de l'interface est mappé en quelle chaîne de texte dans le fichier gpt.properties, faites ce qui suit :

1. Dans un éditeur de texte, ouvrez le fichier body.jsp associé à la page Web que vous souhaitez modifier. Ces fichiers sont stockés dans le dossier \\geoportal\catalog\content. Dans cet exemple, nous ouvrirons le fichier aboutBody.jsp et modifierons le texte sur la page À propos de.
2. Remarquez où le texte du haricot est situé. Il est souvent indiqué par une chaîne précédente 'value="#{gptMsg'. Dans notre fichier aboutBody.jsp, il y a deux haricots référencés. Dans cet exemple, le deuxième sera mis à jour. Ce haricot, catalog.content.about.statement, contient du texte qui s'affichera sur la page À propos de décrivant l'implémentation du Géoportail de votre organisation.
3. Naviguez vers le dossier \\geoportal\WEB-INF\classes\gpt\resources, puis ouvrez le fichier gpt.properties dans un éditeur de texte.
4. Recherchez le haricot catalog.content.about.statement. Vous devez voir une entrée comme celle qui suit :

   catalog.content.about.statement = \
   <p>\
   customize this text to describe your organization's Geoportal implementation
   </p>
   

5. Modifiez le texte après le signe = pour inclure le texte approprié pour le Géoportail de votre organisation.
6. Enregistrez le fichier gpt.properties.
7. Actualisez la page Web, cliquez sur le lien À propos de en haut et voyez si la page a été mise à jour. Si les autres pages jsp ont référencé le haricot catalog.content.about.statement, ces pages seraient également mises à jour avec votre nouveau texte dans l'interface du Géoportail. Les références du haricot sont utiles pour mettre à jour rapidement le texte utilisé dans l'interface du Géoportail.
8. Vérifiez si vous avez mis à jour le texte associé aux pages Confidentialité et Avis de non-responsabilité. Ces pages sont faciles à omettre.

Remarque :

Vous remarquerez que tous les haricots dans le fichier gpt.properties commencent par le mot 'catalog'. Si vous ajoutez de nouveaux haricots dans le fichier gpt.properties, assurez-vous qu'ils contiennent également le préfixe 'catalog' ; si non, la chaîne de texte associée au haricot ne s'affichera pas dans l'interface du géoportail.

Changement de la combinaison de couleurs par défaut en une autre prédéfinie

Le répertoire \\geoportal\catalog\skins\themes contient 2 sous-dossiers : bleu et rouge. La combinaison de couleurs active est référencée dans le fichier \\geoportal\catalog\skins\lookAndFeel.jsp. Par défaut, le thème actif est le thème rouge. La personnalisation la plus simple consiste en la modification d'une combinaison de couleurs prédéfinie en une autre ; par exemple, du thème rouge en thème bleu.

1. Naviguez vers le dossier \\geoportal\catalog\skins.
2. Ouvrez le fichier lookAndFeel.jsp dans un éditeur de texte.
3. Remarquez s'il y a trois balises <link rel="stylesheet" …>.
   • La première balise (...\tundra.css) définit la référence de feuille de style pour l'onglet Parcourir et certaines autres fonctionnalités dans l'application Web du géoportail. Il n'est pas nécessaire de modifier cet emplacement \tundra.css
   • La deuxième balise <link rel="stylesheet" …> définit l'emplacement du main.css, qui définit la combinaison de couleurs de l'interface du géoportail.
   • La troisième balise <link rel="stylesheet" …> définit l'emplacement du preview.css, définissant la combinaison de couleurs de la fonctionnalité Aperçu.
4. Par défaut, les feuilles de style Principal et Aperçu sont définies pour référencer les feuilles de style dans le dossier de thème rouge. Lorsque vous les modifiez pour référencer le dossier bleu, l'interface du Géoportail et la fonction Aperçu s'afficheront selon les styles dans le dossier de thème bleu. Modifiez ces références pour désigner le dossier bleu, comme indiqué ci-dessous :

   <link rel="stylesheet" type="text/css"
   href="<%=request.getContextPath()%>/catalog/skins/themes/blue/main.css"/>
   
   <link rel="stylesheet" type="text/css"
   href="<%=request.getContextPath()%>/catalog/skins/themes/blue/preview.css"/>
   

5. Enregistrez le fichier lookAndFeel.jsp.
6. Redémarrez l'application Web du géoportail pour que vos modifications soient prises en compte.

Création d'un thème personnalisé

Le moyen le plus simple pour créer votre propre combinaison de couleurs consiste à utiliser l'un des thèmes prédéfinis comme base et de le modifier. Faites une copie de l'un des thèmes prédéfinis qui sont disponibles prêts à l'emploi et modifiez ses images et ses définitions de classes, comme décrit dans les étapes ci-dessous.

1. Naviguez vers le dossier \\geoportal\catalog\skins\themes.
2. Copiez le dossier rouge dans le même répertoire, en lui donnant un nouveau nom (ex. : "vert")
3. Dans votre dossier récemment nommé, ouvrez le fichier main.css et modifiez-le pour définir le nouveau style
4. Ouvrez le fichier preview.css et modifiez-le également pour définir le style. Ce fichier preview.css définit les styles de la page d'aperçu des services dynamiques du géoportail.
5. Ouvrez le répertoire d'images dans votre nouveau dossier et remplacez l'une des images par la vôtre.

   Astuce:

   Pour modifier la bannière, vous pouvez faire ce qui suit :

   • Nommez l'image de votre bannière 'banner.jpg' et copiez-la dans ce dossier d'images, en écrasant le fichier banner.jpg par défaut.
   • Si l'image de votre bannière a un nom différent, vous pouvez trouver la référence au fichier banner.jpg dans le fichier main.css et la modifier pour qu'elle corresponde au nom de l'image de votre bannière.

6. Suivez les étapes dans la rubrique Changement de la combinaison de couleurs par défaut en une autre prédéfinie ci-dessus pour référencer votre nouveau thème dans le fichier lookAndFeel.jsp.

Inversion de l'icône favorite par défaut

Une icône favorite permet aux utilisateurs de distinguer rapidement la page Web du géoportail des autres pages Web dans une liste de favoris ou d'onglets qu'ils peuvent ouvrir dans un navigateur. La plupart des navigateurs Web utiliseront une icône favorite et l'endroit où elle est affichée peut varier en fonction du navigateur.

Par défaut, le géoportail utilise une icône favorite qui ressemble au logo du globe d'ESRI. Ainsi, votre organisation voudra implémenter sa propre icône favorite. Les étapes pour changer l'icône favorite en une autre qui correspond mieux à votre organisation sont les suivantes.

1. Naviguez vers le répertoire \\geoportal\catalog\skins et ouvrez le fichier lookAndFeel.jsp dans un éditeur de texte.
2. Deux paramètres définissent l'icône favorite dans ce fichier, ils sont indiqués ci-dessous. Vous n'avez pas besoin de modifier ces lignes, mais notez que le géoportail recherche une icône favorite appelée favicon.ico. Si la nouvelle image de votre icône favorite a un nom différent, vous pouvez changer le nom de votre image en favicon.ico ou changer le fichier lookAndFeel.jsp par le nom de votre image.

   <link rel="icon" type="image/x-icon"   href="<%=request.getContextPath()%>/catalog/images/favicon.ico" />
   <link rel="shortcut icon" type="image/x-icon" href="<%=request.getContextPath()%>/catalog/images/favicon.ico" />
   

3. Naviguez vers le dossier \\geoportal\catalog\images.
4. Remplacez le fichier favicon.ico dans ce dossier par votre image.
5. Redémarrez l'application Web de votre géoportail.
6. La plupart des navigateurs gardent les icônes favorites dans un cache. Les utilisateurs devront effacer le cache de leur navigateur pour voir la nouvelle icône favorite.