當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

web.xml.jsf_使用JSF 2.2功能来开发可滚动，可延迟加载的Ajax数据表

發(fā)布時(shí)間：2023/12/3 javascript 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 web.xml.jsf_使用JSF 2.2功能来开发可滚动，可延迟加载的Ajax数据表小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

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

注意，不是使用文件定位器./../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><h1>Default Header</h1></ui:composition> </body> </html>

接下來(lái)，使用模板。因此，我們創(chuàng)建一個(gè)名為customers.xhtml的文件來(lái)使用它。

customer.xhtml

然后，您可以運(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

好的，一旦完成，您就可以注冊(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"><cc:interface><cc:attribute name="paginateModel" /> </cc:interface><cc:implementation><h:inputHidden value="#{cc.attrs.paginateModel.sortField}" /><h:inputHidden value="#{cc.attrs.paginateModel.ascending}" /><h:inputHidden value="#{cc.attrs.paginateModel.page}" /><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><h:panelGrid columns="3" cellpadding="5" cellspacing="5"><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><h:outputLabel value="#{cc.attrs.paginateModel.page} ? #{cc.attrs.paginateModel.totalPages} " /><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 /><br /><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)在為：

由于此頁(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)樗鼈兎浅Ｏ嗨啤?

讓我們從第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"> <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" /> </h:commandButton><h:message for="cmdRegisterCustomer" styleClass="error" /></h:panelGrid></h:form><br /><h:form id="frmListCustomers"> <ez:paginator paginateModel="#{listCustomers}"> <h:dataTable value="#{listCustomers.data}" var="cust"> <h:column><f:facet name="header"><h:commandLink value="Name" actionListener="#{listCustomers.sort('name')}"><f:ajax execute="@form" render="@form" /> </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

注意，我們只是簡(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)

參考：使用JSF 2.2功能從dwuysan博客博客中的JCG合作伙伴 Deny Wuysan 開發(fā)了ajax，可滾動(dòng)，延遲加載的數(shù)據(jù)表。

翻譯自: 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)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：备案竣工表提交多久下来（备案竣工表）
下一篇：恐怖安卓游戏排行榜（恐怖安卓游戏）