Paged GUI - NichtStudioCode/InvUI Wiki

Original URL: https://github.com/NichtStudioCode/InvUI/wiki/Paged-GUI

Every GUI is an instance of Controllable. This means that it can contain one or multiple ControlItems, which would be the page forward and backwards buttons in this case.

First, we'll need to create an Item for going a page back:

public class BackItem extends PageItem {
    
    public BackItem() {
        super(false);
    }
    
    @Override
    public ItemBuilder getItemProvider(PagedGUI gui) {
        ItemBuilder builder = new ItemBuilder(Material.RED_STAINED_GLASS_PANE);
        builder.setDisplayName("§7Previous page")
            .addLoreLines(gui.hasPageBefore()
                ? "§7Go to page §e" + gui.getCurrentPageIndex() + "§7/§e" + gui.getPageAmount()
                : "§cYou can't go further back");
        
        return builder;
    }
    
}

This is an example for an Item that goes a page forward:

public class ForwardItem extends PageItem {
    
    public ForwardItem() {
        super(true);
    }
    
    @Override
    public ItemBuilder getItemProvider(PagedGUI gui) {
        ItemBuilder builder = new ItemBuilder(Material.GREEN_STAINED_GLASS_PANE);
        builder.setDisplayName("§7Next page")
            .addLoreLines(gui.hasNextPage()
                ? "§7Go to page §e" + (gui.getCurrentPageIndex() + 2) + "§7/§e" + gui.getPageAmount()
                : "§cThere are no more pages");
        
        return builder;
    }
    
}

(More information about ControlItems in the [[Items]] section)

Now that we've created the ControlItems, let's make the actual GUI:

Item border = new SimpleItem(new ItemBuilder(Material.BLACK_STAINED_GLASS_PANE).setDisplayName("§r"));

// an example list of items to display
List<Item> items = Arrays.stream(Material.values())
    .filter(material -> !material.isAir() && material.isItem())
    .map(material -> new SimpleItem(new ItemBuilder(material)))
    .collect(Collectors.toList());

// create the gui
GUI gui = new GUIBuilder<>(GUIType.PAGED_ITEMS, 9, 4)
    .setStructure("" +
        "# # # # # # # # #" +
        "# x x x x x x x #" +
        "# x x x x x x x #" +
        "# # # < # > # # #")
    .addIngredient('x', Markers.ITEM_LIST_SLOT) // where paged items should be put
    .addIngredient('#', border)
    .addIngredient('<', new BackItem())
    .addIngredient('>', new ForwardItem())
    .setItems(items)
    .build();

// show the window
new SimpleWindow(player, "InvUI", gui).show();

In-game, it will look like this:

Instead of using Items, you can also use whole GUIs as pages. In the following example I used two slightly different versions of the GUI created above and added them as pages. Now I can switch between two paged GUIs.

GUI gui = new GUIBuilder<>(GUIType.PAGED_GUIs, 9, 5)
    .setStructure("" +
        "x x x x x x x x x" +
        "x x x x x x x x x" +
        "x x x x x x x x x" +
        "x x x x x x x x x" +
        ". . < . . . > . .")
    .addIngredient('x', Markers.ITEM_LIST_SLOT) // where paged items should be put (in this case: the parts of the nested GUI)
    .addIngredient('<', new BackItem())
    .addIngredient('>', new ForwardItem())
    .setGUIs(Arrays.asList(page1GUI, page2GUI))
    .build();

// show the window
new SimpleWindow(player, "InvUI", gui).show();

In-game it looks like this: