+

Search Tips   |   Advanced Search

Class attributes for portlets on static pages


When you place a portlet on a static HTML page to be rendered by the portal, use a suitable CSS file to format the portlet. The CSS file makes use of the portlet microformat. We can make use of this microformat to render portlets on the static HTML page with a skin of the choice. When we write the static page, we can use CSS or JavaScript techniques to convert the microformat into a friendly user interface. The portlet references in the static HTML page are replaced by the content of the portlet and the portlet microformat.

Refer to the following list of class attributes for more information. An example of a portlet rendered from HTML is also provided.


Rendering a portlet from HTML

The following is an example of a microformat representation for a portlet window on a 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='portletsperation-view selected' >
               <a href='?uri=wp.operations:onPortletModeView
                  (7_CGAH47L00OGRB02DA9LR6H1024)'
                  rel='view' >Back</a>
            </li>
            <li class='portletsperation-normal selected' >
               <a href='?uri=wp.operations:onWindowStateNormal
                  (7_CGAH47L00OGRB02DA9LR6H1024)'                    rel='normal' >Restore</a>
            </li>
            <li class='portletsperation-minimized' >
               <a href='?uri=wp.operations:onWindowStateMinimized
                  (7_CGAH47L00OGRB02DA9LR6H1024)'                    rel='minimized' >Minimize</a>
            </li>
            <li class='portletsperation-maximized' >
               <a href='?uri=wp.operations:onWindowStateMaximized
                  (7_CGAH47L00OGRB02DA9LR6H1024)'                    rel='maximized' >Maximize</a>
            </li>
            <li class='portletsperation-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>


Parent: Define and render a static portal page in HTML
Related reference:
Example HTML markup for defining a portal page
Class attributes for a portlet container on static pages
Class attributes for components on static pages
Class attributes for iWidgets on static pages
Navigation options for static pages
Portlets for adding dynamic elements to static pages
Related:

iWidget Specification V 2.1: http://public.dhe.ibm.com/software/dw/lotus/mashups/developer/iwidget-spec-v2.1.pdf