PagingComponent

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

View larger

Close

View larger

Close

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

Links

• Alia Faton (author) on LinkedIn
• Source Code
• Discussion Forum
• Gaetan Timmermans (author) on Linkedin

Compatibility