【轉】JSF中的三大核心組件 UI標簽的詳細介紹和使用舉例

JSF提供了大量的UI標簽來簡化創建視圖。這些UI標簽類似於ASP.NET中的服務器組件。使用這些標簽，可以通過其value，binding，action，actionListener等屬性直接綁定到托管Bean的屬性，實例或者方法上。

1、JSF中的三大核心組件：

a、 JSF容器管理的托管Bean
b、 JSF提供的UI標簽，應用界面的UI標簽直接綁定到托管Bean
c、 頁面導航規則

下面我們就來介紹UI標簽：

2、JSF中的UI標簽：

JSF與JSP的標簽的區別在於，JSF的標簽可以使用value，binding，action和actionListener等屬性直接綁定到托管Bean上面去。

JSF包括兩組標簽庫：jsf_core.tld核心標簽庫和html_basic。tld HTML標簽庫。

2.1、JSF核心標簽庫：

f:actionListener
f:attribute
f:convertDateTime
f:convertNumber
f:converter
f:facet
f:loadBundle
f:param
f:phaseListener
f:selectItem
f:selectItems
f:setPropertyActionListener
f:subview
f:validateDoubleRange
f:validateLength
f:validateLongRange
f:validator
f:valueChangeListener
f:verbatim
f:view

關於個標簽的詳細介紹，可以參考JSF自帶的幫助文檔：

JSF解壓目錄\tlddocs\index.html

2.2、JSF的HTML標簽：

h:commandButton
h:commandLink
h:dataTable
h:form
h:graphicImage
h:inputHidden
h:inputSecret
h:inputText
h:inputTextarea
h:message
h:messages
h:outputFormat
h:outputLabel
h:outputLink
h:outputText
h:panelGrid
h:panelGroup
h:selectBooleanCheckbox
h:selectManyCheckbox
h:selectManyListbox
h:selectManyMenu
h:selectOneListbox
h:selectOneMenu
h:selectOneRadio
h:column

關於個標簽的詳細介紹，可以參考JSF自帶的幫助文檔：

JSF解壓目錄\tlddocs\index.html

2.3、UI標簽的通用屬性：

JSF的UI大都會生成一個或多個HTML標簽，所以使用這些UI標簽有時一些屬性是通用的：

id
immediate：是否立即處理UIInput組件和實現了ActionSource接口的UI組件上事件
rendered：指定條件表達式，當條件表達式為true時才會繪制組件
required：指定用戶是否必須為組件輸入值
requeredMessage：與requered一起使用，如果沒有輸入時提示信息
value：該組件的值綁定到托管對象上
onblur
onchange
onclick
ondblclick
onfocus
onkeydown
onkeypress
onkeyup
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
style
styleClass
binding：將組件本身綁定到托管Bean

2.4、<f:view>標簽的常用屬性：

locale：指定國家語言
renderKitId：JSF根據該屬性值選擇對應的繪制器工具箱來繪制該頁面
beforePhase：綁定生命周期監聽器(必須有public void beforePhase(Java.faces.event.PhaseEvent)形式的簽名)，JSF會在每個生命周期階段（除了恢復視圖）之前調用該方法。
afterPhase：綁定生命周期監聽器(必須有public void afterPhase(java.faces.event.PhaseEvent)形式的簽名)，JSF會在每個生命周期階段（除了恢復視圖）之后調用該方法。

3、UI標簽的使用舉例：

3.1、<h:form>和基本輸入標簽的使用：

<f:view>
    <h1>表單標簽</h1>
    <h:form>
        單行文本框：<h:inputText value="#{userbean.username }" /><br />
        密碼框：<h:inputSecret value="#{userbean.password }" /><br /> 多行文本區：<h:inputTextarea rows="3" cols="20" /><br /> 隱藏域：<h:inputHidden value="#{userbean.message }" /><br /> </h:form> </f:view>

其中<h:inputText>和<h:inputSecret>可以指定一個size屬性用於指定輸入框的最大長度。

3.2、多選標簽的使用：

<h1>多選標簽的使用</h1>
<h:form>
    <!-- 復選框 -->
    <h:selectManyCheckbox value="#{userbean.booklist }"> <f:selectItem itemLabel="Core Java" itemValue="Java" /> <f:selectItem itemLabel="Thinking in C++" itemValue="C++" /> <f:selectItem itemLabel="Spring Internals" itemValue="Spring" /> </h:selectManyCheckbox> <!-- 生成一個允許多選的列表框 --> <h:selectManyListbox value="#{userbean.booklist }" size="5"> <f:selectItem itemLabel="Core Java" itemValue="Java" /> <f:selectItem itemLabel="Thinking in C++" itemValue="C++" /> <f:selectItem itemLabel="Spring Internals" itemValue="Spring" /> </h:selectManyListbox> <!-- 生成一個允許多選的復合框 --> <h:selectManyMenu value="#{userbean.booklist }"> <f:selectItem itemLabel="Core Java" itemValue="Java" /> <f:selectItem itemLabel="Thinking in C++" itemValue="C++" /> <f:selectItem itemLabel="Spring Internals" itemValue="Spring" /> </h:selectManyMenu> </h:form>

使用上面的三個標簽必須與<f:selectItem>或者<f:selectItems>標簽結合使用，其中的<f:selectItem>3個屬性的含義：

itemLabel：可視化標簽值
itemValue：指定生成列表項或者復選框的值
value：與其他的UI標簽的value屬性不同，不是將該組件的值綁定到托管Bean，而是將該組件本身綁定到托管Bean

這三個標簽的value屬性值必須是一個List或者數組。

3.3、單選標簽的使用：

<h1>單選標簽的使用</h1>
<h:form>
    <!-- 生成一組單選按鈕 -->
    <h:selectOneRadio value="userbean.booklist"> <f:selectItem itemLabel="Core Java" itemValue="Java" /> <f:selectItem itemLabel="Thinking in C++" itemValue="C++" /> <f:selectItem itemLabel="Spring Internals" itemValue="Spring" /> </h:selectOneRadio> <!-- 生成一個只允許單選的列表框 --> <h:selectOneListbox value="userbean.booklist" size="5"> <f:selectItem itemLabel="Core Java" itemValue="Java" /> <f:selectItem itemLabel="Thinking in C++" itemValue="C++" /> <f:selectItem itemLabel="Spring Internals" itemValue="Spring" /> </h:selectOneListbox> <!-- 生成一個只允許單選的下來菜單 --> <h:selectOneMenu value="#{userbean.booklist }"> <f:selectItem itemLabel="Core Java" itemValue="Java" /> <f:selectItem itemLabel="Thinking in C++" itemValue="C++" /> <f:selectItem itemLabel="Spring Internals" itemValue="Spring" /> </h:selectOneMenu> </h:form>

這三個標簽和前面介紹的三個標簽的功能基本相似，只是這里的只能單選。

3.4、UISelectBoolean組件的使用：

<h:selectBooleanCheckbox />

在頁面上生成一個復選框，用於勾選或者取消勾選該復選框

與上面三個復選框不同，它的value屬性必須綁定到托管Bean中boolean類型的屬性，不需要與<f:selectItem>標簽一起使用。

3.5、UICommand組件的使用：

<h1>UICommand組件的使用</h1>
<h:form>
    <!-- 生成一個可以提交表單的按鈕 -->
    <h:commandButton value="點擊" /> <!-- 生成一個圖片按鈕 --> <h:commandButton image="images/01.jpg" /> <!-- 生成一個可以提交表單的超鏈接 --> <h:commandLink value="提交表單" /> <!-- 生成一個可以提交表單的圖片鏈接 --> <h:commandLink shape="circle" coords="20,20,10"> <img src="images/01.jpg" /> </h:commandLink> </h:form>

3.6、UIOutput對應的輸出組件的使用：

<h1>UIOutput對應的輸出組件的使用</h1>
<!-- 使用outputText標簽輸出國際化資源 -->
<h:outputText value="#{userInfo.username }" /> <!-- 使用outputText標簽輸出Bean屬性 --> <h:outputText value="#{userbean.username }" /> <!-- 生成Label標簽 --> <h:outputLabel value="#{userbean.username }" /> <!-- 生成超鏈接 --> <h:outputLink value="http://www.itzhai.com">IT宅</h:outputLink> <!-- 輸出帶占位符的國際化消息 --> <h:outputFormat value="#{userInfo.message }"> <f:param value="arthinking" /> </h:outputFormat>

這里使用到了國際化資源，需要創建：

在faces-config.xml問價中加載國際化資源的配置：

<application>
    <resource-bundle>
        <base-name>com.itzhai.user</base-name>
        <var>userInfo</var>
    </resource-bundle>
</application>

然后在com.itzhai目錄下創建一個國際化資源文件的basename為user：

username="arthinking"
message=用戶名：{0}

3.7、panelGrid和panelGroup的使用：

<h1>panelGrid標簽的使用</h1>
    <h:panelGrid columns="3" width="300px" border="1"> <!-- 生成表格標題 --> <f:facet name="caption"> <h:outputText value="表格標題" /> </f:facet> <!-- 生成表格頭 --> <f:facet name="header"> <h:outputText value="表格頭" /> </f:facet> <h:outputText value="1" /> <h:outputText value="2" /> <h:outputText value="3" /> <!-- panelGroup的使用 --> <h:panelGroup layout="block" style="color:#cfcfff"> <h:outputText value="4" /> <h:outputText value="5" /> </h:panelGroup> <h:outputText value="6" /> <h:outputText value="7" /> </h:panelGrid>

panelGrid用於生成表格，panelGroup用於把多個元素組成一個元素。

3.8、使用UIData迭代輸出從數據源中獲取的數據：

<h1>dataTable的使用</h1>
<h:dataTable width="600px" border="1" value="showbook.bookList" var="book" rowClasses="odd,even"> <!-- 使用facet生成caption --> <f:facet name="caption"> <h:outputText value="book list" /> </f:facet> <!-- 定義第一列 --> <h:column> <f:facet name="header"> <h:outputText>圖書名</h:outputText> </f:facet> <h:inputText value="#{book.name }" size="3" /> </h:column> <!-- 定義第二列 --> <h:column> <f:facet name="header"> <h:outputText>圖書分類</h:outputText> </f:facet> <h:outputLink value="#{book.url }"> <h:inputText value="#{book.bookClass }" /> </h:outputLink> </h:column> <!-- 生成表格底部 --> <f:facet name="footer"> <h:panelGroup> <h:outputText value="計算機書籍" /> </h:panelGroup> </f:facet> </h:dataTable>

下面需要在名為showbook的托管Bean中提供一個bookList數據源，可以在他的get方法中提供數據：

public List<BookInfo> getBookList(){
    List<BookInfo> books = new ArrayList<BookInfo>(); books.add(new BookInfo("Core Java", "Java", "www.itzhai.com")); books.add(new BookInfo("Core Java", "Java", "www.itzhai.com")); books.add(new BookInfo("Core Java", "Java", "www.itzhai.com")); return books; }

其中的BookInfo類如下：

public class BookInfo { private String name; private String url; private String bookClass; public BookInfo(String name, String bookClass, String url){ this.name = name; this.bookClass = bookClass; this.url = url; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getUrl() { return url; } public void setUrl(String url) { this.url = url; } public String getBookClass() { return bookClass; } public void setBookClass(String bookClass) { this.bookClass = bookClass; } }

3.9、圖像組件的使用：

<h:graphicImage value="images/01.jpg" alt="圖像01" />

這個標簽將生成HTML的img標簽。