Each Jetspeed page can be associated with a different page decoration. Page decorations control some important aspect of a portal page:
We are going to create a new decorator for this tutorial. This new decorator can be copied into our project from the /JetspeedTutorial/resources/decorations/layout/express-page/ directory. This will save you the trouble of creating all the logo images and CSS definitions.
# Linux
cd /JetspeedTraining/workspace/jetexpress
mkdir portal/src/webapp/decorations/layout/express-page
cp -r ../../resources/decorations/layout/express-page/* portal/src/webapp/decorations/layout/express-page/
# Windows
cd \JetspeedTraining\workspace\jetexpress
mkdir portal\src\webapp\decorations\layout\express-page
xcopy /s ..\..\resources\decorations\layout\express-page\* portal\src\webapp\decorations\layout\express-page
Open up the 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. Here we add our new left-hand side logo:
#GetPageResource('images/blueSunrisePicture.gif')
We've added a few more custom images, one in the center area of the banner:
<img src="#GetPageResource('images/BlueSunriseTextTahoma.gif')" height="29" width="165">
and one more in the right area of the banner:
<img src="#GetPageResource('images/RisingEdgeSlogan.gif')" height="28" width="300">
#GetPageResource is a Velocity macro. It retrieves a resource (image, CSS, HTML) from the decoration folder, relative to the root of the express-page decoration folder. Besides the images, the header.vm is pretty much the same as Tigris. In fact we simply cut and paste the Tigris 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 the page is HTML markup mixed in with some important macros for displaying Jetspeed Menus. Jetspeed Menus are build 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. |
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 |