JSF 2 Dynamic Navigation using From Outcome Example

In most web applications navigation isn’t static, the page flow doesn’t just depend on which button you click but also on the inputs that you provide. For example, submitting a login page may have two outcomes: success or failure. The outcome depends on a computation-namely, whether the username and password are legitimate.

To implement dynamic navigation, the submit button must have a method expression, a method expression in an action attribute has no parameters. It can have any return type. The return value is converted to string by calling toString() as of JSF 1.2, you can use any return type. In jsf 1.1, an action method was required to have return type String. In particular, using enumerations is a useful alternative since the compiler can catch typos in the action names. Also, an action method may return null to indicate that the same view should be re displayed.

One key design goal of jsf is to separate presentation from business logic. When navigation decisions are made dynamically, the code that computes the outcome shouldn’t have to know the exact names of web pages. JSF provides a mechanism for mapping logical outcomes, such as success and failure to actual web pages. This achieved by adding navigation-rule entries into faces-config.xml.

Also Read:

1. Managed Bean

IndexBean.java

package net.javabeat.jsf;

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

@ManagedBean
@SessionScoped
public class IndexBean {
	private String username;
	private String password;
	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 login(){
		// Do some processing
		if(this.username.equals("javabeat") && this.password.equals("javabeat")){
			return "success";
		}
		return "failure";
	}
}

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 - Action Outcome 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 - Action Outcome Example</h2>
		<h:form prependId="false">
			<h:outputText value="Welcome Mr. #{indexBean.username}"/>
		</h:form>
	</f:view>
</h:body>
</html>

relogin.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 - Action Outcome Example</h2>
		<h:form prependId="false">
			<h:outputText value="Your Username or Password is wrong, please relogin"/>
			<h:commandButton value="Relogin" action="/index.xhtml"></h:commandButton>
		</h:form>
	</f:view>
</h:body>
</html>

3. JSF Faces Configuration File

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>
		<to-view-id>/welcome.xhtml</to-view-id>
	</navigation-case>
	<navigation-case>
		<from-outcome>failure</from-outcome>
		<to-view-id>/relogin.xhtml</to-view-id>
	</navigation-case>
</navigation-rule>
</faces-config>

4. The Deployment Descriptor (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 Dynamic Navigation – Action-Outcome Demo

The below snapshots show you the proper use of dynamic navigation through outcome strings from method-expression.

JSF 2 Dynamic Navigation Example 1

JSF 2 Dynamic Navigation Example 2

JSF 2 Dynamic Navigation Example 3

Comments

comments

About Amr Mohammed

Speak Your Mind

*