Dynamic Navigation in JSF (Rule-Based Navigation)
What is Navigation:
A website is a collection of web pages. Moving between web pages of a website is known as Navigation. User can switch from one webpage to another in any of these following ways,
- Clicking a button
- Clicking Hyperlink
- Typing URL
Types of Navigation:
- Static Navigation
- Dynamic Navigation
Dynamic Navigation:
When the decision to navigate from one webpage to another webpage that depends on the user input is known as Dynamic Navigation.
Dynamic Navigation is implemented using Rule-Based Navigation.
Navigation Rule:
This is the important part which plays a major role in Dynamic Navigation.
| < navigation-rule > | This is the root element that specifies how to navigate from one page to another |
| < navigation-case > | Combination of conditions that must match for case to be executed |
| < from-view-id > | Page where navigation originates |
| < from-action > | Navigation criteria that must be satisfied for the case to execute |
| < from-outcome > | Value to be compared with the output of < from-action > |
| < to-view-id > | Depending on the outcome new page will be rendered |
Note: Navigation-rule can contain any number of navigation cases.
Example:
Most websites have login page, when the user enters the login credentials and click login, the login credentials are validated. If the login details are matched it will take you to home page or it will take you to error page. The user is moved to webpage based on his inputs. This is known as Dynamic Navigation.Lets consider a simple login page, When user enters the username as “alpha” and password as “alpha” the user will be navigated to Success.xhtml. If he enters wrong credentials he will be navigated to error.xhtml
JSF Managed Bean- customer.java
import javax.inject.Named;
import javax.faces.bean.ManagedBean;
@Named(value = "customer")
@ManagedBean
public class customer {
String uname,password,register;
public String getUname() {
return uname;
}
public void setUname(String uname) {
this.uname = uname;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getRegister() {
return register;
}
public void setRegister(String register) {
this.register = register;
}
public String checkdetails()
{
if(uname.equals("alpha")&&password.equals("alpha"))
{
return "success";
}
else
{
return "error";
}
}
public customer() {
}
}
Success.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
Login Success ${customer.uname}!!
</h:body>
</html>
error.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
Invalid Credentials!
</h:body>
</html>
login.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:c="http://java.sun.com/jsf/core">
<h:head>
<title>Login</title>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="2">
Username: <h:inputText value="#{customer.uname}"/>
Password: <h:inputSecret value="#{customer.password}"/>
<h:commandButton value="Login" action="#{customer.checkdetails}"/>
</h:panelGrid>
</h:form>
</h:body>
</html>
faces-config.xml
<navigation-rule>
<navigation-case>
<from-view-id>/login.xhtml</from-view-id>
<from-action>#{customer.checkdetails}</from-action>
<from-outcome>success</from-outcome>
<to-view-id>/Success.xhtml</to-view-id>
</navigation-case>
<navigation-case>
<from-view-id>/login.xhtml</from-view-id>
<from-action>#{customer.checkdetails}</from-action>
<from-outcome>error</from-outcome>
<to-view-id>/error.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
Explanation:
When user enters the details in login.xhtml page, if the username is “alpha” and password is “alpha”, the user will be navigated to success.xhtml or error.xhtml.
<h:commandButton value="Login" action="#{customer.checkdetails}"/>
This action call the bean method “checkdetails()” which checks for the username and password validation.
Faces-config.xml:
From the example, lets start from Navigation rule. Since it is the root element Navigation-rule comes first
< from-view-id > : The navigation originates from login.xhtml page (i.e. When user enters the credentials he may be directed to success.xhtml or error.xhtml). so login.xhtml is mentioned in < from-view-id >
< from-action >: This is calling of method from bean.
< from-outcome >: In the bean method, we have defined possibility of 2 outcome’s, either “success” or “error”. So in from-outcome we have mentioned, if outcome is success then it goes to Success.xhtml.
In the second case,
< from-outcome >: If outcome from method checkdetails is error, it will navigate to error page.
Note: Navigation-rule can contain any number of navigation-case. In our example we have defined 2 navigation-case inside navigation-rule
Output:
outcome –>Success
Username is entered Wrong,
