核心標簽庫課件

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

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

HTML表單元素UIInputInputText單行文本輸入控件inputTextarea多行文本輸入控件InputSecret密碼輸入控件inputHidden隱藏字段UIOutputoutputLabel顯示文本outputLink鏈接到另一頁面或某頁面上的特定位置outputFormat顯示格式化的信息outputText當行文本輸入UICommandcommandButton表示一個按鈕commandLink表示一個鏈接組件標簽說明UISelectOneSelectOneListbox單選列表框selectOneMenu單選菜單selectOneRadio單選按鈕集UISelectBooleanselectBooleanCheckbox單個復選框UISelectManyselectManyListbox復選框集selectManyCheckbox多行選擇列表框selectManyMenu多選菜單UIPanelpanelGrid表示一個

HTML表格panelGroup組合一系列組件UIMessagemessage顯示一個組件的最近使用的消息UIMessagesmessages顯示所有消息UIGraphicgraphicImage顯示一個圖像UIDatadataTable功能豐富的表格控件UIColumncolumn表示表格中的列8JSFHTML標簽組件標簽說明UIFormform表示表單9表單9文本輸入h:inputTexth:inputSecreth:inputTextarea<h:inputTextvalue="測試字符串"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選擇標簽使用示例聯(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="藍色"/><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選擇標簽使用示例聯(lián)系我privatebooleancon數(shù)據(jù)表格標簽UIData組件表示h:dataTable標簽，它支持將數(shù)據(jù)綁定到數(shù)據(jù)對象集合，遍歷數(shù)據(jù)源中的每個記錄表內(nèi)的數(shù)據(jù)列由UIColumn組件表示，即h:column標簽屬性說明bgcolor

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

表格標題的CSS類footerClass用于表格頁腳的CSS類rules單元格之間的行樣式；有效值：groups、rows、columns、allvar數(shù)據(jù)表格所創(chuàng)建的變量名稱，表示該值中的當前項目14數(shù)據(jù)表格標簽UIData組件表示h:dataTable數(shù)據(jù)表格使用示例1在網(wǎng)頁中輸出一個簡單的表格，顯示一個職員的姓名和職位15數(shù)據(jù)表格使用示例1在網(wǎng)頁中輸出一個簡單的表格，顯示一個職員的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("張小麗","培訓師"),newEmployeeList("劉亞平","項目經(jīng)理"),newEmployeeList("牛遠","軟件工程師")};

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練習如何從數(shù)據(jù)庫中提取數(shù)據(jù)，然后將查詢結果顯示在數(shù)據(jù)表格中。要求為數(shù)據(jù)表格設置樣式17數(shù)據(jù)表格使用示例2練習如何從數(shù)據(jù)庫中提取數(shù)據(jù)，然后將查詢結果樣式表.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該后臺Bean負責同數(shù)據(jù)庫建立連接，并查詢數(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該后臺Bean負責同數(shù)據(jù)庫建立連接，并查詢數(shù)據(jù)視圖頁<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視圖頁<html><head>index.jsp演示：示例4總結2-1JSF提供兩種標簽庫，即HTML標簽庫和核心標簽庫必須使用<taglib>指令可將JSF標簽庫導入應用程序中，才能在JSP頁面中使用這兩種標簽庫JSF核心標簽庫中共有18個標簽。多數(shù)核心標簽表示添加到組件的對象，包括屬性、監(jiān)聽器、轉換器、驗證器等JSF標準HTML標簽庫中的標簽表示了HTML表單控件和其他基本HTML元素21總結2-1JSF提供兩種標簽庫，即HTML標簽庫和核總結2-2JSF標準HTML標簽庫可以分為下列類：表單、輸入、輸出、命令、選擇、布局、數(shù)據(jù)表格、消息除了h:selectBooleanCheckbox以外，所有選擇標簽都使用多個f:selectItem標簽或一個f:selectItems標簽來指定它們的項目h:dataTable標簽支持將數(shù)據(jù)綁定到數(shù)據(jù)對象集合數(shù)據(jù)表格中可以放置任何JSF組件22總結2-2JSF標準HTML標簽庫可以分為下列類：表第八章JSF標簽第八章JSF標簽回顧導航規(guī)則定義了如何在應用程序中從特定頁面導航至另一個頁面靜態(tài)導航是單一的結果映射。在靜態(tài)導航中，單擊指定按鈕總是選擇固定的頁面來呈現(xiàn)響應navigation-rule元素最重要的兩個子元素是from-view-id和navigation-case。navigation-case元素最重要的兩個子元素是from-outcome和to-view-id動態(tài)導航是多個結果映射要實現(xiàn)動態(tài)導航，按鈕或鏈接必須有一個方法引用，以用于調(diào)用相應的方法，導航處理器根據(jù)方法返回的字符串來匹配導航規(guī)則24回顧導航規(guī)則定義了如何在應用程序中從特定頁面導航至另一個頁面目標熟悉HTML標簽庫熟悉核心標簽庫在應用程序中使用標簽庫熟練使用數(shù)據(jù)表格標簽25目標熟悉HTML標簽庫3JSF標簽庫Taglib指令JSF核心標簽庫JSFHTML標簽庫<%@tagliburi="/jsf/core"prefix="f"%><%@tagliburi="/jsf/html"prefix="h"%>使用JSF標簽<%@tagliburi="/jsf/core"

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

HTML表單元素UIInputInputText單行文本輸入控件inputTextarea多行文本輸入控件InputSecret密碼輸入控件inputHidden隱藏字段UIOutputoutputLabel顯示文本outputLink鏈接到另一頁面或某頁面上的特定位置outputFormat顯示格式化的信息outputText當行文本輸入UICommandcommandButton表示一個按鈕commandLink表示一個鏈接組件標簽說明UISelectOneSelectOneListbox單選列表框selectOneMenu單選菜單selectOneRadio單選按鈕集UISelectBooleanselectBooleanCheckbox單個復選框UISelectManyselectManyListbox復選框集selectManyCheckbox多行選擇列表框selectManyMenu多選菜單UIPanelpanelGrid表示一個

HTML表格panelGroup組合一系列組件UIMessagemessage顯示一個組件的最近使用的消息UIMessagesmessages顯示所有消息UIGraphicgraphicImage顯示一個圖像UIDatadataTable功能豐富的表格控件UIColumncolumn表示表格中的列30JSFHTML標簽組件標簽說明UIFormform表示表單31表單9文本輸入h:inputTexth:inputSecreth:inputTextarea<h:inputTextvalue="測試字符串"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選擇標簽使用示例聯(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="藍色"/><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選擇標簽使用示例聯(lián)系我privatebooleancon數(shù)據(jù)表格標簽UIData組件表示h:dataTable標簽，它支持將數(shù)據(jù)綁定到數(shù)據(jù)對象集合，遍歷數(shù)據(jù)源中的每個記錄表內(nèi)的數(shù)據(jù)列由UIColumn組件表示，即h:column標簽屬性說明bgcolor

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

表格標題的CSS類footerClass用于表格頁腳的CSS類rules單元格之間的行樣式；有效值：groups、rows、columns、allvar數(shù)據(jù)表格所創(chuàng)建的變量名稱，表示該值中的當前項目36數(shù)據(jù)表格標簽UIData組件表示h:dataTable數(shù)據(jù)表格使用示例1在網(wǎng)頁中輸出一個簡單的表格，顯示一個職員的姓名和職位37數(shù)據(jù)表格使用示例1在網(wǎng)頁中輸出一個簡單的表格，顯示一個職員的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("張小麗","培訓師"),newEmployeeList("劉亞平","項目經(jīng)理"),newEmployeeList("牛遠","軟件工程師")};

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練習如何從數(shù)據(jù)庫中提取數(shù)據(jù)，然后將查詢結果顯示在數(shù)據(jù)表格中。要求為數(shù)據(jù)表格設置樣式39數(shù)據(jù)表格使用示例2練習如何從數(shù)據(jù)庫中提取數(shù)據(jù)，然后將查詢結果樣式表.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該后臺Bean負責同數(shù)據(jù)庫建立連接，并查詢數(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){