Page builder layout templates

You can create templates to control the layout of pages.

Page builder layouts do not use the tag <portal-core:screenRender/>.

If you have a page builder layout assigned to your page, it uses a JSP include instead to render the layout model contents. Each layout has its own JSP template located in the directory profile_root/installedApps/cell_name/Enhanced_Theme.ear/wp.theme.enhancedtheme.war/themes/html/Enhanced/layouts.

The file 2columnEqual.jsp has the two column layout which is the page builder default:

taglib uri="http://java.sun.com/jsp/jstl/core" 
    prefix="c" %><%@ taglib uri="http://www.ibm.com/xmlns/prod/websphere/portal/v6.0/portal-fmt" 
       prefix="portal-fmt" %><%@  taglib uri="http://www.ibm.com/xmlns/prod/websphere/portal/sample/simpletheme" 
       prefix="simpletheme" %>

<simpletheme:init/>

<c:set var="layoutmodel" value="${wp.layoutModel[wp.selectionModel.selected]}"/>
<c:set var="containers" value="${layoutmodel.children[layoutmodel.root]}"/>

<portal-fmt:identification object="${containers[0]}" action="serialize" 
       var="containerID">
   <div class="ibmPortalContent2Col ibmPortalLayoutContainer ibmPortalMainContainer" 
        id="<%=containerID%>" orientation=V ordinal=0 directions={right:'1'}>
      <c:forEach var="currentPortlet" items="${layoutmodel.children[containers[0]]}">
                 <simpletheme:renderNode layoutNode="${currentPortlet}"/></c:forEach>    
   </div><!--end colRight-->
</portal-fmt:identification>

<portal-fmt:identification object="${containers[1]}" action="serialize" var="containerID">
   <div class="ibmPortalContent2Col ibmPortalLayoutContainer ibmPortalRightmostColumn" 
        id="<%=containerID%>" orientation=V ordinal=1 directions={left:'0'}>
      <c:forEach var="currentPortlet" items="${layoutmodel.children[containers[1]]}">
                 <simpletheme:renderNode layoutNode="${currentPortlet}"/></c:forEach>
   </div><!--end colLeft-->
</portal-fmt:identification> 

In the code above, an expression language (EL) bean is used to get a reference to the layout model object and the containers array, which consists of the children of the layout model root node. The page builder theme does not support nested containers. Therefore each container holds only controls, such as portlets Below the EL references is the markup for the two columns, which are simply HTML div nodes. Each is surrounded with a <portal-fmt:identification/> tag that serializes the ID for the given container from the containers array. In order to function properly in the page builder theme, the div nodes need the following attributes to be present:

• The IDs provided by the <portlet-fmt:identification> tags must be present for the Add Content option and portlet drag and drop to work properly.

• The class ibmPortalLayoutContainer must be present for portlet drag and drop.

• The class ibmPortalMainContainer is placed on the container div node to which users with at least privileged user access on the page can add items from the Customize shelf.

• The attributes orientation, ordinal and directions are used by the page builder skins to create the options Move up, Move down, Move left, and Move right on the portlet menus as follows:

  • The attribute orientation refers to the orientation of the container. As the value specify either H for horizontal or vfor vertical. Most containers have the orientation vertical ( v).

    Be aware that the orientation is created exclusively by the CSS that the layout designer applies to the containers and controls. The page builder theme ignores the orientation attributes in the layout model.

  • The attributes ordinal are used by the directions attributes to identify the containers. Specify a unique value for each container.

  • The attribute directions is used to determine where a portlet goes when a user moves it by choosing the corresponding option on the portlet menu. Specify a JavaScript Object Notation (JSON) object as the value. In that JSON object you can give each of the up, down, left, and right sub-attributes, and set them to the ordinal that you gave to the containers. In the above example, the first column has directions={right:'1'}. Consequently, when one of its portlets is moved right, it goes to the first container to the right; this is the second and rightmost container.

  The page builder skins support the directional Move options in their portlet context menus only if the current page is rendered with a layout template. If a legacy layout is in use, the Move options are available in the portlet context menus.

All other attributes and CSS classes are added by the designer of the layout. The column div nodes contain forEach tags. They loop through each control in the given container and render it by calling the <simpletheme:renderNode layoutNode="${currentPortlet}"/> tag.

Parent topic:

Changing page layout

---