核心標(biāo)簽庫(kù)課件

第八章JSF標(biāo)簽第八章JSF標(biāo)簽回顧導(dǎo)航規(guī)則定義了如何在應(yīng)用程序中從特定頁(yè)面導(dǎo)航至另一個(gè)頁(yè)面靜態(tài)導(dǎo)航是單一的結(jié)果映射。在靜態(tài)導(dǎo)航中，單擊指定按鈕總是選擇固定的頁(yè)面來(lái)呈現(xiàn)響應(yīng)navigation-rule元素最重要的兩個(gè)子元素是from-view-id和navigation-case。navigation-case元素最重要的兩個(gè)子元素是from-outcome和to-view-id動(dòng)態(tài)導(dǎo)航是多個(gè)結(jié)果映射要實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)航，按鈕或鏈接必須有一個(gè)方法引用，以用于調(diào)用相應(yīng)的方法，導(dǎo)航處理器根據(jù)方法返回的字符串來(lái)匹配導(dǎo)航規(guī)則2回顧導(dǎo)航規(guī)則定義了如何在應(yīng)用程序中從特定頁(yè)面導(dǎo)航至另一個(gè)頁(yè)面目標(biāo)熟悉HTML標(biāo)簽庫(kù)熟悉核心標(biāo)簽庫(kù)在應(yīng)用程序中使用標(biāo)簽庫(kù)熟練使用數(shù)據(jù)表格標(biāo)簽3目標(biāo)熟悉HTML標(biāo)簽庫(kù)3JSF標(biāo)簽庫(kù)Taglib指令JSF核心標(biāo)簽庫(kù)JSFHTML標(biāo)簽庫(kù)<%@tagliburi="/jsf/core"prefix="f"%><%@tagliburi="/jsf/html"prefix="h"%>使用JSF標(biāo)簽<%@tagliburi="/jsf/core"

prefix="f"%><%@tagliburi="/jsf/html"prefix="h"%><f:view><h:form>...</h:form></f:view>4JSF標(biāo)簽庫(kù)Taglib指令JSF核心標(biāo)簽庫(kù)JSFHJSF核心標(biāo)簽標(biāo)簽說(shuō)明view創(chuàng)建頂層視圖subview創(chuàng)建視圖的子視圖facet向組件添加facetparam向組件添加參數(shù)attribute向組件添加屬性actionListener在父組件上注冊(cè)操作監(jiān)聽器valueChangeListener向父組件注冊(cè)值變更監(jiān)聽器converter注冊(cè)任意轉(zhuǎn)換器convertDateTime注冊(cè)日期時(shí)間轉(zhuǎn)換器convertNumber注冊(cè)數(shù)量轉(zhuǎn)換器標(biāo)簽說(shuō)明validateLength驗(yàn)證組件值的長(zhǎng)度validateDoubleRange驗(yàn)證組件值的雙精度范圍validateLongRange驗(yàn)證組件值的長(zhǎng)整型范圍validator向組件添加驗(yàn)證器loadBundle加載資源包verbatim向頁(yè)面中添加標(biāo)簽selectItem指定UISelectOne或UISelectMany組件的一個(gè)項(xiàng)目selectItems指定UISelectOne或UISelectMany組件的多個(gè)項(xiàng)目5JSF核心標(biāo)簽標(biāo)簽說(shuō)明view創(chuàng)建頂層視圖subview創(chuàng)標(biāo)準(zhǔn)的轉(zhuǎn)換器和驗(yàn)證器編寫一個(gè)填寫付款信息的頁(yè)面，付款信息包括付款金額、信用卡號(hào)、信用卡有效期，要求對(duì)輸入的數(shù)據(jù)進(jìn)行特定的轉(zhuǎn)換和驗(yàn)證8899123456789876512/20056標(biāo)準(zhǔn)的轉(zhuǎn)換器和驗(yàn)證器編寫一個(gè)填寫付款信息的頁(yè)面，付款信息包括示例代碼importjava.util.Date;publicclassPaymentBean{privatedoubleamount;privateStringcard="";

privateDatedate=newDate();publicvoidsetAmount(doublenewValue){amount=newValue;}publicdoublegetAmount(){returnamount;}publicvoidsetCard(StringnewValue){card=newValue;}publicStringgetCard(){returncard;}

publicvoidsetDate(DatenewValue){date=newValue;}publicDategetDate(){returndate;}}受管理的Bean<f:view><h:form><h1><h:outputTextvalue="請(qǐng)輸入付款信息："/></h1><h:panelGridcolumns="3"><h:outputTextvalue="金額："/><h:inputTextid="amount"value="#{payment.amount}">

<f:convertNumberminFractionDigits="2"/><f:validateDoubleRangeminimum="10"maximum="10000"/></h:inputText>

<h:messagefor="amount"style="color:red"/><h:outputTextvalue="信用卡號(hào)："/><h:inputTextid="card"value="#{payment.card}">

<f:validateLengthminimum="13"/></h:inputText>

<h:messagefor="card"style="color:red"/><h:outputTextvalue="信用卡有效期（月/年）："/><h:inputTextid="date"value="#{payment.date}">

<f:convertDateTimepattern="MM/yyyy"/></h:inputText>

<h:messagefor="date"style="color:red"/></h:panelGrid><h:commandButtonvalue="處理"action="process"/></h:form></f:view>index.jsp<f:view><h:form><h1><h:outputTextvalue="付款信息"/></h1><h:panelGridcolumns="2"><h:outputTextvalue="金額："/><h:outputTextvalue="#{payment.amount}">

<f:convertNumbertype="currency"/></h:outputText><h:outputTextvalue="信用卡號(hào)："/><h:outputTextvalue="#{payment.card}"/><h:outputTextvalue="信用卡有效日期:"/><h:outputTextvalue="#{payment.date}"><f:convertDateTimepattern="MM/yyyy"/></h:outputText></h:panelGrid><h:commandButtonvalue="返回"action="back"/></h:form></f:view>result.jsp演示：示例17示例代碼importjava.util.Date;受管理的JSFHTML標(biāo)簽組件標(biāo)簽說(shuō)明UIFormform表示

HTML表單元素UIInputInputText單行文本輸入控件inputTextarea多行文本輸入控件InputSecret密碼輸入控件inputHidden隱藏字段UIOutputoutputLabel顯示文本outputLink鏈接到另一頁(yè)面或某頁(yè)面上的特定位置outputFormat顯示格式化的信息outputText當(dāng)行文本輸入U(xiǎn)ICommandcommandButton表示一個(gè)按鈕commandLink表示一個(gè)鏈接組件標(biāo)簽說(shuō)明UISelectOneSelectOneListbox單選列表框selectOneMenu單選菜單selectOneRadio單選按鈕集UISelectBooleanselectBooleanCheckbox單個(gè)復(fù)選框UISelectManyselectManyListbox復(fù)選框集selectManyCheckbox多行選擇列表框selectManyMenu多選菜單UIPanelpanelGrid表示一個(gè)

HTML表格panelGroup組合一系列組件UIMessagemessage顯示一個(gè)組件的最近使用的消息UIMessagesmessages顯示所有消息UIGraphicgraphicImage顯示一個(gè)圖像UIDatadataTable功能豐富的表格控件UIColumncolumn表示表格中的列8JSFHTML標(biāo)簽組件標(biāo)簽說(shuō)明UIFormform表示表單9表單9文本輸入h:inputTexth:inputSecreth:inputTextarea<h:inputTextvalue="測(cè)試字符串"readonly="true"/><h:inputSecretvalue="#{form.passwd}"redisplay="true"/><h:inputTextareavalue="123456789012345"rows="3"cols="10"/><h:inputTextvalue="inputText"style="color:Yellow;background:Teal;"/>10文本輸入h:inputText<h:inputTextva命令h:commandButtonh:commandLinkh:outputLink<h:commandButtonvalue="按鈕"onclick="alert('buttonclicked')"

type="button"/><h:outputLinkvalue=""><h:graphicImagevalue="java-dot-net.jpg"/><h:outputTextvalue=""/></h:outputLink><h:commandLinkvalue="歡迎"

actionListener="#{form.useLinkValue}"action="#{form.followLink}"/>11命令h:commandButton<h:commandBut選擇h:selectBooleanCheckboxh:selectManyCheckboxh:selectOneRadioh:selectOneListboxh:selectManyListboxh:selectOneMenuh:selectManyMenu12選擇h:selectBooleanCheckbox12選擇標(biāo)簽使用示例聯(lián)系我<h:selectBooleanCheckboxvalue="#{form.contactMe}"/>privatebooleancontactMe;publicvoidsetContactMe(booleannewValue){contactMe=newValue;}publicbooleangetContactMe(){returncontactMe;}<h:selectManyCheckboxvalue="#{form.colors}"><f:selectItem

itemValue="Red"itemLabel="紅色"/><f:selectItemitemValue="Blue"itemLabel="藍(lán)色"/><f:selectItemitemValue="Yellow"itemLabel="黃色"/><f:selectItemitemValue="Green"itemLabel="綠色"/><f:selectItemitemValue="Orange"itemLabel="橘黃"/></h:selectManyCheckbox><h:selectOneRadiovalue="#{form.grade}"layout="pageDirection"><f:selectItemsvalue="#{form.grades}"/></h:selectOneRadio>privateSelectItem[]grades={newSelectItem(newInteger(1),"高中"),newSelectItem(newInteger(2),"?？?),newSelectItem(newInteger(3),"本科"),newSelectItem(newInteger(4),"碩士"),newSelectItem(newInteger(5),"博士")};publicSelectItem[]getGrades(){returngrades;}<h:selectOneListboxid="onelistbox"value="#{form.expert}"><f:selectItemitemValue="java"itemLabel="Java"/><f:selectItemitemValue="oracle"itemLabel="Oracle"/><f:selectItemitemValue="asp"itemLabel="ASP"/><f:selectItemitemValue="jsp"itemLabel="JSP"/></h:selectOneListbox><h:selectOneMenuid="onemenu"value="#{form.expert}"><f:selectItemitemValue="java"itemLabel="Java"/><f:selectItemitemValue="oracle"itemLabel="Oracle"/><f:selectItemitemValue="asp"itemLabel="ASP"/><f:selectItemitemValue="jsp"itemLabel="JSP"/></h:selectOneMenu>演示：示例213選擇標(biāo)簽使用示例聯(lián)系我privatebooleancon數(shù)據(jù)表格標(biāo)簽UIData組件表示h:dataTable標(biāo)簽，它支持將數(shù)據(jù)綁定到數(shù)據(jù)對(duì)象集合，遍歷數(shù)據(jù)源中的每個(gè)記錄表內(nèi)的數(shù)據(jù)列由UIColumn組件表示，即h:column標(biāo)簽屬性說(shuō)明bgcolor

設(shè)置表格背景色border設(shè)置表格邊框?qū)挾萩ellpadding設(shè)置表格單元格周圍的邊距cellspacing設(shè)置表格單元格之間的間距first表格中所顯示的第一行的索引frame指定表格四周的邊框樣式；有效值：none、above、below、hsides、vsides、lhs、rhs、box、borderstyleClass指定整個(gè)表格的CSS類rowClasses行的CSS類列表，用逗號(hào)分隔列表columnClasses列的CSS類列表，用逗號(hào)分隔列表headerClass

表格標(biāo)題的CSS類footerClass用于表格頁(yè)腳的CSS類rules單元格之間的行樣式；有效值：groups、rows、columns、allvar數(shù)據(jù)表格所創(chuàng)建的變量名稱，表示該值中的當(dāng)前項(xiàng)目14數(shù)據(jù)表格標(biāo)簽UIData組件表示h:dataTable數(shù)據(jù)表格使用示例1在網(wǎng)頁(yè)中輸出一個(gè)簡(jiǎn)單的表格，顯示一個(gè)職員的姓名和職位15數(shù)據(jù)表格使用示例1在網(wǎng)頁(yè)中輸出一個(gè)簡(jiǎn)單的表格，顯示一個(gè)職員的publicclassEmployeeList{privateStringname;privateStringposition;publicEmployeeList(Stringname,Stringposition){=name;this.position=position;}publicvoidsetName(Stringname){=name;}publicvoidsetPosition(Stringposition){this.position=position;}publicStringgetName(){returnname;}publicStringgetPosition(){returnposition;}}EmployList.java示例代碼publicclassData{

privatestaticfinalEmployeeList[]employeelist=newEmployeeList[]{newEmployeeList("高俠","軟件工程師"),newEmployeeList("張小麗","培訓(xùn)師"),newEmployeeList("劉亞平","項(xiàng)目經(jīng)理"),newEmployeeList("牛遠(yuǎn)","軟件工程師")};

publicEmployeeList[]getEmployeelist(){returnemployeelist;}}受管理BeanData……<f:view><h:form><h:dataTable

bgcolor="lightblue"

value="#{Employeedata.employeelist}"var="employees"

border="5"cellpadding="5"cellspacing="2"><h:column><f:facetname="header"><h:outputTextid="headerText1"value="姓名"/></f:facet><h:outputTextvalue="#{}"/>

</h:column><h:column><f:facetname="header"><h:outputTextid="headerText2"value="職位"/>

</f:facet><h:outputTextvalue="#{employees.position}"/>

</h:column></h:dataTable></h:form></f:view>index.jsp演示：示例316publicclassEmployeeList{Emp數(shù)據(jù)表格使用示例2練習(xí)如何從數(shù)據(jù)庫(kù)中提取數(shù)據(jù)，然后將查詢結(jié)果顯示在數(shù)據(jù)表格中。要求為數(shù)據(jù)表格設(shè)置樣式17數(shù)據(jù)表格使用示例2練習(xí)如何從數(shù)據(jù)庫(kù)中提取數(shù)據(jù)，然后將查詢結(jié)果樣式表.customers{border:thinsolidblack;}.customersHeader{text-align:center;font-style:italic;color:Snow;background:Teal;}.evenColumn{height:25px;text-align:center;background:MediumTurquoise;}.oddColumn{text-align:center;background:PowderBlue;}styleClass.css18樣式表.customers{styleClass.css1受管理Bean該后臺(tái)Bean負(fù)責(zé)同數(shù)據(jù)庫(kù)建立連接，并查詢數(shù)據(jù)publicclassCustomerBean{StringsDBDriver="com.microsoft.jdbc.sqlserver.SQLServerDriver";StringsConnStr="jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=northwind";Connectionconnect=null;publicCustomerBean(){try{

Class.forName(sDBDriver);}catch(java.lang.ClassNotFoundExceptione){System.err.println(e.getMessage());}try{

connect=DriverManager.getConnection(sConnStr,"sa","");}catch(SQLExceptionex){System.err.println(ex.getMessage());}}CustomerBean.javapublicsynchronizedResultSetexecuteQuery(Stringsql){ResultSetrs=null;if(connect!=null){try{Statementstmt=connect.createStatement();rs=stmt.executeQuery(sql);}catch(SQLExceptionex){System.err.println(ex.getMessage());}}returnrs;}publicsynchronizedintexecuteUpdate(Stringsql){intrs=-1;if(connect!=null){try{Statementstmt=connect.createStatement();rs=stmt.executeUpdate(sql);}catch(SQLExceptionex){System.err.println(ex.getMessage());}}returnrs;}publicResultgetAll()throwsSQLException{try{CustomerBeanjc=newCustomerBean();Stringsql="select*fromCustomers";ResultSetrs=jc.executeQuery(sql);returnResultSupport.toResult(rs);}finally{closeConnection();}}

publicvoidcloseConnection(){if(connect!=null){try{connect.close();}catch(SQLExceptionex){System.err.println(ex.getMessage());}}}19受管理Bean該后臺(tái)Bean負(fù)責(zé)同數(shù)據(jù)庫(kù)建立連接，并查詢數(shù)據(jù)視圖頁(yè)<html><head><linkhref="CSS/styles.css"rel="stylesheet"type="text/css"/><title>DisplayingDatabaseTables</title></head><body><f:view><h:form><h:dataTablevalue="#{customer.all}"var="customer"

styleClass="customers"headerClass="customersHeader"

columnClasses="evenColumn,oddColumn"><h:column><f:facetname="header"><h:outputTextvalue="CustomerID"/></f:facet><h:outputTextvalue="#{customer.CustomerID}"/></h:column><h:column><f:facetname="header"><h:outputTextvalue="Name"/></f:facet><h:outputTextvalue="#{customer.ContactName}"/></h:column>……</h:dataTable></h:form></f:view></body></html>index.jsp演示：示例420視圖頁(yè)<html><head>index.jsp演示：示例4總結(jié)2-1JSF提供兩種標(biāo)簽庫(kù)，即HTML標(biāo)簽庫(kù)和核心標(biāo)簽庫(kù)必須使用<taglib>指令可將JSF標(biāo)簽庫(kù)導(dǎo)入應(yīng)用程序中，才能在JSP頁(yè)面中使用這兩種標(biāo)簽庫(kù)JSF核心標(biāo)簽庫(kù)中共有18個(gè)標(biāo)簽。多數(shù)核心標(biāo)簽表示添加到組件的對(duì)象，包括屬性、監(jiān)聽器、轉(zhuǎn)換器、驗(yàn)證器等JSF標(biāo)準(zhǔn)HTML標(biāo)簽庫(kù)中的標(biāo)簽表示了HTML表單控件和其他基本HTML元素21總結(jié)2-1JSF提供兩種標(biāo)簽庫(kù)，即HTML標(biāo)簽庫(kù)和核總結(jié)2-2JSF標(biāo)準(zhǔn)HTML標(biāo)簽庫(kù)可以分為下列類：表單、輸入、輸出、命令、選擇、布局、數(shù)據(jù)表格、消息除了h:selectBooleanCheckbox以外，所有選擇標(biāo)簽都使用多個(gè)f:selectItem標(biāo)簽或一個(gè)f:selectItems標(biāo)簽來(lái)指定它們的項(xiàng)目h:dataTable標(biāo)簽支持將數(shù)據(jù)綁定到數(shù)據(jù)對(duì)象集合數(shù)據(jù)表格中可以放置任何JSF組件22總結(jié)2-2JSF標(biāo)準(zhǔn)HTML標(biāo)簽庫(kù)可以分為下列類：表第八章JSF標(biāo)簽第八章JSF標(biāo)簽回顧導(dǎo)航規(guī)則定義了如何在應(yīng)用程序中從特定頁(yè)面導(dǎo)航至另一個(gè)頁(yè)面靜態(tài)導(dǎo)航是單一的結(jié)果映射。在靜態(tài)導(dǎo)航中，單擊指定按鈕總是選擇固定的頁(yè)面來(lái)呈現(xiàn)響應(yīng)navigation-rule元素最重要的兩個(gè)子元素是from-view-id和navigation-case。navigation-case元素最重要的兩個(gè)子元素是from-outcome和to-view-id動(dòng)態(tài)導(dǎo)航是多個(gè)結(jié)果映射要實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)航，按鈕或鏈接必須有一個(gè)方法引用，以用于調(diào)用相應(yīng)的方法，導(dǎo)航處理器根據(jù)方法返回的字符串來(lái)匹配導(dǎo)航規(guī)則24回顧導(dǎo)航規(guī)則定義了如何在應(yīng)用程序中從特定頁(yè)面導(dǎo)航至另一個(gè)頁(yè)面目標(biāo)熟悉HTML標(biāo)簽庫(kù)熟悉核心標(biāo)簽庫(kù)在應(yīng)用程序中使用標(biāo)簽庫(kù)熟練使用數(shù)據(jù)表格標(biāo)簽25目標(biāo)熟悉HTML標(biāo)簽庫(kù)3JSF標(biāo)簽庫(kù)Taglib指令JSF核心標(biāo)簽庫(kù)JSFHTML標(biāo)簽庫(kù)<%@tagliburi="/jsf/core"prefix="f"%><%@tagliburi="/jsf/html"prefix="h"%>使用JSF標(biāo)簽<%@tagliburi="/jsf/core"

prefix="f"%><%@tagliburi="/jsf/html"prefix="h"%><f:view><h:form>...</h:form></f:view>26JSF標(biāo)簽庫(kù)Taglib指令JSF核心標(biāo)簽庫(kù)JSFHJSF核心標(biāo)簽標(biāo)簽說(shuō)明view創(chuàng)建頂層視圖subview創(chuàng)建視圖的子視圖facet向組件添加facetparam向組件添加參數(shù)attribute向組件添加屬性actionListener在父組件上注冊(cè)操作監(jiān)聽器valueChangeListener向父組件注冊(cè)值變更監(jiān)聽器converter注冊(cè)任意轉(zhuǎn)換器convertDateTime注冊(cè)日期時(shí)間轉(zhuǎn)換器convertNumber注冊(cè)數(shù)量轉(zhuǎn)換器標(biāo)簽說(shuō)明validateLength驗(yàn)證組件值的長(zhǎng)度validateDoubleRange驗(yàn)證組件值的雙精度范圍validateLongRange驗(yàn)證組件值的長(zhǎng)整型范圍validator向組件添加驗(yàn)證器loadBundle加載資源包verbatim向頁(yè)面中添加標(biāo)簽selectItem指定UISelectOne或UISelectMany組件的一個(gè)項(xiàng)目selectItems指定UISelectOne或UISelectMany組件的多個(gè)項(xiàng)目27JSF核心標(biāo)簽標(biāo)簽說(shuō)明view創(chuàng)建頂層視圖subview創(chuàng)標(biāo)準(zhǔn)的轉(zhuǎn)換器和驗(yàn)證器編寫一個(gè)填寫付款信息的頁(yè)面，付款信息包括付款金額、信用卡號(hào)、信用卡有效期，要求對(duì)輸入的數(shù)據(jù)進(jìn)行特定的轉(zhuǎn)換和驗(yàn)證8899123456789876512/200528標(biāo)準(zhǔn)的轉(zhuǎn)換器和驗(yàn)證器編寫一個(gè)填寫付款信息的頁(yè)面，付款信息包括示例代碼importjava.util.Date;publicclassPaymentBean{privatedoubleamount;privateStringcard="";

privateDatedate=newDate();publicvoidsetAmount(doublenewValue){amount=newValue;}publicdoublegetAmount(){returnamount;}publicvoidsetCard(StringnewValue){card=newValue;}publicStringgetCard(){returncard;}

publicvoidsetDate(DatenewValue){date=newValue;}publicDategetDate(){returndate;}}受管理的Bean<f:view><h:form><h1><h:outputTextvalue="請(qǐng)輸入付款信息："/></h1><h:panelGridcolumns="3"><h:outputTextvalue="金額："/><h:inputTextid="amount"value="#{payment.amount}">

<f:convertNumberminFractionDigits="2"/><f:validateDoubleRangeminimum="10"maximum="10000"/></h:inputText>

<h:messagefor="amount"style="color:red"/><h:outputTextvalue="信用卡號(hào)："/><h:inputTextid="card"value="#{payment.card}">

<f:validateLengthminimum="13"/></h:inputText>

<h:messagefor="card"style="color:red"/><h:outputTextvalue="信用卡有效期（月/年）："/><h:inputTextid="date"value="#{payment.date}">

<f:convertDateTimepattern="MM/yyyy"/></h:inputText>

<h:messagefor="date"style="color:red"/></h:panelGrid><h:commandButtonvalue="處理"action="process"/></h:form></f:view>index.jsp<f:view><h:form><h1><h:outputTextvalue="付款信息"/></h1><h:panelGridcolumns="2"><h:outputTextvalue="金額："/><h:outputTextvalue="#{payment.amount}">

<f:convertNumbertype="currency"/></h:outputText><h:outputTextvalue="信用卡號(hào)："/><h:outputTextvalue="#{payment.card}"/><h:outputTextvalue="信用卡有效日期:"/><h:outputTextvalue="#{payment.date}"><f:convertDateTimepattern="MM/yyyy"/></h:outputText></h:panelGrid><h:commandButtonvalue="返回"action="back"/></h:form></f:view>result.jsp演示：示例129示例代碼importjava.util.Date;受管理的JSFHTML標(biāo)簽組件標(biāo)簽說(shuō)明UIFormform表示

HTML表單元素UIInputInputText單行文本輸入控件inputTextarea多行文本輸入控件InputSecret密碼輸入控件inputHidden隱藏字段UIOutputoutputLabel顯示文本outputLink鏈接到另一頁(yè)面或某頁(yè)面上的特定位置outputFormat顯示格式化的信息outputText當(dāng)行文本輸入U(xiǎn)ICommandcommandButton表示一個(gè)按鈕commandLink表示一個(gè)鏈接組件標(biāo)簽說(shuō)明UISelectOneSelectOneListbox單選列表框selectOneMenu單選菜單selectOneRadio單選按鈕集UISelectBooleanselectBooleanCheckbox單個(gè)復(fù)選框UISelectManyselectManyListbox復(fù)選框集selectManyCheckbox多行選擇列表框selectManyMenu多選菜單UIPanelpanelGrid表示一個(gè)

HTML表格panelGroup組合一系列組件UIMessagemessage顯示一個(gè)組件的最近使用的消息UIMessagesmessages顯示所有消息UIGraphicgraphicImage顯示一個(gè)圖像UIDatadataTable功能豐富的表格控件UIColumncolumn表示表格中的列30JSFHTML標(biāo)簽組件標(biāo)簽說(shuō)明UIFormform表示表單31表單9文本輸入h:inputTexth:inputSecreth:inputTextarea<h:inputTextvalue="測(cè)試字符串"readonly="true"/><h:inputSecretvalue="#{form.passwd}"redisplay="true"/><h:inputTextareavalue="123456789012345"rows="3"cols="10"/><h:inputTextvalue="inputText"style="color:Yellow;background:Teal;"/>32文本輸入h:inputText<h:inputTextva命令h:commandButtonh:commandLinkh:outputLink<h:commandButtonvalue="按鈕"onclick="alert('buttonclicked')"

type="button"/><h:outputLinkvalue=""><h:graphicImagevalue="java-dot-net.jpg"/><h:outputTextvalue=""/></h:outputLink><h:commandLinkvalue="歡迎"

actionListener="#{form.useLinkValue}"action="#{form.followLink}"/>33命令h:commandButton<h:commandBut選擇h:selectBooleanCheckboxh:selectManyCheckboxh:selectOneRadioh:selectOneListboxh:selectManyListboxh:selectOneMenuh:selectManyMenu34選擇h:selectBooleanCheckbox12選擇標(biāo)簽使用示例聯(lián)系我<h:selectBooleanCheckboxvalue="#{form.contactMe}"/>privatebooleancontactMe;publicvoidsetContactMe(booleannewValue){contactMe=newValue;}publicbooleangetContactMe(){returncontactMe;}<h:selectManyCheckboxvalue="#{form.colors}"><f:selectItem

itemValue="Red"itemLabel="紅色"/><f:selectItemitemValue="Blue"itemLabel="藍(lán)色"/><f:selectItemitemValue="Yellow"itemLabel="黃色"/><f:selectItemitemValue="Green"itemLabel="綠色"/><f:selectItemitemValue="Orange"itemLabel="橘黃"/></h:selectManyCheckbox><h:selectOneRadiovalue="#{form.grade}"layout="pageDirection"><f:selectItemsvalue="#{form.grades}"/></h:selectOneRadio>privateSelectItem[]grades={newSelectItem(newInteger(1),"高中"),newSelectItem(newInteger(2),"?？?),newSelectItem(newInteger(3),"本科"),newSelectItem(newInteger(4),"碩士"),newSelectItem(newInteger(5),"博士")};publicSelectItem[]getGrades(){returngrades;}<h:selectOneListboxid="onelistbox"value="#{form.expert}"><f:selectItemitemValue="java"itemLabel="Java"/><f:selectItemitemValue="oracle"itemLabel="Oracle"/><f:selectItemitemValue="asp"itemLabel="ASP"/><f:selectItemitemValue="jsp"itemLabel="JSP"/></h:selectOneListbox><h:selectOneMenuid="onemenu"value="#{form.expert}"><f:selectItemitemValue="java"itemLabel="Java"/><f:selectItemitemValue="oracle"itemLabel="Oracle"/><f:selectItemitemValue="asp"itemLabel="ASP"/><f:selectItemitemValue="jsp"itemLabel="JSP"/></h:selectOneMenu>演示：示例235選擇標(biāo)簽使用示例聯(lián)系我privatebooleancon數(shù)據(jù)表格標(biāo)簽UIData組件表示h:dataTable標(biāo)簽，它支持將數(shù)據(jù)綁定到數(shù)據(jù)對(duì)象集合，遍歷數(shù)據(jù)源中的每個(gè)記錄表內(nèi)的數(shù)據(jù)列由UIColumn組件表示，即h:column標(biāo)簽屬性說(shuō)明bgcolor

設(shè)置表格背景色border設(shè)置表格邊框?qū)挾萩ellpadding設(shè)置表格單元格周圍的邊距cellspacing設(shè)置表格單元格之間的間距first表格中所顯示的第一行的索引frame指定表格四周的邊框樣式；有效值：none、above、below、hsides、vsides、lhs、rhs、box、borderstyleClass指定整個(gè)表格的CSS類rowClasses行的CSS類列表，用逗號(hào)分隔列表columnClasses列的CSS類列表，用逗號(hào)分隔列表headerClass

表格標(biāo)題的CSS類footerClass用于表格頁(yè)腳的CSS類rules單元格之間的行樣式；有效值：groups、rows、columns、allvar數(shù)據(jù)表格所創(chuàng)建的變量名稱，表示該值中的當(dāng)前項(xiàng)目36數(shù)據(jù)表格標(biāo)簽UIData組件表示h:dataTable數(shù)據(jù)表格使用示例1在網(wǎng)頁(yè)中輸出一個(gè)簡(jiǎn)單的表格，顯示一個(gè)職員的姓名和職位37數(shù)據(jù)表格使用示例1在網(wǎng)頁(yè)中輸出一個(gè)簡(jiǎn)單的表格，顯示一個(gè)職員的publicclassEmployeeList{privateStringname;privateStringposition;publicEmployeeList(Stringname,Stringposition){=name;this.position=position;}publicvoidsetName(Stringname){=name;}publicvoidsetPosition(Stringposition){this.position=position;}publicStringgetName(){returnname;}publicStringgetPosition(){returnposition;}}EmployList.java示例代碼publicclassData{

privatestaticfinalEmployeeList[]employeelist=newEmployeeList[]{newEmployeeList("高俠","軟件工程師"),newEmployeeList("張小麗","培訓(xùn)師"),newEmployeeList("劉亞平","項(xiàng)目經(jīng)理"),newEmployeeList("牛遠(yuǎn)","軟件工程師")};

publicEmployeeList[]getEmployeelist(){returnemployeelist;}}受管理BeanData……<f:view><h:form><h:dataTable

bgcolor="lightblue"

value="#{Employeedata.employeelist}"var="employees"

border="5"cellpadding="5"cellspacing="2"><h:column><f:facetname="header"><h:outputTextid="headerText1"value="姓名"/></f:facet><h:outputTextvalue="#{}"/>

</h:column><h:column><f:facetname="header"><h:outputTextid="headerText2"value="職位"/>

</f:facet><h:outputTextvalue="#{employees.position}"/>

</h:column></h:dataTable></h:form></f:view>index.jsp演示：示例338publicclassEmployeeList{Emp數(shù)據(jù)表格使用示例2練習(xí)如何從數(shù)據(jù)庫(kù)中提取數(shù)據(jù)，然后將查詢結(jié)果顯示在數(shù)據(jù)表格中。要求為數(shù)據(jù)表格設(shè)置樣式39數(shù)據(jù)表格使用示例2練習(xí)如何從數(shù)據(jù)庫(kù)中提取數(shù)據(jù)，然后將查詢結(jié)果樣式表.customers{border:thinsolidblack;}.customersHeader{text-align:center;font-style:italic;color:Snow;background:Teal;}.evenColumn{height:25px;text-align:center;background:MediumTurquoise;}.oddColumn{text-align:center;background:PowderBlue;}styleClass.css40樣式表.customers{styleClass.css1受管理Bean該后臺(tái)Bean負(fù)責(zé)同數(shù)據(jù)庫(kù)建立連接，并查詢數(shù)據(jù)publicclassCustomerBean{StringsDBDriver="com.microsoft.jdbc.sqlserver.SQLServerDriver";StringsConnStr="jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=northwind";Connectionconnect=null;publicCustomerBean(){try{

Class.forName(sDBDriver);}catch(java.lang.ClassNotFoundExceptione){System.err.println(e.getMessage());}try{

connect=DriverManager.getConnection(sConnStr,"sa","");}catch(SQLExceptionex){System.err.println(ex.getMessage());}}CustomerBean.javapublicsynchronizedResultSetexecuteQuery(Stringsql){ResultSetrs=null;if(connect!=null){