Full Control Over Markup In WCM While Using JSPs

Instructions for building the demo
The following instructions are based on WebSphere Portal 8.0/8.5. The instructions accompany the
article on IBM developerWorks titled “Full Control Over Markup In WCM While Using JSPs”.
Prerequisites
-
WebSphere Portal environment (v8.0 or v8.5) with WCM enabled
Sufficient access permissions to create web content libraries
Sufficient access permissions to create templates, components, site areas and content.
Instructions


Download the EAR file from the following location:
https://dl.dropboxusercontent.com/u/19549758/WCM%20article/CustomJSPsEAR.ear
 From the WAS integrated console install the provided EAR file (installs to context root
/wcmcustom) and start the installed EAR.
 From Portal Administration\Portal Content\Web Content Libraries, create two web
content libraries
o Design Library
o Content Library
 From WCM (Applications\Content\Web Content Authoring) add Design Library and Content
Library to the list of selected libraries (Preferences\Edit Shared Settings\Library Selection)
 In Design Library, create three presentation templates:
o Blog Landing Page: leave blank for now
o Blog Post: leave blank for now
o Blog Response: leave blank for now
 In Design Library, create three authoring templates:
o Blog Landing Page
 Map the template to the “Blog Landing Page” presentation template
 In the default Content Properties tab, scroll down to the Workflow section and
deselect “Enable workflow for items created with this authoring template”
o Blog Post
 Map the template to the “Blog Post” presentation template
 Check the box that says: “Create content under a new site area”
 Manage Elements: add “Body” (Rich text)
 In the default Content Properties tab, scroll down to the Workflow section and
deselect “Enable workflow for items created with this authoring template”
o Blog Response
 Map the template to the “Blog Response” presentation template
 In the Default Content tab, open the field properties for the name field and
check the boxes for “Hide field” and “Generate name”
 In the Default Content tab, open the field properties for the display title field
and check the boxes for “Hide field” and “Generate name”, and select generate
field value from: “Name”
 In the Default Content Properties tab, scroll down to the Workflow section and
deselect “Enable workflow for items created with this authoring template”
In Design Library, create a JSP Component:
o Name: JSP-Component
o Path: /wcmcustom;/render/component.jsp

In Design Library, create a menu component:
o Name: Menu - Blog Posts
o Menu criteria:
 Check: Authoring Templates, Location
 Authoring templates:
 /Design Library/Blog Post
 Location:
 Select “Site Areas”
 Check: “Include descendents”
 Further options:
o Check “Current content”
o Menu design properties
 Display order: Descending
 Results Primary Sort Key: Publish Date
 Formatting: Use default design fields
o List Paging Options:
 Results per page: 5
 Start page: 1
 Maximum number of result pages: 1
 Pages to read ahead: 1
o List Presentation Markup:
 Header:
<style>
.blogs .postTitle {
font-weight: bold;
font-size: 1.2em;
}
.blogs .info {
font-size: 0.9em;
color: #666666;
}
</style>
<ul class="blogs">

Result design:
<li class="post"><div class="postTitle">[Placeholder
tag="titlelink"]</div>
<span class="info">[Property context="autofill" type="content"
format="MM/dd" field="publishdate"] - [Property context="autofill"
type="content" separator="," field="authors"]</span><br/>
[Property context="autofill" type="content" field="description"]
[Component name="design library/jsp-component" compute="always"]
</li>

Footer:

No result design:
</ul>
No blog posts found

In Design Library, create a menu component:
o Name: Menu - Show Responses
o Menu criteria:
 Check: Authoring Templates, Location
 Authoring templates:
 /Design Library/Blog Response
 Location:
 Select “Site Areas”
 Further options:
o Check “Current content”
o Menu design properties
 Display order: Descending
 Results Primary Sort Key: Publish Date
 Formatting: Use default design fields
o List Paging Options:
 Results per page: 3
 Start page: 1
 Maximum number of result pages: 1
 Pages to read ahead: 1
o List Presentation Markup:
 Header:
<div class="responses">
<ul>

Result design:
<li>[Property context="autofill" type="content" field="description"]
<span class="info">([Property context="autofill" type="content"
format="MM/dd" field="publishdate"] - [Property context="autofill"
type="content" separator="," field="authors"])</span></li>

Footer:
</ul></div>
 In Design Library, edit the three presentation templates and update the code with the code
below:
 Blog Landing Page:
<h2>[Property context="current" type="content" field="title"]</h2>
<div class="about">[Property context="current" type="content"
field="description"]</div>
<section id="blog">
[Component name="design library/menu - blog posts"]
</section>
 Blog Post:
<h2>[Property context="current" type="content" field="title"]</h2>
<p>[Element context="current" type="content" key="Body"]</p>
[Component name="design library/menu - show responses"]
 Blog Response:
[Property context="current" type="content" field="description"]




In Content Library, create a site area called “Blogs”
In Content Library, create a content item using the template “Blog Landing Page”, provide a
name, display title and description
In Content Library, create two or more content items using the template “Blog Post”, provide a
name, display title, description and body. Make sure the contents are created in a new site area
with the same name/title as the content item.
In Content Library, open the site area for a blog post and create several content items using the
template “Blog Response”. Provide a description, the name and title are hidden and
automatically generated.
You should now be able to preview the created content items and open individual blog posts from
the Blog Landing Page.