Home » Enterprise Java » jsf » JSF Navigation Example

About Veeramani Kalyanasundaram

Veeramani Kalyanasundaram
Veera is a Software Architect working in telecom domain with rich experience in Java Middleware Technologies. He is a OOAD practitioner and interested in Performance Engineering.

JSF Navigation Example

In this example of JSF Navigation, we will show you how to use various navigation techniques available in Java Server Faces. A set of rules for choosing the next page based on a action, for example a click of button are called navigation rules. In Java Server Faces technology, navigation consists of one or more navigation rules for an application.

We will discuss about implicit navigation and user defined navigation with examples. Let’s begin with setting up a JSF project and do all the necessary configuration to run the application.
 
 
 

 
Our preferred environment is Eclipse. We are using Eclipse Luna SR1 with Maven Integration Plugin, JDK 8u25 (1.8.0_25) and Tomcat 8 application server. Having said that, we have tested the code against JDK 1.7 and Tomcat 7 as well.

Tip
You may skip project creation and jump directly to the beginning of the example below.

1. Create a new Maven Project

Go to File -> New->Other-> Maven Project

maven1

Maven setup – step 1

In the “Select project name and location” page of the wizard, make sure that “Create a simple project (skip archetype selection)” option is unchecked, hit “Next” to continue with default values.

maven2

Maven setup – step 2

Here choose “maven-archetype-webapp” and click on Next.

maven3

Maven setup – step 3

In the “Enter an artifact id” page of the wizard, you can define the name and main package of your project. Set the “Group Id” variable to "com.javacodegeeks.snippets.enterprise" and the “Artifact Id” variable to "jsfnavexample". For package enter "com.javacodegreeks.jsfnav" and hit “Finish” to exit the wizard and to create your project.

maven4

Maven setup – step 4

Now create a folder called java under src.

maven5

Maven setup – step 5

Refresh the project. Finally, the project structure will look like the below.

maven6

Maven setup – step 6

If you see any errors in the index.jsp , set target runtime for the project.

maven7

Maven setup – step 7

2. Modify POM to include JSF dependency

Add the dependencies in Maven’s pom.xml file, by editing it at the “Pom.xml” page of the POM editor.

 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
   <modelVersion>4.0.0</modelVersion>
   <groupId>com.javacodegreeks.snippets.enterprise</groupId>
   <artifactId>jsfnavexample</artifactId>
   <packaging>war</packaging>
   <version>0.0.1-SNAPSHOT</version>
   <name>jsfnavexample Maven Webapp</name>
   <url>http://maven.apache.org</url>
   <dependencies>
      
     <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
     </dependency>
     <dependency>
      <groupId>com.sun.faces</groupId>
      <artifactId>jsf-api</artifactId>
      <version>2.2.9</version>
      </dependency>
     <dependency>
      <groupId>com.sun.faces</groupId>
      <artifactId>jsf-impl</artifactId>
      <version>2.2.9</version>
     </dependency>
      
   </dependencies>
    
   <build>
     <finalName>jsfnavexample</finalName>
   </build>
    
</project>

3. Add Faces Servlet in web.xml

The web.xml file has to be modified to include the faces servlet configuration as below.

<web-app>
 <display-name>Archetype Created Web Application</display-name>
 
  <servlet>
   <servlet-name>Faces Servlet</servlet-name>
   <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
   <load-on-startup>1</load-on-startup>
  </servlet>
 
  <servlet-mapping>
   <servlet-name>Faces Servlet</servlet-name>
   <url-pattern>*.xhtml</url-pattern>
  </servlet-mapping>
 
</web-app>

 

4. Implicit Navigation

JSF provides default navigation using convention. Create a view helloNav.xhtml under /WEB-INF/ folder.

helloNav.xhtml

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>JSF Navigation</title>
</head>
<body>
 <h1>JSF Navigation</h1>
 <h:form>
 <div>
 Click here to try Implicit Navigation
 <h:commandButton value="Implicit" action="implicitNav"></h:commandButton>
 </div>
 
 </h:form>
</body>
</html>

Now create another view with the exact name as given in the action tag.

implicitNav.xhtml

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>JSF Navigation</title>
</head>
<body>
 <h2>Implicit Navigation using Convention</h2>
 <h4>The file name implictNav.xhtml should match with action
 mentioned in helloNav.xhtml</h4>
</body>
</html>

Now we can create the deployment package using Run as –> Maven clean and then Run as –> Maven install. This will create a war file in the target folder. The war file produced must be placed in webapps folder of tomcat. Now we can start the server.

Open the following URL in the browser

http://localhost:8080/jsfnavexample/helloNav.xhtml

implicit1

Implicit Navigation – output 1

On clicking the implicit button, the default navigation handler will match the suitable page and navigate to it.

implicit2

Implicit Navigation – output 2

5. User defined Navigation

We can also define our own navigation rules instead of convention by using configuration file faces-config.xml

 5.1 Action Tag based

Create a file called faces-config.xml under /WEB-INF/ folder.

faces-config.xml

<?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>/helloNav.xhtml</from-view-id>
  <navigation-case>
   <from-outcome>userDefined</from-outcome>
   <to-view-id>/myNav.xhtml</to-view-id>
  </navigation-case>
 </navigation-rule>
</faces-config>

Now create a file called myNav.xhtml under /webapp/ folder.

myNav.xhtml

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>My Nav</title>
</head>
<body>
 <h2>Welcome to user defined Navigation!!</h2>
</body>
</html>

Modify the helloNav.xhtml to include “user defined Navigation”.

helloNav.xhtml

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>JSF Navigation</title>
</head>
<body>
 <h1>JSF Navigation</h1>
 <h:form>
 <div>
 Click here to try Implicit Navigation
 <h:commandButton value="Implicit" action="implicitNav"></h:commandButton>
 </div>
 <div>&nbsp;</div>
 <div>
 Click for User defined Navigation
 <h:commandButton value="User Defined" action="userDefined"></h:commandButton>
 </div>

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

Now again package using maven and copy the war to the apache tomcat webapps folder. Open the following URL in the browser

http://localhost:8080/jsfnavexample/helloNav.xhtml

userdefined1

Action tag – output 1

On clicking the user “User Defined” button, the JSF NavigationHandler will match the action outcome and navigate to the user defined view myNav.xhtml in this case.

userdefined2

Action tag – output 2

 5.2 Action Method based

For some complex scenarios we need to use the outcome of the action method to determine the navigation.

Now we create a package called com.javacodegreeks.jsfnav under Java resources src/main/java. We need to create a managed bean called UserNav.java to handle the action.

UserNav.java

package com.javacodegreeks.jsfnav;

import javax.faces.bean.ManagedBean;

@ManagedBean(name = "userNav", eager = true)

public class UserNav {
 
 public String submit(){
 return "success";
 }

}

Add a new  navigation rule to the faces-config.xml

faces-config.xml

<?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>/helloNav.xhtml</from-view-id>
   <navigation-case>
    <from-outcome>userDefined</from-outcome>
    <to-view-id>/myNav.xhtml</to-view-id>
   </navigation-case>
  </navigation-rule>
  <navigation-rule>
   <from-view-id>/helloNav.xhtml</from-view-id>
   <navigation-case>
    <from-action>#{userNav.submit}</from-action>
    <from-outcome>success</from-outcome>
    <to-view-id>/actionMethod.xhtml</to-view-id>
   </navigation-case>
  </navigation-rule>
</faces-config>

Now we create another view called actionMethod.xhtml under /webapp/ folder.

actionMethod.xhtml

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Action Method</title>
</head>
<body>
 <h2>Action method outcome success!!</h2>
</body>
</html>

Modify the helloNav.xhtml to include Action Method based Navigation.

helloNav.xhtml

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>JSF Navigation</title>
</head>
<body>
 <h1>JSF Navigation</h1>
 <h:form>
 <div>
 Click here to try Implicit Navigation
 <h:commandButton value="Implicit" action="implicitNav"></h:commandButton>
 </div>
 <div>&nbsp;</div>
 <div>
 Click for User defined Navigation
 <h:commandButton value="User Defined" action="userDefined"></h:commandButton>
 </div>
 <div>&nbsp;</div>
 <div>
 Click for User defined action method Navigation
 <h:commandButton value="Action Method" action="#{userNav.submit}"></h:commandButton>
 </div>

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

Now again do maven package and copy the war to the apache tomcat webapps folder.

Open the following URL in the browser

http://localhost:8080/jsfnavexample/helloNav.xhtml

actionmethod1

Action method – output 1

On clicking the “Action Method” button, the NavigationHandler will match the action outcome and navigate to the user defined view.

actionmethod2

Action method – output 2

6. Download the Eclipse Project

This was an example of various approaches in Java Server Faces Navigation.

Download
You can download the full source code of this example here : JSF Navigation Example.
(No Ratings Yet)
Start the discussion Views Tweet it!

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. JPA Mini Book

2. JVM Troubleshooting Guide

3. JUnit Tutorial for Unit Testing

4. Java Annotations Tutorial

5. Java Interview Questions

6. Spring Interview Questions

7. Android UI Design

 

and many more ....

 

Receive Java & Developer job alerts in your Area

 

Leave a Reply

avatar
  Subscribe  
Notify of