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>

Get Patterns: Implementing Self-Service in an SOA Environment now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.