各种JSF HTML标签总结

JSF标签学习总结――李木泉修订记录日期描述作者版本号目录*页面的开头 2*假数据的构造 21、inputTextarea 32、inputText 33、outputText 34、outputFormat 35、graphicImage 36、commandButton 37、commandLink 48、outputLink 49、selectBooleanCheckbox 410、selectManyCheckbox 511、selectOneRadio 512、selectOneListbox 513、selectManyListbox 514、iframe 515、inputCalendar 516、datatable2 617、表头为复杂的datatable 618、HRDC的datatable 819、panelGrid 1120、selectOneMenu 1121、标签页面：multlink 1222、页面弹出(按钮) 1223、分页的代码 1224、上传下载 13标签说明frominputTextinputTextareainputSecretinputHiddenoutputLableoutputLinkoutputFormat*页面的开头<%@tagliburi="/jsf/core"prefix="f"%><%@tagliburi="/jsf/html"prefix="h"%><%@tagliburi="/extensions"prefix="x"%><%@tagliburi="/htmLib"prefix="htm"%><%@tagliburi="/xmdc"prefix="xmdc"%><%@tagliburi="/jstl/core"prefix="c"%><%@tagliburi="/jstl/fmt"prefix="fmt"%><%@taglibprefix="tiles"uri="/tags-tiles"%><linkrel="stylesheet"type="text/css" href="<%=request.getContextPath()%>/css/style_organ.css"/><linkrel="stylesheet"type="text/css" href="<%=request.getContextPath()%>/css/public.css"/><linkrel="stylesheet"type="text/css" href="<%=request.getContextPath()%>/css/ext.css"/>*假数据的构造<%Stringstr[]=newString[]{"项目名称1","项目名称2"};javax.faces.model.ArrayDataModelad=newjavax.faces.model.ArrayDataModel(str);pageContext.setAttribute("ad",ad,PageContext.SESSION_SCOPE);%>1、inputTextarea常用属性：colsRows常用的写法：<h:inputTextareavalue=””rows=”8”style=”width:100%”2、inputText常用属性：readonlySize框的大小Maxlength最多字符数常用的写法：<h:inputTextvalue=””size=”5”readonly=”true”Maxlength=”6style=”color:yellow;background:Teal;”/>3、outputText常用属性：escape如果设置为true，会转义<、>和＆字符。默认值为false使用举例：<h:outputTextvalue="outputtext" style="height:30;width:100%;text-align:center;background-color:#DDDDDD;"/>4、outputFormat此标签用于tag体中指定的参来格式化组合的消息，例如：<h:outputFormatvalue=”{0}is{1}yearsold!”><f:paramvalue=”Bill”/><f:paramvalue=”38”</h:outputFormat>5、graphicImage常用例子：<h:graphicImagevalue=”/tjefferson.jpg”style=”border:thinsolidblack”/><h:graphicImagevalue=”/tjefferson.jpg”style=”border:0px”/><h:graphicImagevalue="../../images/fadajing.gif"/>6、commandButton常用属性：Type使用举例：<h:panelGridcolumns="2"align="center"> <h:commandButtonvalue="确认"action=""styleClass="button"style="margin-right:10px"/> <h:commandButtonvalue="取消"action=""styleClass="button"/></h:panelGrid><h:panelGridcolumns="6"align="center"cellspacing="5"> <xmdc:outputTextvalue="请选择："/> <h:selectOneMenu> <f:selectItemitemValue="0"itemLabel="下一步"/> </h:selectOneMenu> <h:commandButtonvalue="提交"action=""styleClass="button"/> <h:commandButtonvalue="确认"action=""styleClass="button"/> <h:commandButtonvalue="取消"action=""styleClass="button"/> <h:commandButtonvalue="撤消审批意见"onclick="javascript:cancelApproval()" action=""styleClass="button"/></h:panelGrid>7、commandLink使用举例：<h:commandLink>〈h:outputTextvalue=”#{msgs.linkTex}”/></h:commandLink>8、outputLink使用举例：<h:outputLinkvalue=””title=”outputLink的标题”target=”blank”><h:outputTextvalue=””/>

</h:outputLink><h:outputLinkvalue=""> <xmdc:outputTextvalue="额度信息"bold="true"/></h:outputLink>9、selectBooleanCheckbox复选框(单个的)<h:selectBooleanCheckboxvalue=”sdfsdf”/>10、selectManyCheckbox一组复选框<h:selectManyCheckboxvalue=”#{form.colors}”><f:selectItemitemValue=”红”/><f:selectItemitemValue=”蓝”/><f:selectItemitemValue=”黄”/><f:selectItemitemValue=”绿”/><f:selectItemitemValue=”橙黄”/></h:selectManyCheckbox>11、selectOneRadio单选按钮<h:selectOneRadio> <f:selectItemitemValue="0"itemLabel="全体人员"/> <f:selectItemitemValue="1"value="true"itemLabel="HR人员"/></h:selectOneRadio>12、selectOneListbox<h:selectOneListboxvalue=”#{}”size=”5”<h:selectItemvalue=”1900”itemLabel=”1900<h:selectItemvalue=”1901”itemLabel=”1901<h:selectItemvalue=”1902”itemLabel=”1902<h:selectItemvalue=”1903”itemLabel=”1903</h:selectOneListbox>13、selectManyListbox<h:selectManyListboxvalue=”#{}”size=”5”<h:selectItemvalue=”1900”itemLabel=”1900<h:selectItemvalue=”1901”itemLabel=”1901<h:selectItemvalue=”1902”itemLabel=”1902<h:selectItemvalue=”1903”itemLabel=”1903</h:selectManyListbox>14、iframe<iframename="main"frameborder="0"framespacing="0"scrolling="no"width="100%"src="Organview/OrganIndex.htm"></iframe>15、inputCalendar<x:inputCalendarmonthYearRowClass="yearMonthHeader"weekRowClass="weekHeader" currentDayCellClass="currentDayCell"renderAsPopup="true"popupTodayString="Today"popupWeekString="Week"popupDateFormat="yyyyMMdd"value=""/>16、datatable2<xmdc:dataTable2value="#{ad}"var="blankstr"width="88%"columnClasses="center"> <h:column> <f:facetname="header"> <h:outputTextvalue="姓名"/> </f:facet> <h:outputTextvalue="#{blankstr}"/> </h:column> <h:column> <f:facetname="header"> <h:outputTextvalue="成绩"/> </f:facet> <h:outputTextvalue=""/> </h:column> <h:column> <f:facetname="header"> <h:outputTextvalue="总体成绩"/> </f:facet> <h:outputTextvalue=""/> </h:column> <h:column> <f:facetname="header"> <h:outputTextvalue="表现评语"/> </f:facet> </h:column> </xmdc:dataTable2>17、表头为复杂的datatable<%// 些处为复杂表格 %> <htm:tablewidth="650"border="1"align="center"> <htm:tr> <htm:tdheight="80"width="56"rowspan="2"align="center" valign="middle"bgcolor="#f3f3f <h:outputTextvalue="项目"/> </htm:td> <htm:tdcolspan="5"align="center"bgcolor="#f3f3f <h:outputTextvalue="中长期劳动合同员工"/> </htm:td> <htm:tdrowspan="2"align="center"width="56"bgcolor="#f3f3f <h:outputTextvalue="短期劳动合同员工"/> </htm:td> <htm:tdrowspan="2"align="center"width="56"bgcolor="#f3f3f <h:outputTextvalue="劳务用工"/> </htm:td> <htm:tdrowspan="2"align="center"width="56"bgcolor="#f3f3f <h:outputTextvalue="审计系统人员"/> </htm:td> <htm:tdcolspan="2"align="center"bgcolor="#f3f3f <h:outputTextvalue="机构"/> </htm:td> </htm:tr> <htm:tr> <htm:tdalign="center"width="56"bgcolor="#f3f3f <h:outputTextvalue="总计"/> </htm:td> <htm:tdalign="center"bgcolor="#f3f3f <h:outputTextvalue="一级分行行领导或总行本部部门领导"/> </htm:td> <htm:tdalign="center"bgcolor="#f3f3f <h:outputTextvalue="六、七职等管理岗位职务人员"/> </htm:td> <htm:tdalign="center"bgcolor="#f3f3f <h:outputTextvalue="三、四级专业技术岗位职务人员"/> </htm:td> <htm:tdalign="center"width="56"bgcolor="#f3f3f <h:outputTextvalue="党员"/> </htm:td> <htm:tdalign="center"width="56"bgcolor="#f3f3f <h:outputTextvalue="总计"/> </htm:td> <htm:tdalign="center"width="56"bgcolor="#f3f3f <h:outputTextvalue="其中:营业机构"/> </htm:td> </htm:tr> </htm:table><%// 些处为复杂表格end %> <xmdc:dataTable2value="#{ad}"var="blankstr"width="650" columnClasses="center"align="center"> <h:column> <h:outputTextescape="false"value="#{blankstr}"/> </h:column> <h:column> <h:outputTextescape="false"value="#{blankstr}"/> </h:column> <h:column> <h:outputTextescape="false"value="#{blankstr}"/> </h:column> <h:column> <h:outputTextescape="false"value="#{blankstr}"/> </h:column> <h:column> <h:outputTextescape="false"value="#{blankstr}"/> </h:column> <h:column> <h:outputTextescape="false"value="#{blankstr}"/> </h:column> <h:column> <h:outputTextescape="false"value="#{blankstr}"/> </h:column> <h:column> <h:outputTextescape="false"value="#{blankstr}"/> </h:column> <h:column> <h:outputTextescape="false"value="#{blankstr}"/> </h:column> <h:column> <h:outputTextescape="false"value="#{blankstr}"/> </h:column> <h:column> <h:outputTextescape="false"value="#{blankstr}"/> </h:column> </xmdc:dataTable2>18、HRDC的datatable<h:dataTablewidth="95%"align="center"border="1"value=""var=""rowClasses="td01,td02,td02,td02,td02,td02"> <h:column> <f:facetname="header"> <xmdc:outputTextvalue=""/> </f:facet> <h:selectOneRadio> </h:selectOneRadio> </h:column> <h:column> <f:facetname="header"> <xmdc:outputTextvalue="序号"/> </f:facet> <h:outputTextvalue=""/> </h:column> <h:column> <f:facetname="header"> <xmdc:outputTextvalue="客户编号"/> </f:facet> <h:inputTextvalue=""/> </h:column> <h:column> <f:facetname="header"> <xmdc:outputTextvalue="合同编号"/> </f:facet> <h:outputTextvalue=""/> </h:column> <h:column> <f:facetname="header"> <xmdc:outputTextvalue="客户名称"/> </f:facet> <h:outputTextvalue=""/> </h:column> <h:column> <f:facetname="header"> <xmdc:outputTextvalue="合同品种"/> </f:facet> <h:outputTextvalue=""/> </h:column> <h:column> <f:facetname="header"> <xmdc:outputTextvalue="合同币种"/> </f:facet> <h:outputTextvalue=""/> </h:column> <h:column> <f:facetname="header"> <xmdc:outputTextvalue="表内余额"/> </f:facet> <h:outputTextvalue=""/> </h:column> <h:column> <f:facetname="header"> <xmdc:outputTextvalue="表外余额"/> </f:facet> <h:outputTextvalue=""/> </h:column> <h:column> <f:facetname="header"> <xmdc:outputTextvalue="五级分类"></xmdc:outputText> </f:facet> <h:outputTextvalue=""/> </h:column> <h:column> <f:facetname="header"> <xmdc:outputTextvalue="状态"></xmdc:outputText> </f:facet> <h:outputTextvalue=""/> </h:column> <h:column> <f:facetname="header"> <xmdc:outputTextvalue="经办机构"></xmdc:outputText> </f:facet> <h:outputTextvalue=""/> </h:column> <h:column> <f:facetname="header"> <xmdc:outputTextvalue="授信支用详情"></xmdc:outputText> </f:facet> <h:outputLinkvalue=""> <xmdc:outputTextvalue="x001"></xmdc:outputText> </h:outputLink> </h:column></h:dataTable>19、panelGrid <xmdc:panelGridcolumns="4"align="center"width="100%"border="1" columnbgcolors="#F3F3F3,#FFFFFF,#F3F columnwidths="20%,30%,20%,30%" rowheights="22,22,22,22,22" columnbgcolors="#F3F3F3,#ffffff,#F3F columnaligns="left,center,right" columnvaligns="top,top,"colspan=”;2,2;2;3,1;” > <xmdc:outputTextvalue="债项批复编号"/> <xmdc:outputTextvalue=""/> <xmdc:outputTextvalue="合同编号"/> <xmdc:outputTextvalue=""/> <xmdc:outputTextvalue="期限"/> <xmdc:outputTextvalue=""/> <xmdc:outputTextvalue="合同性质"/> <xmdc:outputTextvalue=""/> </xmdc:panelGrid>20、selectOneMenu<h:selectOneMenu> <f:selectItemitemValue="0"itemLabel="新增"/> <f:selectItemitemValue="1"itemLabel="借新还旧"/> <f:selectItemitemValue="2"itemLabel="债务转移(签定新合同)"/> <f:selectItemitemValue="3"itemLabel="整体债务转移"/> <f:selectItemitemValue="4"itemLabel="展期"/> <f:selectItemitemValue="5"itemLabel="担保变更"/> <f:selectItemitemValue="6"itemLabel="信用证修改"/> <f:selectItemitemValue="7"itemLabel="保函修改"/> <f:selectItemitemValue="8"itemLabel="资产转让(买断型受让)"/></h:selectOneMenu>21、标签页面：multlink<%//顶部标签%> <xmdc:multlinkvalue="1"paneLable="一般客户,集团客户"s paneLink="CreditineLedgerInfoQuery_Gen.jsf,CreditineLedgerInfoQuery_Gen.jsf" align="left"/>22、页面弹出(按钮)<h:commandButtontype=”button”onclick=openWindow(‘examine_approve/2.jsf’,800,320,100,100)”value=”选择下一个审批人”styleClass=”button”/>23、分页的代码<xmdc:panelGridcolumns="1"align="center"rendered="#{customerMagnifierBackingBean.flag}"> <xmdc:panelGridcolumns="2"align="center"columnaligns="center,center"columnvaligns="middle,middle"> <x:dataScrollerid="scroll_1"for="userdata"fastStep="10"pageCountVar="pageCount"pageIndexVar="pageIndex"paginator="false"paginatorMaxPages="0"rowsCountVar="rowsCount"displayedRowsCountVar="displayedRowsCountVar"firstRowIndexVar="firstRowIndex"

lastRowIndexVar="lastRowIndex"style="display:inline"actionListener="#{customerMagnifierBackingBean.scrollerAction}"> <f:facetname="first"> <h:outputTextvalue="首页"/> </f:facet> <f:facetname="last"> <h:outputTextvalue="尾页"/> </f:facet> <f:facetname="previous"> <h:outputTextvalue="上一页"/> </f:facet> <f:facetname="next"> <h:outputTextvalue="下一页"/> </f:facet> </x:dataScroller> <x:dataScrollerid="scroll