PagingComponent add-on

Hi,

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.

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

Congratulations! Very interesting! I’m using it in my code.

Thanks!!

Hi

Im trying it in my code but I want to disable the next button when I come to the last page.
How can I do that?

Hi,

You can try this:


final List<Integer> item = new ArrayList<Integer>();

......
.....

// Visual controls (First, Previous, 1 2 ..., Next, Last)
PagingComponent<Integer> pagingComponent = new PagingComponent<Integer>(10, item, new PagingComponentListener<Integer>() {
            
            @Override
            public void displayPage(ChangePageEvent<Integer> event) {
            	PagingComponent<Integer> pagingComponent=(PagingComponent<Integer>)event.getSource();
            	
            	//Here is the code that does what you want
               if (event.getPageRange().getIndexPageEnd()==item.size()) {
            		pagingComponent.getButtonNext().setEnabled(false);
            		pagingComponent.getButtonLast().setEnabled(false);
            		pagingComponent.getButtonPrevious().setEnabled(true);
            		pagingComponent.getButtonFirst().setEnabled(true);
            	} else if (event.getPageRange().getIndexPageStart()==0){
            		pagingComponent.getButtonPrevious().setEnabled(false);
            		pagingComponent.getButtonFirst().setEnabled(false);
            		pagingComponent.getButtonNext().setEnabled(true);
            		pagingComponent.getButtonLast().setEnabled(true);
            	} else {
            		pagingComponent.getButtonNext().setEnabled(true);
            		pagingComponent.getButtonLast().setEnabled(true);
            		pagingComponent.getButtonPrevious().setEnabled(true);
            		pagingComponent.getButtonFirst().setEnabled(true);
            	}
            	
                ...............

        });

Sorry for the time you have waited.

Hi

Thanks for the reply.

I tried it…It works fine, but when it has only one page it throws a null pointer exception.
pagingComponent.getButtonNext() returns null.

Hi,

To fix this bug you can do that :


......

final int hitsPerPage = 10;
PagingComponent<Integer> pagingComponent = new PagingComponent<Integer>(hitsPerPage, item, new PagingComponentListener<Integer>() {
            
            @Override
            public void displayPage(ChangePageEvent<Integer> event) {
            	PagingComponent<Integer> pagingComponent=(PagingComponent<Integer>)event.getSource();

                if (item.size()>hitsPerPage){            	

            	            //previous code
                            ......................
                }
            	
                ...............

        });

Have a nice day :slight_smile:

Hi

Thanks for the reply…

The thing is where ever I have paging I have to add this code…Its not nice.
Im thinking of a nice way to do this… I thought to put another class for only paging with this code and call it… stiil I didn’t try it.

It’s a good idea.

You can implement the PagingComponentListener class.


public class MyPagingComponentListener<I> implements PagingComponentListener<I> {

	private int hitsPerPage,nbrOfItems; 

	public MyPagingComponentListener( int hitsPerPage, int nbrOfItems){
		this.hitsPerPage=hitsPerPage;
		this.nbrOfItems=nbrOfItems;
	}

	public void displayPage(ChangePageEvent<I> event) {
		
		//previous code

	}
}

And to use it:


int hitsPerPage=10;
int nbrOfItems=items.size;

PagingComponent<Integer> pagingComponent = new PagingComponent<Integer>(hitsPerPage, item, new MyPagingComponentListener<Integer>(hitsPerPage,nbrOfItems) {

		public void displayPage(ChangePageEvent<Integer> event) {
			super.displayPage(event);
			
			.......

		}
}

Or you can also create an abstract class where you don’t override displayPage method but you create a new method with the code to disable the buttons.


public abstract class MyAbstractPagingComponentListener<I> implements PagingComponentListener<I> {

	//constructor same as above

	protected myMethodeDisableButton(PagingComponent<I> pagingComponent,PageRange<I> pageRange){
		....
	}
}

int hitsPerPage=10;
int nbrOfItems=items.size;

PagingComponent<Integer> pagingComponent = new PagingComponent<Integer>(hitsPerPage, item, new MyAbstractPagingComponentListener<Integer>(hitsPerPage,nbrOfItems) {

		public void displayPage(ChangePageEvent<Integer> event) {
			myMethodeDisableButton((PagingComponent<Integer>)event.getSource(), event.getPageRange())
			
			.......

		}
}

Works fine. Thank u very much for the help :slight_smile:

[size=5]
Hi

If a user is in a particular page, for example say he is has selected the 3rd page, then I wanted to do some CSS changes to that page number button. How can I do that?

Cheers
The Alchemist
[/size]

I’m also interested in doing this, any suggestions?

Thanks,

Mark

Thanks for this component, I like it a lot!

I believe I’ve found a bug, and attached a screenshot. I clicked on last, and the first link on the last set of link was highlighted. Then I clicked on the second last link (p.43) and it highlighted, but the original highlight was still there. Then I clicked on p44, and it didn’t highlight and left the original 2 highlights.

Please let me know if you are going to look into it, otherwise I may…

Thanks,

Mark
11934.png

Hi,

I was not able to reproduce the bug. I think it’s due to your web browser.
You can maybe try with another browser to see if the bug reproduces

Have a nice day

To add some CSS styles, you can do like this:


PagingComponent<Integer> pagingComponent = new PagingComponent<....> .............

//set the style for all buttons
pagingComponent.setStyleNameForAllButtons(BaseTheme.BUTTON_LINK);
//change the color
pagingComponent.addStyleNameForAllButtons("styleRed");
//add the style to the button of current page
pagingComponent.addStyleNameCurrentButtonState("styleBold");

OK, thanks for the style method calls, thats cool!

I found PagingComponent to be a good starting point, but in particular the fact that it loaded every ID into memory was a fatal error in the design. I’m paging throw rows of an SQL query using LIMIT and OFFSET, in a result set that can contain hundreds of rows. So I modified PagingComponent to work this way, and also to disable the First, Previous, Next, and Last links as appropriate on first and last pages.

This isn’t a drop-in updated version though, as I actually removed the ID based code entirely. Perhaps Faton can choose to integrate it. I’m just posting it here to contribute back.


package org.vaadin.pagingcomponent;

import java.io.Serializable;
import java.lang.reflect.Method;
import java.util.ArrayList;
import java.util.List;

import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Component;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.themes.BaseTheme;

/**
 * This class creates a layout to navigate in different pages of results, the layout contains a button "First", "Last", "Previous", "Next" 
 * and as many buttons (called button pages) as the variable "numberOfButtonsPage".
 * Each button has a caption as page number which is updated when navigating.
 * 
 * 
 * Modified by Adam Fanello 2012-06-08: 
 * Original at http://vaadin.com/addon/pagingcomponent   Based on v0.9.1
 * Modified to work strictly off of ranges, rather than having to load every item ID into memory.
 * Disables First, Previous, Next, and Last links as appropriate on first and last pages.
 */
@SuppressWarnings("serial")
public class PagingComponent extends HorizontalLayout implements Button.ClickListener {

    private int numberOfButtonsPage;  // Only ODD numbers (not 10, but 9 or 11 for example), else the algo breaks (because we put the current page in the middle).
    private int buttonPageMargin, numberTotalOfPages, numberOfResults, hitsPerPage, currentPageOfResults;
    private List<ButtonPageNavigator> listButtons;//button corresponding to pages
    private Button buttonPrevious,buttonNext,buttonFirst,buttonLast;
    private HorizontalLayout buttonsPageLayout;
    private List<String> stylesButtonNormal,stylesButtonCurrent;

    // Necessary for the listener  (code copy/pasted from Vaadin's ButtonClickListener, looks heavy but necessary for makeing it work with anonymous Listeners)
    public static final Method METHOD_DISPLAY_PAGE;
    static {
        try {
            METHOD_DISPLAY_PAGE = PagingComponentListener.class.getDeclaredMethod("displayPage", new Class[] { ChangePageEvent.class });
        } catch (final java.lang.NoSuchMethodException e) {
            // This should never happen
            throw new java.lang.RuntimeException("Internal error finding methods in PagingComponent", e);
        }
    }

    public PagingComponent(int hitsPerPage, int collectionSize, PagingComponentListener pagingComponentListener) {
        this(hitsPerPage, 9, collectionSize, pagingComponentListener);
    } 
    
    public PagingComponent(int hitsPerPage, int numberOfButtonsPage, int collectionSize ,PagingComponentListener pagingComponentListener) {
        this.setSpacing(true);

        addListener(pagingComponentListener);
        
        stylesButtonNormal=new ArrayList<String>();
        stylesButtonCurrent=new ArrayList<String>();
        
        this.hitsPerPage = hitsPerPage;
        this.numberOfButtonsPage=numberOfButtonsPage;
        calculateButtonPageMargin();

        currentPageOfResults = 1;
        numberOfResults = collectionSize;
        numberTotalOfPages = (int)Math.ceil((double)numberOfResults/hitsPerPage); //Calculate the number of pages needed: if there are 105 results and we want 10 results/page --> we will get 11 pages

        listButtons=new ArrayList<ButtonPageNavigator>();
        buttonsPageLayout=new HorizontalLayout();
        buttonsPageLayout.setSpacing(true);

        //create buttons of the navigator
        if(numberTotalOfPages==1){
            //example -1-
            createButtonsPage();
            setStyleNameForAllButtons(BaseTheme.BUTTON_LINK);
            
            this.addComponent(new Label("-"));
            this.addComponent(buttonsPageLayout);
            this.addComponent(new Label("-"));
            
        } else {
            buttonFirst=new ButtonNavigator("<< First",this);
            buttonFirst.setEnabled(false);
            buttonPrevious=new ButtonNavigator("< Previous",this);
            buttonPrevious.setEnabled(false);
            createButtonsPage();
            buttonNext=new ButtonNavigator("Next >",this);
            buttonLast=new ButtonNavigator("Last >>",this);
            
            setStyleNameForAllButtons(BaseTheme.BUTTON_LINK);
            
            this.addComponent(buttonFirst);
            this.addComponent(buttonPrevious);
            this.addComponent(new Label("-"));
            this.addComponent(buttonsPageLayout);
            this.addComponent(new Label("-"));
            this.addComponent(buttonNext);
            this.addComponent(buttonLast);
        }

        //throw event for PagingComponentListener and update for the first time RangeDisplayer
        runChangePageEvent();
    }

    @Override
    public void buttonClick(ClickEvent event) {
        int previousPage;
        Button buttonPressed=event.getButton();

        if (buttonPressed==buttonFirst){
            previousPage=currentPageOfResults;
            if(currentPageOfResults!=1){
                currentPageOfResults=1;
                reorganizeButtonsPageNavigator(previousPage);
                runChangePageEvent();
            }
        } else if (buttonPressed==buttonLast){
            previousPage=currentPageOfResults;
            if(currentPageOfResults!=numberTotalOfPages){
                currentPageOfResults=numberTotalOfPages;
                reorganizeButtonsPageNavigator(previousPage);
                runChangePageEvent();
            }
        } else if (buttonPressed==buttonPrevious){ // Management of button previous
            previousPage=currentPageOfResults;
            if(currentPageOfResults!=1){
                currentPageOfResults--;
            } else {
                currentPageOfResults=numberTotalOfPages;
            }
            reorganizeButtonsPageNavigator(previousPage);
            runChangePageEvent();

        } else if (buttonPressed==buttonNext){ // Management of button back
            previousPage=currentPageOfResults;
            if(currentPageOfResults<numberTotalOfPages){
                currentPageOfResults++;
            } else {
                currentPageOfResults=1;
            }
            reorganizeButtonsPageNavigator(previousPage);
            runChangePageEvent();
        } else {// Management of buttons page
            ButtonPageNavigator button=(ButtonPageNavigator)buttonPressed;
            if(currentPageOfResults!=button.getPage()){
                previousPage=currentPageOfResults;
                currentPageOfResults=button.getPage();
                reorganizeButtonsPageNavigator(previousPage);
                runChangePageEvent();
            }
        }
    }
    
    /**
     *Reorganizes the caption of buttons each time we change a page. 
     */
    private void reorganizeButtonsPageNavigator(int previousPage){
        if (numberTotalOfPages>numberOfButtonsPage){ // if we have more pages of results then the number of buttons -> we need to reorganize every button 
            if (currentPageOfResults<=buttonPageMargin){ // current page is in the lower margin
                for(int i=0;i<numberOfButtonsPage;i++){
                    listButtons.get(i).setCaptionCkeckActualPage(i+1);
                }
            } else if(currentPageOfResults>=numberTotalOfPages-buttonPageMargin){ // current page is in the higher margin
                for(int i=numberTotalOfPages,j=numberOfButtonsPage-1;j>=0;i--,j--){
                    listButtons.get(j).setCaptionCkeckActualPage(i);
                }
            } else {
                for(int i=currentPageOfResults-buttonPageMargin,j=0;i<=currentPageOfResults+buttonPageMargin;i++,j++){ // // current page is between in the higher margin
                    listButtons.get(j).setCaptionCkeckActualPage(i);
                }
            }
        } else { //if we have less pages of results then the number of buttons -> we only need to set bold the button of the current page and remove bold at the button of the previous page 
            listButtons.get(previousPage-1).setCaptionNormal();
            listButtons.get(currentPageOfResults-1).setCaptionCurrent();
        }

        if (buttonFirst != null)
        {
          buttonFirst.setEnabled(currentPageOfResults != 1);
          buttonPrevious.setEnabled(currentPageOfResults != 1);
          buttonNext.setEnabled(currentPageOfResults < numberTotalOfPages);
          buttonLast.setEnabled(currentPageOfResults < numberTotalOfPages);
        }
    }

    private void runChangePageEvent(){
      fireEvent(new ChangePageEvent(this, getPageRange()));
    }
    
    private void calculateButtonPageMargin(){
        buttonPageMargin=(int)Math.ceil(numberOfButtonsPage/2);
    }
    
    private void createButtonsPage(){
        if(!listButtons.isEmpty()){
            listButtons.clear();
            buttonsPageLayout.removeAllComponents();
        }
        for(int i=0;i<numberTotalOfPages && i<numberOfButtonsPage;i++){
            ButtonPageNavigator buttonPage=new ButtonPageNavigator(i+1,this);
            listButtons.add(buttonPage);
            buttonsPageLayout.addComponent(buttonPage);
        }
    }
    
    private void refreshStyleOfButtonsPage(){
        for(ButtonPageNavigator button:listButtons){
            button.CheckActualPageAndSetStyle();
        }
    }

    public void addListener(PagingComponentListener listener){
        addListener(ChangePageEvent.class, listener, METHOD_DISPLAY_PAGE);
    }

    public void removeListener(PagingComponentListener listener){
        removeListener(ChangePageEvent.class, listener, METHOD_DISPLAY_PAGE);
    }

    public void setNumberOfButtonsPage(int numberOfButtonsPage){
        if(numberOfButtonsPage%2==1){ //check if the parameter is a odd number
            this.numberOfButtonsPage=numberOfButtonsPage;
            calculateButtonPageMargin();
            createButtonsPage();
            reorganizeButtonsPageNavigator(currentPageOfResults);
        } else {
            throw new RuntimeException("Exception in PagingComponant: The number of buttons Page must be odd (ex: 9, 11, 23, ...) else the algorithme will be broken. You have set this number at "+ numberOfButtonsPage);
        }
    }
    
    public PageRange getPageRange(){
        return new PageRange(currentPageOfResults, hitsPerPage, numberOfResults);
    }

    public List<ButtonPageNavigator> getButtonsPage() {
        return listButtons;
    }

    public Button getButtonPrevious() {
        return buttonPrevious;
    }

    public Button getButtonNext() {
        return buttonNext;
    }

    public Button getButtonFirst() {
        return buttonFirst;
    }

    public Button getButtonLast() {
        return buttonLast;
    }


    /////////////////////////// //**these methods are used to control the style of buttons**
    /////////////////////////// //**these methods are used to control the style of buttons**
    /////////////////////////// //**these methods are used to control the style of buttons**
    /////////////////////////// //**these methods are used to control the style of buttons**
    /////////////////////////// //**these methods are used to control the style of buttons**
    /////////////////////////// //**these methods are used to control the style of buttons**
    /////////////////////////// //**these methods are used to control the style of buttons**
    /////////////////////////// //**these methods are used to control the style of buttons**
    /////////////////////////// //**these methods are used to control the style of buttons**
    /////////////////////////// //**these methods are used to control the style of buttons**
    /////////////////////////// //**these methods are used to control the style of buttons**
    /////////////////////////// //**these methods are used to control the style of buttons**
    /////////////////////////// //**these methods are used to control the style of buttons**
    /////////////////////////// //**these methods are used to control the style of buttons**

    /**
     * Sets the same style to all buttons. First, Previous, 1, 2 ... Next, Last
     */
    public void setStyleNameForAllButtons(String style){
        if (style == null || "".equals(style)) {
            return;
        }
        setStyleNameButtonsPreviousAndNext(style);
        setStyleNameButtonsFirstAndLast(style);
        stylesButtonNormal.clear();
        stylesButtonCurrent.clear();
        stylesButtonNormal.add(style);
        stylesButtonCurrent.add(style);
        refreshStyleOfButtonsPage();
    }

    /**
     * Sets the style to buttons Previous and Next
     */
    public void setStyleNameButtonsPreviousAndNext(String style){
        if (style == null || "".equals(style)) {
            return;
        }
        if (buttonPrevious==null || buttonNext==null){
            return;
        }
        buttonPrevious.setStyleName(style);
        buttonNext.setStyleName(style);
    }

    /**
     * Sets the style to buttons First and Last
     */
    public void setStyleNameButtonsFirstAndLast(String style){
        if (style == null || "".equals(style)) {
            return;
        }
        if (buttonFirst==null || buttonLast==null){
            return;
        }
        buttonFirst.setStyleName(style);
        buttonLast.setStyleName(style);
    }

    /**
     * Sets the style to a button of current page
     */
    public void setStyleNameCurrentButtonState(String style){
        if (style == null || "".equals(style)) {
            return;
        }
        stylesButtonCurrent.clear();
        stylesButtonCurrent.add(style);
        refreshStyleOfButtonsPage();
    }

    /**
     * Sets the style to the buttons that don't correspond to the current page
     */
    public void setStyleNameNormalButtonsState(String style){
        if (style == null || "".equals(style)) {
            return;
        }
        stylesButtonNormal.clear();
        stylesButtonNormal.add(style);
        refreshStyleOfButtonsPage();
    }

    /**
     * Adds an existing style to all buttons
     */
    public void addStyleNameForAllButtons(String style){
        if (style == null || "".equals(style)) {
            return;
        }
        addStyleNameButtonsPreviousAndNext(style);
        addStyleNameButtonsFirstAndLast(style);
        stylesButtonNormal.add(style);
        stylesButtonCurrent.add(style);
        refreshStyleOfButtonsPage();
    }
    
    /**
     * Adds an existing style to buttons Previous and Next
     */
    public void addStyleNameButtonsPreviousAndNext(String style){
        if (style == null || "".equals(style)) {
            return;
        }
        if (buttonPrevious==null || buttonNext==null){
            return;
        }
        buttonPrevious.addStyleName(style);
        buttonNext.addStyleName(style);
    }

    /**
     * Adds an existing style to buttons First and Last
     */
    public void addStyleNameButtonsFirstAndLast(String style){
        if (style == null || "".equals(style)) {
            return;
        }
        if (buttonFirst==null || buttonLast==null){
            return;
        }
        buttonFirst.addStyleName(style);
        buttonLast.addStyleName(style);
    }

    /**
     * Adds an existing style to a button of current page
     */
    public void addStyleNameCurrentButtonState(String style){
        if (style == null || "".equals(style)) {
            return;
        }
        stylesButtonCurrent.add(style);
        refreshStyleOfButtonsPage();
    }

    /**
     * Adds an existing style to the buttons that don't correspond to the current page
     */
    public void addStyleNameNormalButtonsState(String style){
        if (style == null || "".equals(style)) {
            return;
        }
        stylesButtonNormal.add(style);
        refreshStyleOfButtonsPage();
    }
    
    ////////////////////////////////////////////// INNER CLASS /////////////////////////////////////
    ////////////////////////////////////////////// INNER CLASS /////////////////////////////////////
    ////////////////////////////////////////////// INNER CLASS /////////////////////////////////////
    ////////////////////////////////////////////// INNER CLASS /////////////////////////////////////
    ////////////////////////////////////////////// INNER CLASS /////////////////////////////////////
    
    /**
     * Button link used for buttons around the page buttons.
     */
    private static class ButtonNavigator extends Button {

        public ButtonNavigator() {
            setImmediate(true);
        }

        public ButtonNavigator(String caption, ClickListener listener) {
            super(caption, listener);
            setImmediate(true);
        }
    }

    /**
     * Button link used for buttons of pages
     */
    private class ButtonPageNavigator extends ButtonNavigator {
        private int page;

        public ButtonPageNavigator(int page) {
            setCaptionCkeckActualPage(page);
        }

        public ButtonPageNavigator(int page, ClickListener listener) {
            this(page);
            addListener(listener);
        }

        public void setCaptionCkeckActualPage(int page){
            setPage(page);
            CheckActualPageAndSetStyle();
        }
        
        public void CheckActualPageAndSetStyle(){
            if (page==currentPageOfResults){
                setCaptionCurrent();
            }else{
                setCaptionNormal();
            }
        }

        public void setCaptionCurrent(){
            setStylesName(stylesButtonCurrent);
            focus();
        }

        public void setCaptionNormal(){
            setStylesName(stylesButtonNormal);
        }

        public void setPage(int page){
            this.page=page;
            setCaption(String.valueOf(page));
        }

        public int getPage(){
            return page;
        }
        
        private void setStylesName(List<String> styles){
            if(!styles.isEmpty()){
                setStyleName(styles.get(0));
                for(int i=1;i<styles.size();i++){
                    addStyleName(styles.get(i));
                }
            }
        }
    }

    /**
     * Calculates the list of items which will be displayed.
     */
    public static class PageRange{
        private int indexPageStart, indexPageEnd;

        public PageRange(int currentPageOfResults, int hitsPerPage, int collectionSize) {
            indexPageStart=(currentPageOfResults-1)*hitsPerPage;
            indexPageEnd=currentPageOfResults*hitsPerPage;
            if (indexPageEnd>=collectionSize){
                indexPageEnd=collectionSize;
            }
        }

        public int getIndexPageStart() {
            return indexPageStart;
        }

        public int getIndexPageEnd() {
            return indexPageEnd;
        }
    }

    /** Listens when changing a page */
    public static interface PagingComponentListener extends Serializable {
        public void displayPage(ChangePageEvent event);
    }

    /** It's fired when changing a page*/
    public static class ChangePageEvent extends Event{
        private PageRange pageRange;

        public ChangePageEvent(Component source, PageRange pageRange) {
            super(source);
            this.pageRange=pageRange;
        }

        public PageRange getPageRange(){
            return pageRange;
        }
    }
}

This new version contains no break code and add some functionalities:

  • Code improvement.
  • The PagingComponent can take an even or odd number of buttons to navigate between the different pages.
  • Lazy loading can be done with the FakeList which takes in parameter the number of items to paginate.
  • If you want to style the PagingComponent by CSS without coding, you can give a CssCustomizerAdaptator (see JavaDoc) in parameter to the PagingComponent constructor.
  • You can more easilly customize buttons with :
    [indent]
    - ElementsCustomizer allows you to create or not your buttons and separators.
    - StyleCustomizer provides methods to style the buttons according to their state and also to change their label. For example, you can set the label of the button that has the current page number between bracket like this 1 2 [3]
    5 …
    - GlobalCustomizer regroup these ones.
    [/indent]

You are right. The version 0.9.2 solves this problem by using the FakeList. This one take in parameter only the number of items to paginate. Afterward, you can fetch them in the PagingComponentListener.

Hi Gaetan,

Great about the latest updates, it makes the component usable for us, thank you!

I would love to do what you mentioned:

Do you have an example how to do so? I tried but was quickly running into walls like there is a

pagingComponent.getComponentsManager().getButtonsStyleCustomizer()

but no corresponding set method, making it impossible to override the existing one with new behaviour for just one method, like:

styleButtonPageCurrentPage

and I couldn’t create/override the BackwardCompatibilityStyleCustomizer because it takes a ComponentsManager in the constructor.

Thanks!

Mark

Hi,

Unfortunately there is no way to do that easily with the BackwardCompatibilityStyleCustomizer. It should be removed in a next major release and consequently it adds no new features.

The only way to put the current page number between brackets is to override the StyleCustomizer (or GlobalCustomizer) but in this case the style methods in the PagingComponent become inoperative.

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

        // Set style to a button page with the curent page number.
        @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();
        }

        // Allow to set style of the other buttons (like button first, previous, separator, ...)
        @Override
        public void styleTheOthersElements(ComponentsManager manager, ElementsBuilder builder) {
                // if the number of pages is less than 2, the other buttons (like button first, previous, ...) are not created.
                if (manager.getNumberTotalOfPages() < 2) {
                    return;
                }
                ................
        }

};

You should give it as parameter to the PagingComponent.

// The StyleCustomizer (named styler) is given in parameter
final PagingComponent<Integer> pagingComponent = new PagingComponent<Integer>(10, 10, item, styler, new PagingComponentListener<Integer>() {
        @Override
        public void displayPage(ChangePageEvent<Integer> event) {
                itemsArea.removeAllComponents();

                for (Integer item : event.getPageRange().getItemsList()){
                    itemsArea.addComponent(new Label(String.valueOf(item)));
                }
        }
});

For more examples, you can see PagingComponentApplication class.