JSF UI 组件示例

2024 年 8 月 29 日 | 阅读 2 分钟

JSF 提供了内置组件来创建网页。在这里，我们将借助 JSF 组件创建一个用户注册表单。请按照以下步骤创建表单。

1) 创建用户注册表单

// index.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>User Registration Form</title>
</h:head>
<h:body>
<h:form id="form">
<table>
<tr>
<td><h:outputLabel for="username">User Name</h:outputLabel></td>
<td><h:inputText id="name-id" value="#{user.name}"/></td>
</tr>
<tr>
<td><h:outputLabel for="email">Your Email</h:outputLabel></td>
<td><h:inputText id="email-id" value="#{user.email}"/></td>
</tr>
<tr>
<td><h:outputLabel for="password">Password</h:outputLabel></td>
<td><h:inputSecret id="password-id" value="#{user.password}"/></td>
</tr>

<tr>
<td><h:outputLabel for="gender">Gender</h:outputLabel></td>
<td><h:selectOneRadio value="#{user.gender}">
<f:selectItem itemValue="Male" itemLabel="Male" />
<f:selectItem itemValue="Female" itemLabel="Female" />
</h:selectOneRadio></td>
</tr>
<tr><td><h:outputLabel for="address">Address</h:outputLabel></td>
<td><h:inputTextarea value="#{user.address}" cols="50" rows="5"/></td></tr>
</table>
<h:commandButton value="Submit" action="response.xhtml"></h:commandButton>
</h:form>
</h:body>
</html>

2) 创建托管 Bean

// User.java

import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class User{
String name;
String email;
String password;
String gender;
String address;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}

public void setEmail(String email) {
this.email = email;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getGender() {
return gender;
}
public void setGender(String gender) {
this.gender = gender;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}    
}

3) 创建输出页面

// response.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>User Details</title>
</h:head>
<h:body>
<h2><h:outputText value="Hello #{user.name}"/></h2>
<h4><h:outputText value="You have Registered with us Successfully, Your Details are The Following."/></h4>
<table>
<tr>
<td><b>Email: </b></td>
<td><h:outputText value="#{user.email}"/><br/></td>
</tr>
<tr>
<td><b>Password:</b></td>
<td><h:outputText value="#{user.password}"/><br/></td>
</tr>
<tr>
<td><b>Gender:</b></td>
<td><h:outputText value="#{user.gender}"/><br/></td>
</tr>
<tr>
<td><b>Address: </b></td>
<td><h:outputText value="#{user.address}"/></td>
</tr>
</table>
</h:body>
</html>

4) 运行应用程序

输出

用户注册表单（索引页）。

提交表单后，JSF 将渲染 response.xhtml 文件作为结果网页。

// 响应页面

下一个主题JSF h:inputText

JSF UI 组件示例

1) 创建用户注册表单

2) 创建托管 Bean

3) 创建输出页面

4) 运行应用程序

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JSF 教程

JSF UI 组件

JSF 验证

JSF Bean 验证

JSF 转换器

JSF 引用 Bean

Facelets

JSF JDBC

JSF CRUD

JSF 面试

JSF UI 组件示例

1) 创建用户注册表单

2) 创建托管 Bean

3) 创建输出页面

4) 运行应用程序

相关帖子

JSF h:commandLink

JSF h:inputHidden

JSF h:form

JSF h:graphicImage

JSF h:inputTextarea

JSF h:inputFile

JSF h:messages

JSF h:inputSecret

JSF h:datatable

JSF h:outputText

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器