Documentation‎ > ‎WebSphere Portal‎ > ‎

Understanding IBM Skin

IBM skin

In IBM WebSphere Portal 6.1, Skin represents border around portlet, icons on title bar, portlet context menu. Technically, skin consists of JSPs, images, JavaScript files etc. Unfortunately, there is very little documentation on prepackaged WebSphere Portal skins. However, understanding these, will help to customize existing skins and create new skins that are suitable for your portal.

This article explains how IBM skin works so that you can make changes the way you wanted for your portal site. The file control.jsp is entry point of execution of skin. The control.jsp for IBM skin is located in the following directory.

C:\ibm\WebSphere\profiles\wp_profile\installedApps\giri\wps.ear\wps.war\skins\html\IBM

Here is simple outline of control.jsp illustrating the main elements used inside JSP.


<dng:drag>
< div >
<table>
<tr>
<td>
draghandle which embeds title
</td>
<td class="wpsPortletIcons" >
portlet context menu are displayed here using <a> element
elements.
</td>
</table>
<div>
portletRender tag is used to display contents from portlet.
<div>
</div>
</dnd:drag>


The following are step by step instructions illustrating the contents of control.jsp.

  1. Whole contents portlet title bar and contents of portlet are displayed inside drag JSP tag which acts as root element.

    <dnd:drag namespace="wp" type="portlet_windowID" value="<
    %=currentLayoutNodeStr%>" includeDragHandle="false" validator="com.ibm.wps.dnd.impl.DNDDragPortletValidator">


  2. The following division is embedded in drag tag and it is only child element in drag JSP tag.

    <div class="wpsPortlet" id="mouseoverTable_<%= myPortletID %>"
    <%if(isJSAvail){%>
    <portal-logic:unless portletMode='help'>
    onmouseover="menuMouseOver('<%= myPortletID %>', '<portal-logic:urlFindInTheme file='images/topNav/menu_selected.gif' />')"
    onmouseout="menuMouseOut('<%= myPortletID %>', '<portal-logic:urlFindInTheme file='images/topNav/menu_selected_disabled.gif' />')"
    </portal-logic:unless> <%}%> >

    This division contains html and JSP tags to display portlet title bar as well as contents of portlet. The division has two attributes assigned. The first attribute onmouseover calls method menuMouseOver when user places cursor over anywhere inside portlet. This method sets src attribute of image element explained in step 5 to the icon which looks triagle icon. When user moves cursor outside of portlet, menuMouseOut method is called which sets src attribute of image to make the image disappear. The child elements of this tag are explained in the following steps.

  3. The first child element of division tag is table element. The table contains two cell elements. The left cell element contains dragHandle. This tag internally contains portletTitle JSP tag to display title of portlet. When user moves, cursor over this area, you will see drag icon, upon clicking on which it allows user to move portlet.

    <dnd:dragHandle>
    <div style="width:100%;">

    <portal-skin:portletTitle>
    <portal-fmt:problem bundle="nls.problem"/>
    </portal-skin:portletTitle>
    <img alt="" style="border:0; text-align: <%= bidiAlignRight %>;" width="1" height="22"
    src='<portal-logic:urlFindInSkin file="title_minheight.gif"/>'>
    </div>
    </dnd:dragHandle>

  4. The next cell element contains two links. The first link contains link to skip content of the portlet.

    <a href="#skipportlet<%= myPortletID %>"
    onfocus="menuMouseOver('<%= myPortletID %>', '<portal-logic:urlFindInTheme file='images/topNav/menu_selected.gif' />');" >
    <img style="border: 0;" align="absmiddle" src='<%=wpsBaseURL%>/images/icons/ClearPixel.gif'
    alt="<portal-fmt:text key='link.skiptonextportlet' bundle='nls.engine'/>"
    title="<portal-fmt:text key='link.skiptonextportlet' bundle='nls.engine'/>">
    </a>

  5. The second cell element contains a link, clicking upon which it populates portlet context menu to show actions to minimize, maximize portlet etc.

    <a id='menu_<%= myPortletID %>' href='javascript:void(0);'
    onkeypress="javascript:accessibleShowMenu(event, '<%= myPortletID %>',
    menuNoActionsText_<%= myPortletID %>, <%=isRTL%>, menuPortletURL_<%= myPortletID %>,
    '<portal-logic:urlFindInTheme file="images/context_loading.gif" />');"
    onclick="javascript:showPortletMenu('<%= myPortletID %>' , menuNoActionsText_<%= myPortletID %>,
    <%=isRTL%>, menuPortletURL_<%= myPortletID %> ,
    '<portal-logic:urlFindInTheme file='images/topNav/menu_selected_disabled.gif' />',
    '<portal-logic:urlFindInTheme file="images/context_loading.gif" />'); return false;" >
    <img id="menu_<%= myPortletID %>_img"
    src='<portal-logic:urlFindInTheme file="images/topNav/menu_selected_disabled.gif" />'
    alt="<portal-fmt:text bundle='nls.titlebar' key='portlet.actions' />"
    title="<portal-fmt:text bundle='nls.titlebar' key='portlet.actions' />"
    style="border: 0px; background-color: transparent;" />
    </a>

    The image inside of this anchor is controlled to display or not to display by Javascript methods explained in step 1.

  6. The following is part of main division which displays output of portlet in portlet window using portletRender tag.

    <portal-logic:if portletState="Normal,Maximized,Solo">
    <div class="wpsPortletBody">
    <portal-skin:portletRender>
    <font color="red"><portal-fmt:problem bundle="nls.problem"/></font></portal-skin:portletRender>
    </div>
    </portal-logic:if>

Comments