Directory

← Back

PagingComponent

Paging for any content when you have too much data to display on the page: << < 1 2 3 ... > >>

Author

Rating

You may have too much data to display on the page. For example, you have a search page and you only want to display the 20 first results. But the user must be able to browse the rest of the results. This add-on will very easily enable you to place numbers of pages to jump to.

You do not need to use a Table to use PagingComponent.

Examples are provided with a fake DAO, to simulate how you would retreive data for each page. You can also see the PagingComponentApplication class for more examples.

This is used in production in the BlackBeltFactory.com platform, in the forum and the course search result page.

Sample code

final ProductDao productDao = new ProductDao();
        
        // Here we fill productIds with only id's;
        int nbrOfProducts = productDao.countAllProducts();
        
        // Create a fake list with the number of products
        List<Product> list = new FakeList<Product>(nbrOfProducts);
        
        final VerticalLayout mainLayout = new VerticalLayout();
        
        // Layout where we will display items (changing when we click next page).
        final VerticalLayout itemsArea = new VerticalLayout();

        // Visual controls (First, Previous, 1 2 ..., Next, Last)
        // We use here a LazyPagingComponentListener to fetch the list of items to display from the DB
        final PagingComponent<Product> pagingComponent = new PagingComponent<Product>(10, list, new LazyPagingComponentListener<Product>(itemsArea) {

			@Override
			protected Collection<Product> getItemsList(int startIndex, int endIndex) {
				// Here we can load the items from the DB
				return productDao.getProductsFromRange(startIndex, endIndex);
			}

			@Override
			protected Component displayItem(int index, Product item) {
				// This method allows to create a Component to display an item fetched
				return new Label(item.toString());
			}

        });

        mainLayout.addComponent(new Label("<h1>Example with Dao and lazy loading<h1>",Label.CONTENT_XHTML));
        mainLayout.addComponent(itemsArea);
        mainLayout.addComponent(pagingComponent);
        return mainLayout;
// Test data
List<Integer> item = new ArrayList<Integer>();
for(int i=1;i<=300;i++){
    item.add(new Integer(i));
}

final VerticalLayout mainLayout = new VerticalLayout();

// Layout where we will display items (changing when we click next page).
final VerticalLayout itemsArea = new VerticalLayout();

// This customizer allow to add style for each buttons page
StyleCustomizer styler = new StyleCustomizer() {
			
        @Override
	public void styleButtonPageNormal(ButtonPageNavigator button, int pageNumber) {
		button.setPage(pageNumber);
		button.removeStyleName("styleRed");
	}

	@Override
	public void styleButtonPageCurrentPage(ButtonPageNavigator button, int pageNumber) {
		button.setPage(pageNumber, "[" + pageNumber + "]"); // Set caption of the button with the page number between brackets. 
		button.addStyleName("styleRed");
		button.focus();
	}

	@Override
	public void styleTheOthersElements(ComponentsManager manager, ElementsBuilder builder) {
		// if the number of pages is less than 2, the other buttons are not created.
                if (manager.getNumberTotalOfPages() < 2) {
                    return;
                }

                // Allow to hide these buttons when the first page is selected		
		boolean visible = !manager.isFirstPage();
		builder.getButtonFirst().setVisible(visible);
		builder.getButtonPrevious().setVisible(visible);
		builder.getFirstSeparator().setVisible(visible);
				
		// Allow to hide these buttons when the last page is selected
		visible = !manager.isLastPage();
		builder.getButtonLast().setVisible(visible);
		builder.getButtonNext().setVisible(visible);
		builder.getLastSeparator().setVisible(visible);
	}

};
        
// Visual controls (First, Previous,1 2 ..., Next, Last)
// The StyleCustomizer is given in parameter
final PagingComponent<Integer> pagingComponent = new PagingComponent<Integer>(10, 10, item, styler, new SimplePagingComponentListener<Integer>(itemsArea) {
        	
	@Override
	protected Component displayItem(int index, Integer item) {
		// This method allows to create a Component to display an item fetched
		return new Label(item.toString());
	}
            
});

mainLayout.addComponent(new Label("<h1>Example PagingComponent Styles with the StyleCustomizer<h1>",Label.CONTENT_XHTML));
mainLayout.addComponent(itemsArea);
mainLayout.addComponent(pagingComponent);

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Add a builder to create the PagingComponent mare easily than the contructors. You can create a new builder thanks to the PagingComponent.paginate(Collection) method.

Released
2015-08-04
Maturity
BETA
License
Apache License 2.0

Compatibility

Framework
Vaadin 7.0+
Vaadin 6.0+ in 0.9.3
Browser
N/A

PagingComponent - Vaadin Add-on Directory

Paging for any content when you have too much data to display on the page: << < 1 2 3 ... > >> PagingComponent - Vaadin Add-on Directory
You may have too much data to display on the page. For example, you have a search page and you only want to display the 20 first results. But the user must be able to browse the rest of the results. This add-on will very easily enable you to place numbers of pages to jump to. You do not need to use a Table to use PagingComponent. Examples are provided with a fake DAO, to simulate how you would retreive data for each page. You can also see the PagingComponentApplication class for more examples. This is used in production in the BlackBeltFactory.com platform, in the forum and the course search result page.
Online