JavaServerFaces (JSF) is a relatively new specification defined under the Java Community Process(SM). The JSF 1.0 specification describes a framework for rapid development of client-server user interfaces. In addition, portals and portlets have become a popular choice for implementing sophisticated and customizable Web interfaces. Addressing this process, JSR 168 is an industry specification that describes a standard way to implement portlets.
This article will describe how you can construct a portal-based application for customer relationship management. It will demonstrate how to use features provided with IRAD to:
- Construct JSR 168 portlets
- Develop portlet views with JSF
- Enable cooperative portlet behavior
- Pass user-defined JavaBeans between portlets
- Switch portlet view in response to a message from another portlet
This article series is organized into two parts. This article gives an overview of IRAD tools and describes the scenario that you will use for the series. Then it focuses on basic portlet and JSF development. In Part 2, you will look at implementing sophisticated user interface flows by enabling cooperative portlet behavior. Both articles are written using a tutorial-like format, and you are encouraged to follow along with the instructions, or browse the provided sample code. You can download the sample code from the Download section later in this article.
Tools for JSF and portlet development
IRAD provides tool support to facilitate portal and JSF development.
IRAD's portal and portlet development tools include:
- The New Portal Project wizard: Once you create a new portal project, you can use additional tools -- such as the New Theme wizard and the Portal Designer -- to create new skins and themes, and to edit the layout of your portal, respectively. Rational Application Developer 6.0 supports portal development for WebSphere Portal Server 5.0 only.
- The New Portlet wizard: This wizard helps you develop and unit-test portlets written to the IBM standard portlet API.
- The New Portlet (JSR 168) wizard: This wizard helps you develop and unit-test portlets written to the JSR 168 standard API. Once you create a new portlet project, you can use additional tools -- such as the portlet deployment descriptor editor -- to develop and unit-test your portlets.
- Support for portal unit test and remote server environments: This functionality allows you greater flexibility for testing and debugging. IRAD supports WebSphere Portal Server 5.0 and 5.1 unit test environments, as well as remote server attach for testing and debugging.
Tooling support for JSF development includes:
- The Faces Portlet option of the New Portlet (JSR 168) wizard
- The New Faces JSP wizard for JavaServer Pages (JSP)
- Page designer with associated supporting views (Palette, Page Data, and Properties)
By combining portal and JSF technologies, you can rapidly construct sophisticated user interfaces for the Web. In this article, you will focus on developing JSR 168 portlets with JSF views. Later you will take a look at how you can use tools provided with IRAD to construct a simple customer relationship management (CRM) browser application, which we'll call CRMBrowser.
A simple CRM application
The example used in both parts of this article series is based on a scenario where a call center agent needs to look up information for a particular customer. This example application consists of two portlets (see Figure 1) - the Summary portlet and the Detail portlet. The agent begins by browsing customer information in the Summary portlet, and then clicks on links in that portlet to display additional information in the Detail portlet.
Both portlets are JSR 168 compliant. Portlet views are implemented using JSF. The summary portlet communicates with the detail portlet via the property booker.
Figure 1. The CRMBrowser application interface
In order to develop this application, you will need to complete two stages:
- Develop the two portlets that show summary and detail information next to each other, and then create the JSP views for these portlets to display the actual data.
- Get the two portlets to pass information to one another, so that actions performed in the Summary Portlet will result in changes to views being shown in the Detail Portlet.
This part of the article series will focus on completing the first stage. You will learn how to enable and leverage IRAD's portal and JSF tools to construct portlets and portlet views.
Part 2 of this article series will focus on the more advanced aspects of cooperative portlet behavior. You will learn how to pass complex data types between portlets, and how to switch views in the target portlet in response to changes in the source.
Developing the CRMBrowser
In order to develop your CRMBrowser application, you need to complete the following high-level steps:
- Enable the correct capabilities in your IRAD workbench.
- Develop the portlets.
- Develop portlet views.
- Enable portlet cooperation to pass data between them (you will do this in Part 2).
Let's take a detailed look at each of these steps.
Preparing the workbench
In order to use IRAD's portal tools, you need to make sure that the Portal Tools advanced feature is selected during product installation. Once they are installed, you need to enable the portal capabilities of the workbench. To do this:
- Click Window > Preferences > Workbench-Capabilities (see Figure 2)
- Expand the Web Developer (advanced) node
- Select the Portal Development check box
Developing cooperative JSR 168-compliant portlets involves designing and editing XML schema (XSD) and WSDL files. Rational Application Developer provides excellent graphical tools that make working with WSDL and XSD files easier.
Figure 2. Enabling workbench capabilities via the Preferences dialog
To enable the WSDL and XSD tools:
- Click Window > Preferences > Workbench-Capabilities
- Expand the Web Services Developer and XML Developer nodes
- Select the Web Services Development and XML Development nodes
Next time you open a WSDL or XSD file it will be displayed in the corresponding editor, which allows you to view the contents graphically.
Now that the right workbench capabilities have been enabled, you need to connect to the WebSphere Portal Server 5.1 Unit Test Environment. If you have not installed the Unit Test Environment on your machine already, you will need to get the WebSphere Portal Server 5.1 for multiplatforms installation CD (or download it) and run the install -- see the Resources section later in this article. Make sure you select Test Environment during the installation. (If you have any problems during the installation, please refer to the WebSphere documentation -- see the Resources section later in this article.)
Now that the portal server unit test environment has been installed, we need to make sure that the workbench is aware of it:
- Click Window > Preferences from the workbench menu.
- In the Preferences dialog, expand the Server node and select the Installed Runtimes branch (see Figure 3).
- Click the Add button to bring up the New Server Runtime wizard.
Figure 3. Adding another runtime via the Preferences dialog box
- Select WebSphere Portal v5.1 from the list box (as shown in Figure 4).
Figure 4. Adding a new runtime with the New Server Runtime wizard
- Click Next.
- Enter the location of the portal server and the base application server (see Figure 5). Note: these locations will likely vary from machine to machine.
- Click Finish.
Figure 5. Entering the portal and base application server locations
Now that you've enabled your workbench to use WebSphere Portal 5.1 Unit Test Environment, you are ready to begin developing the application.
Developing the portlets
Our CRMBrowser application consists of two cooperating portlets -- the Summary portlet, and the Detail portlet. This section will discuss the steps required to construct these portlets using IRAD tools.
Creating a project for your portlets
- With the IRAD workbench started, switch to the Web perspective by clicking Window > Open Perspective > Web.
- Click Dynamic Web Projects in the Project Explorer view and right-click to bring up the context menu.
- Click New > Portlet Project (JSR 168). This launches the New Portlet Project (JSR 168) wizard shown in Figure 6.
CRMBrowseras the Name.
- Clear the Create a portlet checkbox. You will create your portlets separately in order to have better control over portlet naming conventions.
- Click the Show Advanced button.
- Select WebSphere Portal v5.1 Unit Test Environment in the Target Server list.
- Accept defaults for the other fields.
- Click Finish.
Figure 6. The New Portlet Project (JSR 168) wizard
You have now created a project named CRMBrowser in the workbench. The corresponding EAR project CRMBrowserEAR has also been created.
Creating your portlets
- Select the CRMBrowser project in the Project Navigator view.
- Right-click to bring up the context menu, and click New > Portlet. This launches the New Portlet wizard shown in Figure 7.
- On the first page of the wizard, select the Faces portlet (JSR 168) radio button.
- Click Next.
Figure 7. Selecting the portlet type in the New Portlet wizard
- On the Portlet Settings page, change the portlet settings for Portlet Name, Description, and Code Generation Options to match those shown in Figure 8.
Figure 8. Portlet settings for the Summary portlet
Repeat the same steps to create the Detail portlet, with the following differences:
DetailPortletas the portlet name on page 2 of the New Portlet wizard.
- Change the name of the view to /CustomerDetailView.jsp on page 3 of the wizard.
Now take a look at the structure of your project. The portlet project, as shown in the Project Explorer view, contains an icon representing the portlet deployment descriptor. If you expand this tree node, you will see two additional icons representing the portlets (see Figure 9).
Figure 9. Structure of the JSR 168 Portlet project
The Web Content folder contains two JSP files -- one view for each of your portlets. Double-click on one of the views to open it in the Page Designer. The generated view JSPs are essentially blank canvases. You will now use JSF to turn them into a sophisticated browser.
Developing The Portlet Views
Our two portlets will be able to show a total of three views:
- The Summary portlet will always show the CustomerSummaryView.jsp. This JSP page will display a summary of customer information as follows.
- The unique customer identification number
- The customer's first name
- The customer's last name
- A table listing issues that this customer has been discussing with call center personnel
Call center staff will be able to click on action links highlighting customer id number, or issue id number. In response, the Detail portlet will display an appropriate view showing expanded information about the selection.
- The Detail portlet can show two views.
- The CustomerDetailView.jsp shows detailed information about the customer (such as phone numbers and address), in addition to the information shown in the Summary portlet.
- The IssueDetailView.jsp shows expanded information about a particular issue (such as extended description, status, and product id).
The Detail Portlet will display one of these views based on what the user selects in the Summary portlet view.
You are now ready to develop the portlet views. Since the JSF framework is designed following the Model-View-Controller pattern, we should first consider the data which each view will display (the Model). At this stage you could either develop your own simple beans to act as the model for your views, or import code available with this article.
The JavaResources > JavaSource folder contains the package
com.ibm.sample.crmbrowser.beans. Inside this package you will find all of the beans used by CRMBrowser views.
First, you?ll build the CustomerSummaryView.jsp. The
com.ibm.sample.crmbrowser.beans.Customer bean will be the model for this view. This bean defines a number of properties:
customerIdwill provide string values that will populate customer summary controls shown on the page.
detailInfo(type CustomerDetailInfo) contains additional contact information that this view will not show, but will pass as a property to the Detail portlet.
issues(type java.util.ArrayList) contains a list of Issue objects, each of which describes a separate interaction that the customer had with the call center in the past. This will be displayed as a table with each issue id acting as an action link.
Building the Summary JSP
Following are the steps to build the CustomerSummaryView JSP:
- Double-click CustomerSummaryView.jsp in the Project Explorer view to open it in Page Designer. You will find the Page Date view on the bottom left of the main workbench window.
- Right-click and click New > Java Bean (see Figure 10). This will launch the Add JavaBean wizard shown in Figure 11.
Figure 10. Adding a new JavaBean to the Page Data view
customerSummaryas the Name of the bean, and
com.ibm.sample.crmbrowser.bean.Customer(or the fully qualified name of the type you chose to create) as the Class
- Click Finish. You?ve now added an instance of this JavaBean to the page data.
Figure 11. The Add JavaBean wizard
- Expand the
customerSummarybean in the Page Data view and change the contained type for the issues property (see Figure 12). Do this by right-clicking the contained type icon, clicking Change Contained Type, and entering
com.ibm.sample.crmbrowser.beans.Issueas the type in the dialog box.
Figure 12. Changing the contained type for the issues property
Generating the user interface controls
In these next steps, you'll generate the required user interface controls using this bean definition.
- Drag the
customerSummarybean from the Page Data view to the canvas of the Page Designer. This action launches the Insert JavaBean wizard (see Figure 13).
Figure 13. The Insert JavaBean wizard
This wizard lists the properties of the customerSummary bean (and other beans which that bean contains), and page controls which will be used to display the information to the end-user.
- Clear the checkbox next to customerDetailInfo (see Figure 13). We will not display this bean in the page UI.
- Click the right-most button in the issues row of the Fields to display table to launch the Insert JavaBean -- Configure Data Controls wizard for that bean (see Figure 14).
- Clear all the fields except issueId and shortDesc. We will display only these values for a given issue on the CustomerSummaryView.jsp.
- Click Finish twice to complete both wizards.
Figure 14. Configuring which fields will display in the Summary portlet issues list
The IRAD JSF tooling will now generate the form shown in Figure 15.
Figure 15. The form IRAD's JSF tooling generates
You can use the rich editing functionality provided by the Page Designer, the Properties view, and the Palette view to refine the layout and appearance of the page. This article will not go into details about how to do this, but there is more information in the Resources section.
To complete your page, we need to add some action controls to drive our interaction with the Detail Portlet. To do this:
- Expand the Palette view Faces Components.
- Click Command Hyperlink.
- Drop the hyperlink onto the
- Repeat this process to drop the hyperlink onto the
Figure 16 shows the resulting form UI.
Figure 16. Finalized UI for CustomerSummaryView.jsp
Developing the Customer Detail and Issue Detail views
To develop the other two views you need to repeat the same steps as for CustomerSummaryView.jsp. To develop CustomerDetailView.jsp:
- Open it in Page Designer.
- Add the
com.ibm.sample.crmbrowser.beans.CustomerDetailInfobean to the Page Data view just as you did for the Summary view.
- Drag this bean to the canvas of the Page Designer to generate the UI.
- Allow the tool to generate controls for all the fields of this bean.
To develop IssueDetailView.jsp, complete these steps:
- Select the WebContent folder of the CRMBrowser project in the Project Explorer.
- Right-click and click New > Faces JSP File from the context menu.
IssueDetailView.jspas the file name in the wizard that follows.
- Click Finish. The Page Designer should open, displaying the newly created page.
- Add the
com.ibm.sample.crmbrowser.beans.Issuebean to the Page Data view as described previously.
- Drag this bean to the canvas of the Page Designer.
- Allow the tools to generate controls for all of the bean fields.
Specifying the initial view for the Detail portlet
You have now created all three of your views. You've mapped controls that display data to the end-user to properties of JavaBean instances, and they will display data once executed. The only steps that remain are to edit the portlet deployment descriptor, and to set the initial view for the Detail Portlet. To do this:
- Select the portlet deployment descriptor icon in the Project explorer
- Double-click to open it in the Portlet Deployment Descriptor editor.
- Click on the DetailPortlet link in the editor's Overview tab.
- Scroll down the right column of the Portlets page to show the Initialization list.
- Edit the com.ibm.faces.portlet.page.view parameter and set it to show CustomerDetailView.jsp (see Figure 17).
- Save and exit the editor.
Figure 17. Specifying the initial view in the portlet deployment descriptor editor
You can construct sophisticated Web interfaces by combining JSF and portal technologies. IRAD provides tooling support to help you build, unit-test, and deploy your application very quickly.
Part 2 will discuss how you can enable cooperative portlet behavior so that you can fully implement Summary to Detail browsing interactions.
|Code supporting article||crmbrowser.zip||2.6 MB|
- The article Developing JSF Applications using WebSphere Studio V5.1.1 (developerWorks, January 2004) introduces you to Web development using JSF.
- Get the evaluation version of Rational Application Developer from the Trials and betas page.
- For evaluation versions of WebSphere products, visit the WebSphere downloads page.
- For WebSphere Portal product documentation, visit the documentation library page.
- The IBM Software Developer Platform homepage provides detailed information on the overall IBM Software Development platform.
- For technical resources about Rational's products, visit the developerWorks Rational content area . You'll find technical documentation, how-to articles, education, downloads, product information, and more. For specific information about Rational Application Developer, visit the RAD technical resources page.
- Find more product related information by visiting the IBM Rational marketing pages.
- Get involved in the developerWorks community by participating in developerWorks blogs.
- Ask questions about Rational Application Developer in the Rational Software Architect, Software Modeler, Application Developer and Web Developer forum.
- Browse for books on these and other technical topics.
Dig deeper into Rational software on developerWorks
Get samples, articles, product docs, and community resources to help build, deploy, and manage your cloud apps.
Keep up with the best and latest technical info to help you tackle your development challenges.
Software development in the cloud. Register today to create a project.
Evaluate IBM software and solutions, and transform challenges into opportunities.