JSF文本组件–标签，文本字段，文本区域和密码
文本组件允许用户以Web应用程序的形式添加，查看和编辑数据。
JSF文本组件包括
标签：只读文本，告诉用户字段名称是什么
文本字段：用于输入数据的可编辑字段。
文本区域：用户可以输入比文本字段接受更多字符的数据，并且可以轻松滚动以输入和查看数据。
输入秘密文本字段：可以通过在文本字段中显示星号或者点对用户隐藏密码和其他敏感信息。
JSF标签
要在JSF页面中使用标签，请在JSF页面中包含以下名称空间：
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:h="https://java.sun.com/jsf/html">
<h：outputLabel>标记用于在JSF页面中添加标签。
一些属性是；
快捷键：按下时焦点转移到该元素。
class：包含CSS样式的组件类名称。
for：与另一个在" for"中指定的名称的组件属性关联。
id：唯一标识一个组件。
转义：表示对HTML和XML敏感的字符必须通过设置为true来省略。
onblur：当失去对元素的关注时执行JavaScript代码
styleClass：呈现组件时要应用CSS类名称
tabindex：使用Tab键将元素聚焦的顺序。
value：设置当前组件的值。
onfocus：当元素被聚焦时执行JavaScript代码。
onclick：当鼠标指针在此元素上单击时要在单击时执行JavaScript代码。
ondblclick：双击该元素将执行JavaScript代码。
考虑一个向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>
JSF页面上方在浏览器中产生以下输出。
JSF文本字段
<h：inputText>标记用于将文本字段添加到JSF页面，用户可以其中输入字段的数据。
这个标签的一些属性是：
id：组件的唯一标识符
alt：设置组件的文字描述
autocomplete：如果将该值设置为off，则浏览器将禁用此组件的自动完成功能。
如果将该值设置为on，则自动完成将在不干扰浏览器的情况下执行。
禁用：设置为true时的标志表示在提交表单期间不应接收焦点或者不包含焦点
立即：应立即发送组件事件，而不是在验证阶段之前发送。
标签：组件的本地化名称
maxlength：字段允许的最大字符数。
只读：限制用户编辑该字段的值。
size：设置字符的宽度
required：设置为true表示在提交表单时此字段是必填字段。
requiredMessage：应在提交表单时显示的消息。
value：设置组件的当前值。
考虑为移动设备的名称，颜色和型号字段添加文本字段的示例。
创建页面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>
当我们在浏览器中加载以上页面时，我们得到以下输出。
JSF文字区
文本区域允许用户添加多行文本并提交表单。
<h：inputTextarea>标记用于在JSF页面中添加文本区域。
textarea标签的属性为；
cols：表示要显示的列数。
onchange：获取焦点后值更改时要执行JavaScript代码。
onclick：单击元素时要执行JavaScript代码
onmousemove：当鼠标指针在元素内移动时要执行JavaScript代码。
onmouseout：将鼠标指针从元素移开时要执行JavaScript代码。
onselect：当用户选择该元素的文本时要执行JavaScript代码。
只读：用户无法更改文本字段的值。
行：设置要显示的行数。
value：设置组件的当前值。
已渲染：指示是否应渲染组件。
lang：表示用于标记的语言。
创建一个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>
下图显示了以上JSF页面产生的输出；
JSF密码字段
<h：inputSecret>标记用于密码字段，其中输入的数据以星号或者点的形式显示，以加强敏感信息的安全性。
标签的一些属性是：
id：组件的唯一标识符
验证器：调用验证器方法来验证特定的JSF组件。
validateatormessage：验证JSF组件时将显示给用户的消息，而不是内置的标准消息。
value：设置组件的当前值
已渲染：指示是否应渲染组件。
maxlength：组件允许的字符数。
重新显示：指示是否应显示先前输入的密码。
onclick：单击组件按钮时执行JavaScript。
readonly：表示该值不能由用户编辑。
onblur：当元素失去焦点时要执行JavaScript。
size：表示要输入的字符的宽度。
style：表示可以应用于组件CSS样式。
创建一个名为" 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>
现在，如下所示创建成功和失败页面。
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>
下面是Login.java托管Bean，它验证用户输入并将其转发到成功或者失败页面。
package com.theitroad.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";
}
}
}
