Attributs classe pour les composants sur les pages statiques

Si vous placez un composant sur une page HTML statique pour qu'il soit présenté par le portail, formatez le portlet à l'aide du fichier CSS approprié. Le fichier CSS utilise le microformat de composant. Vous pouvez utiliser ce microformat si vous voulez présenter des composants sur votre page HTML statique avec un habillage 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 composant de la page HTML statique sont remplacées par le contenu du composant et le microformat du composant.

Pour plus d'informations, reportez-vous à la liste suivante d'attributs de classe pour des composants de portlet. Un exemple de composant présenté à partir d'un marquage HTML est également fourni.

portlet-window / component-control

Cette valeur de l'attribut class identifie la balise <div> contenant pour la fenêtre de composant suivant la procédure définie par le concepteur Web lorsque la page statique a été écrite. L'attribut de style et l'attribut de nom contiennent les informations fournies par l'auteur de la page dans l'élément <div> qui a référencé le composant. L'attribut id-ObjectID est l'ID objet préfixé de la fenêtre de composant, qui est globalement unique dans le portail. 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 component</p>
      <div class="component-container" name="componentContainer1">
         <div class="portlet-window component-control" name="componentWindow1" 
              id="Z7_2QC68B1A08A0B0IAUQ7VBO20G3"
              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 données sont encapsulées dans ce conteneur pour pouvoir être masquées par 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 de portlet ou les opérations qui peuvent être lancé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 d'action pour permettre à une CSS de styliser ces actions, par exemple, par l'ajout d'icônes d'action. La liste des actions possibles est calculée sur le serveur à l'aide 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-iWidget

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 à l'inclusion d'iWidgets dans une page statique.

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

Cette valeur est une classe facultative dans la fenêtre du portlet. Il indique que les utilisateurs peuvent faire glisser cette fenêtre de portlet sur l'écran. Cet attribut est valide uniquement si la fenêtre de portlet fait partie d'un conteneur de portlet modifiable et si l'utilisateur dispose des droits permettant de modifier la page et si le conteneur n'est pas verrouillé. Reportez-vous au microformat du conteneur pour voir comment une cible de dépôt est représentée et comment l'opération de glisser-déposer peut être effectuée.

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

xoxo

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

Exemple d'affichage de composant à partir d'un marquage 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>