Attributs de classe pour des portlets sur des pages statiques

Si vous placez un portlet sur une page HTML statique pour qu'elle soit présentée par le portail, formatez le portlet à l'aide du fichier CSS approprié. Le fichier CSS utilise le microformat du portlet. Vous pouvez utiliser ce microformat pour présenter des portlets sur votre page HTML statique avec le skin de votre choix. Lorsque vous rédigez la page statique, les techniques CSS ou JavaScript vous permettent de convertir le microformat en une interface utilisateur conviviale. Les références de portlet de la page HTML statique sont remplacées par le contenu du portlet et le microformat du portlet.

Pour plus d'informations, reportez-vous à la liste d'attributs classe suivante. Vous trouverez également un exemple de présentation à partir de HTML.

portlet-window

Cette valeur de l'attribut class identifie la balise <div> l'englobant pour la fenêtre de portlet, puisqu'elle a été définie par le concepteur Web lorsqu'il a rédigé la page statique. L'attribut de style et l'attribut de nom contiennent les mêmes informations que celles fournies pas l'auteur de la page sur l'élément <div> qui a référencé le portlet. L'attribut ID contient l'ID objet de la fenêtre. Reportez-vous à l'exemple suivant pour une présentation d'une page à partir d'un marquage HTML complet :

<html>
   <head>
      <title>Sample Static Page</title>
   </head>
   <body>
      <p>This is a static page example.</p>
      <p>Welcome portlet</p>
      <div class="portlet-container" name="portletContainer1">
         <div class="portlet-window" name="portletWindow1" 
              style="portlet-definition:wps.p.Welcome To WebSphere Portal">
         </div>
      </div>
   </body>
</html>

portlet-info

Cette valeur de l'attribut class ouvre la section des métadonnées du portlet. Toutes les métadonnées sont encapsulées dans ce conteneur, elles peuvent donc être masquées par un CSS. La classe xoxo introduit une liste d'éléments.

portlet-title

Cette valeur d'attribut class représente le titre localisé du portlet. L'attribut lang identifie l'environnement local réel.

portlet-actions

Cette valeur de l'attribut class répertorie les différentes actions ou opérations du portlet qui peuvent être invoquées dans la fenêtre du portlet.

Remarque : De telles opérations ne sont pas nécessairement des actions dans le sens HTTP. En revanche, certaines actions sont des interactions sécurisées, tandis que d'autres peuvent être non-sécurisée, puisqu'elle modifient le serveur. Dans la liste des actions, chaque interaction est soit représentée comme un lien pour signifier une interaction sécurisée ou comme un form pour indiquer une interaction non sécurisée.

portlet-action

Cette valeur de l'attribut class décrit les véritables actions ou opérations. Ces actions qui devraient résulter d'une opération idempotente, sont indiquées par l'attribut sélectionné. En outre, chaque action est classée par un attribut spécifique de l'action pour permettre à une CSS de styliser ces actions, par exemple, par l'ajout d'icônes spécifiques de l'action. La liste des actions possibles est calculée sur le serveur, au moyen du flux des opérations. Ce flux est extensible, ce qui permet d'ajouter de nouvelles opérations au fil du temps.

portlet-window-body

Cette valeur de l'attribut class indique le corps du portlet.

iw-iWidiget

Cette valeur de l'attribut class identifie le début du microformat pour le placement d'une instance d'iWidget dans une page statique. Des informations supplémentaires sur le microformat d'iWidget permettant l'inclusion d'iWidgets dans un ensemble plus vaste de marquages, par exemple une page de portail, sont fournies par la spécification iWidget et dans la rubrique relative aux attributs class des iWidgets dans les pages statiques.

sélectionné

Cette valeur de l'attribut class identifie un élément sélectionné, il s'agit du portlet proprement dit ou d'une action. Si elle apparaît sur la balise <div> pour la fenêtre de portlet, cela signifie que le portlet a été la cible de l'interaction ayant produit la page.

portal-drag-source

Il s'agit d'une classe facultative sur la fenêtre du portlet. Il indique que les utilisateurs peuvent faire glisser cette fenêtre de portlet sur l'écran. Les conditions de validité de cet attribut sont les suivantes : la fenêtre de portlet doit faire partie d'un conteneur modifiable, l'utilisateur doit posséder les droits permettant de modifier la page et le conteneur ne doit pas être verrouillé. Reportez-vous au microformat du conteneur pour voir le mode de représentation d'une cible de dépôt et comment exécuter efficacement une opération de glisser-déposer.

Remarque : Une action glisser-déposer est déclenchée depuis le côté client, mais exécutée sur le serveur.

xoxo

Cet attribut indique que ce qui suit est une liste d'éléments.

Exemple de présentation d'un portlet à partir de HTML

L'exemple suivant présente une représentation de microformat pour une fenêtre de portlet sur une page :

<div class='portlet-window' id='7_CGAH47L00OGRB02DA9LR6H1024' name='window2' >
   <ul class='xoxo portlet-info' >
      <li class='portlet-title' lang='en'>
         PetStorePortlet
      </li>
      <li class='portlet-actions' >
         Actions
         <ul class='xoxo portlet-action' >
            <li class='portletoperation-view selected' >
               <a href='?uri=wp.operations:onPortletModeView
                  (7_CGAH47L00OGRB02DA9LR6H1024)'
                  rel='view' >Back</a>
            </li>
            <li class='portletoperation-normal selected' >
               <a href='?uri=wp.operations:onWindowStateNormal
                  (7_CGAH47L00OGRB02DA9LR6H1024)' 
                  rel='normal' >Restore</a>
            </li>
            <li class='portletoperation-minimized' >
               <a href='?uri=wp.operations:onWindowStateMinimized
                  (7_CGAH47L00OGRB02DA9LR6H1024)' 
                  rel='minimized' >Minimize</a>
            </li>
            <li class='portletoperation-maximized' >
               <a href='?uri=wp.operations:onWindowStateMaximized
                  (7_CGAH47L00OGRB02DA9LR6H1024)' 
                  rel='maximized' >Maximize</a>
            </li>
            <li class='portletoperation-delete_portlet' >
               <form method='POST' action='?uri=wp.operations:onDeletePortlet
                     (7_CGAH47L00OGRB02DA9LR6H1024)' 
                     rel='delete_portlet' >Delete</form>
            </li>
         </ul>
      </li>
   </ul>
   <div class='portlet-window-body' >
   </div>
</div>