Options de navigation pour des pages statiques

Vous pouvez associer une navigation à vos pages statiques en vous servant du thème du portail ou à l'aide du microformat de navigation.

Navigation via le thème du portail

Pour associer une navigation à des pages statiques à l'aide du thème de portail, supprimez les balises <html> et <head> du contenu de vos pages statiques. En procédant ainsi, le portail présente le contenu comme une navigation.

Navigation via le microformat de navigation

Si dans votre portail, vos pages HTML sont entièrement statiques, munies de balises <html> de début et de fin, vous pouvez inclure des liens vers d'autres pages du portail. Dans ce cas, vous rédigez votre code HTML en veillant à inclure dans la page un portlet de navigation pour que le microformat de navigation soit utilisé. Reportez-vous à la liste suivante des attributs classe et à l'exemple d'option de navigation microformat.

premier: Cet attribut indique le premier enfant d'une liste. Obligatoire pour un style CSS.
Dernier: Cet attribut indique le dernier enfant d'une liste. Obligatoire pour un style CSS.
développé: Cet attribut indique un noeud développé. Un nœud ne peut être développé que s'il possède des enfants et que son état de navigation est défini sur expanded.
condensé: Cet attribut indique un noeud réduit. Un nœud ne peut être réduit que s'il possède des enfants et que son état de navigation est défini sur collapsed.
page-actions: Cet attribut répertorie les actions disponibles sur la page. D'une manière générale, cette liste contient les actions utilisées pour développer ou réduire les noeuds de navigation. Pour une page actuellement sélectionnée dans la navigation, cette liste contient également les actions disponibles pour cette page.
sélectionné: Cet attribut indique la page actuellement sélectionnée dans la navigation.
pageoperation-expand: Cet attribut développe un noeud réduit.
pageoperation-collapse: Cet attribut réduit un noeud développé.

Exemple de l'option de navigation avec microformat

L'exemple suivant est une représentation de microformat associé à une navigation pour une page :

<div class="xoxo portal-navigation">
  <ul>
    <li class="first expanded">
      <a href='/wps/myportal/!ut/p/c5/ . . . . . '>Home</a>
      <ul>
        <li class="first">
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Web 2.0 Introduction</a>
        </li>
        <li>
          <a href='/wps/myportal/!ut/p/c5/e/'>Web 2.0 Portlets</a>
        </li>
        <li class="collapsed">
          <ul class="xoxo page-actions">
            <li class="pageoperation-expand">
              <a href='/wps/myportal/!ut/p/c5/e/'>Expand</a>
            </li>
          </ul>
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Static Page Aggregation</a>
        </li>
        <li>
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Navigation Page</a>
        </li>
        <li>
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Nav1</a>
        </li>
        <li>
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>IBM</a>
        </li>
        <li>
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>dnd</a>
        </li>
        <li>
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>derivable</a>
        </li>
        <li>
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>deriv1</a>
        </li>
        <li class="selected last">
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Container Test</a>
        </li>
      </ul>
    </li>
    <li class="collapsed">
      <ul class="xoxo page-actions">
        <li class="pageoperation-expand">
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Expand</a>
        </li>
      </ul>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Administration</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Resource Policy Editor</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Resource Policy Editor CA</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Domino Integration</a>
    </li>
    <li class="collapsed">
      <ul class="xoxo page-actions">
        <li class="pageoperation-expand">
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Expand</a>
        </li>
      </ul>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Templates</a>
    </li>
    <li class="collapsed">
      <ul class="xoxo page-actions">
        <li class="pageoperation-expand">
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Expand</a>
        </li>
      </ul>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Site 
      Map</a>
    </li>
    <li class="collapsed">
      <ul class="xoxo page-actions">
        <li class="pageoperation-expand">
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Expand</a>
        </li>
      </ul>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>About</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Login</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Edit My Profile</a>
    </li>
    <li class="collapsed">
      <ul class="xoxo page-actions">
        <li class="pageoperation-expand">
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Expand</a>
        </li>
      </ul>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Page Customizer</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Page Properties</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Template Parameters</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Template and Application Properties</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Template and Application Layout</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Application Roles</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Application Membership</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Policy Status</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Organize Favorites</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Search Seedlist</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>People Palette</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Content Palette</a>
    </li>
    <li class="collapsed">
      <ul class="xoxo page-actions">
        <li class="pageoperation-expand">
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Expand</a>
        </li>
      </ul>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Quick Links</a>
    </li>
    <li class="collapsed">
      <ul class="xoxo page-actions">
        <li class="pageoperation-expand">
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Expand</a>
        </li>
      </ul>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Theme 
      Links</a>
    </li>
    <li>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Open Tasks</a>
    </li>
    <li class="last collapsed">
      <ul class="xoxo page-actions">
        <li class="pageoperation-expand">
          <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Expand</a>
        </li>
      </ul>
      <a href='/wps/myportal/!ut/p/c5/ . . . . . /'>Application Root</a>
    </li>
  </ul>
</div>

Navigation en ligne

La fonction de navigation en ligne peut être activée en affectant aux métadonnées de page spa.ex.anchor.enabled la valeur true. La valeur par défaut est false. Avec cette fonction, le marquage de la page statique peut contenir des liens <a> qui pointent sur des pages de portail différentes utilisant des URL relatives. L'attribut href est réécrit lors du rendu et remplacé par l'URL de portail qui pointe sur cette page. Les URL relatives dans le marquage source utilisent le chemin convivial de la page en cours comme URL de base. La référence relative est appliquée à cette URL de base et le chemin convivial qui en résulte est utilisé pour prendre en charge la page cible. Cette fonction ne fonctionne que si la page en cours et la page ciblée ont un chemin convivial.

Par exemple, si le chemin convivial de la page en cours est /home/mypage et si celle-ci contient le marquage <a href="child">child_page</a>, ce dernier est réécrit vers une URL de portail qui pointe sur la page dont le chemin convivial est /home/mypage/child.

Notes :

Si l'attribut href d'un Lien d'ancrage contient une URL absolue, aucune réécriture n'est effectuée et le lien continue de pointer vers l'URL absolue.
Si l'attribut href d'un lien d'ancrage contient une URL qui commence par /, l'URL est résolue en chemin convivial par la logique de réécriture. S'il n'existe aucune page pour ce chemin, le système adopte un lien vers une autre application sur le même serveur et laisse la valeur de l'attribut href inchangée.
Si l'attribut href d'un lien d'ancrage commence par ?, le reste est considéré comme des paramètres de requête et aucune réécriture n'est effectuée.