Ajout d'une barre d'état au thème simple

La barre d'état est une fonction facultative qui affiche les messages système.

Pourquoi et quand exécuter cette tâche

La barre d'état affiche les messages d'erreur, d'avertissement et d'information au début de la page. Par exemple, si vous tentez d'ajouter un contenu restreint à une page, un message apparaît dans la barre d'état pour expliquer la restriction. Par défaut, le thème simple n'inclut pas la barre d'état, mais vous pouvez en ajouter une dans une nouvelle zone de contenu dynamique personnalisée.

Procédure

  1. Créez un fichier WAR en ouvrant Eclipse et en cliquant sur Fichier > Nouveau > Projet Web dynamique.
  2. Créez la structure de répertoire suivante au-dessous de votre répertoire WebContent : WebContent/themes/html/YourResourceRootDirectory. Le répertoire racine de ressources est référencé dans le fichier XML que vous utilisez pour déployer votre nouveau fichier WAR. Dans cet exemple, le répertoire racine de ressources est customDynamicSpots.
  3. Créez un fichier JSP d'état à l'aide de l'exemple de code suivant : 
    <%@ page session="false" buffer="none"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%-- The div in which the statusbar prints out any message it receives --%>
<div class="wpthemeInner">
   <div id="wpthemeStatusBarContainer" class="wpthemeStatusBarContainer">
      <%-- Renders a message in the status bar alerting the user that javascript is disabled. Javascript is required for the statusbar
            to work --%>
          <noscript>
            <div class="wpthemeMessage" role="alert" wairole="alert">
              <img class="wpthemeMsgIcon wpthemeMsgIconError"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Error" />
              <span class="wpthemeAltText">Error:</span><div class="wpthemeMessageBody"> Javascript is disabled. You need to enable javascript in order for this theme to operate properly.</div>
          </div>
      </noscript>
   </div>
</div>
  4. Créez un fichier plugin.xml dans votre répertoire WebContent à l'aide de l'exemple de code suivant :
    Remarque : Cet exemple de code utilise le répertoire dynamicContentSpots qui contient le fichier JSP.
    <?xml version="1.0" encoding="UTF-8"?>
<plugin id="com.yourcompany.customtheme" name="Custom Theme Modules" provider-name="Your Company" version="1.0.0">
   <extension id="wp_dynamicContentSpots_custom"
point="com.ibm.portal.resourceaggregator.module">
      <module id="wp_dynamicContentSpots_custom">
         <contribution type="dyn-cs">
            <sub-contribution type="markup" ref-id="theme_status">
               <uri value="mc:wp_status_bar@res:{war:context-
root}/themes/html/customDynamicSpots/status.jsp"/>
            </sub-contribution>
         </contribution>
      </module>
   </extension>
</plugin>
  5. Pour créer le fichier WAR, cliquez avec le bouton droit de la souris sur le projet et sélectionnez Exporter > Fichier WAR.
  6. Installez le fichier WAR.
    1. Log in to the WebSphere® Integrated Solutions Console.
    2. Cliquez sur Applications > Types d'application > Application d'entreprise WebSphere. Ensuite, cliquez sur Installer.
    3. Sélectionnez votre fichier WAR et cliquez sur Suivant.
    4. Sélectionnez Raccourci et cliquez sur Suivant.
    5. Cliquez sur Suivant pour accepter les paramètres par défaut qui sont présentés sur les pages suivantes. Arrêtez-vous lorsque vous atteignez la page de mappage des racines de contexte pour les modules Web.
    6. Sur la page de mappage des racines de contexte pour les modules Web, définissez votre racine de contexte. Vous ferez référence à cette racine de contexte lorsque vous déploierez le fichier WAR. Dans cet exemple, la racine de contexte est /custom-dyn-cs.
    7. Sauvegardez vos modifications. Dans la liste des applications, sélectionnez votre fichier WAR et cliquez sur Démarrer.
  7. Déployez le fichier WAR en créant un nouveau fichier XML. Vous pouvez utiliser l'exemple de code suivant pour créer le fichier :
    1. Créez un fichier XML. Vous pouvez utiliser l'exemple de code suivant pour créer le fichier : 
      <?xml version="1.0" encoding="UTF-8"?>
<request
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xsi:noNamespaceSchemaLocation="PortalConfig_8.0.0.xsd"
   type="update" create-oids="true">
   <portal action="locate">
      <skin action="update" active="true" context-root="/wps/simpleTheme" default="false" domain="rel"
objectid="ZK_00000000000000AQ78VEJK2001" resourceroot="Standard" type="default"
uniquename="ibm.portal.SimpleStandard">
         <localedata locale="en" prefix="skin.standard">
            <title>Simple - Standard</title>
         </localedata>
      </skin>
      <theme action="update" active="true" defaultskinref="ZK_00000000000000AQ78VEJK2001"
uniquename="theme.dyn-cs.Custom" resourceroot="customDynamicSpots" context-root="/custom-dyn-cs">
         <localedata locale="en">
            <title>Custom Dynamic Content</title>
         </localedata>
         <parameter name="com.ibm.portal.Hidden" type="string" update="set"><![CDATA[true]]></parameter>
      </theme>
   </portal>
</request>
    2. Accédez à votre site de portail. Click the Administration menu icon. Then, click Portal Settings > Import XML.
    3. Sélectionnez votre fichier XML et cliquez sur Importer.
  8. Ajoutez le nouveau module à votre profil.
  9. Ajoutez votre nouvelle zone de contenu dynamique personnalisée au modèle de thème comme premier élément du répertoire MainContent à l'aide de la chaîne de code suivante : <a rel="dynamic-content" href="dyn-cs:id:theme_status"></a>.

Résultats

La barre d'état est maintenant ajoutée à votre thème simple.