JSF Navigation Rule Example Tutorial

Filed Under: JSF

JSF Navigation rules specifies the navigation between the pages on click of button or hyperlink. Navigation can be specified in terms of the logical outcome such as success, failure or through action method.

JSF Navigation Rules

JSF Navigation rules can be specified in faces-config.xml with the help of <navigation-rule> tag.

Configuring JSF navigation rule in Netbeans IDE

  1. Right click and expand the project node
  2. Expand the WEB-INF node and double click on faces-config.xml file
  3. In the faces-config.xml open the editor pane and choose navigation rule from Insert menu.
  4. From the add navigation dialog browse or add the JSF page name for the rule and click add.
  5. Right click the editor pane and select navigation case from Insert menu
  6. In the add navigation dialog box add or browse JSF page name that represents the starting view for the navigation rule and add or browse the to view JSF page name that opens when navigation case is selected by the navigation system.
  7. We can enter the action method to be invoked when the component triggers the navigation activated in the from action field and can enter the logical outcome strings in the from outcome field if the user wishes.

But personally I prefer editing the XML files manually. So let’s consider an example of configuring navigation rules manually.

Create the JSF page mobile.xhtml as


<?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>Navigation rule</title>
</h:head>
<h:body>
	<h3>Configuring Navigation Rules</h3>
	<h:form>

		<h:commandLink action="#{mobile.add}" value="Add Mobile Details" />
		<br>
		<br>

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

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

Create the addmob.xhtml as


<?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>Configuring navigation rules</title>
</h:head>
<h:body>
	<h3>Add Mobile Details</h3>

	<h:form>
		<h:panelGrid columns="3">
			<h:outputLabel for="mname">Mobile Name:</h:outputLabel>
			<h:inputText value="#{mobile.mname}"></h:inputText>
			<br>
			<br>

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

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

			<h:commandButton value="Submit" action="viewmob"></h:commandButton>

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

Create viewdetails.xhtml as


<?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://xmlns.jcp.org/jsf/html">
<h:head>

</h:head>
<h:body>
        Mobile Name:Micromax 
        <br>
	<br>
       Mobile color:Black
        <br>
	<br>
        Model Number:A114 Canvas 2.2
        <br>
	<br>

</h:body>
</html>

Create viewmob.xhtml as


<?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>Mobile Details</title>
</h:head>
<h:body>
        Mobile Name:#{mobile.mname}
        <br>
	<br>
      
       Mobile color:#{mobile.color}
        <br>
	<br>
        Model Number:#{mobile.modelno}
        <br>
	<br>

</h:body>
</html>

Now create the managed bean Mobile.java as


package com.journaldev.jsf.beans;

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

@ManagedBean
@SessionScoped
public class Mobile implements Serializable {

	private static final long serialVersionUID = 8914753191519956089L;
	private String mname;
	private String modelno;
	private String color;

	public Mobile() {
	}

	public Mobile(String mname, String modelno, String color) {
		this.mname = mname;
		this.modelno = modelno;
		this.color = color;
	}

	public String getMname() {
		return mname;
	}

	public void setMname(String mname) {
		this.mname = mname;
	}

	public String getModelno() {
		return modelno;
	}

	public void setModelno(String modelno) {
		this.modelno = modelno;
	}

	public String getColor() {
		return color;
	}

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

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

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

Once done with above changes add navigation rules in faces-config.xml as shown below.


<?xml version='1.0' encoding='UTF-8'?>
<faces-config version="2.2"
              xmlns="http://xmlns.jcp.org/xml/ns/javaee"
              xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
              xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee 
              http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd">
    <navigation-rule>
        <from-view-id>/mobile.xhtml</from-view-id>
        <navigation-case>
            <from-action>#{mobile.add}</from-action>
            <from-outcome>addform</from-outcome>
            <to-view-id>/addmob.xhtml</to-view-id>
        </navigation-case>
        <navigation-case>
            <from-action>#{mobile.view}</from-action>
            <from-outcome>viewform</from-outcome>
            <to-view-id>/viewdetails.xhtml</to-view-id>
        </navigation-case>
    </navigation-rule>
</faces-config>

Now run the application to see the following output in the browser.

JSF Navigation Rule

Click on “Add Mobile Details” link and you will see below page.

JSF Navigation Rules example

Once you submit above form, you will get below response page.

JSF page Navigation

Go back to first page and click on “View Mobile Details” link and you will see below page.

Navigation Rule in JSF

Implicit page navigation

Navigation can be specified implicitly in the action attribute of the commandButton tag to find the suitable page to be rendered upon the click of a button.

Let us see an example of displaying the data on click of submit button in a page

Create addcar.xhtml as shown below.


<?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>

</h:head>
<h:body>
	<h3>Add Car Details</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:commandButton action="viewdet" value="Submit"></h:commandButton>

		</h:panelGrid>
	</h:form>

</h:body>
</html>

In the submit button we specify the JSF page name viewdet in the action attribute which is rendered upon the click of submit button

Create viewdet.xhtml as;


<?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>

</h:body>
</html>

Create managed bean Car.java as


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 = -4018866884298600517L;
	private String cname;
	private String color;
	private String Id;

	public Car() {
	}

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

	}

	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 getId() {
		return Id;
	}

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

}

Now run the application to see the following output pages.

JSF page Navigation Rules

On submitting the form in above page.
JSF Navigation Rules

Below image shows the project structure in Eclipse.
JSF Navigation Rule Example eclipse Project

Finally, you can download the project from below link and play around with it to learn more.

Comments

  1. divya says:

    very nice tutorial pankaj thanks..

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