Rapid portal site development using IBM Rational...

Rapid portal site development using IBM Rational Application Developer 7 and IBM WebSphere Portal 6 Part of a series on portal and portlet development

By Anuj Gupta

Development Manager IBM Corporation

Level: Introductory

August 2007

mailto:[email protected]

Rapid portal site development, of 24

Copyright © 2007, IBM® Corporation. All rights reserved. Published by IBM® developerWorks®.

Contents

Abstract ........................................................................................................................... 3

What to expect from this article ....................................................................................... 3

Set up the database ........................................................................................................ 3

Create the first portlet...................................................................................................... 5 Create JSP data .......................................................................................................... 7 Create a request parameter......................................................................................... 7 Create the Rational database SDO ............................................................................. 8 Add UI controls to portlet JSPs.................................................................................. 10 Add controls for the Action ID .................................................................................... 10 Add display fields to display fetched data .................................................................. 11 Add Action to the Submit button to fetch data............................................................ 12

Create the second portlet .............................................................................................. 13

Run the portlet on the server......................................................................................... 14 Add a new server instance to Rational Application Developer................................... 14

Enable cooperative portlets and wiring on portal........................................................... 15 Enable a portlet as a source ...................................................................................... 16 Enable a portlet as target........................................................................................... 17 Inserting the mechanism to trigger the property transfer ........................................... 18

Creating a portal Project, and placing portlets............................................................... 19

Wiring the cooperative portlets together in a portal ....................................................... 21

Cooperative portlets in action........................................................................................ 22

Other articles in this series ............................................................................................ 23

Resources ..................................................................................................................... 24

About the author............................................................................................................ 24



Abstract

This article describes the development of a portal application consisting of Java™Server Faces (JSF) cooperative portlets that use SDOs (Service Data Objects) to retrieve content from a relational database. Learn about the powerful features in Rational Application Developer that assemble everything together with no coding at all. The article uses few screen captures to show the steps, and you can download a recorded demonstration to see the complete step-by-step process of building the portal site.

What to expect from this article Built on top of Eclipse, IBM® Rational® Application Developer is one of the most widely used IDEs (integrated development environments). It shortens the learning curve and increases productivity by offering visual editors with drag-and-drop features and a variety of wizards. This article describes the relevant features that were introduced in Rational Application Developer Version 7, which also makes it useful to people who are using older versions and want to know whether upgrading would benefit their teams. This article walks you through how to use Rational Application Developer relational SDO tooling to develop an SDO that connects to an IBM® DB2® database. We then show you how to use Rational Application Developer Portlet Tooling to create portlets that use the SDO, which is based on Java™ Specification Request (JSR) 168. Next, we explain how to get these portlets to interact with each other by using the Rational Application Developer Cooperatives wizards. Finally, we go through creating a portal, placing the portlets in pages, and wiring them. When all of that is finished, the complete application will be deployed onto WebSphere Portal Server V6 from Rational Application Developer, and you can see what it looks like when it is running. Thus, with almost no coding, we will have an end-to-end portal that has portlets talking to each other and a relational database at the back end. We use a simple action-tracking application to demonstrate all of this. In this scenario, employees have tasks or actions assigned by a manager, and we want a portal to see the status of those assignments. We will also show how to see the employee details, such as contact information, for a particular action.

Set up the database The back end of our system is going to be a relational database. Specifically, we will be using Cloudscape, which comes with IBM® WebSphere® Application Server.

1. Find this application in the IBM WebSphere Application Server in the \cloudscape\bin\embedded directory.

2. Run the cview.bat batch file to start Cloudscape. 3. Create two tables, Action and Emp, in two different instances of Cloudscape

(because Cloudscape is embedded).



Table 1. EMP in Cloudscape database instance



Table 2. Action in Cloudscape database instance

4. After creating the tables, populate these with data. Because we will link these two tables, the value entered in the ACTION.owner_ID field should have a corresponding value in EMP.EMP_ID.

Our database is pretty well set up, so we are ready for the next step. But before that, let us summarize what we have done in this section.

Create the first portlet

Let’s get down to business straightaway. We kick off the process by creating the first of our two portlets.

1. Start Rational Application Developer V7. 2. From the Files menu, choose New and then Other. 3. Select the portlet project. This opens the first window of the New Portlet Project

wizard. 4. Type in a very obvious name for this portlet project., such as SamplePortlet. 5. Specify the Target Runtime as WebSphere Portal V6.0, because this is the

server where the portlets will run. 6. Also, add your portlet project to an EAR file that will get deployed to the server.



7. Because we are developing JSR 168-compliant portlets, choose JSR 168 Portlet as the Portlet API.

8. We want to create a portlet with this portlet project, too, so also check the Create a portlet check box.

9. We are starting with the EMP portlet, so we name our first portlet DemoEmp. 10. We are going to use the JavaServer™ Faces framework, so we choose Faces

portlet the Portlet Type. Figure 1. Wizard for creating a portlet project

11. Click Next to go to the next wizard page. This page is mainly about the content type, mode supported, and basic locale information. We are going to accept the defaults for this and the following pages; therefore, we terminate the wizard by clicking Finish.

12. When the portlet project creation process is complete, the Project Explorer shows the entire structure of our new portlet project.

13. By default, the default view JSP for the portlet opens (Figure 2) for us to make changes. We will change the static text to: This is employee info portlet.



Figure 2. Project Explorer with structure of the project and JSP

Create JSP data

1. Next, we need to create the Java™Server Page (JSP) data, but before we start,

we need to make sure that the Page Data view is enabled. For that, we navigate to Window > Show View > Other.

2. This displays the Show View window. Our Page Data view is under the Web

category. Select it, and then click OK. The Page Data view shows the categories for JSP data.

Create a request parameter

1. Go to the Page Data view. Under Scripting Variables, right-click param, which represents request parameters for JSP pages to bring up the Add Request Parameter dialog.

2. Specify the Parameter name as EMP_ID, exactly the same as the filter in SDO (which we will do in the next session).

3. Click OK, and a new request parameter named EMP_ID gets created in the Page Data view.



Create the Rational database SDO

In this section, we will create SDO objects to help our portlets “talk to” the Cloudscape backend database. The relational database SDO objects that we need to create for this fall under the Relational Records category.

1. As a first step, we right-click Relational Records in the Page Data view and choose Relational Record, because we are interested in viewing one record at a time. This action brings up the Add Relational Record wizard, which will help us create the SDO of our choice.

2. Here, we must type in a suitable name. Because we will communicate with the EMP table, we name our SDO empSDO.

3. Keeping the rest as it is, we click Next, which takes us to the next page, Record Properties. This page will determine which table in which database to connect to and how. As suggested in the information message at the top of the dialog box, we start by creating a new connection:

4. Click New next to the Name field, which opens the New JDBC Connection wizard.

5. Since we do not have any existing connection listed, we go for the creation of a new connection radio button and click Next. The next page is a pretty important one, for it asks for the connection parameters. (See Figure 3.)

Figure 3. Wizard to create a new JDBC connection



6. Choose the Cloudscape database manager. 7. Also put in the User Information. 8. We specify the database location and the class location. 9. Just to make sure that everything is feeding is correctly, we test our connection by

clicking Test Connection. It works! 10. Click OK in this information dialog, and then click Finish on the New JDBC Connection

page to return to the Record Properties page. Because the JDBC connection is created for the database of your choice, the page is populated with the database schema.

11. Our next job is to select the table that we want to connect to, which in this case is the EMP table. Select EMP, and then click Next. The next page shows the column or field information for the selected table. This table does not have primary key, so we select EMP_ID. By default, the filter will use the primary key.

Important: The filter and request parameter must have the same value, EMP_ID in this case. Figure 4. Last window of the SDO wizard, which shows the tables and fields

12. We can choose the columns we wish to be a part of the record set that will be returned to us. We decide to go in for all, so we click Finish.



After all of the information has been provided, the empSDO is created for us. As you can see, the empSDO consists of the record set that contains all of the fields of the EMP table that we have chosen. Methods for deletion, updates, and so forth are also provided.

Add UI controls to portlet JSPs

Having created the SDO and request parameters, it is time now to create the UI (user interface) around them.

Add controls for the Action ID

We will be using the EMP_ID request parameter for accepting the ID of the employee that we need information about. This request parameter is the filter based on which a record will be fetched from the database. To enable the user to enter an employee ID, we generate UI controls by using a Rational Application Developer drag-and-drop feature.

1. Open the DemoEmpView.jsp file in the editor. Make sure that the Design tab is selected in the JSP editor.

2. Click the EMP_ID request parameter in Page Data view, and drag and drop it onto the DemoEmpView.jsp, already opened in the editor in step 1.

3. An Insert JavaBean dialog appears (Figure 5). 4. Since we need controls to input data; therefore, we need to select the Inputting

data radio button



Figure 5. Wizard for creating UI control for input parameters

5. We click OK for the Options dialog box and click Finish for the Insert JavaBean dialog box. This results in a form getting generated on our portlet JSP, DemoEmpView.jsp.

So far, so good. It’s time to place our output controls on the JSP.

Add display fields to display fetched data

Thus far, we have set everything up so that we can get data back to our JSP. All we need now are fields that can display that data. For that, it’s the Rational Application Developer drag-and-drop feature to the rescue again.

1. Once again, locate the empSDO SDO object under Relational Records in the Page Data view. The item under empSDO with the plus sign in front of it is the fetched record set.

2. If we expand it, we see all of the columns or fields from the EMP table that this record set will fetch. So, we click this record set object and drag into onto the portlet view JSP.

3. As always, we must make sure that our JSP is opened in Design mode, which is indicated by the tabs at the bottom.

4. The now-familiar tool tip message again indicates what needs to happen next. So, we just drop and then let go of the left mouse button. An Insert Record wizard appears (Figure 6).



Figure 6. Wizard for creating UI control for display parameters

5. The important thing here to bear in mind here is that these are going to be display-only fields. Therefore, we choose the Displaying an existing record (read-only) radio button.

6. Also, we can uncheck the fields that we do not want to display. As you may recall, while creating the SDO object, we chose all fields or columns from the EMP table to be fetched. Here, in the Insert Record wizard, we can specify which fields we want to display. Such an approach gives us more flexibility in choosing the data to display.

Add Action to the Submit button to fetch data

We now map the Submit button to the fetch action method of SDO, so that the record for the given action ID is fetch. Doing this is again fairly straight-forward, thanks to the Rational Application Developer drag-and-drop feature.

1. In the Page Data view, locate empSDO. 2. For our case, the doempSDOFetchAction() is the Action method, so we drag this method name

onto the Submit button (see Figure 7).



Figure 7. Generated output form

This completes our first portlet. We have things in place, and we are ready to see how this portlet looks when we run it on the portal server.

Create the second portlet It is time now to create the Action portlet, thereby adding another portlet to the existing portlet project.

1. We navigate to the Portlet Deployment Descriptor node under our Demo portlet project.

2. We right-click it, and choose New > Portlet. This brings up the New Portlet wizard.

3. We leave everything else as the default are set, although we change the Portlet name to DemoAction. We then click Next.

4. This page is exactly the same as the second page of the Portlet Project wizard. Accept the defaults, and then click Finish to generate the Action portlet.

5. The rest of the steps are the same as those for the Action portlet, DemoEmp that we already created.



Run the portlet on the server

Welcome to the other side, also known as the server side. One of the major benefits of Rational Application Developer as a development platform is that it is an end-to-end tooling solution. It integrates the server and development environments, and that helps developers run and debug portlets and portals on the server. Running our newly created portlet on the server is two-step process:

1. First, we need to create a new server instance inside of Rational Application Developer

2. Then we need to run our portlet on it.

Add a new server instance to Rational Application Developer

1. We right-click the portlet project, and choose Run on server. 2. The New Server wizard opens, where we specify the host name of the machine

on which our server is installed. In our case, it is on the local machine. 3. Because we developed our portlets for WebSphere Portal V6.0, we choose that

as our server type (see Figure 8). Figure 8. Wizard for creating new server instance



1. Click Next on the WebSphere Settings page. 2. Next, we merely enter our credentials and leave the rest of the default settings.

These credentials are for the WebSphere administration server. 3. Click Next to open the WebSphere Portal Settings page. Here too, we leave

the defaults and enter our user credentials. These credentials are for the portal server.

4. We accept the defaults for the Properties publishing settings on the next page, and then click Next.

5. Clicking Finish will kick off the process of publishing of our portlet project on the server. After it is published, a browser shows our two portlets.

6. We can specify any Action or Emp (employee) that we wish information on then. Figure 9. Publishing the portlets

Enable cooperative portlets and wiring on portal

Our portlets are together, yet independent, so they have been working perfectly, yet in isolation. We now want them to communicate or “talk to each other.” Portlets that can exchange information or properties are known as cooperative portlets.



Our aim here is to get the DemoAction portlet to convey the employee ID of the action owner to the DemoEmp portlet. Let’s see how the Rational Application Developer cooperative portlet wizards will help us in these tasks.

Enable a portlet as a source

Our DemoAction portlet is going to communicate the employee ID, thus it is going to act as the source of information or property. Hence, as a first step, we need to enable DemoAction portlet as a source.

1. For this, we once again navigate down to the Portlet Deployment Descriptor node. We can see our portlets right under it.

2. We right-click the DemoAction portlet and select Cooperative. Under Cooperative, we select Enable this Portlet to Send Data (Source).

3. This brings up the Cooperative – Enable this Portlet to Send Data wizard. We will make a note of the Data Type URI, and click Next.

Figure 10. Wizard for source cooperative portlet

4. We accept the values under the Property Transfer page as defaults, and click Finish.



The previous action has successfully enabled the DemoAction portlet as source. A tiny icon in the bottom-right corner of the DemoAction portlet icon confirms that.

Enable a portlet as target

The DemoEmp portlet is going to receive employee IDs sent by the DemoAction portlet. This makes it the target portlet, so it needs to be enabled accordingly. The procedure is the same as enabling a portlet as source:

1. Navigate to the Portlet Deployment Descriptor node. 2. After right-clicking the Employees portlet node, choose Cooperative > Enable

the Portlet to Receive Data (Target). This launches the Cooperative – Enable this Portlet to Receive Data wizard dialog. The most important thing to remember while playing around with cooperative portlets is that the Data Type URI for the property that this target portlet will receive must be the same as that of the source portlet described. If you refer back to the enable as source wizard, we indeed talked about keeping a note of the Data Type URI of the property to be sent. In short, the Data Type URI for both source and target portlet must match for a given property. Figure 11. Wizard for the source cooperative portlet – first dialog



3. Leave the Java Type as it is, and click Next. The Property Name, which is on the Property Transfer page, must be treated carefully. For empSDO object, our filter was called EMP_ID. This name must match the request parameter, which the user will be asked to provide. Thus, the three values must be the same for proper functioning. Figure 12. Wizard for source cooperative portlet – second dialog

Inserting the mechanism to trigger the property transfer

So, now we know that there is a source portlet sending a property to a target portlet. But that sending of property needs to be triggered explicitly. This is where our Palette view comes in handy. If not already visible, it can be invoked the same way as the Server or the Page Data view. The section labeled Portlet in the Palette is of interest to us. If we expand that, we see a Cooperative Source Trigger entry. This is the one! As you surely have guessed by now, you can handle this, yet again, by using the drag-and-drop capability. Because the sending of property needs to happen from the source portlet, we must ensure that the source portlet view JSP, DemoActionView.jsp, is opened up in the Design mode. We simply click Cooperative Source Trigger and drag it



onto the property that we wish to send across. It is the OWNER_ID value in our case. So let go of the mouse pointer when the cursor hovers over that value. This brings up an Insert Cooperative Source Trigger wizard. This wizard is fairly straight-forward.

1. We pick DemoAction from the Source Portlet drop-down menu. 2. Choose SourceAction from the Action Value dropdown. Choose

outputProperty from the Property Name drop-down. 3. The Value to Send will be automatically set to the property that we wish to

transfer. Finally, we set UI Type to Link. The wizard looks as you see in Figure 13 after we key in all the values.

Figure 13. Insert Cooperative Source Trigger wizard

Creating a portal Project, and placing portlets 1. Now that we know how to invoke a wizard for creating project, we select a portal

project. 2. Give it a name, and click Finish.



Figure 14. Wizard for creating the portal project

3. Next, we add a new page by dragging Page from the left panel. 4. Then we change the titles of these pages by going to Property tab. 5. Finally, we select the portlets from Portlet Deployment Descriptor and drag

them to the pages.



Figure 15. Portal with two pages and a portlet in each

Wiring the cooperative portlets together in a portal So far, we have defined a source portlet, a portlet that can send property out, and a target portlet, a portlet that can receive property. But, we still don’t know which portlet the source portlet is sending its property to, and from which portlet the target portlet is receiving its property. This is where wiring comes in. Wiring is the logical tying together of a source and a target portlet. It ensures mapping between a source and target portlet.

1. To wire them, we select the Action information page, go to Properties view, and then to Wires tab.

2. Click Add and select DemoEmp as the target portlet. Leave rest of the values in the wizard as defaults.

3. Then click Finish, and our portlets are wired.



Figure 16. Wizard for wiring two portlets

4. Now we just need to run the portal project, as we did for portlet project. This time, we select the server that is already started.

Cooperative portlets in action

It’s time to see if everything works together. First, we enter an Action ID to retrieve its details. The Owner ID is hyperlinked. It refers to the employee who owns the action. The moment we click it, the Employees portlet displays the details about that employee (Figure 16).



Figure 16. Developed application running on WebSphere Portal

Although we created a working portlet application with no coding at all, an advanced developer can customize portlets even further. Rational Application Developer offers complete access to the Java™ code behind everything that you saw as examples in this article. Through this simple portlet application, you saw various features that Rational Application Developer offers for end-to-end portlet development. The visual editors, the drag-and-drop features, the wizards, and so forth are provided to increase productivity and reduce the learning time. In summary, Rational Application Developer enables you to focus on the business logic, while it takes care of the rest of the details.

Other articles in this series

Check the One-stop guide to portal and portlet application development using Rational Application Developer V7 and WebSphere Portal V6 for summaries of the nine other articles in this series and links to download each of them in PDF format. Topics covered include the predevelopment resources, portlet tooling features, portal design tools, and the testing, deploying, and debugging capabilities of Rational Application Developer.

http://www.ibm.com/developerworks/rational/downloads/07/rad_portal_series/index.html

http://www.ibm.com/developerworks/rational/downloads/07/rad_portal_series/index.html



Resources

Learn • Get information on IBM Rational Application Developer and how to use it:

o What's new in IBM Rational Application Developer V7.0 o IBM Rational Application Developer Version 7.0 Information Center o Rational Application Developer page on IBM® developerWorks®

• For product documentation for WebSphere Portal, visit the IBM WebSphere Portal Version 6.0 Information Center

• Find out What’s new in WebSphere Portal Version 6. This developerWorks article by Stefan Hepper, Stefan Liesche, Gregory Melahn, and Thomas Stober (July 2006) describes the highlights in IBM® WebSphere® Portal Version 6.0. You see how WebSphere Portal helps you create a service-oriented architecture (SOA) environment, and you learn about the technical enhancements that speed up your development projects, providing quick business value and ease-of-use. This article is as a good starting point to understand the version content and the improvements since the previous releases.

• Read about Creating a new portal, an IBM developerWorks series of articles. • Visit the Rational page on developerWorks to find technical resources and

learn about best practices for the Rational Software Delivery Platform. • Subscribe to The Rational Edge weekly newsletter.

Discuss

• Participate in the Rational Software Architect, Data Architect, Software Modeler, Systems Developer, Application Developer and Web Developer forums and the WebSphere Portal forum, where you can ask questions, share your experiences, and discuss problems and solutions.

Get software

• Get the evaluation version of Rational Application Developer. • Get WebSphere evaluation versions from the WebSphere downloads page.

About the author

Anuj Gupta is development manager for the Portal Tooling component in Rational Application Developer in the Lotus group at IBM India Software Labs in Delhi, India.

http://www.ibm.com/developerworks/rational/library/06/1205_lloyd_rad/

http://publib.boulder.ibm.com/infocenter/radhelp/v7r0m0/index.jsp

http://www.ibm.com/developerworks/rational/products/rad/

http://publib.boulder.ibm.com/infocenter/wpdoc/v6r0/index.jsp

http://publib.boulder.ibm.com/infocenter/wpdoc/v6r0/index.jsp

http://www.ibm.com/developerworks/websphere/library/techarticles/0607_hepper/0607_hepper.html

http://www.ibm.com/developerworks/websphere/library/techarticles/0508_bernal/0508_bernal-intro.html

http://www.ibm.com/developerworks/rational

http://www.ibm.com/developerworks/rational/rationaledge/

http://www.ibm.com/developerworks/forums/dw_forum.jsp?forum=430&cat=24

http://www.ibm.com/developerworks/downloads/r/rad/?S_TACT=105AGX15&S_CMP=LP

http://www.ibm.com/developerworks/websphere/downloads/index.html

Rapid portal site development using IBM Rational...

Documents

Transcript of Rapid portal site development using IBM Rational...