Portlets and Tiles

8/10/2019 Portlets and Tiles

1/12

Rapidly implementing portal look-and-feel using

Struts Tiles and the Portlet Framework in

WebSphere Application Server V6.1

Introduction

Beginning with Version 6.1, WebSphere Application Server provides an embedded JSR168 portlet container.

You can now deploy portlets, which could previously only be deployed to a portal server (such as IBM

WebSphere Portal, hereafter called WebSphere Portal), to Application Server V6.1.

This capability provides several major advantages:

1. You can write portlets as reusable components, use them first in Application Server, and later use them

in a JSR 168-compatible portal server (such as WebSphere Portal) to use more advanced features in the

portal server.2. You can integrate standard portlets that are written by others, from open source or commercial portlet

catalogs (such as the WebSphere Portal catalog), in Application Server.

3. You can deploy a portlet along side a servlet to meet various business needs. For example, you might

want to use portlets to provide an aggregated view of various data, and use servlets to handle complex a

user interface with lots of page flows.

4.

Your application is more portable to pervasive devices with various screen sizes because portlets, which

each occupy a small rectangle region on a page, can be easily rendered on a pervasive device. For

example, your application might specify a single portlet to occupy the entire screen in a cellular phone;

two portlets in a pocket PC side-by-side; and, multiple portlets to be rendered into a Web browser.

However, Application Server 6.1 does not provide the extended features and capabilities that are normally builtinto a portal server (such as WebSphere Portal). A key feature for a portal is its customizable look-and-feel. In

a portal server, customization and personalization are usually handled dynamically through configuration. For

example, you can dynamically personalize page themes and skins based on user groups, and you can assign

specific user groups permissions to use portlets at runtime. If you want to use these features in Application

Server, you have to write them yourself. In addition, aggregation in Application Server is accomplished

programmatically using the aggregation tag library. If you want to display multiple portlets in a page, you need

to write code to do so using the aggregation tag library. (See the article series "Exploiting the WebSphere

Application Server V6.1 portlet container", listed inResources).

The Tiles framework provides a mechanism to define common layouts for reuse as theme templates in a portal.

You combine tiles (as theme templates) and portlet aggregation (as page content) to quickly implement a portallook-and-feel in Application Server. You define page layouts (themes) using the Tiles tag library, and assemble

portlets using the portlet aggregation tag library. Then, you link the aggregated portlets to the tiles in the page

layout. Both Tiles and portlet tags can take parameters, so you can create a customized look-and-feel, as well

as dynamic content.

This article introduces you to integrating Struts Tiles tags and portlet aggregation tags in Application Server to

create customized portal pages and a portal look-and-feel. You learn how to:

1. Create page, menu, and portlet layouts using Tiles tags and portlet aggregation tags.

2.

Use the layouts to create customized pages.

3.

Assemble the layouts into your portal.

Thesample codeis for demo purpose only. However, you can use the techniques provided in this article to

implement a more customer-oriented look-and-feel for your own application. Readers should have a basic

knowledge of Tiles, portlets, and portlet frameworks in Application Server V6.1, and know how to create and

use them. The portlets used in this article are from IBM and Sun sample JSR 168 portlet code (seeResources).
http://www.ibm.com/developerworks/websphere/library/techarticles/0703_yan/0703_yan.html#resourceshttp://www.ibm.com/developerworks/websphere/library/techarticles/0703_yan/0703_yan.html#resourceshttp://www.ibm.com/developerworks/websphere/library/techarticles/0703_yan/0703_yan.html#resourceshttp://www.ibm.com/developerworks/websphere/library/techarticles/0703_yan/0703_yan.html#downloadhttp://www.ibm.com/developerworks/websphere/library/techarticles/0703_yan/0703_yan.html#downloadhttp://www.ibm.com/developerworks/websphere/library/techarticles/0703_yan/0703_yan.html#downloadhttp://www.ibm.com/developerworks/websphere/library/techarticles/0703_yan/0703_yan.html#resourceshttp://www.ibm.com/developerworks/websphere/library/techarticles/0703_yan/0703_yan.html#resourceshttp://www.ibm.com/developerworks/websphere/library/techarticles/0703_yan/0703_yan.html#resourceshttp://www.ibm.com/developerworks/websphere/library/techarticles/0703_yan/0703_yan.html#resourceshttp://www.ibm.com/developerworks/websphere/library/techarticles/0703_yan/0703_yan.html#downloadhttp://www.ibm.com/developerworks/websphere/library/techarticles/0703_yan/0703_yan.html#resources


2/12

The sample portlets are re-packaged in the WebSphere Application Server Toolkit 6.1 so you can deploy them

to Application Server.

Back to top

Using Tiles and the Portlet Aggregation Framework together

As an example, let's examine a classic portal layout, which consists of header, menu, body, and footer regions

(Figure 1). You can think of each region as a tile whose content can be passed as a parameter (a page, page

segment, or a string). You can define the menu and body regions as templates in menu layout and body layout,respectively, as shown in Figure 1. The menu layout consists of dynamic pages, each of which links to a

different set of portlets aggregated in a portlet layout. You can group sub-pages into a page, organized for a

specific purpose. The portlet layout in the body region consists of various numbers of portlets aggregated using

the portlet aggregation tags provided in Application Server.

You can create a unique portal look-and-feel in Application Server 6.1 in two ways.

1. By passing different parameters (page, page segment, strings, or portlets) to the tiles and sub-tiles in the

layouts, based on the user who makes a request to customize portal pages.

2.

By changing the layouts, or by using multiple layouts. You can change page layout for a differenttheme, change portlet layout for a different skin, and change menu layout to modify the placement of

the menu.

For example, you might want a top horizontal, rather than a top-down, tree-based page navigation menu. You

can always create multiple layouts for use in different pages and for different user groups. For example, you

might want administrative portal pages to use different page, menu, and portlet layouts to differentiate their

interface from the user interface.

Figure 1. A classic portal layout

Back to top

Creating the portal layout
http://www.ibm.com/developerworks/websphere/library/techarticles/0703_yan/0703_yan.html#ibm-contenthttp://www.ibm.com/developerworks/websphere/library/techarticles/0703_yan/0703_yan.html#ibm-contenthttp://www.ibm.com/developerworks/websphere/library/techarticles/0703_yan/0703_yan.html#ibm-contenthttp://www.ibm.com/developerworks/websphere/library/techarticles/0703_yan/0703_yan.html#ibm-contenthttp://www.ibm.com/developerworks/websphere/library/techarticles/0703_yan/0703_yan.html#ibm-contenthttp://www.ibm.com/developerworks/websphere/library/techarticles/0703_yan/0703_yan.html#ibm-content


3/12


4/12

The menu layout in Listing 2 uses the Struts logic tag to iteratively display page names and links. The pages

and their links are passed in a list (java.util.List) of beans (org.apache.struts.tiles.beans.SimpleMenuItem)

by the calling JSP page. If a link that is passed in the bean refers to an absolute URL (starting with "/"), it is

copied over and displayed. Otherwise, the link is appended to the page context obtained using

request.getContextPath(),and then displayed.

Creating a portlet layout

A portal body contains portlets in various columns and rows. The portlet layout defines a grid of cells, for each

portlet in the portal body region. Listing 3 shows the coding for a portlet layout that shows a tabular view of

portlet placements in the body region. In the layout, the number of columns in the portal body is passed fromcalling JSP as a string. The portlet URLs, supported modes for each portlet, and the initial portlet mode are all

passed in a list of utility beans (com.jktelecom.PortletInfo) from a calling JSP page. Therefore, a calling JSP

page has total control over the number of portlets and the placement, initial mode, and supported modes of

each portlet in a page, so you don't have to modify the portlet layout for each portlet.

The portlet layout uses the number of columns and size of the portlet list (both of which are passed by the

calling JSP page) to determine the number of rows and cells in which portlets are rendered. The portlet layout

iterates through the list in the order originally inserted into the list. It places the supported portlet modes in the

tag, and the portlet URI in the tag so that the modes and portlet content

can be dynamically rendered to the corresponding cell. The portlet modes, with proper links, will be displayedalong with the portlet title, which is retrieved from the portlet deployment descriptor (portlet.xml) by

tag.

Listing 3. Portlet layout


5/12


6/12


7/12


8/12

A calling JSP page can also override the default behavior defined in the page layout definition by passing

different parameters. In Listing 8, a calling JSP page (tools.jsp) uses the page layout definition in Listing 7; it

overrides the default menu page (default_body.jsp) and body page (default_menu.jsp) using menu.jsp and

portlets.jsp.

Listing 8. A portal page (tools.jsp) which uses the page layout

Using page navigation

Listing 9 shows a portal menu (menu.jsp) using the menu layout. The portal menu uses jsp:useBeanto create

an instance of SimpleMenuItem. Then, it uses jsp:setPropertyto set the linkand valueproperties of the

SimpleMenuItembean. Finally, it adds the bean to the list using tiles:add.

The menu is customized on a user group basis to create role-based pages without modifying the menu layout.

Therefore, a page is visible only if the user is in a specific role and has permission to the page. The user role is

determined by the isUserInRole method of the request object.

Listing 9. A portal page menu which uses the menu layout

...

...

...


9/12

Using the portlet layout

Listing 10 shows a JSP page (menu.jsp) which uses the menu layout. The number of columns in which portlets

are rendered in the body, and a list of beans (com.jktelecom.PortletInfo) created by are passed

to the portlet layout. The bean contains all the information (portlet URL, initial mode, and supported modes)

the portlet layout needs to render the portlets.

Listing 10. A JSP page which uses portlet layout

As shown in Listing 8, the number of columns and the list of portlets are set on a role basis. You can also

control permissions to the portlets from your calling JSP. You can implement these customizations in several

ways:

1. A portlet is visible to a user only if the user is in certain role and has permission to it; therefore, you can

selectively pass portlets to the portlet layout for a specific user or user group. Users without permissions

to the portlets will not see them in their portal.


10/12


11/12

Back to top

Deploying the portal

You package the application as a WAR file and deploy it as any Web application. Figures 3 and 4 show the

deployed portal for the example code. The context root is specified as jkTelecom. If you use a relative path for

the PortletUrlPrefix attribute in the inittag (as discussed in the portlet layout section), you can use anystring as the context root. Otherwise, you must specify the same context root as you used in the aggregation

context.

Figure 3. Deployed portal with user sarain the "Managers" role
http://www.ibm.com/developerworks/websphere/library/techarticles/0703_yan/0703_yan.html#ibm-contenthttp://www.ibm.com/developerworks/websphere/library/techarticles/0703_yan/0703_yan.html#ibm-contenthttp://www.ibm.com/developerworks/websphere/library/techarticles/0703_yan/0703_yan.html#ibm-content


12/12

Figure 4. Deployed portal with user fredin the "Users" role

Back to top

Conclusion

Now you know how to create common portal layouts (page, navigation, and portlet layouts) as reusable

templates using Struts Tile tags and portlet aggregation tags. You can use the layouts to create dynamic webpages, and you can assemble the layouts into a portal. You have seen how to address various development and

deployment issues to ease the development effort. Now you can apply the information presented here to create

your own portal pages using the WebSphere Application Server portlet container and aggregation tags.
http://www.ibm.com/developerworks/websphere/library/techarticles/0703_yan/0703_yan.html#ibm-contenthttp://www.ibm.com/developerworks/websphere/library/techarticles/0703_yan/0703_yan.html#ibm-contenthttp://www.ibm.com/developerworks/websphere/library/techarticles/0703_yan/0703_yan.html#ibm-content

Documents

Portlets and Tiles