JSF –在JSF视图页面中添加标签，图像，按钮和文本字段
时间：2020-02-23 14:33:42 来源:igfitidea点击:
默认情况下，JSF框架包含各种UI组件。
让我们看一些最有用的渲染视图。
这些与传统HTML标签不同。
标签组件
标签用于在视图页面中添加标签。
当for属性值与元素的ID相匹配时，标记中的" for"属性用于将字段与表单元素相关联。
让我们为JSF页面添加一个名为label.xhtmllabel.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 Label</title>
</h:head>
<h:body>
<h3>Adding a label</h3>
<h:form>
<h:panelGrid columns="3">
<h:outputLabel for="cname">Car Name:</h:outputLabel>
<h:inputText id="cname" value="#{car.cname}"></h:inputText>
<br <br
<h:outputLabel for="color">Car Color:</h:outputLabel>
<h:inputText id="color" value="#{car.color}"></h:inputText>
</h:panelGrid>
</h:form>
</h:body>
</html>
其中标签用于添加标签" CarName"和" CarColor"，它们与for子句中指定的文本字段的cname，color属性相关联。
创建一个托管bean Car.java
Car.java
package com.theitroad.jsf.beans;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean
@SessionScoped
public class Car {
private String cname;
private String color;
public String getCname() {
return cname;
}
public void setCname(String cname) {
this.cname = cname;
}
public String getColor() {
return color;
}
public void setColor(String color) {
this.color = color;
}
}
要在运行项目后呈现特定页面，请将浏览器指向包含xhtml页面的URL。
例如，要渲染label.xhtml，请运行项目，然后键入完整的url：
本地主机：8080/JSF_Labels/faces/label.xhtml
另外，如果您使用的是NetBeans IDE，也可以右键单击" label.xhtml"页面并选择"运行文件"。
如下图所示。
现在运行显示以下输出的应用程序，如下所示
新增图片
标签用于在JSF视图页面中渲染图像。
url属性告诉应该从中拾取图像进行显示的路径。
image.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:body>
<h3>Adding Images</h3>
<h:graphicImage value="/car.jpg"
</h:body>
</html>
此处的url属性指定图像的路径。
新增按钮
呈现页面中的"提交"按钮，用户可以其中输入带有关联文本字段或者UI元素的值，然后提交这些值以执行各种操作。
button.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>Add a button</title>
</h:head>
<h:body>
<h:form>
<h:outputLabel for="cname">Car name</h:outputLabel>
<h:inputText id="cname" value="#{carLabel.cname}"></h:inputText>
<br <br
<h:commandButton id="submit" action="cardetails" value="Submit"
</h:form>
</h:body>
</html>
创建cardetails.xhtml页面，其中显示汽车的详细信息。
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>Car Details</title>
</h:head>
<h:body>
#{car.cname}
</h:body>
</html>
上面定义的Car.java类将对此起作用。
在上述更改之后运行应用程序，并看到以下输出：
添加文本字段
JSF提供了三种文本字段标签。
它们包括h：inputText –标签在标签字段旁边添加了一个文本框，用户可以其中输入值。
inputtext.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 Label</title>
</h:head>
<h:body>
<h:form>
<h3>Adding input Text</h3>
<h:panelGrid columns="3">
<h:outputLabel for="cname">Car Name:</h:outputLabel>
<h:inputText id="cname" value="#{car.cname}"></h:inputText>
<br <br
<h:outputLabel for="color">Color:</h:outputLabel>
<h:inputText id="color" value="#{car.color}"></h:inputText>
<br <br
</h:panelGrid>
</h:form>
</h:body>
</html>
完成上述更改后，运行应用程序，该应用程序将在浏览器中产生以下输出，如下所示：
h：inputSecret –此标记用于密码字段，其中输入的密码被屏蔽/隐藏。
该标签的用法如下。
创建一个名为Login的托管Bean，该Bean验证输入的用户名和密码Login.java。
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("adam") && password.equals("adam")) {
return "success";
} else {
return "failure";
}
}
}
创建JSF页面作为登录页面；
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>
Valid Username and Password
</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>
UserName or password is invalid.Please Login with correct username and password.
</h:body>
</html>
完成上述更改后，请运行程序。
在此输入的密码对其他用户隐藏。
h：inputtextarea –此标签允许用户添加文本字段中不包含的大量字符/行的文本。
示例包括用于编写电子邮件内容，反馈，产品注释详细信息等的区域。
textarea.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>
<h3> Text area</h3>
<h:form>
<h:panelGrid columns="3">
<h:outputLabel for="description">Description:</h:outputLabel>
<h:inputTextarea id="description" value="The number of characters are very huge.It keeps on increasing based on the requirement"></h:inputTextarea>
<br <br
</h:panelGrid>
</h:form>
</h:body>
</html>
