Navigations can be handled in JSF by writing methods in the managed bean. These methods should be public, take no parameters and should returns an object or a view name. The method is invoked in the action attribute of the JSF page.
Let’s understand this concept more clearly with an example.
Create addmob.xhtml as
addmob.xhtml
<!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 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="#{mobile.add()}"></h:commandButton>
</h:panelGrid>
</h:form>
</h:body>
</html>
Here we are invoking the add method of the mobile managed bean in the action attribute to render the page on click of submit.
Create viewmob.xhtml that is called from the add method of the bean and displayed.
viewmob.xhtml
<?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>
Create the managed bean Mobile.java as;
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 = 6544437175802702885L;
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 "viewmob";
}
}
Note that we are returning the viewmob page in the add method which displays the details of the mobile entered by the user upon click of submit.
Now run the application and you should see below response pages.
On clicking submit button in above page, you should get below output.
Another way of handling navigation through a method is by specifying a string outcome in the method and map the returned string to a JSF page. This is done by making an entry in faces-config.xml file.
Create addmobstring.xhtml as;
addmobstring.xhtml
<?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 Mobile Details</h3>
<h:form>
<h:panelGrid columns="3">
<h:outputLabel for="mname">Mobile Name:</h:outputLabel>
<h:inputText value="#{mobileBean.mname}"></h:inputText>
<br />
<br />
<h:outputLabel for="color">Color:</h:outputLabel>
<h:inputText value="#{mobileBean.color}"></h:inputText>
<br />
<br />
<h:outputLabel for="model">Model Number:</h:outputLabel>
<h:inputText value="#{mobileBean.modelno}"></h:inputText>
<br />
<br />
<h:commandButton value="Submit" action="#{mobileBean.add}"></h:commandButton>
</h:panelGrid>
</h:form>
</h:body>
</html>
Create viewmobstring.xhtml as
viewmobstring.xhtml
<?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:#{mobileBean.mname}
<br />
<br />
Mobile color:#{mobileBean.color}
<br />
<br />
Model Number:#{mobileBean.modelno}
<br />
<br />
</h:body>
</html>
Create the managed bean MobileBean.java as;
package com.journaldev.jsf.beans;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class MobileBean {
private String mname;
private String modelno;
private String color;
public MobileBean() {
}
public MobileBean(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 "for";
}
}
Here we are returning the string “for” from the add method.
Now lets create the faces-config.xml as;
<?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>addmobstring.xhtml</from-view-id>
<navigation-case>
<from-action>#{mobileBean.add}</from-action>
<from-outcome>for</from-outcome>
<to-view-id>/viewmobstring.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>
If we run the application , we get the expected behavior as shown in below images.
Upon clicking submit button, you should see below response page.
Finally, below image shows the project structure in Eclipse.
Please download the project zip from below link and play around with it to learn more.