- The Benefits of Inter-Portlet Communication
- The WebSphere Property Broker
- Creating a Service Provider
- Testing the Service Provider
- Creating a List Portlet
- Creating a Detail Portlet
- Configuring the WebSphere Property Broker
- Alternative Communication Methods
- When to Use Inter-Portlet Communication
- Summary
- Important Points
This chapter is from the book
This chapter is from the book
This chapter is from the book
Creating a Detail Portlet
This section describes how to build a detail portlet, which communicates with the list portlet created earlier. As with the previous portlet, this portlet consumes the loansService service to obtain its loan information. Details for loans selected in the list portlet are brought up in the detail portlet via the Property Broker—a screen shot of the portlet is shown later in Figure 7.15.
){kind=link}
The model uses the following builders to provide its functionality:
- Portlet Adapter
- Service Consumer
- Page (x2)
- Action List
- Data Page
- Cooperative Portlet Target
- Event Handler
Creating a Model
The list model is a good starting point for building the detail portlet, so make a new copy of the list model by selecting the loansList model in the Project Explorer view, and then pressing Ctrl+C, then Ctl+V. Name the new model loanDetail when prompted.
Double-click the loanDetail model to open it for editing. Before you add builder calls to communicate with the loansList portlet, you should first modify the loanDetail model so it does not conflict with the loansList model when it is deployed as a portlet.
To do this, open the Portlet Adapter builder call in the loanDetail model, change the Name input to loanDetail, and then change the Portlet Title input to Loan Detail. This ensures that there are no conflicts between the list and detail portlets when you deploy them. Also, change the Portlet Description to Loan details. Now delete the Cooperative Portlet Source builder call from the loanDetail model, because in the current example the loanDetail model is a target of communication, not a source. Also, delete the View & Form builder because you are using a Data Page instead. You can reconfigure the View & Form so that it displays only detail information, but, in this case, it is easier to use a Data Page.
Adding a Default Message Page
Note that when the loanDetail portlet loads, it should not display any loan information, but rather a message indicating that no loan is currently selected. To bring this about, you need to add another Page builder call to the model. Add a new Page builder call, and name the builder call defaultPage. Enter in the following HTML into the Page Contents (HTML) input:
<html>
<body>
<div>
No loan selected.
</div>
</body>
</html>
This displays the text No loan selected. in the Loan Detail portlet. Save the builder call when you are finished.
Adding a main Action
Now, add an Action List builder call to the model. Call the action list main, which causes the action list to execute whenever the model is run. Enter defaultPage for the first action in the Actions input and save the builder call. The loanDetail model now displays the defaultPage whenever it runs.
Adding an Interface for Loan Details
Add another Page builder call to the model; this creates an HTML page that displays whenever loan details are to be displayed for a loan. Change the Name of the builder call to detailsPage, and then enter in the following HTML into the Page Contents (HTML) input:
<html>
<body>
<span name="loanDetails"></span>
</body>
</html>
This page has a single span tag on it (loanDetails) that is overwritten with loan details using a Data Page. Save the builder call when you are finished, and add a Data Page builder call to the model to add the loan details. Type the name detailsPage for the Data Page, and then open the Select Action dialog for the Variable input. Select the Loan element from the results of the getLoanDetail operation, as shown in Figure 7.9, and press OK. This causes the Data Page to display the results of the getLoanDetail operation.
)
Figure 7.9 Selecting the Loan element.
Next, point the Page in Model input to detailsPage and change the Page Type to View Only so that there are no data entry controls inserted onto the page. Finally, specify detailsPage for the Location for New Tags input and save the builder call.
Defining the Portlet as a Cooperative Target
The next step is to define the loanDetail model as a target for inter-portlet communication. To do this, add a Cooperative Portlet Target builder call to the model. Change the Event Name input to openLoanDetail, and then fill out the Input Definition section, as shown in Figure 7.10. These settings define the communication inputs and should be the same as the outputs defined in the Cooperative Portlet Source builder call in the loansList model. Keeping these settings identical makes it easier to understand what is being sent where, and prevents possible type mismatches.
)
Figure 7.10 Configuring the Cooperative Portlet Target builder call.
Leave the Output Definition section blank. There are no outputs for this builder call, because nothing is sent back after the loanDetail portlet receives the loan ID.
Notice the namespace at the bottom of the builder call. This builder must be the same as the namespace defined in the Cooperative Portlet Source builder call, or else the two portlets cannot communicate (you can leave the default value). Enter in Displays loan detail for the Caption and save the builder call. Note that this caption describes what happens when the property changes, whereas the caption in the Input Definition section describes the property itself.
Handling an Inter-Portlet Communication Event
You now have an event called openLoanDetail, which you later link to a loan ID being clicked in the loansList model. However, you haven't defined anything to happen when the openLoanDetail event is triggered. To do this, you need an event handler. Add an Event Handler builder call to the model and call it handleOpenLoanDetail. Select the openLoanDetail event from the Event Name drop-down box and notice that a String argument called loanID has been added in the Arguments section. This loanID is the same loanID as that specified in the Cooperative Portlet Target builder call, which means that you can now access the loan ID from the openLoanDetail event.
Change the Return Type input to void, because there is no need to return any information to the caller of this event. You simply want to perform some actions, which you specify in the Actions input. Open the Select Action dialog for the first action and find the getLoanDetail operation under the Methods section. Notice that there are two versions of the operation. Select the one that enables you to specify arguments, as shown in Figure 7.11, and press OK. A Define Method Call Arguments dialog appears; select the loan ID from under the Variables section in the Select Action dialog, which should then populate the value ${Arguments/loanID} to the underlying dialog. Press OK when you are finished to accept the new action.
)
Figure 7.11 Adding the loansGetLoanDetailWithArgs method.
For the second action, select the details page from under the Page section of the Select Action dialog. It appears as 'detailsPage'. The actions are now complete: The first action consumes the getLoanDetail operation on the loansService service, passing in the loan ID as a parameter. This loads only the information into a results variable, so the second action is necessary to display the results. Save the builder call when you are finished.
Your project now contains a detail portlet. You will run a preliminary test on the detail portlet in the next section, and then test it in full after it has been deployed to a portal server and the Property Broker has been configured.
Testing the Detail Portlet
At this point, you should test that there are no obvious problems in the loanDetail model by previewing it from your IDE. You should see the message shown in Figure 7.12 displayed on the screen.
)
Figure 7.12 Testing the loanDetail model.
After you have configured the Property Broker later in this chapter, you can do a full test of the communication between the list and detail portlets. Before you do this, however, you should rebuild your application on the portal server. For instructions on how to do this, see the example in Chapter 1. Then, you can view the list and detail models as portlets. After you have added the portlets to a page in the portal, they should appear, as shown in Figure 7.13.
)
Figure 7.13 The loans application portlets.
Your application has now been successfully deployed to the portal server, although the portlets contained in the application cannot communicate with each other yet. The next section discusses how to set up this communication using the WebSphere Property Broker.