Creating a DataScroller with Primefaces

User Rating: 5 / 5

Star ActiveStar ActiveStar ActiveStar ActiveStar Active
 

In this tutorial you will learn how to use a Primefaces DataScroller to let your application load additional set of Data as you scroll down the Web page (on Demand scrolling). This component is available since Primefaces 5.

The structure of the component dataScroller is quite similar to a dataTable. The key attribute of it is the chunkSize by which you can control the amount of items that will be loaded and displayed at once. Here follows an example which displays the World's country list in chunks:

<!DOCTYPE html>
<html xmlns="http://www.w3c.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
 
    
<h:form> 
    <p:dataScroller value="#{dataScrollerView.countries}" var="c" chunkSize="10">
        <f:facet name="header">
            Data Scroller Demo
        </f:facet>
 
        <h:panelGrid columns="2" style="width:100%" columnClasses="logo,detail">
             
            <p:outputPanel>
                <h:panelGrid columns="2" cellpadding="5">
                    <h:outputText value="Country code:" />
                    <h:outputText value="#{c.code}" style="font-weight: bold"/>
 
                    <h:outputText value="Name:" />
                    <h:outputText value="#{c.name}" style="font-weight: bold"/>
                </h:panelGrid>
            </p:outputPanel>
        </h:panelGrid>
    </p:dataScroller>
</h:form>
</h:body>
</html>

In order to work you will need a DataScrollerView to hold the list of Country objects:

package com.mastertheboss.bean;
 
import java.io.Serializable;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ManagedProperty;
import javax.faces.bean.ViewScoped;

import com.mastertheboss.model.Country;
import com.mastertheboss.service.CountryService;
 
 
@ManagedBean
@ViewScoped
public class DataScrollerView implements Serializable {
     
    private List<Country> countries;
         
    @ManagedProperty("#{countryService}")
    private CountryService service;
     
    @PostConstruct
    public void init() {
    	countries = service.createCountries();
    }
 
    public List<Country> getCountries() {
        return countries;
    }
 
    public void setService(CountryService service) {
        this.service = service;
    }
}

The Country class is a simple Java Bean with some properties in it:

package com.mastertheboss.model;

import java.io.Serializable;

public class Country implements Serializable {
	private String code;
	private String name;

	public String getCode() {
		return code;
	}

	public void setCode(String code) {
		this.code = code;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public Country() {
	}

}

Finally, the CountryService populates the List of Country using as source the JDK's Locale getISOCountries:

package com.mastertheboss.service;
 
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import java.util.Locale;
import java.util.UUID;
import javax.faces.bean.ApplicationScoped;
import javax.faces.bean.ManagedBean;

import com.mastertheboss.model.Country;
 
 
@ManagedBean(name = "countryService")
@ApplicationScoped
public class CountryService {

     
    public List<Country> createCountries() {
    	
    	String[] locales = Locale.getISOCountries();
    	List<Country> list = new ArrayList<Country>();
    	
    	for (String countryCode : locales) {

    		Locale obj = new Locale("", countryCode);
    		Country c = new Country();
    		c.setCode( obj.getCountry());
    		c.setName(obj.getDisplayCountry());
    		 
    		list.add(c);

    	}
    	        
        return list;
    }
       
}

Here is your DataScroller view in action:

primefaces datascroller

Looking for other ways to display your large set of data ? Then check this article where we show how to enable live scrolling on a dataTable in order to lazy load its content


Advertisement