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#resources8/10/2019 Portlets and Tiles
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-content8/10/2019 Portlets and Tiles
3/12
8/10/2019 Portlets and Tiles
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
8/10/2019 Portlets and Tiles
5/12
8/10/2019 Portlets and Tiles
6/12
8/10/2019 Portlets and Tiles
7/12
8/10/2019 Portlets and Tiles
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
...
...
...
8/10/2019 Portlets and Tiles
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.
8/10/2019 Portlets and Tiles
10/12
8/10/2019 Portlets and Tiles
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-content8/10/2019 Portlets and Tiles
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-contentTop Related