Ajouter un autre onglet à l’interface du géoportail

Ajouter un autre onglet à l’interface du géoportail

Les étapes suivantes décrivent comment ajouter un autre onglet à l’interface de votre géoportail. Au cours de ces étapes, nous ajoutons un onglet (d’exemple) nommé Links susceptible d'héberger une page Web, intégré à un système de gestion du contenu. Ces étapes peuvent également servir à ajouter d'autres onglets conformément aux spécifications de votre géoportail.

Remarque :

Cette rubrique suppose que vous comprenez la structure en tuile de la page jps de l’application Web du géoportail, telle qu’elle est décrite dans la rubrique Mise en page et tuiles de l’application Web du géoportail.

1. Créer le dossier et les pages JSP auxquelles le nouvel onglet est destiné à accéder
   • Vous allez d’abord créer le dossier dans lequel seront situées les fonctionnalités du nouvel onglet. Accédez au répertoire \\geoportal\catalog, puis créez un dossier. Dans cet exemple, nous appelons le nouveau dossier quicklink.
   • Vous allez maintenant créer la page jsp parent destinée à accueillir la page body.jsp du nouvel onglet. Créez un fichier texte et nommez-le. Enregistrez-le en lui attribuant l’extension de fichier .jsp. Dans notre exemple, nous créons quicklink.jsp.
   • Collez le code suivant dans le nouveau fichier .jsp vide, en remplaçant quicklink dans le code par le nom de votre nouveau dossier. Notez que le paramètre de valeur tiles: put name fera référence à body.jsp, que nous allons créer ensuite :

     <% // quicklink.jsp - Link pages (tiles definition) %>			
     <%@taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>			
     <%@taglib uri="http://www.esri.com/tags-gpt" prefix="gpt" %>						
     <% // initialize the page %>			
     <gpt:page id="catalog.quicklink.home"/>			
     <tiles:insert definition=".gptLayout" flush="false" >			
     	<tiles:put name="body" value="/catalog/quicklink/quicklinkBody.jsp"/>			
     </tiles:insert>
     			

   • Vous allez maintenant créer la page Body destinée à renfermer le contenu réel du nouvel onglet. Créez un autre fichier .jsp vide dans le nouveau dossier et donnez-lui le même nom que celui que vous avez attribué au fichier .jsp que vous venez de créer, mais en ajoutant le suffixe Body. Dans notre exemple, le nom est quicklinkBody.jsp. Dans ce nouveau fichier, collez le code suivant. L’exemple ci-dessous fait référence au contenu Web spécifié dans l’attribut iframe id src. Il utilise un IFrame avec Javascript pour afficher une page importée à la taille appropriée à la fenêtre du navigateur. Dans notre exemple, la page importée est http://www.esri.com.

     <% // quicklinkBody.jsp - Links page (JSF body) %>
     <iframe id="frame" src="http://www.esri.com" style="overflow-y:auto;overflow-x:hidden"  width="100%" frameborder="0" marginheight="0" marginwidth="0" height="100%" >
     </iframe>
     
     <script type="text/javascript">
     function resizeIframe() {
         var height = document.documentElement.clientHeight;
         height += document.getElementById('frame').offsetTop;
         height -= 20; /* whatever you set your body bottom margin/padding to be */    document.getElementById('frame').style.height = height +"px";};
     document.getElementById('frame').onload = resizeIframe;
     window.onresize = resizeIframe;
     </script>
     

2. Créer le nouvel onglet et le référencer
   • Accédez au dossier \\geoportal\catalog\skins\tiles et ouvrez le fichier primaryNavigation.jsp dans un éditeur de texte.
   • Collez le code suivant au bas du fichier, juste au-dessus de </h:form>, en modifiant le code collé en fonction des noms que vous avez donnés à vos pages jsp et à vos dossiers. Notez que l’id quicklinkHome est un identifiant unique que vous affectez à cet onglet. L’action catalog.quicklink.home configure ce lien pour ouvrir les fichiers du dossier créé précédemment : \\geoportal\catalog\quicklink. L’attribut value est le bean qui référence le nom que l’utilisateur verra apparaître sur le nouvel onglet, comme le définit le fichier gpt.properties que nous mettrons à jour ultérieurement. L’attribut styleClass fait référence au style de l’onglet. N’oubliez pas de modifier [catalog.quicklink] dans l’attribut styleClass afin de référencer le dossier que vous avez référencé dans l’attribut action. Utilisez l’exemple ci-dessous pour vous aider.

     <h:commandLink 
             	id="quicklinkHome" 
             	action="catalog.quicklink.home" 
             	value="#{gptMsg['catalog.quicklink.home.menuCaption']}" 
           	styleClass="#{PageContext.tabStyleMap['catalog.quicklink']}"/>
     

   • Vous devez définir la nouvelle page ouverte par votre onglet dans le fichier gpt-faces-config.xml. Accédez au dossier \\geoportal\WEB-INF et ouvrez le fichier gpt-faces-config.xml dans un éditeur de texte. Collez le code suivant juste au-dessous de navigation-rule pour <!-- Extract pages -->. Modifiez le paramètre from-outcome pour faire référence à l’attribut action de l’étape précédente. Le paramètre to-view-id fait référence à la première page jsp que vous avez créée :

       
     <!-- link page -->
       <navigation-rule>
         <navigation-case>
           <from-outcome>catalog.quicklink.home</from-outcome>
           <to-view-id>/catalog/quicklink/quicklink.jsp</to-view-id>
           <redirect/>
         </navigation-case>
       </navigation-rule>
     

3. Mettre à jour le fichier gpt.properties
   • Accédez au dossier \\geoportal\WEB-INF\classes\gpt\resources et ouvrez le fichier gpt.properties dans un éditeur de texte.
   • Mettez le fichier à jour en saisissant la nouvelle valeur de clé que vous avez référencée dans le fichier primaryNavigation.jsp. Le terme indiqué dans le bean sera le texte du nouvel onglet. L’entrée caption située sous l’entrée menuCaption apparaît en haut de la page lorsque l’utilisateur clique sur le nouvel onglet et accède à la page. L’exemple ci-dessous montre les deux nouvelles entrées pour un onglet appelé Links et le texte d’accueil qui apparaît juste au-dessous de l’onglet lorsqu’un utilisateur clique dessus.

      
     # quicklink page ###################
     catalog.quicklink.home.menuCaption 	= Links
     catalog.quicklink.home.caption = Welcome to the Link Page
     

4. Enregistrez les fichiers que vous avez modifiés et redémarrez l’application Web du géoportail. Le nouvel onglet doit apparaître sur la page d’accueil.