Untitled Document
Table of contents |
Previous |
Next
Presentation Templates
In this article, we describe how to create the presentation templates used for
the RiverBend site.
Presentation templates are used to format the elements of the contents on a
web page. For our example we will be creating the following presentation
templates:
The following steps represent the creation for the Home page. We will see
how we will reference many of the components we have created in the previous
steps sections.
1. Click on New and select Presentation Template
2. In the name field, type pt-HomePage
3. In the display name, type Home Page Presentation Template
4. In the Presentation Template section, replace the existing code with the
code shown in Listing 1.
5. Replace the line after
< !-- Click on Insert Image to add the image here -- >
by clicking on the Insert Image and adding the logo of the RiverBend web site
or reference the Image component with the following line
< Component name="rblogobig"/ >
6. Observe the code, and check the lines after the comments of the Reference
Note : To reference a component, the tag looks as
follows
< Component name=" Name of the component " / >
To reference an element inside the content
< Element context="current" type="content" key=" Name of the field to be
referenced " / > |
7. Click Save and then click Save and Close
Listing 1 Home page presentation template code
_________________________________________________________
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<!-- Reference the style sheet -->
< Component name = "riverbend/css-rbstyles" />
< div align = "center" >
< div id = "outer" >
<!-- Click on Insert Image to add the image here -->
< img src =
"/wps/wcm/myconnect/7aad6c004aa8fb3ba1ecab756e4fc596/rbLogoBig.png
?MOD=AJPERES" BORDER = "0" title = "" style =
"margin-left: auto; margin-right:
auto;display:block;text-align:center;" />
< table width = "100%" border = "0" cellpadding =
"0" cellspacing = "0" >
< tbody >
< tr >
< td width = "21%" ></ td >
< td >
<!-- Reference the personalization component -->
< Component name = "pers-seasons" /></ br >
</ td >
< td align = "right" >
<!-- Reference the offers menu component stored in the menu field of the
home default content -->
< Element context = "current" type = "content" key =
"Menu" />< br >
</ td >
< td width = "21%" ></ br >
</ br >
</ td >
</ tr >
< tr >
< td colspan = "4" >< br >
</ td >
< tr >
< tr >
< td colspan = "4" align = "center" >
<!--
Reference the images menu component stored in the menu field of the home
default content -->
< Element context = "current" type = "content" key =
"ImagesMenu" /></ td >
</ tr >
< tr >
< td width = "21%" ></ td >
< td colspan = "2" >
<!-- Reference the Summary field stored in the home default content -->
< Element context = "current" type = "content" key =
"Summary" />< br />
< br />
<!-- Reference the Body field stored in the home default content -->
< Element context = "current" type = "content" key =
"Body" />< br >
</ td >
< td width = "21%" ></ td >
</ tr >
< tr >
< td width = "21%" ></ td >
< td colspan = "2" >
<!-- Reference the Html component
html-footer -->
< Component name = "html-footer" /></ td >
< td width = "21%" ></ td >
</ tr >
</ tbody >
</ table >
</ div >
</ div >
Refer to Figure 29 below for the preview of the Home page presentation
template with the default content of the home.
Figure 29 Home page
By clicking on any of the images of the images menu, user will be
directed to the inside pages and the main pages of the web site. The
general presentation template will be showing the content associated
with the General authoring template. This presentation template
will be showing the nav-left navigator on the left side, the River Bend
log, an image and the content of the page. In addition to that, the
authoring tool is also added.
Before we create the general presentation template, we will
create two html components that we will reference in our presentation
template
To create an html, follow those steps:
1. Click New and choose Component-> Html
2. In the name field, enter HTML-Logo
3. In the Display title, enter HTML Main Logo
4. In the HTML Element, add the following
<div id="logo">
<Component
name="riverbend/rblogo"/>
</div>
5. Click Save and Close
To create the footer html, follow those steps:
1. Click New and choose Component-> Html
2. In the name field, enter HTML-Footer
3. In the Display title, enter HTML Footer
4. In the HTML Element, add the following
<div id="footer">
River Bend Sample WCM Site | Copyright © 2008 IBM | <a
href="http://jigsaw.w3.org/css-validator/check/referer"
target="" title="">CSS</a> and <a
href="http://validator.w3.org/check?uri=referer"
target="" title="">XHTML</a> | <a
href="http://www.ibm.com/software/lotus" target=""
title="">IBM Lotus Software</a>
</div>
5. Click Save and Close
A reference to "search_form" is also included in the presentation
templatel, refer to
Search functionality in
WebSphere Portal and Lotus Web
Content Management for more information on the Search as well as to how to
create the search form referenced here.
Now, back to our general presentation template. These are the steps to
create the general presentation template:
1. Click on New and select Presentation Template
2. In the name field, type pt-General
3. In the display name, type General Presentation Template
4. In the Presentation Template section, replace the existing code with
the code shown in Listing 2.
Listing 2 General presentation template code
_________________________________________________________
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//
EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
< html >
<!-- Refernce the Html-header component -->
< Component name = "riverbend/html-header" htmlencode =
"true" />
< body >
<!-- set bg colour, x-y overlay image and fonts -->
< div id = "mainBg" > <!-- main transparent background 946px
-->
< div id = "fullWidth" >
< div id = "banner" >
<!-- Reference the html-logo component -->
< Component name = "html-logo" />
<!-- Reference the
search component -->
< Component name = "search_form" /></ div >
< div id = "fullWidth" >
< div id = "middle_left" > <!-- left column content begin
-->
< div id = "navigation" >
<!-- Reference the nav-left navigator components -->
< Component
name = "nav-left" /></ div >
</ div >
<!-- left column content end -->
< div id = "middle_center" > <!-- middle column and actual
content begin -->
< div id = "wide_top" ></ div >
< div id = "wide_middle" >
<!-- Add an image using Insert Image button to add the beans image
coffeeSmall.jpg -->
< img src =
"/wps/wcm/myconnect/1f4cd9004a9f203d9418be756e4fc596/1/coffeeSmall.JPG?MOD=
AJPERES" BORDER = "0" title = "" />
<!-- Reference the content fields -->
< Element context = "current" type = "content" key =
"Summary" /></ br >
< Element context = "current" type = "content" key =
"Image" /></ br >
< Element context = "current" type = "content" key =
"Body" /></ br >
< Element context = "current" type = "content" key =
"Link" />< br >
<!-- Reference the menu field in the content if available -->
< Element context = "current" type = "content" key =
"Menu" />
<!-- Reference the auth-editandcreate authoring tool component -->
< Component name = "auth-editandcreate" />
<!--
Reference the html-footel html component -->
< Component name = "html-footer" /></ div >
</ div >
</ body >
</ html >
5. Refer to Figure 30 for a preview of the page
when the Thirsty image of the home page or the Beverages link on the navigator
is clicked.
Figure 30 Beverages page with General presentation
template
| Note : There is a reference to the field menu of the
content. Some contents, for example career, corporate information and beverages
have a menu for these contents, this is the menu that would be displayed in
that place in case it is available. |
6. Click Save and then click Save and Close
Things should be now clearer. We will create the last two presentation
templates which are similar to the general presentation template but they
reference a menu component as well.
We could have used the general presentation template for that, but for
different illustration purposes, we will create a new one. The steps are as
follows:
1. Click on New and select Presentation Template
2. In the name field, type pt-Products
3. In the display name, type Products Presentation Template
4. In the Presentation Template section, replace the existing code with the
code shown in Listing 3
Listing 3 Products presentation template code
_________________________________________________________
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html >
< Component name = "html-header" htmlencode = "true"
/>
< body >
<!-- set bg colour, x-y overlay image and fonts -->
< div id = "mainBg" > <!-- main transparent background 946px
-->
< div id = "fullWidth" >
< div id = "banner" >< Component name =
"html-logo" />
< Component name = "search_form" /></ div >
< div id = "fullWidth" >
< div id = "middle_left" >
<!-- left column content
begin -->
< div id = "navigation" >< Component name =
"nav-left" /></ div >
</ div >
<!-- left column content end -->
< div id = "middle_center" > <!-- middle column and actual
content begin -->
< div id = "wide_top" ></ div >
< div id = "wide_middle" >
< img src = "/wps/wcm/myconnect/f93c73804aa52e2b9c95be756e4fc596/1/
coffeeSmall.JPG?MOD=AJPERES" BORDER = "0" title = ""
/>
< tr >
< td background = "images/gradient_490.gif" height = "1"
>
< img src = "images/1pix.gif" width = "5" height =
"5" ></ td >
</ tr >
< tr >
< td >
< table width = "100%" border = "0" cellpadding =
"0" cellspacing = "10" >
< tbody >
< tr >
< td >< b >
<!-- Reference the title of the content -->
< IDCmpnt context = "current" type = "content" field =
"title" /></ b ></ td >
</ tr >
<!-- Reference the elements of the content in the following section -->
< tr >
< td >
< Element context = "current" type = "content" key =
"Summary" /></ td >
</ tr >
< tr >
< td >< span class = "tx_grey_3" >
< Element context = "current" type = "content" key =
"Body" /></ span ></ td >
< td >< Element context = "current" type =
"content" key = "Image" /></ td >
</ tr >
< tr >
< td >
< Element context = "current" type = "content" key =
"Complimentary" /></ td >
</ tr >
< tr >< td >
< Element context = "current" type = "content" key =
"Related" />
</ td ></ tr >
</ tbody >
</ table >
</ td >
</ tr >
< tr >
< td >
<!-- Reference the menu component of the products
menu-products -->
< Component name = "menu-products" /></ td >
</ tr >
< tr >
< td >
<!-- Reference the authoring tool component -->
< Component name = "auth-editandcreate" /></ td >
</ tr >
< tr >
< td >
<!-- Reference the JSP Component for adding comments here -->
</ td >
</ tr >
</ div >
</ div >
| Note: The last part in the code is a placeholder for
the form and the JSP component that enables users to add comments to the
content. |
Refer to Figure 31 below for the display of News presentation template
Figure 31 Beverage item displayed using Products presentation
template
5. Follow steps 1 through 4 to add the presentation template for the
news pt-News
6. In the section for referencing the elements of the content, change
the values to the values of the News authoring template
7. In the menu referencing part, reference menu-offers
8. Click Save and then click Save and Close
To put things together, we will now pair the authoring templates and the
presentation templates together in the different site areas.
Follow these steps to pair the different templates together:
1. In the items view navigator, expand Site Areas
2. Expand By Site
3. Select River Bend
4. Click Edit
5. In the site area properties section, click Edit Template Mapping
6. Click Add
A list of available authoring templates and
presentation template displays, as shown in Figure 32
Figure 32 List of presentation template and authoring
templates
7. In the authoring template section choose General
8. In the presentation template section, choose General Presentation
Template
9. Click Ok
The two templates are displayed as mapped.
10. Click Ok
11. Click Save and then click Save and Close
| Note: All children site areas will inherit this
mapping unless another mapping is done in the site area using the same
authoring template that will override this one. We will see that in the home
page mapping. |
12. Repeat steps 3 through 11 to create the remainder of the template
mappings for the site areas according to the following table. Be sure to select
the appropriate site area for each template mapping.
| In Site Area |
authoring template |
with presentation template |
| Home |
General |
Home Page Presentation Template |
| Food |
Products |
Products |
| Beverages |
Products |
Products |
| Promotions |
News |
News Presentation Template |
In this article, we describe how to create the presentation templates used for the RiverBend site.