Skins

Skins represent the border rendering around components, such as row containers, column containers, or portlets. The skin is loaded in the portal page by the <portal-core:pageRender/> tag. Skins are installed independently from themes. However, a skin can be associated with a theme.

Skins define more than the look and feel of portlets; they define the look and feel of components. These components include the containers and controls. This hierarchical structure is depicted in the following diagram.

Figure 1. Underlying layout of the Home screen


The components of the skin are called in the following order.

  1. The <portal-core:pageRender/> tag in the Home screen, Home.jsp, displays the components for the selected node. The components are implemented as row containers, column containers, and controls depending upon the portal layout that is defined in the topic Portal page customization. Controls are displayed using Control.jsp. The figure in the Underlying layout of the home screen topic depicts one row container that has two column containers, each containing two portlets.

  2. The row and column containers display their nested components using either Java code or the <portal-skin:layoutNodeLoop/> and <portal-skin:layoutNodeRender/> elements.

  3. Each portlet is rendered by the <portal-skin:portletRender/> tag within the Control.jsp. file. The control also builds the border and title bar around the portlet output.

    Some of the icons in the portlet title bar have an impact on performance.


Provided skins

The IBM, Noskin, ThinSkin, and IFRAME skins are provided by WebSphere Portal for rendering portlets.

Page Builder - Standard and Page Builder - Thin are two new skins that can be assigned to the Page Builder theme. These skins are located in WP_PROFILE/installedApps/node_name/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/skins/html

Usage notes for the provided skins


More about the IFRAME skin

The IFRAME (inline frame) skin that is provided has a more practical purpose than the other skins. It renders portlet content in an HTML IFRAME on the page. IFRAMES are treated as separate browser windows and are used for the inclusion of external objects including other HTML documents.

The IFRAME skin is especially useful for portlets that are slow to render, allowing the rest of the portal page to render without waiting on the content from the portlet within the IFRAME. The width of this skin is set to 100% and height is set to 250 pixels.

To change this setting, use following steps:

  1. Locate the /IFrame subdirectory in the ../skins/html directory.

  2. Edit the file Control.jsp.

  3. Locate the markup for the IFRAME:

      <iframe src='<%wpsURL.write(out);%>' SCROLLING="auto" FRAMEBORDER="0" Width="100%" height="250">

  4. Change the width and height attributes of this tag.

  5. Save and close the file.


Automatic portlet maximization

In earlier versions of WebSphere Portal, the state of a portlet was automatically set to maximize when the portlet mode was changed from view mode to another mode. For example, when switching to edit mode, the portlet would be changed to maximized state until the user changed back to view mode. This automatic maximize behavior has been removed by default, but can be implemented at the following levels.

Attention: Automatic maximization can create problems for standard portlets, which are not developed to be maximized when going into edit or configure mode, and therefore do not provide the correct window state information when creating Done or Cancel buttons. Also, in IBM portlets, automatic maximization can lead to undesired effects in conjunction with return URIs created by the <portletAPI:createReturnURI> and <portal-skin:portletBack> tags or the createReturnURI() method. Portlet modes and window states are orthogonal, such that combinations of portlet modes and windows states may occur that were not present before the user click Back to return to view mode.


Parent

Portal page structure

December 14, 2011
   

 

File Type Size File Name Created On
41 KB skin_layout.jpg 12/14/11 5:13 PM
Apr 1, 2011 1:26:17 PM

});


+

Search Tips   |   Advanced Search