JSF 標簽庫

一、內置組件

定義bean，使對象可在頁面中通過EL表達式獲取

<managed-bean>
  <managed-bean-name>bean</managed-bean-name> -> 聲明對象，用于頁面獲取
  <managed-bean-class>com.wjx.Bean</managed-bean-class> -> 聲明類別
  <managed-bean-scope>session</managed-bean-scope>
 </managed-bean>

view，頂層視圖

<html>
  <body>
    <f:view>
      JSF組件必須在視圖內
    </f:view>
  </body>
</html>

outputLabel，生成<label>

<h:inputText id="textId" value="#{bean.inputText}"/>
<h:outputLabel for="textId" value="label"/>

outputLink，生成<a>

<h:outputLink value="../index.html">
    <h:outputText value="Link to Index"/>
    <f:param name="id" value="1"/> -> 鏈接參數(shù)
</h:outputLink>

outputFormat，指定格式輸出

<h:outputFormat value="{0},This is {1}"> -> Hello,This is World
     <f:param value="Hello"/>
     <f:param value="World"/>
 </h:outputFormat>

outputText，顯示文本

<h:outputText value="#{bean.outputText}"/>

inputText，生成<input type="text">

<h:inputText value="#{bean.inputText}"/>

inputSecret，生成<input type="password">

<h:inputSecret value="#{bean.inputSecret}"/>

inputHidden，生成<input type="hidden">

<h:inputHidden value="#{bean.inputHidden}"/>

inputTextarea，生成<textarea>

<h:inputTextarea value="#{bean.inputTextarea}"/>

commandButton，生成<input type="submit">

<h:commandButton value="提交" action="#{bean.commandButton}"/>

<navigation-rule>
  <from-view-id>/login.html</from-view-id> -> 指定頁面
  <navigation-case>
    <from-outcome>success</from-outcome> -> commandButton的action值
    <to-view-id>/home.html</to-view-id> -> 跳轉到的頁面
    <redirect/> -> 可指定跳轉方式，默認forward
  </navigation-case>
  <navigation-case>
    <from-outcome>failure</from-outcome> -> commandButton的action值
    <to-view-id>/login.html</to-view-id> -> 跳轉到的頁面
  </navigation-case>
</navigation-rule>

commandLink，生成<a>

<h:commandLink value="超鏈接" action="#{bean.commandLink}">
   <f:param name="id" value="1"/> -> 設置參數(shù)
</h:commandLink>

selectOneRadio

<h:selectOneRadio layout="pageDirection" value="#{bean.sex}"> -> layout設置排列方式
  <f:selectItem itemLabel="男" itemValue="male"/>
  <f:selectItem itemLabel="女" itemValue="female"/>
</h:selectOneRadio>

selectOneMenu

<h:selectOneMenu value="#{bean.sex}">
  <f:selectItem itemLabel="男" itemValue="male"/>
  <f:selectItem itemLabel="女" itemValue="female"/>
</h:selectOneMenu>

selectOneListbox

<h:selectOneMenu value="#{bean.sex}">
  <f:selectItem itemLabel="男" itemValue="male"/>
  <f:selectItem itemLabel="女" itemValue="female"/>
</h:selectOneMenu>

selectBooleanCheckbox

<h:selectBooleanCheckbox value="true"/> -> value必須是Boolean類型

selectManyCheckbox

<h:selectManyCheckbox layout="lineDirection" value="#{bean.colors}"> -> value必須是Collections類型
  <f:selectItem itemLabel="紅" itemValue="red"/>
  <f:selectItem itemLabel="黃" itemValue="yellow"/>
  <f:selectItem itemLabel="藍" itemValue="blue"/>
</h:selectManyCheckbox>

selectManyListbox

<h:selectManyListbox layout="lineDirection" value="#{bean.colors}"> -> value必須是Collections類型
  <f:selectItem itemLabel="紅" itemValue="red"/>
  <f:selectItem itemLabel="黃" itemValue="yellow"/>
  <f:selectItem itemLabel="藍" itemValue="blue"/>
</h:selectManyListbox>

selectManyMenu

<h:selectManyMenu layout="lineDirection" value="#{bean.colors}"> -> value必須是Collections類型
  <f:selectItem itemLabel="紅" itemValue="red"/>
  <f:selectItem itemLabel="黃" itemValue="yellow"/>
  <f:selectItem itemLabel="藍" itemValue="blue"/>
</h:selectManyMenu>

selectItem，傳入單個值

<h:selectOneRadio value="#{bean.selectItem}">
  <f:selectItem value="#{bean.item1}"/>
  <f:selectItem value="#{bean.item2}"/>
  <f:selectItem value="#{bean.item3}"/>
</h:selectOneRadio>

selectItems，傳入數(shù)組

<h:selectOneRadio value="#{bean.selectItem}">
  <f:selectItems value="#{bean.selectItems}"/> -> value必須是Collections類型
</h:selectOneRadio>

graphicImage，生成<img>

<h:graphicImage value="/images/smile.jpg">
  <f:attribute name="width" value="20"/> -> 設置父標簽的寬度
  <f:attribute name="height" value="20"/> -> 設置父標簽的高度
</h:graphicImage>

panelGrid，表格布局

<h:panelGrid columns="2"> -> 一行放2個組件
  <h:outputText value="account"/>
  <h:inputText value="#{bean.account}"/>
  <h:outputText value="password"/>
  <h:inputText value="#{bean.password}"/>
</h:panelGrid>

panelGroup，聯(lián)合組件

<h:panelGroup> -> 兩個按鈕合成一個組件
  <h:commandButton value="submit" action="submit"/>
  <h:commandButton value="reset" type="reset"/>
</h:panelGroup>

dataTable，生成<table>

<f:view>
  <h:dataTable value="#{bean.list}" var="item"> -> value必須是Collections類型
    <h:column>
      <f:facet name="header"> -> 表頭
        <h:outputText value="Account Header"/>
      </f:facet>
      <h:outputText value="#{item.account}"/> -> 表體
      <f:facet name="footer"> -> 表尾
        <h:outputText value="Account Footer"/>
      </f:facet>
    </h:column>
    <h:column>
      <f:facet name="header">
        <h:outputText value="Password Header"/>
      </f:facet>
      <h:outputText value="#{item.password}"/>
      <f:facet name="footer">
        <h:outputText value="Password Footer"/>
      </f:facet>
    </h:column>
  </h:dataTable>
</f:view>

form，生成<form>

<h:form></h:form>

subview，引入子頁面

<f:subview id="subview">  
  <%@ include file="subview.html" %>  
</f:subview>

verbatim，輸出原內容

<f:verbatim>
  <div></div>
</f:verbatim>

二、標準驗證器

required

賬號: 
<h:messages layout="table" style="color:red"/> -> 校驗錯誤時顯示信息
<h:inputText value="#{bean.account}" required="true"/><p> -> 必填校驗

f:validateLength

密碼:
<h:inputSecret value="#{bean.password}" required="true">
    <f:validateLength maximum="16" minimum="8"/> -> 長度校驗
</h:inputSecret><p>

三、標準轉換器

f:convertDateTime 日期轉換

<h:outputText id="date" value="#{bean.date}">
    <f:convertDateTime pattern="yyyy-MM-dd"/>
</h:outputText>
<h:message for="date" style="color:red"/> -> 格式轉換錯誤時顯示信息

四、動作事件

actionListener

<h:commandButton value="提交" actionListener="#{bean.actionListener}" action="#{bean.action}"/>

public void actionListener(ActionEvent e) {
  action = "success"; -> 設置跳轉
}

<h:commandButton value="提交" action="#{bean.action}"> -> 實現(xiàn)多重監(jiān)聽
  <f:actionListener type="com.wjx.LogHandler"/>
  <f:actionListener type="com.wjx.VerifyHandler"/>
</h:commandButton>

public class LogHandler implements ActionListener {
  public void processAction(ActionEvent e) {}
}

public class VerifyHandler implements ActionListener {
  public void processAction(ActionEvent e) {}
}

valueChangeListener

<h:selectOneMenu value="#{bean.sex}" valueChangeListener="#{bean.valueChangeListener}">
  <f:selectItem itemLabel="男" itemValue="male"/>
  <f:selectItem itemLabel="女" itemValue="female"/>
</h:selectOneMenu>

public void valueChangeListener(ValueChangeEvent event) {
  System.out.println(sex);
}

<h:selectOneMenu value="#{bean.sex}">
  <f:valueChangeListener type="com.wjx.CustomValueChangeListener"/>
  <f:selectItem itemLabel="男" itemValue="male"/>
  <f:selectItem itemLabel="女" itemValue="female"/>
</h:selectOneMenu>

public class CustomValueChangeListener implements ValueChangeListener {
  public void processValueChange(ValueChangeEvent event) {}
}
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容