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

customer.java

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

import javax.inject.Named;

import javax.faces.bean.ManagedBean;

@Named(value="customer")

@ManagedBean

publicclasscustomer{

Stringuname,password,register;

publicStringgetUname(){

returnuname;

}

publicvoidsetUname(Stringuname){

this.uname=uname;

}

publicStringgetPassword(){

returnpassword;

}

publicvoidsetPassword(Stringpassword){

this.password=password;

}

publicStringgetRegister(){

returnregister;

}

publicvoidsetRegister(Stringregister){

this.register=register;

}

publicStringcheckdetails()

{

if(uname.equals("alpha")&&password.equals("alpha"))

{

return"success";

}

else

{

return"error";

}

}

publiccustomer(){

}

}

Success.xhtml

Success.xhtml

1

2

3

4

5

6

7

8

9

<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>

LoginSuccess${customer.uname}!!

</h:body>

</html>

error.xhtml

error.xhtml

1

2

3

4

5

6

7

8

9

<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

login.xhtml

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<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

faces-config.xml

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<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.

login.xhtml

1

<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