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对会话有效。