鍍金池/ 教程/ HTML/ JSF UI組件示例
JSF數(shù)據(jù)表(h:dataTable)添加刪除
JSF <h:commandLink>標簽
JSF應(yīng)用程序入門示例
JSF數(shù)據(jù)表(ui:repeat)創(chuàng)建表
JSF列表框
JSF數(shù)據(jù)表(h:dataTable)DataModel排序數(shù)據(jù)
JSF復(fù)合組件
JSF <h:inputText>標簽
JSF表單組合框
JSF <h:messages>標簽
JSF <h:message>標簽
JSF轉(zhuǎn)換日期時間
JSF JDBC連接
JSF <h:inputHidden>標簽
JSF多選列表框
JSF <h:inputSecret>標簽
JSF自定義轉(zhuǎn)換器
JSF <f:ajax>標簽
JSF生命周期
JSF可重定位資源
JSFJSF用戶界面組件模型
JSF <h:attribute>標簽
JSF驗證器標簽
JSF驗證字符串長度
JSF轉(zhuǎn)換器標簽
JSF托管bean(Managed Bean)
JSF值變化的事件
JSF UI組件示例
JSF MySQL CURD實例
JSF數(shù)據(jù)表(h:dataTable)排序數(shù)據(jù)
JSF <h:graphicImage>標簽
JSF <f:convertNumber>標簽
JSF教程
JSF托管Bean
JSF輸出腳本
JSF <h:outputText>標簽
JSF操作事件
JSF驗證正則表達式
JSF數(shù)據(jù)表(h:dataTable)行號
JSF <h:setPropertyActionListener>標簽
JSF注入托管bean實例
JSF <h:commandButton>標簽
JSF Web資源
JSF <h:inputFile>標簽
JSF驗證浮點數(shù)值范圍
JSF Facelets視圖
JSF是什么?
JSF Facelets模板
JSF的特性(特點)
JSF自定義驗證器類
JSF單選按鈕
JSF輸出樣式
JSF數(shù)據(jù)表(h:dataTable)更新數(shù)據(jù)
JSF HTML5友好標記
JSF表單復(fù)選框(CheckBox)示例
JSF <h:form>標簽
JSF Facelets技術(shù)介紹
JSF輸出格式化
JSF <h:inputtextarea>標簽
JSF驗證整數(shù)范圍
JSF <h:panelGrid>標簽

JSF UI組件示例

JSF提供內(nèi)置組件來創(chuàng)建網(wǎng)頁。 在這里,我們通過JSF組件來創(chuàng)建一個用戶注冊。 按照以下步驟創(chuàng)建表單。

打開 NetBean8.2,創(chuàng)建一個名稱為:ui-components-example的JSF工程,然后按以下步驟添加相應(yīng)文件和代碼。

1)創(chuàng)建用戶注冊表

文件: 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)創(chuàng)建托管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)創(chuàng)建輸出頁面

文件: 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)運行應(yīng)用程序

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

提交表單后,JSF會將response.xhtml文件作為結(jié)果網(wǎng)頁。響應(yīng)頁面結(jié)果如下所示 -