JSF 与 HTML 标签的联系

*页面的开头

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>

<%@ taglib uri="http://myfaces.apache.org/extensions" prefix="x"%>

<%@ taglib uri="http://jsftutorials.net/htmLib" prefix="htm"%>

<%@ taglib uri="http://www.ccb.cn/xmdc" prefix="xmdc"%>

<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c"%>

<%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt"%>

<%@ taglib prefix="tiles" uri="http://struts.apache.org/tags-tiles"%>

href="<%=request.getContextPath()%>/css/style_organ.css" />

href="<%=request.getContextPath()%>/css/public.css" />

href="<%=request.getContextPath()%>/css/ext.css" />

*假数据的构造

<%String str[] = new String[] { "项目名称1", "项目名称2" };

javax.faces.model.ArrayDataModel ad = new javax.faces.model.ArrayDataModel(str);

pageContext.setAttribute("ad", ad, PageContext.SESSION_SCOPE);

1、inputTextarea

常用属性：cols

Rows

常用的写法：

<h:inputTextarea value=”” rows=”8” style=”width:100%” />

2、inputText

常用属性：readonly

Size 框的大小

Maxlength 最多字符数

常用的写法：

<h:inputText value=”” size=”5” readonly=”true”

Maxlength=”6”

style=”color:yellow;background:Teal;” />

3、outputText

常用属性：escape 如果设置为true，会转义<、>和＆字符。默认值为false

使用举例：

<h:outputText value="outputtext"

style="height:30;width:100%;text-align:center;" />

4、outputFormat

此标签用于tag体中指定的参来格式化组合的消息，

例如：

<h:outputFormat value=”{0} is {1} years old!” >

<f:param value=”Bill” />

<f:param value=”38” />

</h:outputFormat>

5、graphicImage

常用例子：

<h:graphicImage value=”/tjefferson.jpg” style=”border:thin solid black” />

<h:graphicImage value=”/tjefferson.jpg” style=”border:0px” />

<h:graphicImage value="../../images/fadajing.gif" />

6、commandButton

常用属性：

Type

使用举例：

<h:panelGrid columns="2" align="center">

<h:commandButton value="确认" action="" styleClass="button" style="margin-right:10px"/>

<h:commandButton value="取消" action="" styleClass="button" />

</h:panelGrid>

<h:panelGrid columns="6" align="center" cellspacing="5">

<xmdc:outputText value="请选择：" />

<h:selectOneMenu>

<f:selectItem itemValue="0" itemLabel="下一步" />

</h:selectOneMenu>

<h:commandButton value="提交" action="" styleClass="button" />

<h:commandButton value="确认" action="" styleClass="button" />

<h:commandButton value="取消" action="" styleClass="button" />

<h:commandButton value="撤消审批意见" onclick="javascript:cancelApproval()"

action="" styleClass="button" />

</h:panelGrid>

7、commandLink

使用举例：

<h:commandLink>

〈h:outputText value=”#{msgs.linkTex}” />

</h:commandLink>

8、outputLink

使用举例：

<h:outputLink value=”” title=”outputLink的标题” target=”blank” >

<h:outputText value=”” /> </h:outputLink>

<h:outputLink value="http://www.ccb.cn">

<xmdc:outputText value="额度信息" bold="true" />

</h:outputLink>

9、selectBooleanCheckbox

复选框(单个的)

<h:selectBooleanCheckbox value=”sdfsdf” />

10、selectManyCheckbox

一组复选框

<h:selectManyCheckbox value=”#{form.colors}” >

<f:selectItem itemValue=”红” />

<f:selectItem itemValue=”蓝” />

<f:selectItem itemValue=”黄” />

<f:selectItem itemValue=”绿” />

<f:selectItem itemValue=”橙黄” />

</h:selectManyCheckbox>

11、selectOneRadio

单选按钮

<h:selectOneRadio>

<f:selectItem itemValue="0" itemLabel="全体人员" />

<f:selectItem itemValue="1" value="true" itemLabel="HR人员" />

</h:selectOneRadio>

12、selectOneListbox

<h:selectOneListbox value=”#{}” size=”5” >

<h:selectItem value=”1900” itemLabel=”1900” />

<h:selectItem value=”1901” itemLabel=”1901” />

<h:selectItem value=”1902” itemLabel=”1902” />

<h:selectItem value=”1903” itemLabel=”1903” />

</h:selectOneListbox>

13、selectManyListbox

<h:selectManyListbox value=”#{}” size=”5” >

<h:selectItem value=”1900” itemLabel=”1900” />

<h:selectItem value=”1901” itemLabel=”1901” />

<h:selectItem value=”1902” itemLabel=”1902” />

<h:selectItem value=”1903” itemLabel=”1903” />

</h:selectManyListbox>

14、iframe

</iframe>

15、inputCalendar

<x:inputCalendar monthYearRowClass="yearMonthHeader" weekRowClass="weekHeader"

currentDayCellClass="currentDayCell" renderAsPopup="true" popupTodayString="Today" popupWeekString="Week" popupDateFormat="yyyyMMdd" value=""/>

16、datatable2

<xmdc:dataTable2 value="#{ad}" var="blankstr" width="88%" columnClasses="center">

<h:column>

<f:facet name="header">

<h:outputText value="姓名" />

</f:facet>

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

</h:column>

<h:column>

<f:facet name="header">

<h:outputText value="成绩" />

</f:facet>

<h:outputText value="" />

</h:column>

<h:column>

<f:facet name="header">

<h:outputText value="总体成绩" />

</f:facet>

<h:outputText value="" />

</h:column>

<h:column>

<f:facet name="header">

<h:outputText value="表现评语" />

</f:facet>

</h:column>

</xmdc:dataTable2>

17、表头为复杂的datatable

<%// 些处为复杂表格 %>

<htm:table width="650" border="1" align="center">

<htm:tr>

<htm:td height="80" width="56" rowspan="2" align="center"

valign="middle" bgcolor="#f3f3f3">

<h:outputText value="项目" />

</htm:td>

<htm:td colspan="5" align="center" bgcolor="#f3f3f3">

<h:outputText value="中长期劳动合同员工" />

</htm:td>

<htm:td rowspan="2" align="center" width="56" bgcolor="#f3f3f3">

<h:outputText value="短期劳动合同员工" />

</htm:td>

<htm:td rowspan="2" align="center" width="56" bgcolor="#f3f3f3">

<h:outputText value="劳务用工" />

</htm:td>

<htm:td rowspan="2" align="center" width="56" bgcolor="#f3f3f3">

<h:outputText value="审计系统人员" />

</htm:td>

<htm:td colspan="2" align="center" bgcolor="#f3f3f3">

<h:outputText value="机构" />

</htm:td>

</htm:tr>

<htm:tr>

<htm:td align="center" width="56" bgcolor="#f3f3f3">

<h:outputText value="总计" />

</htm:td>

<htm:td align="center" bgcolor="#f3f3f3">

<h:outputText value="一级分行行领导或总行本部部门领导" />

</htm:td>

<htm:td align="center" bgcolor="#f3f3f3">

<h:outputText value="六、七职等管理岗位职务人员" />

</htm:td>

<htm:td align="center" bgcolor="#f3f3f3">

<h:outputText value="三、四级专业技术岗位职务人员" />

</htm:td>

<htm:td align="center" width="56" bgcolor="#f3f3f3">

<h:outputText value="党员" />

</htm:td>

<htm:td align="center" width="56" bgcolor="#f3f3f3">

<h:outputText value="总计" />

</htm:td>

<htm:td align="center" width="56" bgcolor="#f3f3f3">

<h:outputText value="其中:营业机构" />

</htm:td>

</htm:tr>

</htm:table>

<%// 些处为复杂表格 end %>

<xmdc:dataTable2 value="#{ad}" var="blankstr" width="650"

columnClasses="center" align="center">

<h:column>