Portal, Express Beta Version 6.1
Operating systems: i5/OS, Linux,Windows |
The examples in this topic show the tags used to implement a single level of navigation in the portal themes. WebSphere Portal Express provides a JSP that serves as an example for single level navigation: topNav.jspf. Like this JSP, any JSP you use for navigation should be included in the appropriate position in the parent JSP, typically Default.jsp.
The following example shows the visual navigation elements as they might be rendered in the browser. The currently selected node, Today's News, has a different background color than the other nodes for this navigation level. This gives the user a clear indication of the page that has been selected.
The following steps show how to build a single layer of navigation using the portal JSP tags. You can add new markup or insert existing HTML markup into this structure to complete the navigation.
The following shows the high level JSP tag structure for a navigation level.
<%-- Start of navigation level x --%> <c-rt:if test = "${themePolicy.renderTopNavigation}"> <portal-logic:if navigationAvailable="yes" screen="Home,LoggedIn,LoggedOut,ErrorNotAuthorized"> <portal-navigation:navigation stopLevel="3"> <portal-navigation:navigationLoop> <%-- selected navigation node markup --%> <%-- show page contextual menu markup --%> <%-- unselected navigation node markup --%> </portal-navigation:navigationLoop> </portal-navigation:navigation> </portal-logic:if> </c-rt:if> <%-- End of navigation level x --%>
You should already have determined how links to navigation nodes should be rendered in the portal. Many portals use repeatable table structures to implement the navigation as tabs. You could also allow the navigation to be rendered as a drop-down box to conserve space. The entire markup must be placed inside of the navigation loop. The link markup is iterated for each node in the navigation level. Conditional logic is used to determine which node is rendered as the selected node.
The following example shows the markup for a single navigation link when the node is not selected by the user.
<portal-logic:if nodeInSelectionPath="no"> <li class="wpsUnSelectedPage"> <a href="<portal-navigation:navigationUrl type='link' />"> <portal-fmt:title/></a> </li> </portal-logic:if>
You can provide visual aids to distinguish the selected node from the unselected nodes, indicating to users where they are in the portal structure. Like the unselected node, the entire markup must be placed inside of the navigation loop.
The following example shows the markup for a single navigation link when the node is selected by the user.
<portal-logic:if nodeInSelectionPath="yes"> <li class="wpsSelectedPage"> <a href="<portal-navigation:navigationUrl type='launch' />"> <portal-fmt:title/> </a> <c-rt:if test = "${themePolicy.renderContextMenus}"> <% boolean isNodeSelected = wpsSelectionModel.isNodeSelected(wpsNavNode); if(isNodeSelected){%> <a class="menuLink" href="javascript:void(0);" onclick="javascript:showMenu_<%=pageOidStr%>(); return false;" > <img id='menu_<%=pageOidStr%>' class="menuLink" src='<portal-logic:urlFindInTheme file="images/topNav/menu_selected.gif"/>' onmouseout='this.src="<portal-logic:urlFindInTheme file="images/topNav/menu_selected.gif"/>"' onmouseover='this.src="<portal-logic:urlFindInTheme file="images/topNav/menu_selected_hover.gif"/>"' alt="<portal-fmt:text bundle='nls.engine' key='link.page.actions' />" title="<portal-fmt:text bundle='nls.engine' key='link.page.actions' />"/> </a> <%-- Show icon for closing transient pages markup --%> <%}%> </c-rt:if> </li> </portal-logic:if>
<script type="text/javascript" src="<portal-logic:urlFindInTheme file='js/AsynchronousContextMenu.js' />"></script> <script type="text/javascript"> function showMenu_<%=pageOidStr%>() { return showAsynchContextMenu("menu_<%=pageOidStr%>", '<portal-navigation:url theme="pageContextMenu"></portal-navigation:url>', <%=!isRTL%>, "main-menu-border", "main-menu", "main-menu-item", "main-menu-item-selected" ); } </script>
Some node types include external URLs. To prevent launching a remote Web site into the portal browser window, you can add conditional coding to the link that forces a new window to open when the node is an external URL. You can use the target attribute of the link to launch a new window, or you can use JavaScript as describe in this step.
The following JavaScript should be added to the Head.jspf in the /themes/html directory. Do not use a theme-specific copy of Head.jspf (for example, /themes/html/theme_name). The tags in this file are dependent on its location in the root HTML directory.
<%-- Javascript for opening external URLs in a new browser window --%> <script language="javascript" type="text/javascript"> function NewWindow(strUrl) { window.open(strUrl, "_blank"); } </script>
The following example shows how to create a boolean variable, externalUrl, to determine whether a new browser window should be launched. This variable must be declared inside the navigation loop so that it is evaluated for each node. The wpsNavNode scripting variable represents the navigation node. If the content type of the node is an external URL, it's value is set to true.
Note: The methods shown below are part of an internal API which are not available for public use, except when used exactly as described in this example.
<%
// if content type is an external URL, String to open a new window
boolean externalUrl = false;
if (com.ibm.portal.content.ContentNodeType.EXTERNALURL.equals(wpsNavNode.getContentNode().getContentNodeType()))
{
externalUrl = true;
}
%>
The following example shows the updated link to the navigation node.
<li class="wpsUnSelectedPlace" nowrap height="100%">
<a class="wpsUnSelectedPlaceLink"
href='<portal-navigation:navigationUrl type="link" />'
<% if (externalUrl){ %> onClick="NewWindow(this.href);return(false)" <% } %> >
<portal-fmt:title/>
</a>
</li>