Conditional Navigation Rule In JSF 2.0

JSF 2 comes with a very flexible conditional navigation rule to solve the complex page navigation flow.Conditional navigation enables you to set a pre-condition for navigation. This pre-condition needs to be met before allowing navigation to the specific view specified in the navigation case in faces-config.xml.By using conditional navigation you can move out navigation detail from your JSF Beans, where you will concentrate exclusively on the model logic


The pre-condition is specified using an EL expression and the <if> element.You can implement conditional navigation using the <if> child element under <navigation-case/> element in faces-config.xml file.The EL value expression specified in the <if>.<if> tag must evaluate to true for the navigation case in which it is defined to be matched.

JSF 2 comes with a very flexible conditional navigation rule to solve the complex page navigation flow.Conditional navigation enables you to set a pre-condition for navigation. This pre-condition needs to be met before allowing navigation to the specific view specified in the navigation case in faces-config.xml.By using conditional navigation you can move out navigation detail from your JSF Beans, where you will concentrate exclusively on the model logic


The pre-condition is specified using an EL expression and the <if> element.You can implement conditional navigation using the <if> child element under <navigation-case/> element in faces-config.xml file.The EL value expression specified in the <if>.<if> tag must evaluate to true for the navigation case in which it is defined to be matched.







Example :

<navigation-case>
<from-action>#{admin.deleteUser}</from-action>
<if>#{user.admin}</if>
<to-view-id>/removeuser.xhtml</to-view-id>
</navigation-case>

In the above code The <if> tag in the navigation case ensures that the navigation proceeds to removeuser.xhtml only if the present user is an administrator.

Directory Structure of project is shown below:

JSF Conditional Navigation


Tools used :

  1. JSF 1.2
  2. Eclipse
  3. JDK 1.6
  4. Tomcat 6.0

Example :

Create a jsf page index.xhtml and add following code into this file.

index.xhtml

<?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:body>
      <h2>This is Welcome Page;/h2>
 
    <h:form>
        <h:commandButton action="payment" value="Payment" />
    </h:form>
 
    </h:body>
</html>

Now create three JSF pages register.xhtml, order.xhtml and payment.xhtml

register.xhtml

<?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:body>
      <h2>This is resgister.xhtml Page </h2>
    </h:body>
</html>

order.xhtml

<?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:body>
      <h2>This is order.xhtml Page </h2>
    </h:body>
</html>

payment.xhtml

<?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:body>
      <h2>This is payment.xhtml</h2>
    </h:body>
</html>

Now create Managed Bean.

UserBean.java

package com.jwt.jsf;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
 
import java.io.Serializable;
 
@ManagedBean
@SessionScoped
public class UserBean implements Serializable {
 
  private static final long serialVersionUID = 1L;
 
  public boolean registerCompleted = true;
  public int orderQty = 99;
  
  public int getOrderQty() {
    return orderQty;
  }

  public void setOrderQty(int orderQty) {
    this.orderQty = orderQty;
  }

  public boolean isRegisterCompleted() {
    return registerCompleted;
  }

  public void setRegisterCompleted(boolean registerCompleted) {
    this.registerCompleted = registerCompleted;
  }
  
}


Now create faces-config.xml file.

Normally, you declared the simple navigation rule in the “faces-config.xml” like this :

<navigation-rule>
	<from-view-id>start.xhtml</from-view-id>
	<navigation-case>
		<from-outcome>payment</from-outcome>
		<to-view-id>payment.xhtml</to-view-id>
	</navigation-case>
</navigation-rule>

With JSF 2, you can add some conditional checking before it move to the payment page, see following :

faces-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<faces-config
    xmlns="http://java.sun.com/xml/ns/javaee"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    http://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd"
    version="2.0">

	<navigation-rule>
		<from-view-id>index.xhtml</from-view-id>
		<navigation-case>
			<from-outcome>payment</from-outcome>
			<if>#{userBean.orderQty < 10}</if>
			<to-view-id>order.xhtml</to-view-id>
		</navigation-case>
		<navigation-case>
			<from-outcome>payment</from-outcome>
			<if>#{userBean.registerCompleted}</if>
			<to-view-id>payment.xhtml</to-view-id>
		</navigation-case>
		<navigation-case>
			<from-outcome>payment</from-outcome>
			<to-view-id>register.xhtml</to-view-id>
		</navigation-case>
	</navigation-rule>
	
</faces-config>

faces-config.xml file is self explanatory. It will check orderQty in UserBean.java and if if orderQty is less than 10 page will be redirected to order.xhtml.registerCompleted value is true in UserBean.java so page will redirected to payment.xhtml as declared in faces-config.xml file.


Output :

JSF Conditional Navigation

JSF Conditional Navigation



You can download the source code of the example by clicking on the Download link below.

Source+lib (Developed in Eclipse) : Download




comments powered by Disqus