各種JSF HTML標簽總結(jié)

JSF標簽學習總結(jié)――李木泉修訂記錄日期描述作者版本號目錄*頁面的開頭 2*假數(shù)據(jù)的構(gòu)造 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"/>*假數(shù)據(jù)的構(gòu)造<%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最多字符數(shù)常用的寫法：<h:inputTextvalue=””size=”5”readonly=”true”Maxlength=”6style=”color:yellow;background:Teal;”/>3、outputText常用屬性：escape如果設(shè)置為true，會轉(zhuǎn)義<、>和＆字符。默認值為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="表現(xiàn)評語"/> </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="審計系統(tǒng)人員"/> </htm:td> <htm:tdcolspan="2"align="center"bgcolor="#f3f3f <h:outputTextvalue="機構(gòu)"/> </htm:td> </htm:tr> <htm:tr> <htm:tdalign="center"width="56"bgcolor="#f3f3f <h:outputTextvalue="總計"/> </htm:td> <htm:tdalign="center"bgcolor="#f3f3f <h:outputTextvalue="一級分行行領(lǐng)導或總行本部部門領(lǐng)導"/> </htm:td> <htm:tdalign="center"bgcolor="#f3f3f <h:outputTextvalue="六、七職等管理崗位職務人員"/> </htm:td> <htm:tdalign="center"bgcolor="#f3f3f <h:outputTextvalue="三、四級專業(yè)技術(shù)崗位職務人員"/> </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="其中:營業(yè)機構(gòu)"/> </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="表內(nèi)余額"/> </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="狀態(tài)"></xmdc:outputText> </f:facet> <h:outputTextvalue=""/> </h:column> <h:column> <f:facetname="header"> <xmdc:outputTextvalue="經(jīng)辦機構(gòu)"></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="合同性質(zhì)"/> <xmdc:outputTextvalue=""/> </xmdc:panelGrid>20、selectOneMenu<h:selectOneMenu> <f:selectItemitemValue="0"itemLabel="新增"/> <f:selectItemitemValue="1"itemLabel="借新還舊"/> <f:selectItemitemValue="2"itemLabel="債務轉(zhuǎn)移(簽定新合同)"/> <f:selectItemitemValue="3"itemLabel="整體債務轉(zhuǎn)移"/> <f:selectItemitemValue="4"itemLabel="展期"/> <f:selectItemitemValue="5"itemLabel="擔保變更"/> <f:selectItemitemValue="6"itemLabel="信用證修改"/> <f:selectItemitemValue="7"itemLabel="保函修改"/> <f:selectItemitemValue="8"itemLabel="資產(chǎn)轉(zhuǎn)讓(買斷型受讓)"/></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