JSF 2 Conditional Navigation Example

As of JSF 2.0, you can supply an if element that activates a navigation case only when the condition is fulfilled. You can configure the condition in the faces configuration file itself to redirect to different views depends on the various conditions. This tutorial highlights the benefits of using the conditional navigation with simple example.

Also Read:

JSF 2 Tutorials

JSF Tutorials

Introduction to JSF

1. Managed Bean & User Defined Types

IndexBean.java

package net.javabeat.jsf;

import java.util.ArrayList;
import java.util.List;

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

import net.javabeat.jsf.data.User;

@ManagedBean
@SessionScoped
public class IndexBean {
	private String username;
	private String password;
	private String email;
	private boolean registered;
	private List<User> users = new ArrayList<User>();
	private User registeredUser;

	public IndexBean(){
		User user = new User();
		user.setUsername("susa");
		user.setPassword("susa!@#");
		user.setEmail("susa.hio@javabeat.net");
		this.users.add(user);
	}

	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}

	public boolean isRegistered() {
		return registered;
	}

	public void setRegistered(boolean registered) {
		this.registered = registered;
	}

	public List<User> getUsers() {
		return users;
	}

	public void setUsers(List<User> users) {
		this.users = users;
	}

	public User getRegisteredUser() {
		return registeredUser;
	}

	public void setRegisteredUser(User registeredUser) {
		this.registeredUser = registeredUser;
	}

	public String login(){
		// Do some processing
		for(User u : this.users){
			if(this.username.equalsIgnoreCase(u.getUsername()) && this.password.equals(u.getPassword())){
				this.registered = true;
				this.registeredUser = u;
				return "success";
			}
		}
		if(this.registeredUser == null){
			this.registeredUser = new User();
			this.registeredUser.setUsername(this.username);
			this.registeredUser.setPassword(this.password);
			this.registeredUser.setEmail("");
			this.users.add(registeredUser);
			this.registered = false;
			return "success";
		}
		return "success";
	}

	public String logout(){
		this.registeredUser = null;
		return "index";
	}
}

User.java

package net.javabeat.jsf.data;

public class User {
	private String username;
	private String password;
	private String email;
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
}

2. The Views

index.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
<h:head>
	<h:outputScript library="javax.faces" name="jsf.js"/>
</h:head>
<h:body>
	<f:view>
		<h1>JavaBeat JSF 2.2 Examples</h1>
		<h2>JSF2 Dynamic Navigation - Conditional Navigation Example</h2>
		<h:form prependId="false">
			<h:panelGrid columns="2">
				<h:outputText value="Enter Username: "/>
				<h:inputText value="#{indexBean.username}"/>
				<h:outputText value="Enter Password: "/>
				<h:inputText value="#{indexBean.password}"/>
			</h:panelGrid>
			<h:commandButton value="Login" action="#{indexBean.login}"></h:commandButton>
		</h:form>
	</f:view>
</h:body>
</html>

welcome.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
<h:head>
	<h:outputScript library="javax.faces" name="jsf.js"/>
</h:head>
<h:body>
	<f:view>
		<h1>JavaBeat JSF 2.2 Examples</h1>
		<h2>JSF2 Dynamic Navigation - Conditional Navigation Example</h2>
		<h:form prependId="false">
			<h:panelGrid columns="2">
				<h:outputText value="You're already registered user"></h:outputText>
				<br/>
				<h:outputText value="Welcome Mr. #{indexBean.registeredUser.username}"></h:outputText>
			</h:panelGrid>
			<h:commandButton value="Logout" action="#{indexBean.logout}"></h:commandButton>
		</h:form>
	</f:view>
</h:body>
</html>

registerAndWelcome.xhtml

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
<h:head>
	<h:outputScript library="javax.faces" name="jsf.js"/>
</h:head>
<h:body>
	<f:view>
		<h1>JavaBeat JSF 2.2 Examples</h1>
		<h2>JSF2 Dynamic Navigation - Conditional Navigation Example</h2>
		<h:form prependId="false">
			<h:panelGrid columns="2">
				<h:outputText value="You're newly registered user"></h:outputText>
				<br/>
				<h:outputText value="Welcome Mr. #{indexBean.registeredUser.username}"></h:outputText>
			</h:panelGrid>
			<h:commandButton value="Logout" action="#{indexBean.logout}"></h:commandButton>
		</h:form>
	</f:view>
</h:body>
</html>

3. JSF Faces Configuration

faces-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<faces-config 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"
	version="2.2">
<application>
	<resource-bundle>
		<base-name>net.javabeat.jsf.application</base-name>
		<var>msg</var>
	</resource-bundle>
</application>
<navigation-rule>
	<from-view-id>/index.xhtml</from-view-id>
	<navigation-case>
		<from-outcome>success</from-outcome>
		<if>#{indexBean.registered}</if>
		<to-view-id>/welcome.xhtml</to-view-id>
	</navigation-case>
	<navigation-case>
		<from-outcome>success</from-outcome>
		<if>#{!indexBean.registered}</if>
		<to-view-id>/registerAndWelcome.xhtml</to-view-id>
	</navigation-case>
</navigation-rule>
</faces-config>

4. The Deployment Descriptor (web.xml)

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5" metadata-complete="true">
	<context-param>
		<description>State saving method: 'client' or 'server'
						(=default). See JSF Specification 2.5.2
		</description>
		<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
		<param-value>client</param-value>
	</context-param>
	<context-param>
		<param-name>javax.faces.application.CONFIG_FILES</param-name>
		<param-value>/WEB-INF/faces-config.xml</param-value>
	</context-param>
	<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>/faces/*</url-pattern>
	</servlet-mapping>
	<servlet-mapping>
		<servlet-name>Faces Servlet</servlet-name>
		<url-pattern>*.xhtml</url-pattern>
	</servlet-mapping>
	<listener>
		<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
	</listener>
</web-app>

5. JSF 2 Conditional Navigation Demo

The below snapshots show you the impact of using conditional navigational statement inside the faces-config.xml file. The scenarios are as follow:

The user has tried to log in into the system
In case the user has already been registered, such as susa/susa!@# the system will navigate you into welcome.xhtml that shows you a message tells you that the user has been used is already registered and a welcome message with concatenated with the username
In case the user hasn’t been registered, the application will register it and the system will navigate you into a registerAndWelcome.xhtml view that tells you that the user is newly registered and a welcome message
The logout action will reset registeredUser property and the system will navigate into index.xhtml
The navigation has been determined using conditions that consumed the variable of registered inside the navigation cases in the faces-config.xml

[wpdm_file id=40]

1. Managed Bean & User Defined Types

2. The Views

3. JSF Faces Configuration

4. The Deployment Descriptor (web.xml)

5. JSF 2 Conditional Navigation Demo

About Amr Mohammed