JSF表单组件示例教程
JSF Form组件是字段以及数据和提交功能的集合,这些字段将被发送到实现业务场景的模型。
JSF表单
要在您的JSF页面中使用表单,请包含以下名称空间:
xmlns:h =" https://java.sun.com/jsf/html""
一些重要的表单标签属性是:
id:这是用于标识组件的唯一标识符。
onclick:单击元素旁边的按钮时,调用要调用JavaScript函数。
onsubmit:通过提交按钮单击表单时调用JavaScript函数。
onreset:重置表单元素时要调用JavaScript。
渲染:标志,指示是否应渲染或者仍在处理组件。
绑定:链接到支持bean中的属性的表达式的值。
lang:表单中组件使用的语言。
target:将其中显示检索到的资源的框架的名称。
接受:表单可以处理的内容列表。
ondblclick:在表单的字段上双击鼠标时要执行JavaScript代码。
onmouseup:在组件上释放鼠标按钮时要执行JavaScript代码。
onmousedown:当在该元素上单击鼠标指针时要执行JavaScript代码。
acceptCharSet:定义表单将接受的字符编码列表。
style:可应用于表单CSS样式定义
prependId:标志,指示是否应在表单之前添加id
dir:覆盖此组件的默认文本功能。
title:用作工具提示的表单元素的标题。
JSF表单示例
考虑一个示例,以演示JSF表单的用法。
简约形式至少包含一些文本字段,标签和一个提交按钮以生成发布请求。
本示例演示了一个最小的JSF表单页面。
创建一个名为" cardetails.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>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>
在上面的JSF页面中,我们声明了一个<h:form>标记,其中包含与汽车对象有关的字段-名称,id,型号,颜色和注册号。
所有这些字段共同构成了Car表单,用户可以其中输入详细信息,然后单击"提交"按钮以发布详细信息。
单击表单提交按钮后,将调用" viewdetails.xhtml"页面,该页面将打印用户输入的数据。
现在,我们创建" viewdetails.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>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>
该视图页面通过getter和setter方法从Car bean获取所有详细信息。
以下是Car托管Bean的代码。
package com.theitroad.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;
}
}
Car类包含所有字段的getter和setter方法。
@ManagedBean注释指示汽车是托管bean,而@SessionScoped指示该bean对会话有效。

