Patterns: Implementing Self-Service in an SOA Environment

Chapter 9. JSF front-end scenario 275

Using the Source tab in the page designer, we can inspect the actual source

code of the JSP files. Figure 9-21 shows the portions of source code

corresponding to the two examples we described earlier. This is code which was

generated by Rational Software Architect based on the information we entered in

the properties window and the different wizards.

The first window shows the code binding the last name input field to the lname

field in the customerDO managed bean. The second window shows the code

binding the Create

button to the doCreateCustomerAction method in the

pc_CreateCustomer backing bean.

Figure 9-21 CreateCustomer.jsp data binding source code

9.4.5 Implementing page navigation

Section 9.3.1, “ITSOMart Web diagram” on page 253, provides a very good

overview of the page navigation in JSF, and specifically in the ITSOMart

application. This section explains the low-level details of how we use Rational

Software Architect to setup the navigation rules.

For this particular example, we depart from our usual create customer use case,

and instead look at the update customer screen. The reason is simply because

276 Patterns: Implementing Self-Service in an SOA Environment

that screen offers more possible outcomes, which makes it a more interesting

example to describe navigation. Figure 9-22 shows the ITSOMart update screen,

allowing the user to update their profile information, delete, or cancel the

operation.

Figure 9-22 Update Customer Screen

Update customer Web diagram

Section 9.3.1, “ITSOMart Web diagram” on page 253 introduces the concept of

Web diagrams. In that section however, the diagram is used to illustrate the

complete end-to-end flow of the ITSOMart application and omits such details as

the managed beans being invoked to trigger actions. Figure 9-23 on page 277

provides a more detailed Web diagram illustrating the screen flow design and

navigation for the update customer use case.

Chapter 9. JSF front-end scenario 277

Figure 9-23 Update customer Web diagram

Reading the diagram, we can infer the following information about the screen

flow of the update customer use case.

򐂰 From the UpdateCustomer.jsp page, there are three possible navigation

scenarios:

– The user can trigger an action to update the profile, with the

doUpdateCustomerAction

method of the pc_UpdateCustomer backing

bean. Note that the method name is truncated by Rational Software

Architect in the Web diagram.

– The user can trigger an action to delete the profile with the doDeleteAction

method of the pc_UpdateCustomer backing bean.

– The user can cancel out of the update screen, and simply navigate back to

the home page, CustomerAdmin.jsp.

򐂰 Depending on whether the update or delete actions are successful, the user

application navigates to an appropriate confirmation screen, or to a generic

system error page.

Implementing customer update navigation

Now that we understand how we want the use case to flow, we show how we

implement the flow using Rational Software Architect. We begin by setting up a

navigation rule for the Update button in the UpdateCustomer.jsp page.

278 Patterns: Implementing Self-Service in an SOA Environment

Assume that before we start, we first create an action method,

doUpdateCustomerAction, in the UpdateCustomer.java backing bean. This

method is bound to the Update button in the UpdateCustomer.jsp page, following

the steps previously described in “Binding command buttons to action methods”

on page 273. The method will return the outcome string of updateSuccess, if the

customer information is successfully updated. If there are any errors, the method

returns systemError.

Now we can add the navigation rule as follows.

1. Open UpdateCustomer.jsp in the Design tab.

2. Click the Update commandButton JSF component, which should populate

the Properties window on the bottom.

3. Scroll to the right portion of the Properties window, where you will find the

navigation rules table, as shown in Figure 9-24. Click the Add Rule button.

Figure 9-24 Navigation rules table

4. When the Add Navigation Rule wizard appears, enter the following, as shown

in Figure 9-25 on page 279: