JSF Form component is a collection of fields along with the data and submit functionality to be sent to the model implementing the business scenario.
JSF Form
To use the form in your JSF page include the following namespace;
xmlns:h="https://java.sun.com/jsf/html"
Some of the important form tag attributes are;
- id: This is the unique identifier used to identify a component.
- onclick: invokes the javascript function to be called when a button is clicked next to an element.
- onsubmit: The javascript function to be called on click of form by a submit button.
- onreset: Javascript to be invoked on the reset of the elements in a form.
- rendered: flag indicating whether a component should be rendered or still processed.
- binding: value of the expression linked to a property in a backing bean.
- lang: the language used by the components in the form.
- target: Name of the frame where the resource retrieved is to be displayed.
- accept: the contents list that the form can handle.
- ondblclick: Javascript code to be executed when the mouse is double clicked over a field in a form.
- onmouseup: Javascript code to be executed when the mouse button is released over a component.
- onmousedown: Javascript code to be executed when the mouse pointer is clicked down over this element.
- acceptCharSet: defines the list of character encoding that the form will accept.
- style: The CSS style definitions that can be applied for the form
- prependId: flag that indicates whether id should be prepended to the form
- dir: Overrides default text functionality for this component.
- title: A title for an element of the form used as tooltip.
JSF Form Example
Consider an example to demonstrate the usage of the JSF form. A minimalistic form contains at least some text fields, labels and a submit button to generate a post request. This example demonstrates a minimal JSF form page.
Create a page called cardetails.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 31 32 33 34 35 36 37 38 |
<?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>Adding a Form</title> </h:head> <h:body> <h:form> <h3>Adding Form Components</h3> <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> |
In the JSF page above, we declared a <h:form> tag that contains the fields – name, id, model, color and registration number pertaining to the car object. All these fields together constitute a Car form wherein a user can enter the details and click the submit button to post the details.
Upon click of the form submit button, viewdetails.xhtml page is called that prints the data entered by the user.
Let’s now create the viewdetails.xhtml page that displays all the car details entered by the user.
|
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 |
<?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> |
This view page fetches all the details from the Car bean through getter and setter methods.
Below is the code for Car managed bean.
|
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 |
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 = 1715935052239888761L; 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; } } |
The Car class contains the getter and setter methods for all the fields.The @ManagedBean annotation indicates that the car is a managed bean and @SessionScoped indicates that the bean is valid for the session.
Below image shows the final project structure of the project.
JSF Form Example Test
Just build the project and run the application, you should get below response in the browser.
That’s all for the JSF form example and the interaction between the managed beans. You can download final project from below link and play around with it to learn more.