JSF UI組件示例

JSF提供內置組件來創建網頁。在這裏，我們通過JSF組件來創建一個用戶註冊。按照以下步驟創建表單。

打開 NetBean8.2，創建一個名稱爲：ui-components-example的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>用戶註冊表單</title>  
    </h:head>  
    <h:body>  
        <h:form id="form">  
            <table>  
                <tr>  
                    <td><h:outputLabel for="username">用戶名：</h:outputLabel></td>  
                    <td><h:inputText id="name-id" value="#{user.name}"/></td>  
                </tr>  
                <tr>  
                    <td><h:outputLabel for="email">Email：</h:outputLabel></td>  
                    <td><h:inputText id="email-id" value="#{user.email}"/></td>  
                </tr>  
                <tr>  
                    <td><h:outputLabel for="password">密碼：</h:outputLabel></td>  
                    <td><h:inputSecret id="password-id" value="#{user.password}"/></td>  
                </tr>  

                <tr>  
                    <td><h:outputLabel for="gender">性別：</h:outputLabel></td>  
                    <td><h:selectOneRadio value="#{user.gender}">  
                            <f:selectItem itemValue="男" itemLabel="男" />  
                            <f:selectItem itemValue="女" itemLabel="女" />  
                        </h:selectOneRadio></td>  
                </tr>  
                <tr><td><h:outputLabel for="address">地址：</h:outputLabel></td>  
                    <td><h:inputTextarea value="#{user.address}" cols="50" rows="5"/></td></tr>  
            </table>  
            <h:commandButton value="提交" action="response.xhtml"></h:commandButton>  
        </h:form>  
    </h:body>  
</html>

2)創建託管Bean

文件： User.java 的代碼如下所示 -

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package com.yiibai;

/**
 *
 * @author Maxsu
 */
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="您好, #{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>密碼:</b></td>  
                <td><h:outputText value="#{user.password}"/><br/></td>  
            </tr>  
            <tr>  
                <td><b>性別</b></td>  
                <td><h:outputText value="#{user.gender}"/><br/></td>  
            </tr>  
            <tr>  
                <td><b>地址 </b></td>  
                <td><h:outputText value="#{user.address}"/></td>  
            </tr>  
        </table>  
    </h:body>  
</html>

4)運行應用程序

輸出的用戶註冊表(首頁)，如下所示 -

JSF

提交表單後，JSF會將response.xhtml文件作爲結果網頁。響應頁面結果如下所示 -

JSF

JSF教程

HTML標籤

轉換器

驗證

表格

事件處理

Facelets技術

高級部分

JSF UI組件示例

1)創建用戶註冊表

2)創建託管Bean

3)創建輸出頁面

4)運行應用程序