JSF Navigation rules specifies the navigation between the pages on click of button or hyperlink. Navigation can be specified in terms of the logical outcome such as success, failure or through action method.
JSF Navigation rules can be specified in faces-config.xml with the help of <navigation-rule> tag.
- Right click and expand the project node
- Expand the WEB-INF node and double click on faces-config.xml file
- In the faces-config.xml open the editor pane and choose navigation rule from Insert menu.
- From the add navigation dialog browse or add the JSF page name for the rule and click add.
- Right click the editor pane and select navigation case from Insert menu
- In the add navigation dialog box add or browse JSF page name that represents the starting view for the navigation rule and add or browse the to view JSF page name that opens when navigation case is selected by the navigation system.
- We can enter the action method to be invoked when the component triggers the navigation activated in the from action field and can enter the logical outcome strings in the from outcome field if the user wishes.
But personally I prefer editing the XML files manually. So let’s consider an example of configuring navigation rules manually.
Create the JSF page mobile.xhtml as
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?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>Navigation rule</title> </h:head> <h:body> <h3>Configuring Navigation Rules</h3> <h:form> <h:commandLink action="#{mobile.add}" value="Add Mobile Details" /> <br> <br> <h:commandLink action="#{mobile.view}" value="View Mobile Details" /> </h:form> </h:body> </html> |
Create the addmob.xhtml as
|
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 |
<?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>Configuring navigation rules</title> </h:head> <h:body> <h3>Add Mobile Details</h3> <h:form> <h:panelGrid columns="3"> <h:outputLabel for="mname">Mobile Name:</h:outputLabel> <h:inputText value="#{mobile.mname}"></h:inputText> <br> <br> <h:outputLabel for="color">Color:</h:outputLabel> <h:inputText value="#{mobile.color}"></h:inputText> <br> <br> <h:outputLabel for="model">Model Number:</h:outputLabel> <h:inputText value="#{mobile.modelno}"></h:inputText> <br> <br> <h:commandButton value="Submit" action="viewmob"></h:commandButton> </h:panelGrid> </h:form> </h:body> </html> |
Create viewdetails.xhtml as
|
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://xmlns.jcp.org/jsf/html"> <h:head> </h:head> <h:body> Mobile Name:Micromax <br> <br> Mobile color:Black <br> <br> Model Number:A114 Canvas 2.2 <br> <br> </h:body> </html> |
Create viewmob.xhtml as
|
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' ?> <!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>Mobile Details</title> </h:head> <h:body> Mobile Name:#{mobile.mname} <br> <br> Mobile color:#{mobile.color} <br> <br> Model Number:#{mobile.modelno} <br> <br> </h:body> </html> |
Now create the managed bean Mobile.java as
|
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 |
package com.journaldev.jsf.beans; import java.io.Serializable; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; @ManagedBean @SessionScoped public class Mobile implements Serializable { private static final long serialVersionUID = 8914753191519956089L; private String mname; private String modelno; private String color; public Mobile() { } public Mobile(String mname, String modelno, String color) { this.mname = mname; this.modelno = modelno; this.color = color; } public String getMname() { return mname; } public void setMname(String mname) { this.mname = mname; } public String getModelno() { return modelno; } public void setModelno(String modelno) { this.modelno = modelno; } public String getColor() { return color; } public void setColor(String color) { this.color = color; } public String add() { return "addform"; } public String view() { return "viewform"; } } |
Once done with above changes add navigation rules in faces-config.xml as shown below.
|
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 version="2.2" xmlns="https://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://xmlns.jcp.org/xml/ns/javaee https://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"> <navigation-rule> <from-view-id>/mobile.xhtml</from-view-id> <navigation-case> <from-action>#{mobile.add}</from-action> <from-outcome>addform</from-outcome> <to-view-id>/addmob.xhtml</to-view-id> </navigation-case> <navigation-case> <from-action>#{mobile.view}</from-action> <from-outcome>viewform</from-outcome> <to-view-id>/viewdetails.xhtml</to-view-id> </navigation-case> </navigation-rule> </faces-config> |
Now run the application to see the following output in the browser.
Click on “Add Mobile Details” link and you will see below page.
Go back to first page and click on “View Mobile Details” link and you will see below page.
Navigation can be specified implicitly in the action attribute of the commandButton tag to find the suitable page to be rendered upon the click of a button.
Let us see an example of displaying the data on click of submit button in a page
Create addcar.xhtml as shown below.
|
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 |
<?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> </h:head> <h:body> <h3>Add Car Details</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:commandButton action="viewdet" value="Submit"></h:commandButton> </h:panelGrid> </h:form> </h:body> </html> |
In the submit button we specify the JSF page name viewdet in the action attribute which is rendered upon the click of submit button
Create viewdet.xhtml as;
|
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>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> </h:body> </html> |
Create managed bean Car.java as
|
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 |
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 = -4018866884298600517L; private String cname; private String color; private String Id; public Car() { } public Car(String cname, String color, String Id) { this.cname = cname; this.color = color; this.Id = Id; } 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 getId() { return Id; } public void setId(String Id) { this.Id = Id; } } |
Now run the application to see the following output pages.
On submitting the form in above page.
Below image shows the project structure in Eclipse.
Finally, you can download the project from below link and play around with it to learn more.