JSF Page Navigation Example Tutorial

Filed Under: JSF

Page navigation is the redirection of a page based on the events performed for instance – on click of a button or on click of a link.

There are many ways of defining page navigation. These include

  • Specifying the page name in the action attribute of the submit button
  • Indicate the page in the managed bean
  • Specify the navigations in faces-config.xml
  • Define the navigations based on the conditions

Implicit Navigation (Specifying the page name in the action attribute)

JSF allows us to specify the page name or view name in action attribute of submit button which will resolve the page name with .xhtml extension.

Consider an example below.

pagenav.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:head>
<title>Page Navigation</title>
</h:head>
<h:body>
<h3>Page Navigation</h3>

<h:form>
<h:panelGrid columns="3" >
<h:outputLabel for="cname">Car Name:</h:outputLabel>
<h:inputText value="#{car.cname}" id="cname"></h:inputText>
<br /><br />

<h:outputLabel for="Id">Car Id:</h:outputLabel>
<h:inputText value="#{car.id}"></h:inputText>
<br /><br />

<h:outputLabel for="color">Color:</h:outputLabel>
<h:inputText value="#{car.color}"></h:inputText>
<br /><br />

<h:outputLabel for="model">Model:</h:outputLabel>
<h:inputText value="#{car.model}"></h:inputText>
<br /><br />

<h:outputLabel for="regno">Registration Number:</h:outputLabel>
<h:inputText value="#{car.regno}"></h:inputText>
<br /><br />
<h:commandButton action="viewdetails" value="Submit"></h:commandButton>

</h:panelGrid>
</h:form>
</h:body>
</html>

Here the view name viewdetails is specified in the action attribute of commandbutton tag.

Create viewdetails.xhtml wherein the redirection is set to this page(target) on click of submit button

viewdetails.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:head>
<title>Car Details</title>
</h:head>
<h:body>
       Car Id:#{car.id}
<br /><br />
       Car Name:#{car.cname}
<br /><br />
       Car color:#{car.color}
<br /><br />
       Car Model:#{car.model}
<br /><br />
       Car Registration Number:#{car.regno}
</h:body>
</html>

Create a managed bean Car.java as

Car.java


package com.journaldev.jsf.beans;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class Car implements Serializable {

	private static final long serialVersionUID = 4672207931321758371L;
	private String cname;
	private String color;
	private String Id;
	private String model;
	private String regno;

	public Car() {
	}

	public Car(String cname, String color, String Id, String model, String regno) {
		this.cname = cname;
		this.color = color;
		this.Id = Id;
		this.model = model;
		this.regno = regno;
	}

	public String getColor() {
		return color;
	}

	public void setColor(String color) {
		this.color = color;
	}

	public String getCname() {

		System.out.println("car name is" + cname);
		return cname;
	}

	public void setCname(String cname) {
		this.cname = cname;
	}

	public String getRegno() {
		return regno;
	}

	public void setRegno(String regno) {
		this.regno = regno;
	}

	public String getModel() {
		return model;
	}

	public void setModel(String model) {
		this.model = model;
	}

	public String getId() {
		return Id;
	}

	public void setId(String Id) {
		this.Id = Id;
	}

	public String add() {
		return "form";
	}

	public String view() {
		return "form";
	}

}

Once done with these changes run the application. When the user clicks on submit button, he is taken to the new page.

JSF_Page_Navigation_1

JSF_Page_Navigation_2

Navigation through Managed Bean

In this second type, we specify the view page with the help of a method in the managed bean and invoke this method of the managed bean in the view page.

Consider the example below

Create a managed bean CarBean.java

CarBean.java


package com.journaldev.jsf.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class CarBean {

	private String cname;
	private String Id;
	private String color;
	private String model;
	private String regno;

	private String description;

	public String getColor() {
		return color;
	}

	public void setColor(String color) {
		this.color = color;
	}

	public String getCname() {

		return cname;
	}

	public void setCname(String cname) {
		this.cname = cname;
	}

	public String getDescription() {
		return description;
	}

	public void setDescription(String description) {
		this.description = description;
	}

	public String getRegno() {
		return regno;
	}

	public void setRegno(String regno) {
		this.regno = regno;
	}

	public String getModel() {
		return model;
	}

	public void setModel(String model) {
		this.model = model;
	}

	public String getId() {
		return Id;
	}

	public void setId(String Id) {
		this.Id = Id;
	}

	public String add() {
		return "pagenav";
	}

}

Here we define the method add wherein we specify the corresponding view page to be rendered on click of buttons.

Create a view named managedbeannav.xhtml

managedbeannav.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:head>
<title>Page Navigation</title>
</h:head>
<h:body>
<h3>Page Navigation using Managed Bean</h3>
<h:form>
<h:commandButton action="#{carBean.add()}" value="Add Car Details" />
</h:form>
</h:body>
</html>

The pagenav.xhtml is rendered on click of “Add Car Details” button. Please refer to the pagenav.xhtml jsf page created above in implicit navigation.

From the add method in the car bean, the pagenav.xhtml page is called and in the action attribute we invoke the method add.

This is what happens when we run the application.

JSF-Page-Navigation-3

JSF_Page_Navigation_4

Navigation in faces-config.xml

In this third type, we specify the pages in faces-config.xml file. Let’s look in detail with an example.

We will reuse the Car.java bean defined in earlier steps.

Now create the car.xhtml page as

car.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:head>
	<title>Facelet Title</title>
</h:head>
<h:body>
	<h3>Navigation through faces-config.xml</h3>
	<h:form>

		<h:commandLink action="#{car.add}" value="Add Car details " />
		<br />
		<br />

		<h:commandLink action="#{car.view}" value="View Details" />

	</h:form>
</h:body>
</html>

Next create the view pages as to be rendered during navigation.

view.xhtml


<!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:head>
	<title>Facelet Title</title>
</h:head>
<h:body>
            Car Id:C1 <br />
            Car Name:Alto <br />
            Car color:blue
        </h:body>
</html>

The pagenav.xhtml will be reused as created above which will rendered upon clicking Add link.

Now create a new file faces-config.xml to containing navigation mappings. This should go inside WEB-INF folder.

faces-config.xml


<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
   http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
	version="2.0">
	<navigation-rule>
		<from-view-id>car.xhtml</from-view-id>
		<navigation-case>
			<from-action>#{car.add}</from-action>
			<from-outcome>form</from-outcome>
			<to-view-id>pagenav.xhtml</to-view-id>
		</navigation-case>
		<navigation-case>
			<from-action>#{car.view}</from-action>
			<from-outcome>form</from-outcome>
			<to-view-id>view.xhtml</to-view-id>
		</navigation-case>
	</navigation-rule>
</faces-config>

We invoke the add and view methods of managed bean car.java and this returns the form string. The form string is searched in faces-config.xml for the method name from which it was invoked which is then mapped to pagenav.xhtml page for rendering. Similarly view page is rendered too.

Let’s run the application.

JSF-Page-Navigation-faces

Add Car Details

JSF_Page_Navigation_6

View Car Details

JSF_Page_Navigation_7

Forward versus Redirect navigation

JSF, by default provides forward navigation while navigating from one page to the other and the browser url does not change. To enable page redirection, set faces-redirect = true at the end of the view name.

We will look at an example that explains forward and redirect navigation.

Create the JSF view page forward.xhtml as

forward.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:head>
	<title>Facelet Title</title>
</h:head>
<h:body>
	<h:form>
		<h3>Forward Navigation</h3>
		<h:commandButton action="pagenav" value="Add Car Details" />
		<h3>Redirect Navigation</h3>
		<h:commandButton action="pagenav?faces-redirect=true"
			value="Add Car Details" />
	</h:form>
</h:body>
</html>

We set faces-redirect=true after at the end of the view page name ‘pagenav’. This ensures redirect navigation is enabled.

Refer to the pagenav.xhtml code as created above.

Now run the application which produces the following output.

JSF_Page_Navigation_8

JSF_Page_Navigation_9

In the above screenshot, even though the add.xhtml page is rendered the url shows the forward.xhtml as the page name. This is used for making the application more secure and robust.

JSF_Page_Navigation_10

In the redirect navigation, the url shows the actual current page rendered in the browser which is – pagenav.xhtml.

Conditional Navigation

In conditional navigation which is the last type, we specify conditions based upon which the view should be rendered. Let’s consider an example to demonstrate the conditional navigation

Create a managed bean CarNav.java as shown below

CarNav.java


package com.journaldev.jsf.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.RequestScoped;

@ManagedBean(name = "carnav", eager = true)
@RequestScoped
public class CarNav {

	@ManagedProperty(value = "#{param.pid}")
	private String pid;

	public String showPage() {
		if (pid == null) {
			return "car_nav";
		}
		if (pid.equals("1")) {
			return "pagenav";
		} else if (pid.equals("2")) {
			return "view";
		} else {
			return "car_nav";
		}
	}

	public String getPid() {
		return pid;
	}

	public void setPid(String pid) {
		this.pid = pid;
	}

}

In the CarNav bean, if the pid is 1, pagenav is rendered and if the page id is 2, view page is rendered. The conditions for this is written in the showPage() method.

We will create the car_nav.xhtml page that accepts the page id as parameter.

car_nav.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"
	xmlns:c="http://java.sun.com/jsf/core">
<h:head>
	<title>Facelet Title</title>
</h:head>
<h:body>
	<h3>Conditional Navigation</h3>
	<h:form>
		<h:commandLink action="#{carnav.showPage()}" value="Add">
			<c:param name="pid" value="1" />

		</h:commandLink>
		<br />
		<br />
		<h:commandLink action="#{carnav.showPage()}" value="View">
			<c:param name="pid" value="2" />
		</h:commandLink>

	</h:form>
</h:body>
</html>

Reuse the pagenav.xhtml and view view.xhtml JSF code for the navigation.

Run the application that produces the following output

JSF-Page-Navigation-Conditional

The project structure looks as shown below.

JSF-Page-Navigation-Eclipse-Project

This post is all about handling JSF Page Navigation. We will be looking into JSF Beans in the coming tutorial. In the mean time, you can download the project from below link and play around with it to learn more.

Comments

  1. janmaijay says:

    where we have to write faces-redirect = true?

  2. Baton says:

    useful lesson

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages