Page Decorators

Each Jetspeed page can be associated with a different page decoration. Page decorations control some important aspect of a portal page:

  • The colors, images, CSS styles that skin this page
  • The header portion of the page
  • The page margins
  • The footer portion of the page
  • Menus displayed on the page
  • Action buttons displayed on the window
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 called tigris. 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 /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
     
     

The Header

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 Variables

Velocity makes several variables about the context of a decoration available for dynamic substition of menus and content:

VariableDescUsage
$layoutDecorationRetrieve layout content from the decoration dir$layoutDecoration.getResource("decorator-macros.vm")
$siteRetrieve menus by name$site.getMenu("pages")

Menus

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:

MenuDesc
pagesrelative pages menu of pages in the current folder. Used to define the page tabs above the portal.
breadcrumbspaths to page used to provide history links below the page tabs
navigationsrelative subfolders and root level links menu used to define the navigation pane beside the portal.
backparent 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:

MacroDecription
#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

The Footer

Open up the decorations/layout/express-page/footer.vm

	     
<img src="#GetPageResource('images/jetspeed-powered.gif')" alt="Jetspeed 2 Powered" border="0" />
     
     

Previous Next