Table of contents

Introduction

JSF Page Navigation

Implicit Navigation

3.1.

Pagenav.xhtml

3.2.

Viewdetails.xhtml

3.3.

Mobile.java

3.4.

Output

Navigation through Managed Bean

4.1.

mobileBean.java

4.2.

Managedbeannav.xhtml

4.3.

Output

Navigation in faces-config.xml

5.1.

Mobile.xhtml

5.2.

View.xhtml

5.3.

Faces-config.xml

5.4.

Output

Frequently Asked Questions

6.1.

What is JSF navigation, and how does it work?

6.2.

Define Implicit Navigation.

6.3.

Explain JSF in Java along with an example.

6.4.

In JSF, how can you navigate to another page?

6.5.

Which return type of a managed bean method is used for page navigation?

Conclusion

Last Updated: Mar 27, 2024

Easy

JSF Page Navigation

Author Ishita mishra

Do you think IIT Guwahati certified course can help you in your career?

Yes

Introduction

JSF (Java Server Faces) is a framework for designing user interfaces on the server-side. It's developed in Java, has a component-based architecture, and provides standard management tools for these components. It has a lot of sophisticated APIs and a lot of tag libraries.

JSF (Java Server Faces) is a framework for designing user interfaces on the server-side by Java

Before understanding the working of page navigation in JSF, let us first understand the meaning of page navigation. Simply put, page navigation is the redirection of a page in response to events like clicking a button or a link. Now let us dive deep into this concept to learn about JSF page navigation in a better way.

JSF Page Navigation

Navigation in JSF is a criterion for selecting the next view to be presented. In JSF 1.x, Navigation was specified in the faces-config.xml file, but this is no longer necessary in JSF 2.0. Implicit Navigation is new functionality in JSF2.0. So, with JSF2.0, we have two options for page navigation: implicit Navigation and configuration files. We'll go over both approaches in depth.

There are many different ways to define page navigation. These include the following:

By using the action attribute of the submit button to specify the page name.
By indicating the page in the managed bean.
By selecting the navigations in faces-config.xml.
By defining navigation based on conditions.

Implicit Navigation

In JSF, the action attribute of the submit button allows users to specify the page name or view name, and the page name will be resolved with the .xhtml extension. JSF 2.0 has implicit navigation that can resolve pages on its own. Simply entering the view name in the action attribute will cause JSF to automatically look for the right view page in the deployed application.

Before we move on to our Java codes, you can brush up your Java skills by watching our Youtube video on Java.

Consider an example given below:

Pagenav.xhtml

<!DOCTYPE html>
<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="https://www.w3.org/1999/xhtml"
      xmlns:h="https://java.sun.com/jsf/html">
<h:head>
<title>Page Navigation Examples</title>
</h:head>
<h:body>
<h3>Page Navigation (IMPLICIT NAVIGATION)</h3>
<h:form>
<h:panelGrid columns="3" >
<h:outputLabel for="mname">Mobile Name:</h:outputLabel>
<h:inputText value="#{mobile.mname}" id="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:</h:outputLabel>
<h:inputText value="#{mobile.model}"></h:inputText>
<br /><br />
<h:commandButton action="viewdetails" value="Submit"></h:commandButton>
</h:panelGrid>
</h:form>
</h:body>
</html>

Here, the action property of the commandButton tag has the view name viewdetails.

Create a file called viewdetails.xhtml with the target set to this page when the submit button is clicked.

Viewdetails.xhtml

<!DOCTYPE html >
<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="https://www.w3.org/1999/xhtml"
      xmlns:h="https://java.sun.com/jsf/html">
<h:head>
<title>Mobile Details</title>
</h:head>
<h:body>
       Mobile Name:#{mobile.cname}
<br /><br />
       Mobile color:#{mobile.color}
<br /><br />
       Mobile Model:#{mobile.model}
<br /><br />    
</h:body>
</html>

Make a managed bean named Mobile.java

Mobile.java

package com.codingninjas.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 Mobile() {
}
public Mobile(String mname, String color, String model) {
this.mname = mname;
this.color = color;
this.model = model;
}
public String getColor() {
return color;
}
public void setColor(String color) {
this.color = color;
}
public String getMname() {
System.out.println("Mobile name is" + mname);
return mname;
}
public void setCname(String mname) {
this.mname = mname;
}
public String getModel() {
return model;
}
public void setModel(String model) {
this.model = model;
}
public String add() {
return "form";
}
public String view() {
return "form";
}
}

You can also try this code with Online Java Compiler

Run Code

Run the program once these changes are complete. A new page loads when the user presses the submit button.

Output

Navigation through Managed Bean

In the second type, we specify the view page using a managed bean method and call the managed bean method from the view page.

Consider an example given below:

Make a managed bean called mobileBean.java

mobileBean.java

package com.codingninjas.jsf.beans;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class MobileBean {
private String mname;
private String color;
private String model;
private String description;
public String getColor() {
return color;
}
public void setColor(String color) {
this.color = color;
}
public String getMname() {
return mname;
}
public void setMname(String mname) {
this.mname = mname;
}
public String getModel() {
return model;
}
public void setModel(String model) {
this.model = model;
}
public String add() {
return "pagenav";
}
}

You can also try this code with Online Java Compiler

Run Code

Here, we define the method add, in which we designate the view page displayed when a button is clicked.

Make a view called managedbeannav.xhtml.

Managedbeannav.xhtml

<!DOCTYPE html>
<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="https://www.w3.org/1999/xhtml"
      xmlns:h="https://java.sun.com/jsf/html">
<h:head>
<title>Page Navigation</title>
</h:head>
<h:body>
<h3>Page Navigation through Managed Bean</h3>
<h:form>
<h:commandButton action="#{mobileBean.add()}" value="Add mobile Details" />
</h:form>
</h:body>
</html>

When the "Add mobile Details" button is clicked, the pagenav.xhtml is generated. Please refer to the previously developed pagenav.xhtml jsf page for implicit navigation.

The pagenav.xhtml page is called from the add method in the mobile bean, and the method add is invoked in the action attribute.

Output

Navigation in faces-config.xml

In the faces-config.xml file, we specify the pages for the third type. Let's examine explicitly using an example.

We'll make use of the Mobile.java bean that was previously defined.

Make the Mobile.xhtml page now as

Mobile.xhtml

<!DOCTYPE html >
<?xml version='1.0' encoding='UTF-8' ?>
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:h="https://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="#{mobile.add}" value="Add mobile details " />
<br />
<br />
<h:commandLink action="#{mobile.view}" value="View Details" />
</h:form>
</h:body>
</html>

Create the view pages as they will appear when navigating next.

View.xhtml

<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:h="https://java.sun.com/jsf/html">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
            Car model: Narzo <br />
            Car Name: Realme <br />
            Car color: Black
        </h:body>
</html>

The previously prepared pagenav.xhtml file will be reused and rendered when the Add link is clicked.

Make a new file called faces-config.xml that contains navigation mappings at this point. It will help if you put this in the WEB-INF folder.

Faces-config.xml

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

The add and view methods of the managed bean Mobile.java are used, and as a result, the form string is returned. The method's name that the form string called is contained in the faces-config.xml file and mapped to the pagenav.xhtml page for rendering. The view page likewise has a similar rendering.

Output

Frequently Asked Questions

What is JSF navigation, and how does it work?

JSF Navigation rules provide how to navigate between pages when a button or hyperlink is clicked. Navigation can be defined as logical outcomes like success or failure or using the action method.

Define Implicit Navigation.

Implicit Navigation allows you to avoid describing the tiresome navigation rule by simply putting the "result" in the action property. JSF will automatically identify the correct "view id." In JSF 2, there are two approaches to implementing implicit navigation.

Explain JSF in Java along with an example.

JSF is server-based, which means that the JSF UI components and their states are represented on the server, and the UI components have a specified life cycle. The Java EE standard includes JSF. A regular web container, such as Tomcat or Jetty, is used to run a JSF application.

In JSF, how can you navigate to another page?

While browsing to another page, JSF executes a server page forward by default, and the application's URL remains unchanged. Append faces-redirect=true to the end of the view name to allow page redirection when you click the Page1 button beneath Forward.

Which return type of a managed bean method is used for page navigation?

Return it as the return result of the action method. You could just put the string outcome in the action attribute if you're not doing anything besides navigating.

Conclusion

We hope this blog was instructive and gave you a clear understanding of JSF page navigation.

Coding Ninjas also helps you test your competency in languages like java and other related programming languages. You can go through our blogs on 21 Best Java Programming Books for Beginners & Experts, 15 Best Java Frameworks To Use In 2021, Differentiating between C++ and Java, 7 Features of Java Programming Language You Should Know in 2021, Choosing Your Java IDE, Typescript vs Javascript: Learn the difference, and many more to enhance your knowledge further.

Also, you may consider our paid courses to give your career an edge over others!

Happy learning, ninjas!

Live masterclass

Top GenAI Skills to crack 30 LPA+ roles at Amazon & Google

by Sumit Shukla

02 Feb, 2026

03:00 PM

34+ registered

Python + AI Skills to ace 30L+ CTC Data roles at Amazon

by Prerita Agarwal

01 Feb, 2026

06:30 AM

536+ registered

Top 5 GenAI Projects to Crack 25 LPA+ Roles in 2026

by Shantanu Shubham

01 Feb, 2026

08:30 AM

181+ registered

Zero to Data Analyst: Amazon Analyst Roadmap for 30L+ CTC

by Abhishek Soni

02 Feb, 2026

01:30 PM

345+ registered

Top GenAI Skills to crack 30 LPA+ roles at Amazon & Google

by Sumit Shukla

02 Feb, 2026

03:00 PM

34+ registered

Python + AI Skills to ace 30L+ CTC Data roles at Amazon

by Prerita Agarwal

01 Feb, 2026

06:30 AM

536+ registered

View more events