<h:form id="form1"></h:form>
<h:inputText></h:inputText>
value: 输入框的当前值
converterMessage: 类型转换出错时的信息
required: 是否允许为空
requiredMessage: 输入为空时的出错信息
label: 全局配置文件中自定义出错信息的占位字符串
<f:convertDateTime dateStyle="short/medium/long" pattern="yyyy-MM-dd">
放在inputText内部使用
dateStyle: 使用short,medium还是long的日期格式,默认为medium
pattern: 自定义日期格式
<h:commandButton></h:commandButton>
value: 按钮上显示的值
action: 请求url
<h:messages />
显示任何message
<h:message for="组件ID" />
紧贴在组件后面,只显示和此组件有关的message
<h:selectBooleanCheckbox ></h:selectBooleanCheckbox>
value: 必须是一个Boolean的值
<h:selectOneRadio value="#{userBean.education}">
<f:selectItem itemLabel="中专" itemValue="中专"></f:selectItem>
<f:selectItem itemLabel="大专" itemValue="大专"></f:selectItem>
<f:selectItem itemLabel="本科" itemValue="本科"></f:selectItem>
<f:selectItem itemLabel="硕士生" itemValue="硕士生"></f:selectItem>
<f:selectItem itemLabel="博士生" itemValue="博士生"></f:selectItem>
</h:selectOneRadio>
value: selectItem中的值会被应用在这里
layout: 可选lineDirection和pageDirection,横向排列或纵向排列
itemLabel: 显示在页面上的内容
itemValue: 请求发送至服务器端的值
<h:selectOneMenu></h:selectOneMenu>和<h:selectOneListbox></h:selectOneListbox>用法一样
<h:selectManyCheckbox value="#{userBean.preferColors}">
<f:selectItem itemLabel="red" itemValue="red" ></f:selectItem>
<f:selectItem itemLabel="green" itemValue="green"></f:selectItem>
<f:selectItem itemLabel="blue" itemValue="blue" ></f:selectItem>
</h:selectManyCheckbox>
value: 必须是一个数组或者集合
itemLabel: 显示在页面上的内容
itemValue: 请求发送至服务器端的值
<h:selectManyListBox>和<h:selectManyMenu>类似
<h:selectManyCheckbox value="#{userBean.preferColors}">
<f:selectItems value="#{userService.colors}"></f:selectItems>
</h:selectManyCheckbox>
selectItems: 使用selectItems可以一次从后台提供多个选项
value: 必须是一个选项数组或集合
后端:
private List<SelectItem> colors;
public UserService() {
this.colors = new ArrayList<>();
colors.add(new SelectItem("cyan"));
colors.add(new SelectItem("brown", "棕色"));
colors.add(new SelectItem("gray", "灰色", "描述为灰色", true));
colors.add(new SelectItem("pink"));
colors.add(new SelectItem("dark", "黑色"));
}
//SelectItem的构造参数分别为itemValue, itemLabel, description, disabled.....
也可以使用itemLabel-itemValue对的形式:
private Map<String, String> colors;
public UserService() {
colors = new HashMap<>();
colors.put("红色", "red");
colors.put("蓝色", "blue");
colors.put("绿色", "green");
}
<h:form>
<h:panelGrid bgcolor="gray" columns="2">
<h:outputLabel value="username" />
<h:inputText value="#{userBean.username}" />
<h:outputLabel value="password" />
<h:inputSecret redisplay="true" value="#{userBean.password}" />
<h:commandButton value="login" action="#{userBean.login}" />
<h:commandButton type="reset" value="reset" />
</h:panelGrid>
</h:form>
自动排成两列,注意panelGrid要写在表单里面,否则不会对齐
<h:panelGroup>
<h:commandButton value="login" action="#{userBean.login}" />
<h:commandButton type="reset" value="reset" />
</h:panelGroup>
panelGroup将多个JSF组件当成一个组件来处理
<h:dataTable bgcolor="Red" value="#{userService.userList}" var="user">
<h:column>
<h:outputText value="#{user.username}"/>
</h:column>
<h:column>
<h:outputText value="#{user.password}"/>
</h:column>
</h:dataTable>
value: 可以是
Array
java.util.List
java.sql.ResultSet
javax.servlet.jsp.jstl.sql.Result
java.faces.model.DataModel
的实例
var: 迭代对象
<f:facet name="header"></f:facet>
<f:facet name="footer"></f:facet>
配合datatable使用,作为表头和表尾
验证器和转换器:JSF2验证器和转换器