Page Navigation in JSF
In this lesson, you will learn how to configure the navigation in JSF application with a sample JSF program. Page navigation determines which page to go to after the user clicks a button or a hyperlink. In our previous example when user enters valid data and click submit button a message is displayed on the same page. In this section we will modify our previous example to include navigation. For that, first we need to create a new jsp page, userDetailsSubmitted.jsp in WebContent/pages folder. This page displays the details entered by the user(name,age,email,dob) in UserDetailsForm.jsp page. When the user enters valid input and clicks the submit button in UserDetailsForm.jsp page , the application can redirect control to a userDetailsSubmitted.jsp page displaying the details entered by the user in that page.How does this happen?
When user enters valid input for name age email and dob and clicks submit button the action method is invoked and which page to access next depends on the logical outcome returned from the action method.
The outcome can also be defined by the action attribute of the UICommand component that submits the form, as shown by this example:
<h:commandButton value="Submit" action="submitted">
As mentioned earlier, outcome can also come from the return value of an action method in a backing bean. If you want the outcome to be returned by a method on a bean, you must refer to the method using a method-binding expression, using the action attribute, as shown by this example:
<h:commandButton value="Submit" action="#{userDetails.submitUserDetails}">
Whenever the user clicks a command button whose action attribute is a method reference, following sequence of steps happens on serverside.
- The backing bean is retrieved.
- The referenced method is called.
- The resulting string is passed to the navigation handler.
- The navigation handler looks up the next page
First step is to remove the code marked below from the UserDetailsForm.jsp page.
<h:panelGrid rendered="#{userDetails.submitted != false}" >
<h:outputLabel value="User Details submitted successfully"></h:outputLabel></h:panelGrid>
Next,create userDetailsSubmitted.jsp in WebContent/pages folder.
Add code to display name, age, email and dob entered in the first page into this page.
Your code will look like :
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<f:view>
<b> <h:outputText value="USER DETAILS"></h:outputText> </b>
<h:form id="userDetailsSubmitted">
<h:panelGrid columns="2">
<h:outputText value="Name:"></h:outputText>
<h:outputText value="#{userDetails.name}"></h:outputText>
<h:outputText value="Age:"></h:outputText>
<h:outputText value="#{userDetails.age}"></h:outputText>
<h:outputText value="Email:"></h:outputText>
<h:outputText value="#{userDetails.email}"></h:outputText>
<h:outputText value="Date Of Birth:"></h:outputText>
<h:outputText value="#{userDetails.dob}">
<f:convertDateTime type="date" pattern="MM/dd/yyyy" />
</h:outputText>
</h:panelGrid>
</h:form>
</f:view>
</body>
</html>
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<f:view>
<b> <h:outputText value="USER DETAILS"></h:outputText> </b>
<h:form id="userDetailsSubmitted">
<h:panelGrid columns="2">
<h:outputText value="Name:"></h:outputText>
<h:outputText value="#{userDetails.name}"></h:outputText>
<h:outputText value="Age:"></h:outputText>
<h:outputText value="#{userDetails.age}"></h:outputText>
<h:outputText value="Email:"></h:outputText>
<h:outputText value="#{userDetails.email}"></h:outputText>
<h:outputText value="Date Of Birth:"></h:outputText>
<h:outputText value="#{userDetails.dob}">
<f:convertDateTime type="date" pattern="MM/dd/yyyy" />
</h:outputText>
</h:panelGrid>
</h:form>
</f:view>
</body>
</html>
Now we have to define the rules in the application configuration resource file (faces-config.xml).
Select the "Navigation Rule" tab in faces-config.xml. If the palette is not available click Windows
->Show View->Others->palette
Click on Page in the Palette and click in workarea. A wizard as shown below will appear. Select UserDetailsForm.jsp . Click OK
UserDetailsForm.jsp will get added to the workspace as shown below. Likewise add userDetailsSubmitted.jsp.
Now click on the link in palette then on UserDetailsForm.jsp and then on userDetailsSubmitted.jsp.
You can see an arrow from UserDetailsForm.jsp to userDetailsSubmitted.jsp. Click on Select in the Palette
Click on the arrow and select it. Select the properities view.If properties view is not available click Windows->Show View->Properties. In the From Outcome field type "submitted".
Click on source tab and you can see navigation rule as shown below. Save faces-config.xml
If you are not comfortable using the 'drag and drop' tool, select the 'Source' tab in faces-config.xml and type in the navigation rules directly into the editor. (Click 'Next' to continue..)
See More Topics:
How to use resource bundle in JSF?
How to implement Internationalization and Localization in JSF?
How event handling works in JSF?
JSF Request Processing Life Cycle with example.