+

Search Tips   |   Advanced Search

Example HTML markup for defining a portal page


Use these code samples as examples of HTML markup to create a portal page.

The HTML markup that we use to create a portal page has a direct effect on how the page is rendered in the portal. This topic provides examples of the HTML markup that we can use in a source file to produce various types of content in a portal page.

We can include portlets in a static HTML file using the class attribute portlet-window on a <div> element. This marked up <div> element is replaced by the dynamic content of the portlet when the page is rendered. Unless the portlet is embedded in a container, it cannot be moved or deleted by the page customizer or other portal mechanisms. To delete such a portlet you need to replace the static page with an updated HTML file that does not contain the portlet. In addition to the class attribute portlet-window, a portlet <div> element needs to contain the following information:

The parser decodes HTML documents and treats the following tags specifically:

Example:

<div class="portlet-window" name="instancename"       style="portlet-definition:definitionname"></div>
We can also parametrize portlet windows directly in the HTML document. These parameters are passed on as edit default preferences to the portlet instances at page creation or page update time. The parameters consist of name-value pairs that are formatted using an HTML definition list. Example:
<div class="portlet-window" name="<instancename>"       style="portlet-definition:<definitionname>">
   <dl>
      <dt>key1</dt>
      <dd>value1</dd>
      <dt>key2</dt>
      <dd>value2</dd>
   </dl>
</div>
Portlet containers contain portlet windows that can be rearranged or deleted by a page editor, for example, the page customizer. In addition we can add new portlet windows after the page has been deployed. The portlet windows defined in the static page as the content of the container are the portlets that are initially part of the container. Containers cannot be nested.

Similar to portlet windows, containers are marked up using the class attribute portlet-container on a <div> tag. In addition specify the following:

Example:

<div class="portlet-container" name="holdername">
   <div class="portlet-window" name="instancename"          style="portlet-definition:definitionname"></div>
</div>


Render a page from full HTML markup

When you include the beginning <html> and ending </html> markup in the source file, the resulting portal page is rendered without the portal theme, or surrounding navigation frame. The user sees only the layout that you code inside the HTML file. An example of the HTML markup looks like this:

<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>

The values given for the name attributes must be unique in the scope of the page.

With this example, all information that the portal requires to render the page is well known at the time when you create and edit the static page.


Render a page from an HTML fragment

When the HTML source file is a fragment of HTML markup, and does not include the opening or closing <html> markup, then the page is rendered inside the portal navigation frame. An example of this HTML coding:

<p>This page has one Welcome Portlet.</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>
The values given for the name attributes must be unique in the scope of the page.


Parent: Define and render a static portal page in HTML
Related reference:
Class attributes for portlets on static pages
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