Each Jetspeed page can be associated with a different page decoration. Page decorations control some important aspect of a portal page:
Decorators do not control the placement of portlets. That is handled by layouts. Jetspeed comes with several page decorations out of the box. The default page decorator for most pages is simply called jetspeed. It looks like this:
We are going to create a new decorator for this tutorial. This new decorator can be copied into our project from the decorations/layout/jetexpress/ directory in tutorial-resources.zip. This will save you the trouble of creating all the logo images and CSS definitions.
In your project, under jetexpress-portal/src/main/webapp, create a directory decorations. Inside it, create a directory layout. From jetspeed-tutorial-resources.zip, copy the decorations/layout/jetexpress/ directory and all its files and subdirectories to jetexpress-portal/src/main/webapp/decorations/layout in your project.
Open up the file decorations/layout/express-page/header.vm This is a Velocity template, very much like JSP but simpler, with no Java compilation required. Jetspeed does support JSP-based decorators. However no one has contributed one yet. We could spend a lot of time teaching you about all the macros available. But lets just concentrate on changing the logos first.
Scroll down to the banner content (search for <div class="header">). Here we added our new left-hand side logo, consisting of a globe and the text 'jetexpress':
<img src="#GetPageResource('images/earth.jpg')" height="28" width="28"/>
<img src="#GetPageResource('images/jetexpress-logo.gif')" height="28" width="131"/>
#GetPageResource is a Velocity macro. It retrieves a resource (image, CSS, HTML) from the decoration folder, relative to the root of the jetexpress decoration folder. Besides the images, the header.vm is pretty much the same as the default Jetspeed decorator. In fact we simply copied the default decorator to get us started. This gives you a good start of customizing the page.
Velocity makes several variables about the context of a decoration available for dynamic substition of menus and content:
| Variable | Desc | Usage |
|---|---|---|
| $layoutDecoration | Retrieve layout content from the decoration dir | $layoutDecoration.getResource("decorator-macros.vm") |
| $site | Retrieve menus by name | $site.getMenu("pages") |
The remainder of header.vm is HTML markup mixed in with some important macros for displaying Jetspeed Menus. Jetspeed Menus are built from a collection of portal resources known as the Portal Site. The portal site is a content tree (like a file system) of portal resources. The site can be stored in the file system or in a database. Resources can be a page, folder, or link. Lets look at some of the available macros for displaying menus on your page.
The $site always has the following menus available to you at any time:
| Menu | Desc |
|---|---|
| pages | relative pages menu of pages in the current folder. Used to define the page tabs above the portal. |
| breadcrumbs | paths to page used to provide history links below the page tabs |
| navigations | relative subfolders and root level links menu used to define the navigation pane beside the portal. |
| back | parent folder menu used to define the single "back" link above the portal page tabs. |
You can also define your own menus (not covered in this tutorial).
There are some helper macros for creating different styles of menus. The macros are defined in the decorator-macros.vm file:
| Macro | Decription |
|---|---|
| #includeTabsNavigation($someMenu $LEFT_TO_RIGHT) | Displays a menu in a vertical tabbed navigation style. |
| #includeLinksNavigation($breadCrumb $LEFT_TO_RIGHT "" $BREADCRUMBS_STYLE "") | Displays a menu of links according to a given style. |
| #includeNestedLinksWithIconNavigation($standardNavs $TOP_TO_BOTTOM) | Displays a nested top-to-bottom menu navigation of folders, links, and pages. |
| #PageActionBar() | Not a menu, but the available actions (edit, view, help, print...) for this page |
As you can see in header.vm, we get $site.getMenu("navigations") and display a nested top-to-bottom menu navigation through the #includeLinksWithIconNavigation macro:
<!-- Left Navigations Menu Table Data -->
#set($navigationsStandardMenu = $site.getMenu("navigations"))
#if(!$navigationsStandardMenu.empty)
<td valign="top" id="leftcol" >
<div id="navcolumn">
<table cellpadding="0" cellspacing="4" border="0" width="100%">
#includeLinksWithIconNavigation($navigationsStandardMenu $TOP_TO_BOTTOM)
</table>
</div>
</td>
#end
Now that you have a general idea of what the page decorator does, and how you can customize it, let's have a look at how individual portlets are styled using portlet decorators.