jsf tree组件_JSF表单组件示例教程

jsf tree组件

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组件是字段以及数据和提交功能的集合，这些字段将被发送到实现业务场景的模型。

JSF表格 (JSF Form)

To use the form in your JSF page include the following namespace;

要在JSF页面中使用该表单，请包含以下名称空间：

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.id：这是用于标识组件的唯一标识符。
onclick: invokes the javascript function to be called when a button is clicked next to an element.onclick：当单击元素旁边的按钮时，调用要调用的javascript函数。
onsubmit: The javascript function to be called on click of form by a submit button.onsubmit：通过提交按钮单击表单时要调用的javascript函数。
onreset: Javascript to be invoked on the reset of the elements in a form.onreset：重置表单元素时要调用的Javascript。
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.绑定：链接到支持bean中的属性的表达式的值。
lang: the language used by the components in the form.lang：表单中组件使用的语言。
target: Name of the frame where the resource retrieved is to be displayed.target：将在其中显示检索到的资源的框架的名称。
accept: the contents list that the form can handle.accept：表单可以处理的内容列表。
ondblclick: Javascript code to be executed when the mouse is double clicked over a field in a form.ondblclick：在表单的字段上双击鼠标时要执行的Javascript代码。
onmouseup: Javascript code to be executed when the mouse button is released over a component.onmouseup：在组件上释放鼠标按钮时要执行的Javascript代码。
onmousedown: Javascript code to be executed when the mouse pointer is clicked down over this element.onmousedown：在该元素上单击鼠标指针时要执行的Javascript代码。
acceptCharSet: defines the list of character encoding that the form will accept.acceptCharSet：定义表单将接受的字符编码列表。
style: The CSS style definitions that can be applied for the formstyle：可应用于表单CSS样式定义
prependId: flag that indicates whether id should be prepended to the formprependId：标志，指示是否应在表单之前添加id
dir: Overrides default text functionality for this component.dir：覆盖此组件的默认文本功能。
title: A title for an element of the form used as tooltip.title：用作工具提示的表单元素的标题。

JSF表单示例 (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.

考虑一个示例，以演示JSF表单的用法。简约形式至少包含一些文本字段，标签和一个提交按钮以生成发布请求。本示例演示了一个最小的JSF表单页面。

Create a page called cardetails.xhtml as shown below.

创建一个名为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>

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.

在上面的JSF页面中，我们声明了一个<h：form>标记，其中包含与汽车对象有关的字段-名称，id，型号，颜色和注册号。所有这些字段一起构成了Car表单，用户可以在其中输入详细信息，然后单击“提交”按钮以发布详细信息。

Upon click of the form submit button, viewdetails.xhtml page is called that prints the data entered by the user.

单击表单提交按钮后，将调用viewdetails.xhtml页面， viewdetails.xhtml页面将打印用户输入的数据。

Let’s now create the viewdetails.xhtml page that displays all the car details entered by the user.

现在，让我们创建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>

This view page fetches all the details from the Car bean through getter and setter methods.

该视图页面通过getter和setter方法从Car bean获取所有详细信息。

Below is the code for Car managed bean.

下面是Car 管理的bean的代码。

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.

Car类包含所有字段的getter和setter方法。@ @ManagedBean批注指示car是托管bean， @SessionScoped指示bean对会话有效。

Below image shows the final project structure of the project.

下图显示了该项目的最终项目结构。

JSF表单示例测试 (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.

这就是JSF表单示例以及托管Bean之间的交互的全部内容。您可以从下面的链接下载最终项目并进行试用以了解更多信息。

Download JSF Form Components Project下载JSF表单组件项目

翻译自: https://www.journaldev.com/6950/jsf-form-components-example-tutorial

jsf tree组件