當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發布時間：2023/12/3 javascript 27 豆豆

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

這次，我想與您分享我最近從JSF 2.2功能中學到的知識。為此，我決定創建一個簡單的ajax，可滾動的延遲加載數據表。

請注意，絕不這是相當大的庫如Primefaces ， RichFaces的或ICEFaces的。這只是為了告訴您我學到了什么。（當然，如果您愿意，沒有人可以阻止您使用它）。

這個概念

請允許我先告訴您這個概念，或者如果您愿意的話，請告訴您這種情況。實際上非常簡單。

我們有一個Customer實體的列表，基本上，我們將實現一個數據表，該表是可滾動的，可以延遲加載列表并使用ajax。

注意：我假設您對JPA和EJB感到滿意，因此盡管我可能在這里和那里提到它們，但在本文中不再討論。

使用模板

就像任何JSF應用程序一樣，我也從使用模板開始。將模板與Netbeans一起使用非常容易。只需選擇選項Facelets模板并選擇您的布局即可。

注意，Netbeans還會生成兩個樣式表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>

我對默認模板進行了許多修改。

首先，啟動應用程序服務器時遇到一個問題，即樣式表未正確加載。因此，要解決此問題，我使用了JSF Resource Locator （Lubke 2008）。

我還創建了每個子頁面，即頁眉，菜單和頁腳。如果未指定，則它們充當默認值。

因此，我的頁面集合如下：

template.xhtml

注意，我使用h:outputStylesheet而不是使用文件定位器./../resources/css/default.css 。使用這種方法，只需將所有資源放在resources目錄中，并通過屬性library指向包含您的資源的文件夾來指向它即可。因此，例如<h:outputStylesheet library="css" name="default.css" />確實是在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>

接下來，使用模板。因此，我們創建一個名為customers.xhtml的文件來使用它。

customer.xhtml

然后，您可以運行應用程序服務器并通過http://<the path to your application>/customers.jsf訪問該頁面。輸出應如下圖所示。

添加設施以創建客戶

首先，在模板中，讓我們添加一個工具以在customers.xhtml中添加customers.xhtml 。我們可以簡單地使用JSF ManagedBean來做到這一點。但是，Core Javaserver Faces第三版建議：

對于可以在JSF頁面中使用的bean，有兩種單獨的機制（CDI bean和JSF管理的bean）是歷史上的意外。我們建議您使用CDI bean，除非您的應用程序必須在諸如Tomcat之類的普通servlet運行程序上運行。

（Geary，Horstmann，2010年）

按照建議，從現在開始，我將使用CDI bean。

在實際的應用程序中，我確信還有很多數據要捕獲。但是，在此示例中，讓我們僅捕獲客戶的姓名。

基本上，我們需要一個Model和一個Controller 。因此，讓我們首先創建這些類。

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注釋。由于我們沒有給它任何范圍注釋，因此默認為@RequestScoped （BalusC 2011a）。

下一步是修改我們的customers.xhtml以使用這些類，以便我們可以注冊客戶。

customer.xhtml

好的，一旦完成，您就可以注冊客戶。屏幕應如下所示。

定義“合同”

這部分是真正的交易。我所說的“合同”不是實際的合同本身。相反，我指的是我們首先設計Facelet xhtml的方式，這將驅動實際的后備bean類。

因此，讓我們首先概述一下需求：

記錄應在表中分頁，并從數據庫中延遲加載
用戶應該能夠選擇一個頁面中顯示多少條記錄
用戶應該能夠查看當前頁面是什么，頁面總數和記錄
用戶應該能夠滾動瀏覽下一個和上一個記錄
使用AJAX

在一個應用程序中，必然會有很多清單。因此，前進的最佳方法是創建一個易于重用的組件。由于組件本身由許多其他組件組成，因此我相信此功能正式稱為復合組件。在JSF 1.x時代，這非常痛苦。開發人員需要編寫許多類/文件。使用JSF 2.x，這非常容易（我必須說，這非常優雅）。

讓我們從創建組件開始。

創建復合組件

我將這個組件命名為paginator 。

我相信您會找到很多關于如何執行此操作的解釋，因此我將跳過“說明”部分，僅向您展示我的操作。

我在resources/ezcomp目錄下創建了一個文件paginator.xhtml 。因此，稍后我將使用命名空間xmlns:ez="http://java.sun.com/jsf/composite/ezcomp來引用此組件。

讓我們繼續進行paginator.xhtml的實際實現。請參考以下資源，然后我將逐步指導您。

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>

下一節將說明我在customers.xhtml提出的每個編號點。

01. cc:attribute和paginatedModel

這部分是此xhtml中的實現以及此組件的客戶端/用戶之間的'interface' 。簡而言之，將其視為使用此組件時必須提供的參數。

02.隱藏參數

現在這部分有很多解釋。

首先，我需要快進一點以告訴您我正在使用RequestScoped bean支持記錄列表。還要注意的另一件事是，我實際上使用了<f:view transient="true"> ，這是JSF 2.2中可用的功能，因此使該頁面變為無狀態。如果您在瀏覽器中開源，則狀態現在為：

由于此頁面是無狀態的，因此您需要在兩次調用之間管理自己的狀態（Riem 2013）。因此使用隱藏參數。想象一下，假設您正在顯示100頁中的第4頁，并且用戶決定導航到下一頁，因為它是無狀態的，所以您需要知道現在是哪一頁，無論當前顯示是按升序還是降序列出以及目前的排序方式。

03.每頁行數選擇

這一部分很不言自明，只有一部分。基本上，我們列出了供用戶選擇的選項，以供選擇以每頁顯示多少條記錄。當用戶選擇時，我們需要使用AJAX重新執行查詢并更新頁面。因此，本節的使用：

<f:ajax execute="@form" render="@form" listener="#{cc.attrs.paginateModel.updateRowsPerPage}" />

本部分的內容基本上是基于用戶選擇，執行方法updateRowsPerPage并更新此form 。如第02節所述， 'execute'還意味著我們正在考慮這種form所有參數。

04/06。 導航“后退”和“前進”

我將在本節中一起解釋04和06部分，因為它們非常相似。

讓我們從第04部分開始。這基本上將呈現一個鏈接，以允許用戶導航'Back' 。僅在當前頁面不是第一頁的情況下，我才簡單地使用display屬性來進行條件渲染（否則，將無法導航回第一頁，對嗎？）。第6部分非常相似，條件是僅在當前頁面不是最后一頁時才呈現。

我要說明的下一部分是單擊該頁面時的actionListener 。基本上，我們現在知道由于h:inputHidden （參見02節），當前頁面是什么。因此，使用04和06部分中的兩個命令鏈接，我們需要標記這是哪種導航。為此，我只使用布爾值。

最后，因為我們想使用AJAX進行導航，所以我們還需要使用<f:ajax> 。同樣，與前面的部分有關在@form上execute和render原因相同。

05當前頁和總頁數

這部分只是呈現當前頁面和可用頁面總數。不言自明

06見第04節

見第04節

07 insertChildren

盡管我們可以重復使用分頁器，但我認為創建一個將數據模型自動呈現到表中的組件非常困難。至少，頁面設計者需要確定要呈現的列（我確信必須有一種神奇的方式以表格方式自動呈現所有內容。也許Oracle ADF Faces會為您做到這一點。無論如何，我不必費心找到它）。

使用此標記時，基本上稍后使用<ezcomp:paginator>...</ezcomp:paginator> ，插入之間的任何內容都將在第07部分呈現。考慮一下類似<ui:decorate> 。

08顯示總記錄

對于此部分，我們只顯示總記錄。不言自明。

使用復合組件

現在，我們基本上需要使用此復合組件。因此，我們需要如下修改我們的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>

同樣，我將一步一步地指導您：

01命名空間

如前所述，由于我們將分頁器放置在resources/ezcomp/paginator.xhtml ，因此JSF允許我們使用名稱空間http://java.sun.com/jsf/composite/ezcomp來引用它。因此，稍后（如04所示），您可以通過使用ezcomp:paginator來使用新創建的ezcomp:paginator 。

02以自己的形式列出表

讓我們跳到第二部分。第二部分顯示在此customers.xhtml ，我們使用兩種形式。主要是因為我要與表進行交互，所以您不希望它影響或受另一種形式的影響，在本例中為“創建客戶”部分。

讓我們說，假設我們只對整個customers.xhtml使用一種形式。單擊按鈕進行排序（第06部分）時，可能會觸發對創建文本框的驗證，例如，客戶名稱不能為空。我們不想要那個。

由于第03節中概述的原因，我們還需要給此表格起一個名字。

03重新呈現其他表格

這里的意圖是每當添加新客戶時便能夠刷新表。注意，命名容器（相對于02節）是第二個h:form 。因此，由于“創建客戶”和表位于不同的命名容器中，因此讓我們僅刷新整個第二個表單即可，這是通過使用正確的“搜索表達式”完成的。首先使用“：”，這意味著JSF將從文檔的根目錄搜索樹（BalusC，2011b）。

04使用我們新創建的復合組件

這就是使用我們新創建的paginator組件的簡單方法，即通過將適當的參數傳遞給它（此后）。

另請參閱paginator.xhtml及其說明。

05實際數據表

這是實際的數據表。如前所述，盡管我們可以創建通用分頁器，但我認為創建通用表渲染將非常困難。因此，在這種情況下，我只想向您展示確定要渲染的列的情況。

需要注意的一件事是，我們調用listCustomers.data為數據表提供javax.faces.DataModel 。基于頁面，大小，排序等，此“數據”應該是正確的數據。如果您仍然不明白，請不要擔心。在下一節中，它將變得更加清晰。

06排序

根據以上要求，我們需要實現排序。這是不言自明的，使用f:ajax與前面提到的原因相同。

創建類以支持分頁

好的，我們已經使用paginator.xhtml創建了“合同/需求”，然后在customers.xhtml上使用了它。我們現在需要的是實現一個支持該功能的類。

我要做的是遍歷customers.xhtml和paginator.xhtml 。您也可以這樣做，以便您可以輕松理解下面列出的每個要點：

首先，查看customers.xhtml ，該類稱為“ listCustomers”。由于我們正在使用CDI，因此需要使用@Named將bean暴露給JSF環境。我們可以創建ListCustomers.java ，或在@Named批注中填充value 。
過去，我將@ViewScoped用于此bean。但是，由于我們將JSF的“無狀態”功能與f:view transient="true" ，因此我們無法再使用@ViewScoped 。這些bean與JSF框架所管理的視圖相關。但是有了這種無狀態功能，視圖總是會被重新創建，而這個范圍內的bean也會被重新創建（Busscher 2013）。因此，最好使用的范圍是@RequestScoped 。
它需要具有返回javax.faces.DataModel<T> getData() 。這應該返回要顯示的Customer列表。
它需要支持public void sort(final String sortField)以支持標頭排序。
String getSortField() ， boolean isAscending() String getSortField() ， int getPage()以及它們相應的int getPage()器/設置器的訪問器。這些是必需的，與我們的隱藏輸入有關。
rowsPerPage訪問器/ rowsPerPage器，以支持我們的每頁行數選擇。
它需要支持public void updateRowsPerPage(AjaxBehaviorEvent event) ，以便我們可以基于用戶的每頁行數選擇來更新列表。
它需要支持public void navigatePage(final boolean forward) 。
記錄recordCount

無論如何，您現在應該可以實現該類。

但是，我實現它的方法是將其分為兩部分。如果您考慮一下，讓我們說以后您的應用程序中有多個列表，例如訂單列表，人員列表，發票等。它們將以相同的方式實現。我認為創建一個基類，然后再用實際實體擴展它是一個更好的主意。

首先是基層。

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;} }

接下來是我們如何擴展該類以創建支持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()));} }

因此，您看到，使用這種方法，如果我需要另一種清單，即訂單清單，我們可以輕松擴展DataListingSupport<> 。

結果

在向您展示全部結果之前，我們可能要添加的一件事是在頁面顯示時從數據庫加載所有當前客戶的操作。 JSF 2.2添加了一項稱為“查看操作”的功能，該功能使此操作非常簡單（McGinn 2011）。

所有你需要做的，是添加這個f:viewAction后f:view如下：

customer.xhtml

注意，我們只是簡單地調用DataListingSupport<>#refresh() 。 viewAction實際上會分析String返回以執行隱式導航。在這種情況下，我們的refresh()方法實際上返回void ，因此不執行導航（McGinn 2011）。

結果應該是這樣的：

我從納斯達克100指數中挑選了客戶名單。

因此，現在您有了一個可滾動，可延遲加載的AJAX數據表。

參考文獻

BalusC，2011a， “ netbeans中的JSF 2應用程序中默認的Managed Bean Scope是什么？” ，堆棧溢出，2013年11月6日訪問
BalusC，2011b， “如何在JSF ajax中引用組件？在 2013年11月11日訪問的堆棧溢出中，在視圖中找不到標識符為“ foo”的組件
Busscher，R，2013年， “解釋了JSF 2.2無狀態視圖” ，JSF Corner，2013年11月12日訪問
Geary D，Horstmann，C，2010年，“ Core JavaServer Faces（第3版）”，第3版，美國加利福尼亞州Prentice Hall
Lubke，R，2008， “ JSF 2.0新功能預覽系列（第4部分）資源重定位” ，Oracle.com，2013年10月7日訪問
McGinn，T，2011年， “新的JavaServer Faces 2.2功能：viewAction組件” ，Oracle.com，2013年11月17日訪問
Oracle，2013年， “復合組件” ，Oracle.com，2013年11月7日訪問
Riem，男，2013年， “ JSF技巧＃26 – JSF變得無狀態” ，Java.net，2013年11月9日訪問

參考：使用JSF 2.2功能從dwuysan博客博客中的JCG合作伙伴 Deny Wuysan 開發了ajax，可滾動，延遲加載的數據表。

翻譯自: https://www.javacodegeeks.com/2013/11/using-jsf-2-2-features-to-develop-ajax-scrollable-lazy-loading-data-table.html

總結

以上是生活随笔為你收集整理的使用JSF 2.2功能来开发可滚动，可延迟加载的Ajax数据表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：理财业绩基准怎么算收益？
下一篇：将社交登录添加到Spring MVC W