Dynamic Navigation in JSF (Rule-Based Navigation)

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

Success.xhtml

error.xhtml

login.xhtml

faces-config.xml

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.

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:
dynamic1
outcome –>Success
dynamic2
Username is entered Wrong,
dynamic3
dynamic4

 

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *