Navigation Mimi Opkins CECS 493 Fall 2016

Static Navigation  In a simple web application, navigation is static. That is, clicking a particular button always selects a fixed JSF page for rendering the response.  You give each button an action attribute—for example:  Navigation actions can also be attached to hyperlinks.  The value of the action attribute is called the outcome. An outcome can be optionally mapped to a view ID. (In the JSF specification, a JSF page is called a view.)  If you don’t provide such a mapping for a particular outcome, the outcome is transformed into a view ID, using the following steps: 1.If the outcome doesn’t have a file extension, then append the extension of the current view. 2.If the outcome doesn’t start with a /, then prepend the path of the current view.  For example, the welcome outcome in the view /index.xhtml yields the target view ID /welcome.xhtml.

Dynamic Navigation  In most web applications, navigation is not static.  The page flow does not just depend on which button you click but also on the inputs that you provide.  For example, submitting a login page may have two outcomes: success or failure. The outcome depends on a computation—namely, whether the username and password are legitimate.  To implement dynamic navigation, the submit button must have a method expression, such as:  In our example, loginController references a bean of some class, and that class must have a method named verifyUser().  A method expression in an action attribute has no parameters. It can have any return type. The return value is converted to a string by calling toString().

Action Method Example  Here is an example of an action method:  The method returns an outcome string such as "success" or "failure", which is used to determine the next view.

Command Button  In summary, here are the steps that are carried out whenever the user clicks a command button whose action attribute is a method expression: 1.The specified bean is retrieved. 2.The referenced method is called and returns an outcome string. 3.The outcome string is transformed into a view ID. 4.The page corresponding to the view ID is displayed.  Thus, to implement branching behavior, you supply a reference to a method in an appropriate bean class. You have wide latitude about where to place that method. The best approach is to find a class that has all the data that you need for decision making.

Mapping Outcomes to View IDs  One key design goal of JSF is to separate presentation from business logic. When navigation decisions are made dynamically, the code that computes the outcome should not have to know the exact names of the web pages.  JSF provides a mechanism for mapping logical outcomes, such as success and failure, to actual web pages.  This is achieved by adding navigation-rule entries into f aces-config.xml. Here is a typical example:  This rule states that the success outcome navigates to / welcome.xhtml if it occurred inside /index.xhtml.

Outcome Strings  If you pick the outcome strings carefully, you can group multiple navigation rules together.  For example, you may have buttons with action logout sprinkled throughout your application’s pages.  You can have all these buttons navigate to the loggedOut.xhtml page with the single rule:  This rule applies to all pages because no from-view-id element was specified.

from-view-id  You can merge navigation rules with the same from-view-id. Here is an example:

The JavaQuiz Application  In this section, we put navigation to use in a program that presents the user with a sequence of quiz questions

One wrong answer: Try again  When the user clicks the “Check Answer” button, the application checks whether the user provided the correct answer.  If the answer is not correct, the user has one additional chance to answer the same problem

Two wrong answers: Move on  After two wrong answers, the next problem is presented

Done with the quiz  And, of course, after a correct answer, the next problem is presented as well.  Finally, after the last problem, a summary page displays the score and invites the user to start over

Application Classes  Our application has two classes.  The Problem class describes a single problem, with a question, an answer, and a method to check whether a given response is correct.  The QuizBean class describes a quiz that consists of a number of problems. A QuizBean instance also keeps track of the current problem and the total score of a user.

javaquiz/src/java/com/corejsf/Problem.java

QuizBean  In this example, the QuizBean is the appropriate class for holding the navigation methods. That bean has all the knowledge about the user’s actions, and it can determine which page should be displayed next.  The answerAction() method of the QuizBean class carries out the navigation logic. The method returns one of the strings "success" or "done" if the user answered the question correctly, "again" after the first wrong answer, and "failure" or "done" after the second wrong try.  We attach the answerAction() method expression to the buttons on each of the pages. For example, the index.xhtml page contains the following element:

Directory structure of the Java Quiz application  This shows the directory structure of the application.

 The done.xhtml page shows the final score and invites the user to play again. Pay attention to the command button on that page. It looks as if we could use static navigation, since clicking the “Start over” button always returns to the index.xhtml page. However, we use a method expression:  The startOverAction() method carries out useful work that needs to take place to reset the game. It reshuffles the response items and resets the score:  In general, action methods have two roles:  To carry out the model updates that are a consequence of the user action  To tell the navigation handler where to go next

The transition diagram of the Java Quiz application

Outcomes  Three of our outcomes ("success", "again", and "done") have no navigation rules. They always lead to /success.xhtml, /again.xhtml, and /done.xhtml.  We map the "startOver" outcome to /index.xhtml. T  he failure outcome is a bit tricker. It initially leads to /again.xhtml, where the user can have a second try. However, if failure occurs in that page, then the next page is /failure.xhtml:  Note that the order of the rule matters. The second rule matches when the current page is not /again.xhtml.

javaquiz/src/java/com/corejsf/QuizBean.java

javaquiz/web/index.xhtml The listing below shows the main quiz page index.xhtml. The success.xhtml and failure.xhtml pages are omitted. They differ from index.xhtml only in the message at the top of the page.

javaquiz/web/done.xhtml

javaquiz/web/WEB-INF/faces- config.xml

javaquiz/src/java/com/corejsf/messages.properties

Redirection  You can ask the JSF implementation to redirect to a new view. Then the JSF implementation sends an HTTP redirect to the client. The redirect response tells the client which URL to use for the next page. The client then makes a GET request to that URL.  Redirecting is slow because another round trip to the browser is involved. However, the redirection gives the browser a chance to update its address field.  The following figure shows how the address field changes when you use redirection.

Redirection updating the URL in the browser

Redirection URLs  Without redirection, the original URL ( localhost:8080/javaquiz/faces/index.xhtml ) is unchanged when the user moves from the /index.xhtml page to the /success.xhtml face. With redirection, the browser displays the new URL ( localhost:8080/javaquiz/faces/success.xhtml ).  If you don’t use navigation rules, add the string ?faces-redirect=true  to the outcome string, for example:  In a navigation rule, you add a redirect element after to-view-id, as follows:

Conditional Navigation Cases  You can supply an if element that activates a navigation case only when a condition is fulfilled. Supply a value expression for the condition.  Here is an example:

Dynamic Target View IDs  The to-view-id element can be a value expression, in which case it is evaluated. The result is used as the view ID.  For example:  In this example, the getNextViewID() method of the quiz bean is invoked to get the target