JSF表单组件示例教程

时间:2020-02-23 14:33:44  来源:igfitidea点击:

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