JSF Page Navigation Tutorial

Introduction

In simple language Page Navigation means flow of the application from one page to another page.Navigation in JSF defines the set of rules for choosing the next view to be displayed after a specified action is completed. In JSF 1.x, navigation is generally specified using the faces-config.xml file, but in JSF 2.0 that configuration file is optional. JSF2.0 gives new feature of Implicit Navigation . So in JSF2.0 we can use page navigation in two ways either implicit navigation or through configuration files. we will discuss both approach in detail.

Consider the scenario in which user has to enter his/her details in an online form.The form is spllitted into two pages page1.jsp and page2.jsp. After filling the form1 details user wants to move to second form page2.jsp he/she has to click on the "Next" link that is rendered as shown below:

<h:commandLink value="Next" action="page2"/>

When this link is selected, navigation should proceed from page1.jsp to page22.jsp (assume that views are defined using JSP). This navigation rule should be defined in faces-config.xml as follows:

Introduction

In simple language Page Navigation means flow of the application from one page to another page.Navigation in JSF defines the set of rules for choosing the next view to be displayed after a specified action is completed. In JSF 1.x, navigation is generally specified using the faces-config.xml file, but in JSF 2.0 that configuration file is optional. JSF2.0 gives new feature of Implicit Navigation . So in JSF2.0 we can use page navigation in two ways either implicit navigation or through configuration files. we will discuss both approach in detail.

Consider the scenario in which user has to enter his/her details in an online form.The form is spllitted into two pages page1.jsp and page2.jsp. After filling the form1 details user wants to move to second form page2.jsp he/she has to click on the "Next" link that is rendered as shown below:

<h:commandLink value="Next" action="page2"/>

When this link is selected, navigation should proceed from page1.jsp to page22.jsp (assume that views are defined using JSP). This navigation rule should be defined in faces-config.xml as follows:




<navigation-rule>
 <from-view-id>/page1.jsp</from-view-id>
  <navigation-case>
  <from-outcome>Address 2</from-outcome>
 <to-view-id>/page2.jsp</to-view-id>
</navigation-case>
</navigation-rule>

In JavaServer Faces, navigation between application pages is defined by a set of rules. Navigation rules determine the next page to display when a user clicks a navigation component, such as a button or a hyperlink.These navigation rules are defined in JSF configuration files along with other definitions for a JSF application. Usually, this file is named faces-config.xml. However, you are free to assign any other name. You can use more than one file to store JSF configuration data.

We need to specify configuration files in your web.xml file. Use below line of codes in your web.xml file to declare configuration files:

<context-param> 
<paramname>javax.faces.CONFIG_FILES</param-name> 
      <param-value>/WEB-INF/faces-config.xml,/WEB-INF/faces-beans.xml</param-value> 
</context-param> 


How to Create Page Navigation Rules

Navigation rule definitions are stored in the JSF configuration file (faces-config.xml). You can define the rules directly in the configuration file, or you can use the JSF Navigation Modeler in eclipse.

The general syntax of a JSF navigation rule element in the faces-config.xml file is shown below.

<navigation-rule>
  <from-view-id>page-or-pattern</from-view-id>
  <navigation-case>
    <from-action>action-method</from-action>
    <from-outcome>outcome</from-outcome>
    <to-view-id>destination-page</to-view-id>
    <redirect/>
  </navigation-case>
  <navigation-case>
    ...
  </navigation-case>
</navigation-rule>

A navigation rule can consist of the following elements:

  • navigation-rule: A mandatory element for navigation case elements.

  • from-view-id: An optional element that contains either a complete page identifier or a page identifier prefix ending with the asterisk (*) wildcard character. If you use the wildcard character, the rule applies to all pages that match the wildcard pattern. To make a global rule that applies to all pages, leave this element blank.

  • navigation-case: A mandatory element for each case in the navigation rule. Each case defines the different navigation paths from the same page. A navigation rule must have at least one navigation case.

  • from-action: An optional element that limits the application of the rule only to outcomes from the specified action method.

  • from-outcome: A mandatory element that contains an outcome value that is matched against values specified in the action attribute of UI components. Later you will see how the outcome value is referenced in a UI component either explicitly or dynamically through an action method return.

  • to-view-id: A mandatory element that contains the complete page identifier of the page to which the navigation is routed when the rule is implemented.

  • redirect: An optional element that indicates that the new view is to be requested through a redirect response instead of being rendering as the response to the current request. This element requires no value.



A sample navigation example

<navigation-rule> 
    <from-view-id>/pages/index.jsp</from-view-id> 
    <navigation-case> 
      <from-outcome>success</from-outcome> 
      <to-view-id>/pages/welcome.jsp</to-view-id> 
    </navigation-case> 
    <navigation-case> 
      <from-outcome>failure</from-outcome> 
      <to-view-id>/pages/error.jsp</to-view-id> 
    </navigation-case> 
  </navigation-rule>  

This code specifies that view /pages/index.jsp has two outputs, success and failure, associated with particular pages.

Managed Bean for above configuration is given bellow.

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import java.io.Serializable;
 
@ManagedBean
@SessionScoped
public class PageController implements Serializable {
 
private static final long serialVersionUID = 1L;
 
public String processPage1(){
return "success";
}
 
public String processPage2(){
return "failure";
}
} 


Implicit Navigation In JSF 2.0 :

Implicit Navigation requires no entry in the configuration file. It allows the default navigation handler to choose the XHTML page with the matching name as specified in the action attribute of the UIComponent.

In JSF 2, it treats "outcome" as the page name, for example, navigate to "page1.xhtml", you have to put the "outcome" as "page1". This mechanism is called "Implicit Navigation", where no need to declare the navigation rule, instead, just put the "outcome" in the action attribute directly and JSF will find the correct "view id" automatically.

There are two ways to implements the implicit navigation in JSF 2.

  1. By using Outcome in JSF page
  2. By using Outcome in Managed Bean

1. Outcome in JSF page

In this implicit navigation approach we can directly provide the next flow page in action attribute of JSF 2.0 tags. For example,below code we have one submit button in page1.xhtml, when we click that button we should go to page2.xhtml page

<h:form>
<h:commandButton action="page2" value="Next"/>
</h:form>

Once the button is clicked, JSF will merge the action value or outcome, "page2" with "xhtml" extension, and find the view name "page2.xhtml" in the current "page1.xhtml" directory.


2. Outcome in Managed Bean :

you can also define the "outcome" in a managed bean like this :

@ManagedBean
@SessionScoped

public class PageController implements Serializable {

public String moveToPage2(){
return "page2"; //outcome

}
}

In JSF page, action attribute, just call the method by using "method expression".

<h:form>
<h:commandButton action="#{pageController.moveToPage2}" value="Move to page2.xhtml by managed bean"/>
</h:form>

JSF implicit navigation example

page1.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html">
 
    <h:body>
    	<h2>This is page1.xhtml</h2>
 
		<h:form>
    		<h:commandButton action="page2" value="Go to Page2" />
    		<br></br>
    		<p><b>Move to page2 by managed bean</b></p>
			<h:commandButton action="#{pageController.moveToPage2}" 
				value="Go to Page2" />
		</h:form>
 
    </h:body>
</html>

page2.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html">
 
    <h:body>
    	<h2>This is page2.xhtml</h2>
 
 		<h:form>
    		<h:commandButton action="page1" value="Go to Page1" />
    		<br></br>
    		<p><b>Move to page1 by managed bean</b></p>
			<h:commandButton action="#{pageController.moveToPage1}" 
				value="Go to Page1" />
		</h:form>
 
    </h:body>
</html>


Create Managed Bean

PageController.java

package com.javawebtutor.jsf;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
import java.io.Serializable;
 
@ManagedBean
@SessionScoped
public class PageController implements Serializable {
 
	private static final long serialVersionUID = 1L;
 
	public String moveToPage1(){
		return "page1";
	}
	
	public String moveToPage2(){
		return "page2";
	}
	
}

Output

JSF Implicit Navigation

JSF Implicit Navigation


Source+lib (Developed in Eclipse) : Download




comments powered by Disqus