JSF provides two command component tags for performing action and navigation. They are
- <h:commandButton> tag
- <h:commandLink> tag
Let’s look in detail what each of the above tags are capable of.
The <h:commandButton> tag renders a button to submit a form, thereby paving a way for processing the data entered by the user. The commandButton specifies action attribute wherein one can specify the navigation details such as the page to be rendered on click of the button.
Consider an example to demonstrate the submit of form on click of the button.
Create a page mobile.xhtml as;
mobile.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 |
<?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>Add a button</title> </h:head> <h:body> <h3>Adding a button</h3> <h:form> <h:panelGrid columns="3"> <h:outputLabel for="companyname">Company Name:</h:outputLabel> <h:inputText value="#{mobile.companyname}" id="companyname"></h:inputText> <br /> <br /> <h:outputLabel for="model">Model Number:</h:outputLabel> <h:inputText value="#{mobile.modelnumber}" id="model" size="20"></h:inputText> <br /> <br /> <h:outputLabel for="color">Color:</h:outputLabel> <h:inputText value="#{mobile.color}" id="color" size="20"></h:inputText> <br /> <br /> <h:commandButton value="Submit" action="mobdetails"></h:commandButton> </h:panelGrid> </h:form> </h:body> </html> |
Here we declare the fields company name, model number and color. We use commandButton tag to display the submit button and mention that the navigation be redirected to “mobdetails” page with the help of action attribute.
We will now create the mobdetails.xhtml page which displays the details entered by the user in mobile.xhtml page;
mobdetails.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>Command Button Tag</title> </h:head> <h:body> Mobile Company Name:#{mobile.companyname} <br /> <br /> Mobile model Number:#{mobile.modelnumber} <br /> <br /> Color:#{mobile.color} <br /> <br /> </h:body> </html> |
Here we invoke the bean name with the dot operator followed by the field name to fetch the value from the bean class.
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 |
package com.journaldev.jsf.beans; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; @ManagedBean @SessionScoped public class Mobile { private String companyname; private String modelnumber; private String color; public Mobile() { } public Mobile(String companyname, String modelnumber, String color) { this.companyname = companyname; this.modelnumber = modelnumber; this.color = color; } public String getCompanyname() { return companyname; } public void setCompanyname(String companyname) { this.companyname = companyname; } public String getModelnumber() { return modelnumber; } public void setModelnumber(String modelnumber) { this.modelnumber = modelnumber; } public String getColor() { return color; } public void setColor(String color) { this.color = color; } } |
Here we declare three fields company name, model and color and write the getter and setter methods for setting and retrieving the values.
Now run the mobile.xhtml page and it should produce the following output in the browser.
<h:commandLink> tag
The commandLink provides an hyperlink equivalent to anchor tag in HTML that acts like a submit button and can be associated with the backing beans or action class for event handling.
The action attribute can be used for specifying navigation or the actionListener can be used to handle the navigation from the bean class.
Consider an example that demonstrates the usage of commandLink tag to render a hyperlink. Create the page mobilehyperlink.xhtml as;
mobilehyperlink.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>Command Link tag</title> </h:head> <h:body> <h3>Command Link tag example</h3> <h:form> <h:commandLink value="Add Mobile Details" action="mobile"></h:commandLink> <br /> <br /> <h:commandLink value="View Mobile Details" action="viewdetails"></h:commandLink> </h:form> </h:body> </html> |
Here we specify two hyperlinks, one to add details of mobile and the other to display the details of the mobile by specifying the view page name in action attribute.
Create viewdetails.xhtml as;
viewdetails.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://xmlns.jcp.org/jsf/html"> <h:head> <title>Mobile Details Page</title> </h:head> <h:body> Mobile Company Name:Micromax <br /> <br /> Model Number:A-114 Canvas 2.2 <br /> <br /> Color:White </h:body> </html> |
We are reusing the above created mobile.xhtml page to add the details of the mobile.
Now run the application and we see the following output.
Finally below image shows the project structure.
I have left out web.xml and pom.xml dependencies details, you can check them out by downloading the project from below link.