jsf tree组件_JSF文本组件–标签，文本字段，文本区域和密码

最新推荐文章于 2020-07-18 23:14:31 发布

cunchi4221

最新推荐文章于 2020-07-18 23:14:31 发布

阅读量278

点赞数

文章标签： java html vue python css ViewUI

原文链接：https://www.journaldev.com/6961/jsf-text-components-label-text-field-text-area-and-password

版权

jsf tree组件

The Text components allows the user to add, view and edit data in a form of a web application.

文本组件允许用户以Web应用程序的形式添加，查看和编辑数据。

JSF text component includes

JSF文本组件包括

Label: A read only text that tells the user what the field name is

标签：只读文本，告诉用户字段名称是什么

Text Field: An editable field to enter the data.

文字栏位：输入资料的可编辑栏位。

Text Area: User can enter the data that accepts more characters than the text field and can be scrolled easily to enter and view the data.

文本区域 ：用户可以输入比文本字段接受更多字符的数据，并且可以轻松滚动以输入和查看数据。

Input secret text Field: The password and other sensitive information can be hidden from the users by displaying asterix or dot in the text field.

输入秘密文本字段 ：可以通过在文本字段中显示星号或点对用户隐藏密码和其他敏感信息。

JSF标签 (JSF Label)

To use the labels in the JSF page include the following namespace in the JSF page as;

要在JSF页面中使用标签，请在JSF页面中包含以下名称空间：

<html xmlns="https://www.w3.org/1999/xhtml"
      xmlns:h="https://java.sun.com/jsf/html">

The <h:outputLabel> tag is used to add labels in a JSF page. Some of the attributes are;

<h：outputLabel>标记用于在JSF页面中添加标签。一些属性是；

accesskey: Focus is transferred to this elements when pressed.

accesskey ：按下时焦点转移到此元素。

class: The component class name for including CSS styles.

class ：包含CSS样式的组件类名称。

for: associates with another component attribute with the name specified in “for “.

for ：与另一个在“ for”中指定的名称的组件属性关联。

id: uniquely identifies a component.

id ：唯一标识一个组件。

escape: indicates the characters sensitive to HTML and XML must be omitted by setting to true.

escape ：表示必须将HTML和XML敏感的字符设置为true，以忽略它们。

onblur: Javascript code to execute when the focus on an element is lost

onblur ：当失去对元素的关注时执行的Javascript代码

styleClass: CSS class name to be applied while rendering the component

styleClass ：呈现组件时要应用CSS类名称

tabindex: Order in which the element is focused by using the Tab key.

tabindex ：使用Tab键将元素聚焦的顺序。

value: Sets the value for the current component.

value ：设置当前组件的值。

onfocus: Javascript code to execute when the element is focussed.

onfocus ：当元素被聚焦时执行的Javascript代码。

onclick: javascript code to be executed on click when the mouse pointer is clicked over this element.

onclick ：当鼠标指针在此元素上单击时要在单击时执行的javascript代码。

ondblclick: Javascript code to be executed on double clicking this element.

ondblclick ：双击此元素将执行的Javascript代码。

Consider an example of adding a label to a JSF page.

考虑一个向JSF页面添加标签的示例。

textlabel.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://xmlns.jcp.org/jsf/html">
<h:head>
	<title>Facelet Title</title>
</h:head>
<h:body>
	<h:panelGrid columns="3">
		<h3>Adding a Text Label</h3>
		<h:outputLabel for="mname">Mobile Company Name:</h:outputLabel>
		<br />
		<br />
		<h:outputLabel for="color">Mobile Color:</h:outputLabel>
		<br />
		<br />
		<h:outputLabel for="model">Mobile Model Number:</h:outputLabel>
	</h:panelGrid>
</h:body>
</html>

Above JSF page produces following output in the browser.

JSF页面上方在浏览器中产生以下输出。

JSF文本字段 (JSF Text Field)

The <h:inputText> tag is used to add text fields to the JSF page where user can enter data for the fields.

<h：inputText>标记用于将文本字段添加到JSF页面，用户可以在其中输入字段的数据。

Some of the attributes of this tag are;

这个标签的一些属性是：

id: unique identifier for the component

id ：组件的唯一标识符

alt: Sets the textual description for a component

alt ：设置组件的文字描述

autocomplete: If the value is set to off the browser disables autocomplete feature for this component.If the value is set to on the autocompletion is performed without browser interfering.

autocomplete ：如果将该值设置为off，则浏览器将禁用此组件的自动完成功能。如果将该值设置为on，则自动完成将在不干扰浏览器的情况下执行。

disabled: flag when set to true indicates that the focus should not be received or include during submission of a form

禁用：设置为true时的标志指示在提交表单期间不应接收焦点或不包含焦点

immediate: Component events should be sent immediately rather than before the validation phase.

立即：组件事件应立即发送，而不是在验证阶段之前发送。

label: localized name for the component

label ：组件的本地化名称

maxlength: Maximum number of characters allowed for the field.

maxlength ：该字段允许的最大字符数。

readonly: restricts user from editing the value of the field.

readonly ：限制用户编辑字段的值。

size: sets the width for the characters

size ：设置字符的宽度

required: set to true indicates that the value is mandatory for this field on submitting the form.

required ：设置为true表示在提交表单时此字段是必填字段。

requiredMessage: the message that should be displayed on submit of the form.

requiredMessage ：应在提交表单时显示的消息。

value: sets the current value for the component.

value ：设置组件的当前值。

Consider an example of adding text fields for name, color and model fields of a mobile. Create a page textfield.xhtml as;

考虑为移动设备的名称，颜色和型号字段添加文本字段的示例。创建一个页面textfield.xhtml为;

textfield.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>Text fields</title>
</h:head>
<h:body>
	<h3>Adding a Text fields for Mobile</h3>
	<h:form>
		<h:panelGrid columns="3">
			<h:outputLabel for="mname">Company Name:</h:outputLabel>
			<h:inputText id="mname"></h:inputText>
			<br />
			<br />

			<h:outputLabel for="model">Model Number:</h:outputLabel>
			<h:inputText id="model"></h:inputText>
			<br />
			<br />
			<h:outputLabel for="color">Color:</h:outputLabel>
			<h:inputText id="color"></h:inputText>
			<br />
			<br />
		</h:panelGrid>
	</h:form>

</h:body>
</html>

When we load the above page on browser, we get below output.

当我们在浏览器中加载以上页面时，我们得到以下输出。

JSF文字区域 (JSF Text Area)

The text area allows user to add multiple lines of text and submit the form.The <h:inputTextarea> tag is used to add a text area in the JSF page.

文本区域允许用户添加多行文本并提交表单。<h：inputTextarea>标记用于在JSF页面中添加文本区域。

The attributes of the textarea tag are;

textarea标签的属性为；

cols: indicates the number of columns to be displayed.

cols ：指示要显示的列数。

onchange: Javascript code to be executed when the value changes after gaining focus.

onchange ：获得焦点后值更改时要执行的Javascript代码。

onclick: Javascript code to be executed on click of an element

onclick ：单击元素时要执行的Javascript代码

onmousemove: Javascript code to be executed when the mouse pointer is moved within the element.

onmousemove ：当鼠标指针在元素内移动时要执行的Javascript代码。

onmouseout: Javascript code to be executed when the mouse pointer is moved away from the element.

onmouseout ：将鼠标指针从元素上移开时要执行的Javascript代码。

onselect: Javascript code to be executed when the user selects the text for this element.

onselect ：用户选择该元素的文本时要执行的Javascript代码。

readonly: user cannot change the value of the text field.

readonly ：用户无法更改文本字段的值。

rows: Set the number of rows to be displayed.

rows ：设置要显示的行数。

value: sets the current value for the component.

value ：设置组件的当前值。

rendered: indicates whether the component should be rendered or not.

render ：指示是否应渲染组件。

lang: indicates the language to be used for markup.

lang ：表示用于标记的语言。

Create a JSF page textdescription.xhtml as;

创建一个JSF页面textdescription.xhtml为；

textdescription.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>Text fields</title>
</h:head>
<h:body>
	<h3>Adding a Text fields for Mobile</h3>
	<h:form>
		<h:panelGrid columns="3">
			<h:outputLabel for="mname">Company Name:</h:outputLabel>
			<h:inputText id="mname"></h:inputText>
			<br />
			<br />

			<h:outputLabel for="model">Model Number:</h:outputLabel>
			<h:inputText id="model"></h:inputText>
			<br />
			<br />
			<h:outputLabel for="color">Color:</h:outputLabel>
			<h:inputText id="color"></h:inputText>
			<br />
			<br />
			<h:outputLabel for="specifications">Specifications</h:outputLabel>
			<h:inputTextarea cols="14" rows="4" style="width:150">
			</h:inputTextarea>

		</h:panelGrid>
	</h:form>
</h:body>
</html>

Below image shows the output produced by above JSF page;

下图显示了以上JSF页面产生的输出；

JSF密码字段 (JSF Password Field)

The <h:inputSecret> tag is used for password fields where the entered data is displayed in the form of asterix or dot’s for enforcing security on the sensitive information.

<h：inputSecret>标记用于密码字段，其中输入的数据以星号或点的形式显示，以加强敏感信息的安全性。

Some of the attributes of the tag are;

标签的一些属性是：

id: unique identifier for the component

id ：组件的唯一标识符

validator: calls the validator method that validates a particular JSF component.

验证器 ：调用验证器方法来验证特定的JSF组件。

validatormessage: the message that will be displayed to the user upon the validation of a JSF component instead of the built-in standard message.

validateatormessage ：验证JSF组件时将显示给用户的消息，而不是内置的标准消息。

value: sets the current value for the component

value ：设置组件的当前值

rendered: indicates whether the component should be rendered or not.

render ：指示是否应渲染组件。

maxlength: number of characters allowed for the component.

maxlength ：组件允许的字符数。

redisplay: indicates whether the previously entered password should be displayed or not.

重新显示 ：指示是否应显示先前输入的密码。

onclick: Javascript to be executed on click of the button for the component.

onclick ：单击组件按钮时将执行的Javascript。

readonly: indicates that the value cannot be edited by the user.

readonly ：指示该值不能由用户编辑。

onblur: Javascript to be executed when the element loses the focus.

onblur ：当元素失去焦点时要执行的Javascript。

size: indicates the width of the characters to be entered.

size ：表示要输入的字符的宽度。

style: indicates css styles that can be applied for a component.

style ：指示可应用于组件的css样式。

Create a page named login.xhtml that accepts username and password as parameters and validates the user.

创建一个名为login.xhtml的页面，该页面接受用户名和密码作为参数并验证用户。

login.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>Login</title>
</h:head>
<h:body>
	<h3>Hiding Input text</h3>
	<h:form id="login">
		<h:panelGrid columns="3">
			<h:outputLabel for="uname">UserName:</h:outputLabel>
			<h:inputText id="uname" value="#{login.uname}"></h:inputText>
			<br />
			<br />
			<h:outputLabel for="password">Password</h:outputLabel>
			<h:inputSecret id="password" value="#{login.password}"></h:inputSecret>
			<br />
			<br />
			<h:commandButton value="Submit" action="#{login.UservalidOrnot}"></h:commandButton>
		</h:panelGrid>
	</h:form>
</h:body>
</html>

Now create success and failure pages as below.

现在，如下所示创建成功和失败页面。

success.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>Facelet Title</title>
    </h:head>
    <h:body>
       Login Success!!!!!
    </h:body>
</html>

failure.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>Facelet Title</title>
    </h:head>
    <h:body>
       Please Login with correct username and password.
    </h:body>
</html>

Below is the Login.java Managed Bean that validates the user input and forward them to either success or failure page.

下面是Login.java托管Bean，它验证用户输入并将其转发到成功或失败页面。

package com.journaldev.jsf.beans;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class Login {

	private String uname;
	private String password;

	public String getUname() {
		return uname;
	}

	public void setUname(String uname) {
		this.uname = uname;
	}

	public String getPassword() {
		return password;
	}

	public void setPassword(String password) {
		this.password = password;
	}

	public String UservalidOrnot() {

		if (uname.equals("john") && password.equals("john")) {
			return "success";
		} else {
			return "failure";
		}
	}

}

Below images show the output pages.

下图显示了输出页面。

Finally here is the final project structure in Eclipse.

最后，这是Eclipse中的最终项目结构。

Download the final project from below link and play around with it to learn more.

从下面的链接下载最终项目并进行试用以了解更多信息。

Download JSF Text Components Project 下载JSF文本组件项目