Patterns: Implementing Self-Service in an SOA Environment

Chapter 9. JSF front-end scenario 253

.

Figure 9-7 Create customer confirmation screen

9.3 Low level design

Now that we have discussed the overall design of the ITSOMart front-end, we

will turn our attention to some of the low level design decisions associated with a

JSF application. Once again, we focus these discussions on our own sample

application.

9.3.1 ITSOMart Web diagram

The Web diagram in Figure 9-8 on page 254 (constructed using Rational

Software Architect), presents the complete end-to-end flow of the ITSOMart

application front-end. A Web diagram is a valuable tool for visualizing and

constructing JSP/JSF-based applications.

In the diagram, the nodes represent the different JSP pages which make up the

application presentation. The connections represent simple Web page links, or

the outcome of JSF actions. Because the ITSOMart application uses strictly

254 Patterns: Implementing Self-Service in an SOA Environment

JSF-based navigation, all connections in Figure 9-8 on page 254 represent JSF

action results.

Using the Web diagram, a human factor expert can design the entire flow of the

application, without having to look at a single line of code, or even a screen

design. When a JSP page node is added, the corresponding .jsp file is created,

but simply left blank. Adding a JSF outcome connection creates a JSF rule,

which is stored in the faces-config.xml configuration file. Because JSF page

navigation is isolated from the code with these external navigation rules, the

designer can have the complete end-to-end flow planned out, without ever

having to edit a JSP file. When the Web diagram is completed, there should be a

complete framework of JSP files and navigation rules ready to be completed by a

GUI developer.

Figure 9-8 ITSOMart Web diagram

To better understand the Web diagram and the page design process, we return

to the example of our familiar create customer use case. The following steps

Chapter 9. JSF front-end scenario 255

traverse the Web diagram top to bottom from the home page, through the

creation of a customer profile.

1. The home page for the ITSOMart front-end is the CustomerAdmin.jsp page

.

From that page, if the user wants to create a customer, she should be

redirected to the CreateCustomer.jsp page. Therefore, we add a JSF

connection from CustomerAdmin.jsp to CreateCustomer.jsp, specifying the

outcome to be createCustomer. See “Selecting the outcome string” on

page 256

. When we do that, a navigation rule is automatically added to the

faces-config.xml file as in Example 9-1.

Example 9-1 Navigation rule for faces-fonfig.xml

<navigation-case>

<from-outcome>createCustomer</from-outcome>

<to-view-id>/CreateCustomer.jsp</to-view-id>

</navigation-case>

Now when the CustomerAdmin.jsp is implemented, all we need to do is make

sure that the link or button we use to trigger customer creation returns the

string createCustomer.

2. From the CreateCustomer.jsp screen, we expect the user to enter the

appropriate information, then press a create button. If the creation is

successful, we would prefer the user to see a confirmation page, therefore we

add a JSF connection with the outcome of createSuccess

. We then link it to

the CreateConfirm.jsp page.

Note that the Web diagram also accounts for an error scenario. If there is an

unexpected problem, and we cannot create the customer profile, we would

prefer the user to see a standard error page. Therefore we add a JSF

connection with a rule that points the systemError outcome to the

SystemError.jsp page. Later, when implementing the code, all the developer

needs to know is that in the case of an unexpected exception, the code

should return the string systemError.

As in the previous case, these JSF connections are automatically added by

Rational Software Architect to the face-config.xml file. The navigation rules in

Example 9-2 for both the success and failure cases, are saved in the

configuration file.

Example 9-2 Navigation systemError outcome rules

<navigation-case>

<from-outcome>createSuccess</from-outcome>

<to-view-id>/CreateConfirm.jsp</to-view-id>

</navigation-case>

<navigation-case>

<from-outcome>systemError</from-outcome>