Themes

Portal, Express Beta Version 6.1
Operating systems: i5/OS, Linux,Windows

Themes

For most requests, the portal page is rendered starting with Default.jsp in the /themes directory. The only exception is when the request has been modified by a newWindow="true" parameter. In this case, the page is rendered using Plain.jsp. Plain.jsp is normally used to render portlet help or for portlets that use the iFrame skin.

You can add your own elements to the HTML portal page and rearrange the layout by creating a new theme and changing the layout in Default.jsp and the JSPs that are included. The following sections illustrate the order and layout in which the portal page theme is built using the JSPs that are provided after installation. Use this information to learn how to include some of these components as you build your own themes.

Theme policy is used to control how a theme is rendered on a page. A policy is created and stored using the XML configuration interface. Once stored, it can be applied to a page either through the XML configuration interface using the page metadata attribute com.ibm.portal.ThemePolicy or through the Properties portlet. Theme policy is inherited so it only needs to be set on a page which requires a different policy than its parent.

Head

Head.jspf provides the necessary header information to correctly render the portal page. This file is used to link the style sheets and client-side scripts as well as set the page title and the text direction.

Banner

Banner.jspf includes the user interface elements across the top of the page. This includes the following:

Main menu - a dropdown menu with navigation links to top level pages and user actions such as Log In and Log Out

Breadcrumb trail (banner_crumbtrail.jspf) - the current page selection path to the current page.

Search controls (banner_searchControl.jspf) - a search form to various search scopes.

Toolbar actions (banner_toolbar.jspf) - a set of buttons to access various flyout panels and actions.

Top navigation

topNav.jspf creates one or more rows of navigation tabs. Theme policy values control whether the top navigation is rendered and how many rows are rendered.

Side navigation

sideNav.jspf creates an expandable tree of navigation nodes. The side navigation renders any navigation levels that have not been rendered by the top navigation.

Footers

footer.jspf renders a section across the bottom of the portal page. By default, this includes quick links to commonly accessed areas of portal. The links rendered are internal URLs which are children of the portal page with the unique name ibm.portal.Quick Links.

Palettes

Flyout.jspf contains a hidden document division (<div/>) which is used by actions in the banner's toolbar to display content which is dynamically displayed and hidden as needed.

Context menus

The context menus in the Portal theme and IBM skin (the defaults) are loaded asynchronously. The contents of the menu are controlled by a JSP in the /themes/html/Portal directory. The following information describes which JSP is used to control specific menus:

Table 1. Context menus and controlling JSPs
Menu	Controlling JSP
Main menu	mainMenu.jsp
Page menu (on selected page)	pageContextMenu.jsp
Portlet menu	portletContextMenu.jsp

Note: The page and portlet context menu icon can only be seen if you hover over the upper right corner of the portlet and page title. The URLs to these JSPs are created using the <portal-navigation:url themeTemplate="mainMenu"/> where the themeTemplate attribute is the name of the JSP to load (without the file extension). As a result, it is important to note that any URL created in one of these controlling JSPs must have the theme template reset, either by using the themeTemplate attribute on the urlGeneration tag or by using the available public APIs. Note: Context menus are disabled until a page fully loads. In more detail, the context menus on the page (for example, Main menu, Page menu, and any portlet menus in the default Portal theme) are initially disabled and then re-enabled in an onload handler. This event occurs because clicking on a context menu before the page is completely loaded (that is, when portlet JSPs are still compiling) causes an error and the menu does not load.

Drag and drop feature

The drag-and-drop feature lets you quickly change the placement of individual portlets using your skins. The drag-and-drop feature lets you move a custom portlet from its current position by dropping it to another position on a page. This lets you quickly change the arrangement of your custom portlets on a page.

Theme policy

Theme policies control how a theme renders for a particular page. The attributes of the theme policy assigned to the current page are consumed by the theme JSPs to control what gets rendered, as well as how it is rendered.

Screens

The selected screen is rendered by the <portal-core:screenRender/> tag.

Default themes

For HTML, the following themes are provided by WebSphere Portal Express.

Portal theme - This is the default theme for WebSphere Portal Express and is a full-featured theme that demonstrates all available theme functionality.

Minimal theme - This theme, located in the root themes/html directory, is a minimal "safe" fallback that includes only the minimum required to render a functioning portal. It does not include all of the functionality available in WebSphere Portal Express, such as drag and drop and context menus. This theme is not intended for normal use, and is not explicitly defined as a theme by name, but rather only exists as a fallback should there be a problem with the main portal theme, and also as an example of a minimal theme.

Portal Web 2 theme - This theme showcases Web 2.0 functionality in WebSphere Portal Express. Taking full advantage of AJAX and JavaScript, this theme features a rich user experience on the client with partial page updates and inline portlet editing.

Note: If the Portal theme directory is either deleted or renamed, the portal resource loader uses the themes/html/Default.jsp. In this case, you should also use the fallback skin. To do this, rename the skins directory. For example, the skins\html\IBM directory should be renamed skins\html\IBM1. If you have a broken theme, you can rename the theme and skin directories which are causing the problem to get to a working minimal theme.

<portal-theme:cacheProxyUrl/> JSP tag

The switch to using JSPs for style sheets provides a great advantage in the reduction of the number of files that must be maintained or generated when a style sheet is updated. However, a performance concern is introduced in that the output of the compiled JSPs needs to be cached to avoid having to be generated on each request. WebSphere Portal Express provides the <portal-theme:cacheProxyUrl/> JSP tag to solve this problem.

The <portal-theme:cacheProxyUrl/> tag creates a URL to the caching proxy servlet. The URL created is fully cacheable and includes information about the requesting client. The CC/PP client profile is used for gathering information about the client for the URL. The purpose of this tag is to link .CSS files into the JSP. Note: For security reasons, the cache proxy servlet will only serve URLs pointing to resources located in the themes, skins, and screens directories. This makes all resources underneath these directories public. Also, any URLs containing the ".." characters will not be served. Parent topic: Layout of the portal page

Library | Support | Terms of use |