javascript
web.xml.jsf_使用JSF 2.2功能来开发可滚动,可延迟加载的Ajax数据表
web.xml.jsf
這次,我想與您分享我最近從JSF 2.2功能中學(xué)到的知識(shí)。 為此,我決定創(chuàng)建一個(gè)簡(jiǎn)單的ajax,可滾動(dòng),延遲加載的數(shù)據(jù)表。
請(qǐng)注意, 絕不這是相當(dāng)大的庫(kù)如Primefaces , RichFaces的或ICEFaces的 。 這只是為了告訴您我學(xué)到了什么。 (當(dāng)然,如果您愿意,沒(méi)有人可以阻止您使用它)。
這個(gè)概念
請(qǐng)?jiān)试S我先告訴您這個(gè)概念,或者如果您愿意的話,請(qǐng)告訴您這種情況。 實(shí)際上非常簡(jiǎn)單。
我們有一個(gè)Customer實(shí)體列表,基本上,我們將實(shí)現(xiàn)一個(gè)數(shù)據(jù)表,該表是可滾動(dòng)的,可以延遲加載列表并使用ajax。
注意:我假設(shè)您對(duì)JPA和EJB感到滿意,因此盡管我可能在這里和那里提到它們,但在本文中不再討論。
使用模板
就像任何JSF應(yīng)用程序一樣,我也從使用模板開始。 將模板與Netbeans一起使用非常容易。 只需選擇選項(xiàng)Facelets模板,然后選擇您的布局即可。
注意,Netbeans還會(huì)生成兩個(gè)樣式表cssLayout.css和default.css 。 還要注意,在新生成的模板中,它們是使用文件位置定位的,如下所示:
<h:head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link href="./../resources/css/default.css" rel="stylesheet" type="text/css" /><link href="./../resources/css/cssLayout.css" rel="stylesheet" type="text/css" /><title>Facelets Template</title> </h:head>我對(duì)默認(rèn)模板做了很多修改。
首先,啟動(dòng)應(yīng)用程序服務(wù)器時(shí)遇到一個(gè)問(wèn)題,即樣式表未正確加載。 因此,為了解決此問(wèn)題,我使用了JSF Resource Locator (Lubke 2008)。
我還創(chuàng)建了每個(gè)子頁(yè)面,即頁(yè)眉,菜單和頁(yè)腳。 如果未指定,則它們充當(dāng)默認(rèn)值 。
因此,我的頁(yè)面集合如下:
template.xhtml
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://java.sun.com/jsf/facelets"xmlns:h="http://java.sun.com/jsf/html"><h:head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><h:outputStylesheet library="css" name="default.css" /><h:outputStylesheet library="css" name="cssLayout.css" /><title>Facelets Template</title></h:head><h:body><div id="top"><ui:insert name="header"><ui:include src="header.xhtml" /></ui:insert></div><div><div id="left"><ui:insert name="menu"><ui:include src="menu.xhtml" /></ui:insert></div><div id="content" class="left_content"><ui:insert name="content"><!-- empty content goes here --></ui:insert></div></div><div id="bottom"><ui:insert name="bottom"> <ui:include src="footer.xhtml" /></ui:insert></div></h:body> </html>注意,不是使用文件定位器./../resources/css/default.css ,而是使用h:outputStylesheet 。 使用這種方法,只需將所有資源放在resources目錄中,然后通過(guò)屬性library指向包含您的資源的文件夾來(lái)指向它。 因此,例如<h:outputStylesheet library="css" name="default.css" />確實(shí)是在resources/css/default.css位置查看文件。
header.xhtml,footer.xhtml,menu.xhtml
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"><body><ui:composition><!--I created each file for header, footer and menu, but I simply listthem here just to show you--><h1>Default Header</h1><!-- h1>Default Menu</h1 --><!-- h1>Default Footer</h1 --></ui:composition> </body> </html>接下來(lái),使用模板。 因此,我們創(chuàng)建一個(gè)名為customers.xhtml的文件來(lái)使用它。
customer.xhtml
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://java.sun.com/jsf/facelets"xmlns:h="http://java.sun.com/jsf/html"><body><ui:composition template="./common/template.xhtml"><ui:define name="content"><h:outputText value="List of customers goes here!!!" /></ui:define></ui:composition></body> </html>然后,您可以運(yùn)行應(yīng)用程序服務(wù)器并通過(guò)http://<the path to your application>/customers.jsf訪問(wèn)該頁(yè)面。 輸出應(yīng)如下圖所示。
添加設(shè)施以創(chuàng)建客戶
首先,在模板中,讓我們添加一個(gè)工具以在customers.xhtml中添加customers.xhtml 。 我們可以簡(jiǎn)單地使用JSF ManagedBean來(lái)做到這一點(diǎn)。 但是,Core Javaserver Faces第3建議:
對(duì)于可以在JSF頁(yè)面中使用的bean,有兩種單獨(dú)的機(jī)制(CDI bean和JSF受管bean)是歷史上的意外。 我們建議您使用CDI bean,除非您的應(yīng)用程序必須在諸如Tomcat之類的普通servlet運(yùn)行程序上運(yùn)行。
(Geary,Horstmann,2010年)
按照建議,從現(xiàn)在開始,我將使用CDI bean。
在實(shí)際的應(yīng)用程序中,我確信還有很多數(shù)據(jù)要捕獲。 但是,在此示例中,讓我們僅捕獲客戶的姓名。
基本上,我們需要一個(gè)Model和一個(gè)Controller 。 因此,讓我們首先創(chuàng)建這些類。
CustomerData.java
package id.co.dwuysan.customer;import javax.enterprise.inject.Model; import javax.validation.constraints.NotNull; import javax.validation.constraints.Size;@Model public class CustomerData {@NotNull@Size(min = 1, max = 50)private String name;public String getName() {return name;}public void setName(String name) {this.name = name;}void clear() {setName(null);} }CustomerData.java
package id.co.dwuysan.customer;import id.co.dwuysan.service.CustomerService; import javax.ejb.EJBException; import javax.faces.application.FacesMessage; import javax.faces.context.FacesContext; import javax.faces.event.AbortProcessingException; import javax.faces.event.ActionEvent; import javax.inject.Inject; import javax.inject.Named; import javax.validation.ConstraintViolation; import javax.validation.ConstraintViolationException;@Named public class CustomerRegistationAction {@Injectprivate CustomerData customer;@Injectprivate CustomerService customerService;public void register(ActionEvent event) {try {// calls EJB and do registration here} catch (EJBException e) {FacesContext.getCurrentInstance().addMessage(event.getComponent().getClientId(), new FacesMessage(e.getMessage()));throw new AbortProcessingException(e.getMessage());}this.customer.clear();} }注意,在這種情況下,我們使用@Named注釋。 由于我們沒(méi)有給它任何范圍注釋,因此默認(rèn)為@RequestScoped (BalusC 2011a)。
下一步是修改我們的customers.xhtml以使用這些類,以便我們可以注冊(cè)客戶。
customer.xhtml
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://java.sun.com/jsf/facelets"xmlns:f="http://java.sun.com/jsf/core"xmlns:h="http://java.sun.com/jsf/html"xmlns:ez="http://java.sun.com/jsf/composite/ezcomp"><body><ui:composition template="./common/template.xhtml"><ui:define name="content"><f:view transient="true"><h:form><h:panelGrid columns="3"><h:outputLabel for="txtCustomerName" value="Customer name" /><h:inputText id="txtCustomerName" value="#{customerData.name}" /><h:message for="txtCustomerName" styleClass="error" /><div /><h:commandButton id="cmdRegisterCustomer" value="Submit" action="customers" actionListener="#{customerRegistationAction.register}" /><h:message for="cmdRegisterCustomer" styleClass="error" /></h:panelGrid></h:form></f:view></ui:define></ui:composition></body> </html>好的,一旦完成,您就可以注冊(cè)客戶。 屏幕應(yīng)如下所示。
定義“合同”
這部分是真正的交易。 我所說(shuō)的“合同”不是真正的合同本身。 相反,我指的是我們首先設(shè)計(jì)Facelet xhtml的方式,這將驅(qū)動(dòng)實(shí)際的后備bean類。
因此,讓我們首先概述一下需求:
- 記錄應(yīng)在表中分頁(yè),并從數(shù)據(jù)庫(kù)中延遲加載
- 用戶應(yīng)該能夠選擇一個(gè)頁(yè)面中顯示多少條記錄
- 用戶應(yīng)該能夠看到當(dāng)前頁(yè)面是什么,頁(yè)面總數(shù)和記錄
- 用戶應(yīng)該能夠滾動(dòng)瀏覽下一個(gè)和上一個(gè)記錄
- 使用AJAX
在一個(gè)應(yīng)用程序中,必然會(huì)有很多清單。 因此,向前邁進(jìn)的最好方法是創(chuàng)建一個(gè)易于重用的組件。 由于組件本身由許多其他組件組成,因此我相信此功能正式稱為復(fù)合組件 。 在JSF 1.x時(shí)代,這非常痛苦。 開發(fā)人員需要編寫許多類/文件。 使用JSF 2.x,這非常容易(我必須說(shuō),這非常優(yōu)雅)。
讓我們從創(chuàng)建組件開始。
創(chuàng)建復(fù)合組件
我將這個(gè)組件命名為paginator 。
我相信您會(huì)找到很多關(guān)于如何執(zhí)行此操作的解釋,因此,我將跳過(guò)“說(shuō)明”部分,僅向您展示我的操作。
我在resources/ezcomp目錄下創(chuàng)建了一個(gè)文件paginator.xhtml 。 因此,稍后我將使用命名空間xmlns:ez="http://java.sun.com/jsf/composite/ezcomp來(lái)引用此組件。
讓我們繼續(xù)進(jìn)行paginator.xhtml的實(shí)際實(shí)現(xiàn)。 請(qǐng)參考以下資源,然后我將逐步指導(dǎo)您。
paginator.xhtml
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"xmlns:cc="http://java.sun.com/jsf/composite"xmlns:h="http://java.sun.com/jsf/html"xmlns:f="http://java.sun.com/jsf/core"><!-- INTERFACE --><cc:interface><cc:attribute name="paginateModel" /> <!-- 01 --></cc:interface><!-- IMPLEMENTATION --><cc:implementation><!-- 02 --><h:inputHidden value="#{cc.attrs.paginateModel.sortField}" /><h:inputHidden value="#{cc.attrs.paginateModel.ascending}" /><h:inputHidden value="#{cc.attrs.paginateModel.page}" /><!-- 03 --><h:panelGrid columns="2" cellpadding="5" cellspacing="5"><h:outputLabel value="Rows-per-page" /><h:selectOneRadio value="#{cc.attrs.paginateModel.rowsPerPage}"><f:selectItem itemValue="5" itemLabel="5" /><f:selectItem itemValue="10" itemLabel="10" /><f:selectItem itemValue="20" itemLabel="20" /><f:selectItem itemValue="100" itemLabel="100" /><f:ajax execute="@form" render="@form" listener="#{cc.attrs.paginateModel.updateRowsPerPage}" /></h:selectOneRadio></h:panelGrid><!-- pagination --><h:panelGrid columns="3" cellpadding="5" cellspacing="5"><!-- 04 --><h:commandLink value="<<" actionListener="#{cc.attrs.paginateModel.navigatePage(false)}" style="display: #{cc.attrs.paginateModel.page gt 1 ? 'block' : 'none'}"><f:ajax execute="@form" render="@form" /></h:commandLink><!-- 05 --><h:outputLabel value="#{cc.attrs.paginateModel.page} ? #{cc.attrs.paginateModel.totalPages} " /><!-- 06 --><h:commandLink value=">>" actionListener="#{cc.attrs.paginateModel.navigatePage(true)}" style="display: #{cc.attrs.paginateModel.page lt cc.attrs.paginateModel.totalPages ? 'block' : 'none'}"><f:ajax execute="@form" render="@form" /></h:commandLink></h:panelGrid><cc:insertChildren /><!-- 07 --><br /><!-- 08 --><h:outputFormat value="There are {0} record(s)."><f:param value="#{cc.attrs.paginateModel.recordCount}" /></h:outputFormat></cc:implementation> </html>下一節(jié)將說(shuō)明我在customers.xhtml提出的每個(gè)編號(hào)點(diǎn)。
01. cc:attribute和paginatedModel
這部分是此xhtml中的實(shí)現(xiàn)以及此組件的客戶端/用戶之間的'interface' 。 簡(jiǎn)而言之,將其視為使用此組件時(shí)必須提供的參數(shù)。
02.隱藏參數(shù)
現(xiàn)在這部分有很多解釋。
首先,我需要快一點(diǎn)告訴您我正在使用RequestScoped bean支持記錄列表。 需要注意的另一件事是,我實(shí)際上使用了<f:view transient="true"> ,這是JSF 2.2中可用的功能,因此使該頁(yè)面變?yōu)闊o(wú)狀態(tài)。 如果您在瀏覽器中開源,則狀態(tài)現(xiàn)在為:
<input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="stateless" autocomplete="off" />由于此頁(yè)面是無(wú)狀態(tài)的,因此您需要在兩次調(diào)用之間管理自己的狀態(tài)(Riem 2013)。 因此使用隱藏參數(shù)。 想象一下,假設(shè)您正在顯示100頁(yè)中的第4頁(yè),并且用戶決定導(dǎo)航到下一頁(yè),因?yàn)樗菬o(wú)狀態(tài)的,所以您需要知道當(dāng)前是哪一頁(yè),無(wú)論當(dāng)前顯示是升序還是降序以及目前的排序方式。
03.每頁(yè)行數(shù)選擇
這一部分很不言自明,只有一部分。 基本上,我們列出了供用戶選擇的選項(xiàng),以供選擇以每頁(yè)顯示多少條記錄。 當(dāng)用戶選擇時(shí),我們需要使用AJAX重新執(zhí)行查詢并更新頁(yè)面。 因此,本節(jié)的使用:
<f:ajax execute="@form" render="@form" listener="#{cc.attrs.paginateModel.updateRowsPerPage}" />本部分的內(nèi)容基本上是基于用戶選擇,執(zhí)行方法updateRowsPerPage并更新此form 。 如第02節(jié)所述, 'execute'還意味著我們正在考慮這種form所有參數(shù)。
04/06。 導(dǎo)航“后退”和“前進(jìn)”
我將在本節(jié)中一起解釋04和06部分,因?yàn)樗鼈兎浅O嗨啤?
讓我們從第04部分開始。這基本上將呈現(xiàn)一個(gè)鏈接,以允許用戶瀏覽'Back' 。 僅在當(dāng)前頁(yè)面不是第一頁(yè)的情況下,我才簡(jiǎn)單地使用display屬性來(lái)進(jìn)行條件渲染(否則,將無(wú)法返回第一頁(yè),對(duì)嗎?)。 第6部分非常相似,但條件是僅在當(dāng)前頁(yè)面不是最后一頁(yè)時(shí)才呈現(xiàn)。
我要說(shuō)明的下一部分是單擊該頁(yè)面時(shí)的actionListener 。 基本上,我們現(xiàn)在知道由于h:inputHidden (參見02節(jié)),當(dāng)前頁(yè)面是什么。 因此,使用04和06部分中的兩個(gè)命令鏈接,我們需要標(biāo)記這是哪種導(dǎo)航。 為此,我只使用布爾值。
最后,因?yàn)槲覀兿胧褂肁JAX進(jìn)行導(dǎo)航,所以我們還需要使用<f:ajax> 。 同樣,與前面的部分有關(guān)在@form上execute和render原因相同。
05當(dāng)前頁(yè)和總頁(yè)數(shù)
這部分只是呈現(xiàn)當(dāng)前頁(yè)面和可用頁(yè)面總數(shù)。 不言自明
06見第04節(jié)
見第04節(jié)
07 insertChildren
盡管我們可以重復(fù)使用分頁(yè)器,但我認(rèn)為創(chuàng)建一個(gè)將數(shù)據(jù)模型自動(dòng)呈現(xiàn)到表中的組件非常困難。 至少,頁(yè)面設(shè)計(jì)者需要確定要呈現(xiàn)的列(我確信必須有一種神奇的方式以表格方式自動(dòng)呈現(xiàn)所有內(nèi)容。也許Oracle ADF Faces會(huì)為您做到這一點(diǎn)。無(wú)論如何,我不必費(fèi)心找到它)。
使用此標(biāo)記時(shí),基本上稍后使用<ezcomp:paginator>...</ezcomp:paginator> ,介于兩者之間的內(nèi)容都將在第07部分呈現(xiàn)。請(qǐng)像<ui:decorate>那樣考慮一下。
08顯示總記錄
對(duì)于此部分,我們只顯示總記錄。 不言自明。
使用復(fù)合組件
現(xiàn)在,我們基本上需要使用此復(fù)合組件。 因此,我們需要如下修改我們的customers.xhtml :
customer.xhtml
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://java.sun.com/jsf/facelets"xmlns:f="http://java.sun.com/jsf/core"xmlns:h="http://java.sun.com/jsf/html"xmlns:ez="http://java.sun.com/jsf/composite/ezcomp"> <!-- 01 --><body><ui:composition template="./common/template.xhtml"><ui:define name="content"><f:view transient="true"><h:form id="frmCreateCustomer"><h:panelGrid columns="3"><h:outputLabel for="txtCustomerName" value="Customer name" /><h:inputText id="txtCustomerName" value="#{customerData.name}" /><h:message for="txtCustomerName" styleClass="error" /><div /><h:commandButton id="cmdRegisterCustomer" value="Submit" action="customers" actionListener="#{customerRegistationAction.register}"><f:actionListener binding="#{listCustomers.sortByDefault}" /><f:ajax execute="@form" render="@form :frmListCustomers" /> <!-- 03 --></h:commandButton><h:message for="cmdRegisterCustomer" styleClass="error" /></h:panelGrid></h:form><br /><h:form id="frmListCustomers"> <!-- 02 --><ez:paginator paginateModel="#{listCustomers}"> <!-- 04 --><h:dataTable value="#{listCustomers.data}" var="cust"> <!-- 05 --><h:column><f:facet name="header"><h:commandLink value="Name" actionListener="#{listCustomers.sort('name')}"><f:ajax execute="@form" render="@form" /> <!-- 06--></h:commandLink></f:facet><h:outputText value="#{cust.name}" /></h:column></h:dataTable></ez:paginator></h:form></f:view></ui:define></ui:composition></body> </html>同樣,我將一步一步地指導(dǎo)您:
01命名空間
如前所述,由于我們將分頁(yè)器放置在resources/ezcomp/paginator.xhtml ,因此JSF允許我們使用名稱空間http://java.sun.com/jsf/composite/ezcomp來(lái)引用它。 因此,稍后(如04所示),您可以通過(guò)使用ezcomp:paginator來(lái)使用新創(chuàng)建的ezcomp:paginator 。
02列表表格以自己的形式
讓我們跳到第二部分。第二部分顯示在此customers.xhtml ,我們使用兩種形式。 主要是因?yàn)槲乙c表進(jìn)行交互,所以您不希望它影響或受另一種形式的影響,在本例中為“創(chuàng)建客戶”部分。
讓我們說(shuō),假設(shè)我們只對(duì)整個(gè)customers.xhtml使用一種形式。 單擊按鈕進(jìn)行排序(第06部分)時(shí),可能會(huì)觸發(fā)對(duì)創(chuàng)建文本框的驗(yàn)證,例如,客戶名稱不能為空。 我們不想要那個(gè)。
由于第03節(jié)中概述的原因,我們還需要給此表單起一個(gè)名字。
03重新呈現(xiàn)其他表格
這里的意圖是每當(dāng)添加新客戶時(shí)便能夠刷新表。 注意,命名容器(相對(duì)于02節(jié))是第二個(gè)h:form 。 因此,由于“創(chuàng)建客戶”和表位于不同的命名容器中,因此讓我們只刷新整個(gè)第二個(gè)表單,這是通過(guò)使用正確的“搜索表達(dá)式”完成的。 首先使用“:”,這意味著JSF將從文檔的根目錄搜索樹(BalusC,2011b)。
04使用我們新創(chuàng)建的復(fù)合組件
這就是使用我們新創(chuàng)建的paginator組件的簡(jiǎn)單方法,即,將適當(dāng)?shù)膮?shù)傳遞給它(此后)。
另請(qǐng)參閱paginator.xhtml及其說(shuō)明。
05實(shí)際數(shù)據(jù)表
這是實(shí)際的數(shù)據(jù)表。 如前所述,盡管我們可以創(chuàng)建通用分頁(yè)器,但我認(rèn)為創(chuàng)建通用表渲染將非常困難。 因此,在這種情況下,我只想向您展示確定要渲染的列的情況。
需要注意的一件事是,我們調(diào)用listCustomers.data為數(shù)據(jù)表提供javax.faces.DataModel 。 基于頁(yè)面,大小,排序等,此“數(shù)據(jù)”應(yīng)該是正確的數(shù)據(jù)。如果您仍然不明白,請(qǐng)不要擔(dān)心。 在下一節(jié)中,它將變得更加清晰。
06排序
根據(jù)上述要求,我們需要實(shí)現(xiàn)排序。 這是不言自明的,使用f:ajax與前面提到的原因相同。
創(chuàng)建類以支持分頁(yè)
好的,我們已經(jīng)使用paginator.xhtml創(chuàng)建了“合同/需求”,然后在customers.xhtml上使用了它。 現(xiàn)在,我們需要實(shí)現(xiàn)一個(gè)支持該功能的類。
我要做的是遍歷customers.xhtml和paginator.xhtml 。 您也可以這樣做,以便您可以輕松理解以下列出的每個(gè)要點(diǎn):
- 首先,查看customers.xhtml ,該類稱為“ listCustomers”。 由于我們正在使用CDI,因此需要使用@Named將bean暴露給JSF環(huán)境。 我們可以創(chuàng)建ListCustomers.java ,或在@Named批注中填充value 。
- 過(guò)去,我將@ViewScoped用于此bean。 但是,由于我們將JSF的“無(wú)狀態(tài)”功能與f:view transient="true" ,因此我們無(wú)法再使用@ViewScoped 。 這些bean與JSF框架所管理的視圖相關(guān)。 但是,通過(guò)此無(wú)狀態(tài)功能,視圖始終會(huì)被重新創(chuàng)建,并且該范圍內(nèi)的Bean也會(huì)被重新創(chuàng)建(Busscher 2013)。 因此,最好使用的范圍是@RequestScoped 。
- 它需要具有返回javax.faces.DataModel<T> getData() 。 這應(yīng)該返回要顯示的Customer列表。
- 它需要支持public void sort(final String sortField)以支持標(biāo)頭排序。
- String getSortField() , boolean isAscending() String getSortField() , int getPage()以及它們相應(yīng)的int getPage()器/設(shè)置器的訪問(wèn)器。 這些是必需的,與我們的隱藏輸入有關(guān)。
- rowsPerPage訪問(wèn)器/ rowsPerPage器,以支持我們的每頁(yè)行數(shù)選擇。
- 它需要支持public void updateRowsPerPage(AjaxBehaviorEvent event) ,以便我們可以基于用戶的每頁(yè)行數(shù)選擇來(lái)更新列表。
- 它需要支持public void navigatePage(final boolean forward) 。
- 記錄recordCount
無(wú)論如何,您現(xiàn)在應(yīng)該可以實(shí)現(xiàn)該類。
但是,我實(shí)現(xiàn)它的方法是將其分為兩部分。 如果您考慮一下,讓我們說(shuō)以后您的應(yīng)用程序中有多個(gè)列表,例如訂單列表,人員列表,發(fā)票等。 它們將以相同的方式實(shí)現(xiàn)。 我認(rèn)為最好先創(chuàng)建一個(gè)基類,然后再用實(shí)際的實(shí)體對(duì)其進(jìn)行擴(kuò)展。
首先是基層。
DataListingSupport.java
package id.co.dwuysan.util;import java.io.Serializable; import javax.faces.event.AjaxBehaviorEvent; import javax.faces.model.DataModel;public abstract class DataListingSupport<T extends Serializable> implements Serializable {private int recordCount = 0;private int totalPages = 0;private DataModel<T> data;private int page = 1;private Integer rowsPerPage = null;private boolean ascending = true;private String sortField;public void navigatePage(final boolean forward) {setPage((forward) ? ++page : --page);refresh();}public void sort(final String sortField) {setSortField(sortField);setAscending(getSortField().equals(sortField) ? !isAscending() : true);refresh();}public void updateRowsPerPage(final AjaxBehaviorEvent event) {setPage(1); // page must reset to the first onerefresh();}public void refresh() {// hook to populate count and datapopulateCountAndData();// compute total pagessetTotalPages(countTotalPages(getRecordCount(), getRowsPerPage()));}/*** The concreate implementation of this class must perform data retrieval* based on the current information available (accessible via methods such* as {@link #getSortField()}, {@link #isAscending()}, etc.* <p>* The implementation is responsible in populating the values for {@link #setRecordCount(int)}* and {@link #setData(javax.faces.model.DataModel)}*/protected abstract void populateCountAndData();/************************************************************** HELPER(S) */private static int countTotalPages(int totalRecord, int rowsPerPage) {int pageCounter = 0;for (int pageCountTracker = 0; pageCountTracker < totalRecord; ++pageCounter) {pageCountTracker += rowsPerPage;}return pageCounter;}/************************************************* ACCESSORS AND MUTATORS */public int getPage() {return page;}public void setPage(int page) {this.page = page;}public boolean isAscending() {return ascending;}public void setAscending(boolean ascending) {this.ascending = ascending;}public Integer getRowsPerPage() {return rowsPerPage;}public void setRowsPerPage(Integer rowsPerPage) {this.rowsPerPage = rowsPerPage;}public DataModel<T> getData() {return data;}public void setData(DataModel<T> data) {this.data = data;}public String getSortField() {return sortField;}public void setSortField(String sortField) {this.sortField = sortField;}public int getRecordCount() {return recordCount;}public void setRecordCount(int recordCount) {this.recordCount = recordCount;}public int getTotalPages() {return totalPages;}public void setTotalPages(int totalPages) {this.totalPages = totalPages;} }接下來(lái)是我們?nèi)绾螖U(kuò)展該類以創(chuàng)建支持bean以支持Customer列表。
DataListingSupport.java
package id.co.dwuysan.customer;import id.co.dwuysan.entity.Customer; import id.co.dwuysan.service.CustomerService; import id.co.dwuysan.util.DataListingSupport; import javax.enterprise.context.RequestScoped; import javax.faces.model.ListDataModel; import javax.inject.Inject; import javax.inject.Named;@RequestScoped @Named public class ListCustomers extends DataListingSupport<Customer> {@Injectprivate CustomerService customerService;public ListCustomers() {setSortField("name");setRowsPerPage(10);}@Overrideprotected void populateCountAndData() {/** This is where we call an EJB (or whatever service layer you have)* to perform data retrieval.** You need to make sure to retrieve the result (paginated, sorted), and* also the total number of records.*/setRecordCount(result.getCount());setData(new ListDataModel<>(result.getResult()));} }因此,您看到,使用這種方法,如果我需要另一種清單,即訂單清單,我們可以輕松擴(kuò)展DataListingSupport<> 。
結(jié)果
在向您展示全部結(jié)果之前,我們可能要添加的一件事是在頁(yè)面顯示時(shí)從數(shù)據(jù)庫(kù)加載所有當(dāng)前客戶的操作。 JSF 2.2添加了一項(xiàng)稱為“查看操作”的功能,該功能使此操作非常容易(McGinn 2011)。
所有你需要做的,是添加這個(gè)f:viewAction后f:view如下:
customer.xhtml
<?xml version='1.0' encoding='UTF-8' ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://java.sun.com/jsf/facelets"xmlns:f="http://java.sun.com/jsf/core"xmlns:h="http://java.sun.com/jsf/html"xmlns:ez="http://java.sun.com/jsf/composite/ezcomp"> <!-- 01 --><body><ui:composition template="./common/template.xhtml"><ui:define name="content"><f:view transient="true"><!-- to load on display of the page --><f:metadata><f:viewAction transient="true" action="#{listCustomers.refresh}"/></f:metadata><h:form id="frmCreateCustomer"><!-- the rest of the code remains unchanged --></h:form></f:view></ui:define></ui:composition></body> </html>注意,我們只是簡(jiǎn)單地調(diào)用DataListingSupport<>#refresh() 。 viewAction實(shí)際上分析String返回以執(zhí)行隱式導(dǎo)航。 在這種情況下,我們的refresh()方法實(shí)際上返回void ,因此不執(zhí)行導(dǎo)航(McGinn 2011)。
結(jié)果應(yīng)該是這樣的:
我從納斯達(dá)克100指數(shù)中挑選了客戶名單。
因此,現(xiàn)在您有了一個(gè)可滾動(dòng),可延遲加載的AJAX數(shù)據(jù)表。
參考資料
- BalusC,2011a, “ netbeans中的JSF 2應(yīng)用程序中默認(rèn)的Managed Bean Scope是什么?” ,堆棧溢出,2013年11月6日訪問(wèn)
- BalusC,2011b, “如何在JSF ajax中引用組件? 在 2013年11月11日訪問(wèn)的堆棧溢出中, 在視圖中找不到標(biāo)識(shí)符為“ foo”的組件
- Busscher,R,2013年, “解釋了JSF 2.2無(wú)狀態(tài)視圖” ,JSF Corner,2013年11月12日訪問(wèn)
- Geary,D,Horstmann,C,2010年,“ Core JavaServer Faces(第三版)”,第三版,美國(guó)加利福尼亞州Prentice Hall。
- Lubke,R,2008, “ JSF 2.0新功能預(yù)覽系列(第4部分)資源重定位” ,Oracle.com,2013年10月7日訪問(wèn)
- McGinn,T,2011年, “新的JavaServer Faces 2.2功能:viewAction組件” ,Oracle.com,2013年11月17日訪問(wèn)
- Oracle,2013年, “復(fù)合組件” ,Oracle.com,2013年11月7日訪問(wèn)
- 里姆,男,2013年, “ JSF技巧#26 – JSF變得無(wú)狀態(tài)” ,Java.net,2013年11月9日訪問(wèn)
翻譯自: https://www.javacodegeeks.com/2013/11/using-jsf-2-2-features-to-develop-ajax-scrollable-lazy-loading-data-table.html
web.xml.jsf
總結(jié)
以上是生活随笔為你收集整理的web.xml.jsf_使用JSF 2.2功能来开发可滚动,可延迟加载的Ajax数据表的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 备案竣工表提交多久下来(备案竣工表)
- 下一篇: 恐怖安卓游戏排行榜(恐怖安卓游戏)