JSF UI组件示例 JSFUI组件示例|JSF

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="http://www.srcmini.com/#{user.name}"/> < /td> < /tr> < tr> < td> < h:outputLabel for="email"> Your Email< /h:outputLabel> < /td> < td> < h:inputText id="email-id" value="http://www.srcmini.com/#{user.email}"/> < /td> < /tr> < tr> < td> < h:outputLabel for="password"> Password< /h:outputLabel> < /td> < td> < h:inputSecret id="password-id" value="http://www.srcmini.com/#{user.password}"/> < /td> < /tr> < tr> < td> < h:outputLabel for="gender"> Gender< /h:outputLabel> < /td> < td> < h:selectOneRadio value="http://www.srcmini.com/#{user.gender}"> < f:selectItem itemValue="http://www.srcmini.com/Male" itemLabel="Male" /> < f:selectItem itemValue="http://www.srcmini.com/Female" itemLabel="Female" /> < /h:selectOneRadio> < /td> < /tr> < tr> < td> < h:outputLabel for="address"> Address< /h:outputLabel> < /td> < td> < h:inputTextarea value="http://www.srcmini.com/#{user.address}" cols="50" rows="5"/> < /td> < /tr> < /table> < h:commandButton value="http://www.srcmini.com/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="http://www.srcmini.com/Hello #{user.name}"/> < /h2> < h4> < h:outputText value="http://www.srcmini.com/You have Registered with us Successfully, Your Details are The Following."/> < /h4> < table> < tr> < td> < b> Email: < /b> < /td> < td> < h:outputText value="http://www.srcmini.com/#{user.email}"/> < br/> < /td> < /tr> < tr> < td> < b> Password:< /b> < /td> < td> < h:outputText value="http://www.srcmini.com/#{user.password}"/> < br/> < /td> < /tr> < tr> < td> < b> Gender:< /b> < /td> < td> < h:outputText value="http://www.srcmini.com/#{user.gender}"/> < br/> < /td> < /tr> < tr> < td> < b> Address: < /b> < /td> < td> < h:outputText value="http://www.srcmini.com/#{user.address}"/> < /td> < /tr> < /table> < /h:body> < /html>

4）运行应用程序
输出：
用户注册表（索引页）。