Desktop Page Themes

The Jetspeed Desktop has its own kinds of decorations. These decorations are called Desktop Themes Each Jetspeed Desktop page can be associated with a different theme. Themes control some important aspect of a desktop 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
Themes do not control the placement of portlets. That is handled by the Jetspeed Desktop engine, which follows the layout plan provided by the stuctured page markup (PSML). This is the same layout instructions applied to a portal page. You will see that themes are much simpler content than decorators. That is because most of the content in a theme is populated by the Jetspeed Desktop engine at runtime. Jetspeed comes with a few desktop themes out of the box. The default desktop theme for most pages is called blue. It looks like this:

We are going to create a new desktop theme for this tutorial. This new theme can be copied into our project from the /JetspeedTutorial/resources/themes/express/ 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/desktop-themes/express
cp -r ../../resources/desktop-themes/express/* portal/src/webapp/desktop-themes/express/

# Windows
cd \JetspeedTraining\workspace\jetexpress
mkdir portal\src\webapp\desktop-themes\express
xcopy /s ..\..\resources\desktop-themes\express\* portal\src\webapp\desktop-themes\express\

The Theme template

Have a look at the express theme directory. Notice that there are two theme files: express.jsp and express.vm Since there were so many complaints about no JSP support in templates, with the Desktop we decided to require support for both. The theme.properties determines which templates is active. Lets look at the Velocity template. We have macros to display-theme relative resources: 

	     
        <img src="$jetspeedDesktop.getDesktopThemeResourceUrl('images/logo.gif')" alt="Logo" border="0"/>

Theme Variables

JSP and Velocity make several variables about the context of a theme available for dynamic substition of menus and content:

VariableDescUsage
$jetspeedDesktopRetrieve theme resources, and the name of the theme${jetspeedDesktop.getDesktopTheme()

Content Divs

The remainder of the page is HTML DIV markup with special widget types and identifiers. The desktop will populate these Divs with various content such as the portlets and 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.

WidgetTypeDesc
jetspeed-menu-pagesjetspeed:PortalTabContainerrelative pages menu of pages in the current folder. Used to define the page tabs above the portal.
jetspeed-menu-breadcrumbsjetspeed:PortalBreadcrumbContainerpaths to page used to provide history links below the page tabs
jetspeed-menu-navigationsjetspeed:PortalAccordionContainerrelative subfolders and root level links menu used to define the navigation pane beside the portal.
You can also define your own menus (not covered in this tutorial).

Finally, the Div to hold the portlet content must be defined. It is just a plain HTML DIV: 

	 
<div class="layout-${jetspeedDesktop.getDesktopTheme()}" id="jetspeedDesktop"></div>
Notice that while decorators require two templates, desktops only require one template. This makes for a much simpler page.

Previous Next