Getting your community of users to participate and share their ideas and opinions on your Web content shows the true dynamic value of your service. And with the wide spread of Web 2.0 and social networking services, companies are looking for Web content management solutions that meet the new paradigm’s needs. The ability to interact with content in various solutions, from news portals to corporate intranets to blogs, has become essential in enriching users' online experiences and turning them from passive readers to active collaborators.

This article guides you through the steps needed to create a Web content management portlet that enables users to add comments to a content item. The proposed solution enables administrators to specify various levels of moderation for the comments. Moderation can be either fully moderated, where administrators have to approve comments before they are posted, or no moderation, requiring nothing on the administrator's part but posting all user comments. Users are also able to review and recommend the comments as well; accordingly, the comments are sorted based on that recommendation.

TIP: If you need to create a blog where the administrator does not need to approve the comments, you can use IBM® Lotus® Quickr™.

How does it work?

The design discussed here illustrates a news site that contains a list of news items. Each news item, when opened, displays its content, a form in which users can add comments, and a list of all comments already added by users. Each comment has a Recommend button. Comments are sorted based on the number of recommendations each has received.

A separate site area is used for each content item to keep the new content item with its comments. A JavaServer™ Pages (JSP) component is used to add the comments. In addition, another JSP component handles the recommendations.

Another alternative for this implementation is to add keywords to the content item and to the comments, but doing so requires several APIs or menu components to handle the customization. It is important to limit the use of Lotus Web Content Management APIs for performance issues.

The basic feature in this article is the addition of comments. The feature could be extended by adding a workflow for administrative approval and a recommendation component to the comments. Each feature could be used on its own.

Back to top

Implementation

This section takes you step by step through the scenario of creating the news items with the comments and both the recommendation section and its ordering. It covers the creation of the Lotus Web Content Management artifacts needed in the design.

First, you create the site framework, and then you create the workflow. You follow with the authoring template, JSP components, and menus for the comments, presentation template, and a navigator component to display the list of news.

Content library, site, site area, and workflows

Create a Lotus Web Content Management content library called NewsLibrary. In this library, create a site and name it News. Then, create a site area for each news item. Be sure that you create a site area for News_1, News_2, and News_3, as shown in figure 2.

Back to top

Administrative approval

A two-stage workflow (draft and publish stages) is needed for this scenario because the news items and the comments go through an approval cycle.

First, start with creating two workflow actions: an email action and a publish action. Next, create the workflow stages: News_Draft, Comments_Draft, and Publish. The Comments_Draft stage contains the email action as the Execute on Entering Stage field as shown in figure 3.

For the Publish stage, add the publish action in the Execute on Entering Stage field.

At last, create two workflows: News_workflow and Comments_workflow. The News_workflow contains the News_Draft and the Publish stages.

On the other hand, the Comments_workflow contains the Comments_Draft and the Publish stages. Both workflows share the same publish stage.

When users add a comment, the comment goes through the Comments_workflow where it sends an email to the administrator to approve the comment to be published.

Authoring template for the news and the comments

Now, create two authoring templates: one for the news content and one for the comments.

Create an authoring template by selecting New - Authoring Template. Select the Manage Elements option, select an Element type for the field, and then click Add. As an example, a title, description, and an image are used. Using the Element Manager, add the fields shown in tables 1 and 2 to both templates.

NOTE: For the comments authoring template, set the description field to 0. This setting is used for the recommendation counter for each comment.

In the workflow section of the news authoring template, set the workflow to be News_workflow; for the Comments Authoring template, set it to be Comments_workflow.

Back to top

Adding comments

JSP components handle adding the comments and the recommendations.

Now, you create a JSP component to handle adding comments about the news content item.

Click New - JSP Component. Create the JSP component with the name jsp_addComments, and let it point to a JSP file whose path is /jsp/html/addingComments.jsp. Accordingly, the physical path of the JSP file would be in a directory similar to the code shown in listing 1.

<websphere portal installation path>\installedApps\
WCM_Local_ng_Portlet_PA_dvme0nk.ear\PA_dvme0nk.war\jsp\html\
addingComments.jsp

The JSP file gets the current site area for the news and gets the authoring template ID for the comments. Create a new comment under the current site area with the fetched authoring template, and add the current time as the name and title of the content. See the code in listing 2.

<%@page language="java" contentType="text/html; charset=ISO-8859-1"	
pageEncoding="UTF-8" session="false"%>
.
.
.
try {

	//getting the comment text field of the form
	String comment =  request.getParameter("Comment");
	if (comment != null )
	{

    RenderingContext rcjsp = (RenderingContext) 
    request.getAttribute(Workspace.WCM_RENDERINGCONTEXT_KEY);
    Workspace workspace = 
    WCM_API.getRepository().getWorkspace("wpsadmin", "wpsadmin");
//Note: wpsadmin account was used for demonstration purposes only, 
and it is //not recommended to use it

    //getting the current site area
    String contentPath = rcjsp.getPath();
    DocumentId siteAreaID = null;
    SiteArea[] siteAreas =  rcjsp.getSiteAreas();
    for (int x=0  ; x < siteAreas.length; x++)
    {
      SiteArea sa = (SiteArea) siteAreas[x];
      siteAreaID = sa.getId();
    }

    //Set the library that you have created for the example
    workspace.setCurrentDocumentLibrary(workspace.getDocumentLibrary("NewsLibrary"));

    //find the comments authoring template ID
    DocumentIdIterator idEt = 
    workspace.findByName(DocumentTypes.AuthoringTemplate, "Comments_auth");
    DocumentId authID = null;
    while(idEt.hasNext())
    {
      authID = (DocumentId) idEt.next();
    }

    //for uniqueness, the current date and time are formatted in a string to be 
    the title and name of the comment
    java.text.DateFormat dateFormat = new 
    java.text.SimpleDateFormat("yyyy/MM/dd HH:mm:ss");
    java.util.Date date = new java.util.Date();

    String dateFormatted = dateFormat.format(date);
    dateFormatted=  dateFormatted.replaceAll("/","");
    dateFormatted = dateFormatted.replaceAll(":","");
    dateFormatted = dateFormatted.replaceAll(" ","");


    //create new content
    //add the current time as being the name and title of the content
    Content newContent = workspace.createContent(authID, siteAreaID,null, 
    ChildPosition.START);

dateFormatted.toString() );

    newContent.setName(dateFormatted);



    //setting the description to 0 for later use in the recommendation
    newContent.setDescription("0");

    //set the content fields
    TextComponent txt = (TextComponent) newContent.getComponent("Title");
    txt.setText(dateFormatted.toString()); newContent.setComponent("Title",  txt);
    RichTextComponent desc1RTF = 
    (RichTextComponent) newContent.getComponent("Comment");
    desc1RTF.setRichText(comment);
    newContent.setComponent("Comment",  desc1RTF);

    workspace.save(newContent);
	}

}
catch (Exception e) {
	//For a real implementation, you might need to handle exceptions in a
	//more advanced way. The basic handling below is just an example.
	out.println("exception = "+e);
	e.printStackTrace();
}
%>

Back to top

Handling recommendations

Another JSP component should be created to handle the Recommend button next to the comment. The JSP component is called jsp_recommend, and its physical path is as follows:

This path points to /jsp/html/recommend.jsp.

The JSP file gets the title of the comment from a hidden field sent when the button is clicked. It updates the description field of the comment content with the incremented value. See the code in listing 3.

<%@page language="java" contentType="text/html; charset=ISO-8859-1"	
pageEncoding="UTF-8" session="false"%>
.
.
.
try {

	//getting the recommend hidden field that contains the title of the comment
	String commentTitle =  request.getParameter("CommentTitle");

	if (commentTitle != null )
	{

		RenderingContext rcjsp = (RenderingContext) 
		request.getAttribute(Workspace.WCM_RENDERINGCONTEXT_KEY);
		Workspace workspace = 
		WCM_API.getRepository().getWorkspace("wpsadmin", "wpsadmin");
//Note: wpsadmin account was used for demonstration purposes only, 
and it is //not recommended to use it

		//Set the library that you have created for the example
		workspace.setCurrentDocumentLibrary(workspace.getDocumentLibrary
		("NewsLibrary"));

		//search for the comment with that name
		DocumentIdIterator coIt =  
		workspace.findByName(DocumentTypes.Content, commentTitle);

		SiteArea newsSiteArea = null;
		DocumentId siteAreaID = null;
		Content co = null;
		while (coIt.hasNext()) {
			DocumentId contentID = (DocumentId) coIt.next();
			co = (Content) workspace.getById((DocumentId) contentID);
			siteAreaID = (DocumentId) co.getParents().next();
			newsSiteArea = (SiteArea) workspace.getById(siteAreaID);
		}

		//increase the counter and edit the content
		String counter = co.getDescription();

		int recommendCounter = Integer.parseInt( counter);		
		co.setDescription((Integer.parseInt( counter)+1)+"");

		workspace.save(co);
	}


}
catch (Exception e) {
	//For a real implementation, you might need to handle exceptions in 
	// a more advanced way. The basic handling below is just an example.
	out.println("exception = "+e);
	e.printStackTrace();
}
%>

Menu component for displaying the comments list

Create a menu component by selecting New – Menu Component. The menu component is used to render the list of comments for each content item. The comments are ordered according to the number of recommendations for each one. The menu is added at the end of the presentation template of the News detail page.

When users recommend a comment, the number of recommendations is saved in the description of the comment content. The menu component can sort items only by name, description, and dates, and therefore the best way is to save the number of recommendations in the description field.

This workaround could be avoided by creating the menu using JSP APIs, which is not recommended for performance issues.

The menu component searches for the comment contents based on the current site area and the comments authoring template. It sorts the items first by description (recommendation) and next by publish date. See figure 4.

The header contains only the opening of the table as shown in listing 4.

<table ><tbody><tr>		 
<td>___________________________________________________</td>

</td></tr>

NOTE: The action of the form submits on the previously created JSP component add_Comments.

For the search result field, add the following:

• Element tags to reference the date and comment elements.
• A form that includes a button to recommend the comment. The form submits on the JSP component jsp_recommend.

The HTML code for the search result field is shown in listing 5.

<tr><td><br><br>
<FONT color="blue">
<WorkflowCmpnt context="current" type="content" 
field="publishdate" format=""/> </FONT> 			
<br><Element context="autoFill" 
type="content" key="Comment"/>
<br>------------------------------------<br>
<br></td><td>
<form action='<Component name="NewsLibrary/Recommend"/>'>
<input	type="submit" name="Recommend" value="Recommend">
</form></td></tr>

The footer contains the form with a text area for the comment and an Add Comment button. The form submits on the JSP component add_Comments, as shown in listing 6.

<tr><td>
<br>ADD YOUR COMMENT<br>
<form action='<Component name="NewsLibrary/add_Comments"/>'>
<textarea rows="2" cols="20" name="Comment"></textarea>	
<input type="submit" name="AddComment" value="Add Comment">	
</form></td></tr>
</tbody></table>

In the field called No result design, add the comments form. This form is rendered when there are no comments for the current content item.

<table><tbody><tr>		 
<td>___________________________________________________
<br>ADD YOUR COMMENT<br>
<form action='<Component name="NewsLibrary/add_Comments"/>'>
<textarea rows="2" cols="20" name="Comment"></textarea>	
<input type="submit" name="AddComment" value="Add Comment">	
</form></td></tr>
</tbody></table>

Presentation template for the news and the comments

After you have created the menu for the comments, you can create the presentation template for the News because it refers to the Comments Menu.

Therefore, for this scenario, you create one presentation template for the news content that displays the news details and the menu for the comments. Create a presentation template called News_Details. The source code is shown in listing 8.

<table width="100%" border="0"><tr><td>
<B><Element context="current" type="content" 
key="Title"/></B></td>
</tr><tr><td width="10" align="left">
<Element context="current" type="content" key="Image"/> </td>
<td><Element context="current" type="content" 
key="Description"/>
</td></tr></table>
<Component name="comments_menu"/>

After creating the authoring template and presentation template, open the news site that you created earlier and edit the template mapping. Refer to figure 5.

Navigator component for the news list

Create a navigator component by selecting New - Navigator Component. This component acts as a menu of all the news items or news site areas. It does not contain any contents except the site area name that represents the news items. The start type is set to Current – Content. See figure 6.

NOTE: The navigator component works only when the default content for each site area is added.

Add the following code in the Component Design 1 section to show the name with a link for the news item site area:

Site areas

Because the news content and its comments have to be linked somehow, one of the options is to organize them together into a site area. Therefore, every news item has a separate site area with the news content along with the comments for that item.

There are many other ways to link the news content to the comments. This way, however, makes it easier to list the comments using the built-in menu component and avoiding the use of a JSP component.

Create a Site Area under the already created News Site and call it News_1. Refer to figure 2.

Next, create a Content Item and call it News_1 as well under the News_1 site area. Its authoring template is News_auth, and News_workflow is its workflow. After the content is published, set it to be the default content for the site area News_1.

Back to top

WebSphere Portal pages

Now that you have completed all the required steps and components, you can test the work you have done.

There are two options for rendering the example:

• Render the example as a portlet site.
• Render the example as a Web site.

Rendering as a portlet site

First, create a portal page that contains a portlet that displays the navigator component to show the list of news. The Portal Content Preview page is used. Only one Web Content Viewer portlet is needed.

Configure the Web Content Viewer portlet by clicking Edit Shared Settings. Select the Content Type to be Component. In the Component area, select the navigator component, News_nav, and any content in the content part. See figure 7.

When the page is rendered, the list of the news items is displayed as shown in figure 1. By clicking one of the items in the list, it displays the content with the form and the comments list.

Rendering as a portlet site

Follow these steps:

1. Create a presentation template called News_Home that displays the navigator:
   <Component name="NewsLibrary/News_nav"/>
2. Create a site area called Home under News Site.
3. Add the template mapping of the site area between any of the already existing authoring templates and the presentation template News_Home.
4. Create a content item and call it NewsHomeContent.
5. Set the created content as a default content for the site area Home.
6. Enter the URL shown in figure 8 to display the navigator and run the example.

Back to top

Enhancements

Using the previous example, you can add more complex features to it. For example:

• The JSP file can also handle the editing and deletion of a comment.
• An administrator form with Approve and Ignore buttons can contain a list of all pending comments.

Back to top

Conclusion

With the advent of Web 2.0 services and applications, enabling users to collaborate has become a necessity rather than a nice-to-have feature. In this article, we demonstrated how to clearly and simply allow your users to leave comments on content items using simple Web content management components.

Back to top

Acknowledgments

The author would like to express gratitude to Ahmed Abbas, Ahmed Khairy, Hala Aziz, and Mohamed Nour for their valuable comments and time spent reviewing the article.

Resources

• Participate in the discussion forum.
  
  
• Refer to the developerWorks® Lotus page on IBM Lotus Web Content Management.
  
  
• Refer to the IBM WebSphere® Portal, Version 6.0 Information Center.
  
  
• Read the developerWorks article, "End-to-End Web Content in WebSphere Portal using Web Content Management 6.0."
  
  

About the author

Comments (Undergoing maintenance)

Back to top

Trademarks  |  My developerWorks terms and conditions

Table of contents

• How does it work?
• Implementation
• Administrative approval
• Adding comments
• Handling recommendations
• WebSphere Portal pages
• Enhancements
• Conclusion
• Acknowledgments
• Resources
• About the author
• Comments

Next steps from IBM

Take advantage of open, flexible and New IBM approaches for delivering Web 2.0 applications.

---

• Try: Creating Web 2.0 Social Network applications is a snap with Rational Application Developer.
• Article: This article Explains how to use Ajax and JSF together in Rational Application Developer.
• Tutorial: Develop a Facebook app using PHP, Java and Rational Application Developer - a full featured Eclipse based IDE.
• Demo: This demo shows how to use Rational Application Developer with the new Java EE 5 Java Persistence API (JPA) framework.
• Buy: Rational Application Developer

My developerWorks community

Dig deeper into Lotus on developerWorks

Calling all developers

Download no charge Lotus Domino Designer

Special offers