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"/> -> 链接参数
</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"/> -> 设置参数
</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，传入数组

<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，联合组件

<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}"> -> 实现多重监听
  <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) {}
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容