Page navigation is the redirection of a page based on the events performed for instance – on click of a button or on click of a link.
There are many ways of defining page navigation. These include
- Specifying the page name in the action attribute of the submit button
- Indicate the page in the managed bean
- Specify the navigations in faces-config.xml
- Define the navigations based on the conditions
JSF allows us to specify the page name or view name in action attribute of submit button which will resolve the page name with .xhtml extension.
Consider an example below.
pagenav.xhtml
|
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 |
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xmlns:h="https://java.sun.com/jsf/html"> <h:head> <title>Page Navigation</title> </h:head> <h:body> <h3>Page Navigation</h3> <h:form> <h:panelGrid columns="3" > <h:outputLabel for="cname">Car Name:</h:outputLabel> <h:inputText value="#{car.cname}" id="cname"></h:inputText> <br /><br /> <h:outputLabel for="Id">Car Id:</h:outputLabel> <h:inputText value="#{car.id}"></h:inputText> <br /><br /> <h:outputLabel for="color">Color:</h:outputLabel> <h:inputText value="#{car.color}"></h:inputText> <br /><br /> <h:outputLabel for="model">Model:</h:outputLabel> <h:inputText value="#{car.model}"></h:inputText> <br /><br /> <h:outputLabel for="regno">Registration Number:</h:outputLabel> <h:inputText value="#{car.regno}"></h:inputText> <br /><br /> <h:commandButton action="viewdetails" value="Submit"></h:commandButton> </h:panelGrid> </h:form> </h:body> </html> |
Here the view name viewdetails is specified in the action attribute of commandbutton tag.
Create viewdetails.xhtml wherein the redirection is set to this page(target) on click of submit button
viewdetails.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xmlns:h="https://java.sun.com/jsf/html"> <h:head> <title>Car Details</title> </h:head> <h:body> Car Id:#{car.id} <br /><br /> Car Name:#{car.cname} <br /><br /> Car color:#{car.color} <br /><br /> Car Model:#{car.model} <br /><br /> Car Registration Number:#{car.regno} </h:body> </html> |
Create a managed bean Car.java as
Car.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 54 55 56 57 58 59 60 61 62 |
package com.journaldev.jsf.beans; import java.io.Serializable; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; @ManagedBean @SessionScoped public class Car implements Serializable { private static final long serialVersionUID = 4672207931321758371L; private String cname; private String color; private String Id; private String model; private String regno; public Car() { } public Car(String cname, String color, String Id, String model, String regno) { this.cname = cname; this.color = color; this.Id = Id; this.model = model; this.regno = regno; } public String getColor() { return color; } public void setColor(String color) { this.color = color; } public String getCname() { System.out.println("car name is" + cname); return cname; } public void setCname(String cname) { this.cname = cname; } public String getRegno() { return regno; } public void setRegno(String regno) { this.regno = regno; } public String getModel() { return model; } public void setModel(String model) { this.model = model; } public String getId() { return Id; } public void setId(String Id) { this.Id = Id; } public String add() { return "form"; } public String view() { return "form"; } } |
Once done with these changes run the application. When the user clicks on submit button, he is taken to the new page.
In this second type, we specify the view page with the help of a method in the managed bean and invoke this method of the managed bean in the view page.
Consider the example below
Create a managed bean CarBean.java
CarBean.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 54 |
package com.journaldev.jsf.beans; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; @ManagedBean @SessionScoped public class CarBean { private String cname; private String Id; private String color; private String model; private String regno; private String description; public String getColor() { return color; } public void setColor(String color) { this.color = color; } public String getCname() { return cname; } public void setCname(String cname) { this.cname = cname; } public String getDescription() { return description; } public void setDescription(String description) { this.description = description; } public String getRegno() { return regno; } public void setRegno(String regno) { this.regno = regno; } public String getModel() { return model; } public void setModel(String model) { this.model = model; } public String getId() { return Id; } public void setId(String Id) { this.Id = Id; } public String add() { return "pagenav"; } } |
Here we define the method add wherein we specify the corresponding view page to be rendered on click of buttons.
Create a view named managedbeannav.xhtml
managedbeannav.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xmlns:h="https://java.sun.com/jsf/html"> <h:head> <title>Page Navigation</title> </h:head> <h:body> <h3>Page Navigation using Managed Bean</h3> <h:form> <h:commandButton action="#{carBean.add()}" value="Add Car Details" /> </h:form> </h:body> </html> |
The pagenav.xhtml is rendered on click of “Add Car Details” button. Please refer to the pagenav.xhtml jsf page created above in implicit navigation.
From the add method in the car bean, the pagenav.xhtml page is called and in the action attribute we invoke the method add.
This is what happens when we run the application.
In this third type, we specify the pages in faces-config.xml file. Let’s look in detail with an example.
We will reuse the Car.java bean defined in earlier steps.
Now create the car.xhtml page as
car.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xmlns:h="https://java.sun.com/jsf/html"> <h:head> <title>Facelet Title</title> </h:head> <h:body> <h3>Navigation through faces-config.xml</h3> <h:form> <h:commandLink action="#{car.add}" value="Add Car details " /> <br /> <br /> <h:commandLink action="#{car.view}" value="View Details" /> </h:form> </h:body> </html> |
Next create the view pages as to be rendered during navigation.
view.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xmlns:h="https://java.sun.com/jsf/html"> <h:head> <title>Facelet Title</title> </h:head> <h:body> Car Id:C1 <br /> Car Name:Alto <br /> Car color:blue </h:body> </html> |
The pagenav.xhtml will be reused as created above which will rendered upon clicking Add link.
Now create a new file faces-config.xml to containing navigation mappings. This should go inside WEB-INF folder.
faces-config.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?xml version="1.0" encoding="UTF-8"?> <faces-config xmlns="https://java.sun.com/xml/ns/javaee" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://java.sun.com/xml/ns/javaee https://java.sun.com/xml/ns/javaee/web-facesconfig_2_0.xsd" version="2.0"> <navigation-rule> <from-view-id>car.xhtml</from-view-id> <navigation-case> <from-action>#{car.add}</from-action> <from-outcome>form</from-outcome> <to-view-id>pagenav.xhtml</to-view-id> </navigation-case> <navigation-case> <from-action>#{car.view}</from-action> <from-outcome>form</from-outcome> <to-view-id>view.xhtml</to-view-id> </navigation-case> </navigation-rule> </faces-config> |
We invoke the add and view methods of managed bean car.java and this returns the form string. The form string is searched in faces-config.xml for the method name from which it was invoked which is then mapped to pagenav.xhtml page for rendering. Similarly view page is rendered too.
Let’s run the application.
Add Car Details
View Car Details
JSF, by default provides forward navigation while navigating from one page to the other and the browser url does not change. To enable page redirection, set faces-redirect = true at the end of the view name.
We will look at an example that explains forward and redirect navigation.
Create the JSF view page forward.xhtml as
forward.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xmlns:h="https://java.sun.com/jsf/html"> <h:head> <title>Facelet Title</title> </h:head> <h:body> <h:form> <h3>Forward Navigation</h3> <h:commandButton action="pagenav" value="Add Car Details" /> <h3>Redirect Navigation</h3> <h:commandButton action="pagenav?faces-redirect=true" value="Add Car Details" /> </h:form> </h:body> </html> |
We set faces-redirect=true after at the end of the view page name ‘pagenav’. This ensures redirect navigation is enabled.
Refer to the pagenav.xhtml code as created above.
Now run the application which produces the following output.
In the above screenshot, even though the add.xhtml page is rendered the url shows the forward.xhtml as the page name. This is used for making the application more secure and robust.
In the redirect navigation, the url shows the actual current page rendered in the browser which is – pagenav.xhtml.
In conditional navigation which is the last type, we specify conditions based upon which the view should be rendered. Let’s consider an example to demonstrate the conditional navigation
Create a managed bean CarNav.java as shown below
CarNav.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 |
package com.journaldev.jsf.beans; import javax.faces.bean.ManagedBean; import javax.faces.bean.ManagedProperty; import javax.faces.bean.RequestScoped; @ManagedBean(name = "carnav", eager = true) @RequestScoped public class CarNav { @ManagedProperty(value = "#{param.pid}") private String pid; public String showPage() { if (pid == null) { return "car_nav"; } if (pid.equals("1")) { return "pagenav"; } else if (pid.equals("2")) { return "view"; } else { return "car_nav"; } } public String getPid() { return pid; } public void setPid(String pid) { this.pid = pid; } } |
In the CarNav bean, if the pid is 1, pagenav is rendered and if the page id is 2, view page is rendered. The conditions for this is written in the showPage() method.
We will create the car_nav.xhtml page that accepts the page id as parameter.
car_nav.xhtml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="https://www.w3.org/1999/xhtml" xmlns:h="https://java.sun.com/jsf/html" xmlns:c="https://java.sun.com/jsf/core"> <h:head> <title>Facelet Title</title> </h:head> <h:body> <h3>Conditional Navigation</h3> <h:form> <h:commandLink action="#{carnav.showPage()}" value="Add"> <c:param name="pid" value="1" /> </h:commandLink> <br /> <br /> <h:commandLink action="#{carnav.showPage()}" value="View"> <c:param name="pid" value="2" /> </h:commandLink> </h:form> </h:body> </html> |
Reuse the pagenav.xhtml and view view.xhtml JSF code for the navigation.
Run the application that produces the following output
The project structure looks as shown below.
This post is all about handling JSF Page Navigation. We will be looking into JSF Beans in the coming tutorial. In the mean time, you can download the project from below link and play around with it to learn more.