`
huxiaojun_198213
  • 浏览: 103626 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Lazy JSF Primefaces Datatable Pagination – Part 2

    博客分类:
  • JSF
阅读更多
Lazy JSF Primefaces Datatable Pagination – Part 2

The page code is very simple and there is no complication. Check the “index.xhtml” code:
<!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" xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui">
<h:head>
</h:head>
<h:body>
    <f:view>
        <h:form>
            <p:dataTable id="lazyDataTable" value="#{playerMB.allPlayers}" var="player" paginator="true" rows="10"
                selection="#{playerMB.player}" selectionMode="single"
                paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                rowsPerPageTemplate="5,10,15" style="width: 80%;margin-left: 10%;margin-right: 10%;">

                <p:ajax event="rowSelect" update=":playerDialogForm" oncomplete="playerDetails.show()" />

                <p:column>
                    <f:facet name="header">Name</f:facet>
                    <h:outputText value="#{player.name}" />
                </p:column>
                <p:column>
                    <f:facet name="header">Age</f:facet>
                    <h:outputText value="#{player.age}" />
                </p:column>
            </p:dataTable>
        </h:form>

        <p:dialog widgetVar="playerDetails" header="Player" modal="true">
            <h:form id="playerDialogForm">
                <h:panelGrid columns="2">
                    <h:outputText value="Id: " />
                    <h:outputText value="#{playerMB.player.id}" />
                    <h:outputText value="Name: " />
                    <h:outputText value="#{playerMB.player.name}" />
                    <h:outputText value="Age: " />
                    <h:outputText value="#{playerMB.player.age}" />
                </h:panelGrid>
            </h:form>
        </p:dialog>
    </f:view>
</h:body>
</html>


We got a lazy datatable that will display a selected value in a dialog.

In our Managed Bean we have a simpler code than the page:

package com.mb;

import java.io.Serializable;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;

import org.primefaces.model.LazyDataModel;

import com.model.Player;

@ViewScoped
@ManagedBean
public class PlayerMB implements Serializable {

    private static final long serialVersionUID = 1L;
    private LazyDataModel<Player> players = null;
    private Player player;

    public LazyDataModel<Player> getAllPlayers() {
        if (players == null) {
            players = new PlayerLazyList();
        }

        return players;
    }

    public Player getPlayer() {
        if(player == null){
            player = new Player();
        }

        return player;
    }

    public void setPlayer(Player player) {
        this.player = player;
    }
}



We got a get/set to the Player entity and a get to the an object of the LazyDataModel type.

Check bellow the implementation of the PlayerLazyList code:

package com.mb;

import java.util.List;
import java.util.Map;

import org.primefaces.model.LazyDataModel;
import org.primefaces.model.SortOrder;

import com.connection.MyTransaction;
import com.dao.PlayerDAO;
import com.model.Player;

public class PlayerLazyList extends LazyDataModel<Player> {

    private static final long serialVersionUID = 1L;

    private List<Player> players;

    private MyTransaction transaction;

    private PlayerDAO playerDAO;

    @Override
    public List<Player> load(int startingAt, int maxPerPage, String sortField, SortOrder sortOrder, Map<String, String> filters) {
        try {
            try {
                transaction = MyTransaction.getNewTransaction();
                playerDAO =  new PlayerDAO(transaction);

                transaction.begin();

                // with datatable pagination limits
                players = playerDAO.findPlayers(startingAt, maxPerPage);

                // If there is no player created yet, we will create 100!!
                if (players == null || players.isEmpty()) {
                    playerDAO.create100Players();

                    // we will do the research again to get the created players
                    players = playerDAO.findPlayers(startingAt, maxPerPage);
                }
            } finally {
                transaction.commit();
            }
        } catch (Exception e) {
            e.printStackTrace();
        }

        // set the total of players
        if(getRowCount() <= 0){
            setRowCount(playerDAO.countPlayersTotal());
        }

        // set the page dize
        setPageSize(maxPerPage);

        return players;
    }

    @Override
    public Object getRowKey(Player player) {
        return player.getId();
    }

    @Override
    public Player getRowData(String playerId) {
        Integer id = Integer.valueOf(playerId);

        for (Player player : players) {
            if(id.equals(player.getId())){
                return player;
            }
        }

        return null;
    }
}


About the code above:

■The load method: the Primefaces will invoke this method every time that the pagination is fired. It will have all parameters with valid values; with these parameters you will be able to do a query in the database getting only for the needed data. If you want to sort your query by a field you can use the sortField attribute that will have the column datatable value (it will be null if the user do not order); the sortOrder will indicate if the user wants ascending or descending.
■The getRowKey method: this method return an id to each line, the Primefaces will invoke this method when needed.
■The getRowData method: will return a selected Player in the datatable.
■When you run this application the first time it will persist 100 players in the database. In a real application this would not be necessary.

A last configuration need to be added in the “web.xml” file:

<persistence-context-ref>
    <persistence-context-ref-name>JSFPU</persistence-context-ref-name>
    <persistence-unit-name>JSFPU</persistence-unit-name>
</persistence-context-ref>


We will use this configuration to do the JNDI Lookup.

Running our application

Now we just need to start up the application.

To access the application you can use the link:

http://localhost:8080/DatatableLazyPrimefaces/

from:http://www.javacodegeeks.com/2012/04/lazy-jsf-primefaces-datatable_11.html
分享到:
评论

相关推荐

    JSF-2-DataTable

    **JSF 2.0 DataTable 全面解析** JavaServer Faces (JSF) 是一个用于构建用户界面的Java EE框架,特别适用于开发Web应用程序。在JSF 2.0版本中,DataTable组件是一个核心功能,它允许开发者以表格形式展示数据,...

    jsf 分页实例jsf 分页实例

    在JSF中,可以使用开源库如PrimeFaces、RichFaces或ICEfaces等提供的分页组件。这里以PrimeFaces为例,因为它拥有广泛的应用和丰富的组件库。PrimeFaces的`p:datascroller`组件是用于分页的理想选择。 ### 2. 添加...

    PrimeFacesJSF框架JavaServerFaces组件套件

    2. 在JSF配置文件中声明PrimeFaces为可用的组件库。 3. 在JSF页面(.xhtml)中引用所需的PrimeFaces组件。 4. 使用Java后端代码处理组件的事件和数据。 **最佳实践** 1. 合理规划和组织组件,避免不必要的性能开销...

    基于primefaces对table的增删改查的源码

    在Web开发中,PrimeFaces是一个非常流行的JavaServer Faces (JSF)组件库,它提供了一系列丰富的UI组件,用于构建交互性强、用户体验良好的企业级应用。在本教程中,我们将深入探讨如何使用PrimeFaces库来实现对表格...

    jsf自带分页

    在JSF中,分页通常与数据表组件结合使用,例如PrimeFaces中的`p:dataTable`。这个组件支持内建的分页功能,可以通过设置属性`rows`定义每页显示的行数,`paginator`属性开启分页,`paginatorTemplate`自定义分页按钮...

    lazyload-2.x.zip

    《jQuery LazyLoad 2.x API详解与应用实践》 在当今网页开发中,为了提高页面加载速度和用户体验,"懒加载"(Lazy Load)技术变得越来越重要。jQuery LazyLoad插件是一个广泛使用的解决方案,它允许图片、iframe等...

    datatable+bootstrap

    2. **Bootstrap集成**:DataTable可以轻松地与Bootstrap集成,利用Bootstrap的样式和布局,使得表格具有更好的视觉效果和响应式特性。通过设置CSS类,我们可以让DataTable与Bootstrap的主题保持一致。 3. **Ajax...

    C#使用Lazy延迟加载

    2. **`Lazy&lt;T&gt;`类**:`Lazy&lt;T&gt;`是.NET Framework提供的一个类,用于实现延迟初始化。它的泛型参数`T`代表要延迟初始化的对象类型。通过创建`Lazy&lt;T&gt;`的实例并提供一个初始化函数,我们可以确保对象只有在首次使用时...

    Lazy

    Lazy

    LazyUI-dependency

    标题提到的"LazyUI-dependency"表明这是一个关于懒加载用户界面(LazyUI)的依赖集合,可能是为了帮助开发者更方便地集成到自己的项目中,尤其是对于那些不熟悉或者不喜欢使用Maven进行依赖管理的开发者。...

    jQuery_lazyload

    jQuery_lazyload是一个非常实用的JavaScript库,用于优化网页性能,特别是在处理大量图片或者内容时。这个插件的主要目的是延迟加载,即在用户滚动到页面的特定部分时才加载那些可视区域以外的内容,从而减少初次...

    懒加载lazyload

    &lt;img data-src="image_path2.jpg" class="lazy"&gt; &lt;script src="jquery.lazyload.js"&gt; $(function() { $(".lazy").lazyload(); }); ``` 在上面的代码中,`data-src` 是图片的真实路径,而 `class="lazy...

    lazyload.js演示页面

    **懒加载技术与lazyload.js详解** 懒加载(Lazy Load)是一种优化网页性能的技术,它主要应用于图片或视频等大容量资源的加载。在网页初次加载时,仅加载视口内的内容,当用户滚动页面或者靠近某个元素时,再加载...

    datatable例子 超大表格

    3. **延迟加载**(Lazy Loading):只有在用户滚动到可视区域时才加载额外的数据行,这可以显著减少初始加载时间。 4. **列宽调整**:Datatable 允许用户动态调整列宽,以适应不同大小的数据和屏幕。 5. **搜索和...

    JQuery Lazyload加载图片实例

    **jQuery Lazyload 图片加载技术详解** 在网页设计中,图片是重要的元素之一,但大量图片的预加载可能会拖慢页面的加载速度,影响用户体验。为了解决这一问题,jQuery 提供了一个插件——jQuery Lazyload,它允许...

    jquery.lazyload.js

    《jQuery.Lazyload.js:优化网页加载速度与用户体验的艺术》 在现代网页设计中,页面加载速度和用户体验是至关重要的因素。jQuery.Lazyload.js是一个高效实用的JavaScript插件,它能够显著提升网页加载速度,同时...

    jquery lazyload延时加载

    **jQuery LazyLoad 知识详解** 在网页设计与开发中,优化用户体验和页面加载速度是一项至关重要的任务。jQuery 的 LazyLoad 插件提供了一种高效的方法来处理这个问题,特别是对于那些图片众多、流量消耗大的网站而...

    magento lazyload插件

    Magento LazyLoad 插件是针对Magento电子商务平台设计的一款性能优化工具。它的主要功能是实现图片的延迟加载(Lazy Load),以此提升网站的加载速度和用户体验。在网页浏览时,传统方式下所有图片会一次性全部加载...

    图片延迟加载 lazyload

    图片延迟加载(Lazy Load)是一种优化网页性能的技术,主要用于处理大量图片或多媒体资源的加载。在网页设计中,当用户滚动页面时,只有进入视口的图片才会开始加载,而那些还未显示出来的图片则会暂时保持占位符...

Global site tag (gtag.js) - Google Analytics