一、内置组件
定义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) {}
}
