Creating GUI with Examples

Creating a GUI

We will prefer Functional structure here, but feel free to do the same with OOP instances:
★ GUI, AnimatedGUI
★ StaticContainer
★ PagedContainer
★ Element, AnimatedElement, ...

You can find all the component classes in the library code.

Functional way ➀

The most recent way of doing this is by component builders using Component class.

GUI gui = Component.gui()
    .title("My cute GUI") // The GUI title
    .rows(6) // Number of GUI rows
    .prepare((gui, player) -> { // Code that is executed when the GUI is being built
        // TODO: GUI init code
    })
    .build();

In the prepare() function, we'll assign our content to the GUI.
Note: The function is executed before the GUI is being rendered to the player, so if we want to make future changes, we need to run update() function to rerender the content.

OOP way ➁

An alternative solution is creating the GUI using OOP interitance.

public class MyAwesomeGUI extends GUI {
    public MyAwesomeGUI() {
        super("My cute GUI", 6);
    }

    @Override
    public void build(Player p) {
        // TODO: GUI init code
    }
}

Building content

As said before, we use the build or prepare function to assign our GUI content, so let's cover some basics here.
Learning by examples is the best, right?

Assigning element statically to index

GUI gui = Component.gui()
    .title("My cute GUI")
    .rows(6)
    .prepare((gui, player) -> {
        // Assign components
        gui.setElement(4, Component.element()
            .click(info -> {
                Player whoClicked = info.getPlayer();
                whoClicked.sendMessage("You closed the GUI!");
                whoClicked.closeInventory();
            })
            .item(Items.create(Material.REDSTONE_BLOCK, "§c§lClose GUI"))
            .build());
    })
    .build();

Assigning static container

GUI gui = Component.gui()
    .title("My cute GUI")
    .rows(6)
    .prepare((gui, player) -> {
        // Assign components
        gui.setContainer(9, Component.staticContainer()
            .size(6, 1) // Width, height of a container
            .init(container -> {
                 // Assign components to container
                 Element spacerElement = Component.element(Items.blank(Material.BLACK_STAINED_GLASS_PANE)).build();
                 container.fillElement(spacerElement);
            })
            .build());
    })
    .build();

Assigning paginated container

GUI gui = Component.gui()
    .title("My cute GUI")
    .rows(6)
    .prepare((gui, player) -> {
        // Assign components
        PagedContainer serversContainer = Component.pagedContainer()
            .size(6, 2)
            .init(container -> {
                  // Assign container content
                  names.forEach(serverName -> {
                      container.appendElement(Component.element()
                          .click(info -> {
                              // TODO: Join player to a server
                          })
                          .item(new ItemBuilder()
                              .withType(Material.PAPER)
                              .withName("§a§l" + serverName)
                              .withLore()
                              .blank()
                              .line("§7Click to join the server!")
                              .and().build())
                          .build());
                  });
            })
            .build();
        gui.setContainer(18, serversContainer);
        gui.setElement(48, new PagingArrowElement(serversContainer, true, "§a§lPrevious page"));
        gui.setElement(50, new PagingArrowElement(serversContainer, false, "§a§lNext page"));
    })
    .build();

Manually manipulating components on click

GUI gui = Component.gui()
    .title("My cute GUI")
    .rows(6)
    .prepare((gui, player) -> {
        // Assign components
        PagedContainer serversContainer = Component.pagedContainer()
            .size(6, 2)
            .init(container -> {
                  // Assign container content
                  names.forEach(serverName -> {
                      container.appendElement(Component.element()
                          .click(info -> {
                              // TODO: Join player to a server
                          })
                          .item(new ItemBuilder()
                              .withType(Material.PAPER)
                              .withName("§a§l" + serverName)
                              .withLore()
                              .blank()
                              .line("§7Click to join the server!")
                              .and().build())
                          .build());
                  });
            })
            .build();
        gui.setContainer(18, serversContainer);
        gui.setElement(50, Component.element()
            .click(info -> { // On click change page manually
                serversContainer.nextPage();
                gui.update(info.getPlayer()); // !!! Rerender GUI after changes
            })
            .item(Items.create(Material.ARROW, "§a§lNext page"))
            .build());
    })
    .build();

Full server selector example

List<String> names = new ArrayList<>();

GUI gui = Component.gui()
    .title("My cute GUI")
    .rows(6)
    .prepare((gui, player) -> {
        // Assign components
        gui.setElement(4, Component.element()
            .click(info -> {
                Player whoClicked = info.getPlayer();
                whoClicked.sendMessage("You closed the GUI!");
                whoClicked.closeInventory();
            })
            .item(Items.create(Material.REDSTONE_BLOCK, "§c§lClose GUI"))
            .build());
        gui.setContainer(9, Component.staticContainer()
            .size(6, 1) // Width, height of a container
            .init(container -> {
                 // Assign components to container
                 Element spacerElement = Component.element(Items.blank(Material.BLACK_STAINED_GLASS_PANE)).build();
                 container.fillElement(spacerElement);
            })
            .build());

        PagedContainer serversContainer = Component.pagedContainer()
            .size(6, 2)
            .init(container -> {
                  // Assign container content
                  names.forEach(serverName -> {
                      container.appendElement(Component.element()
                          .click(info -> {
                              // TODO: Join player to a server
                          })
                          .item(new ItemBuilder()
                              .withType(Material.PAPER)
                              .withName("§a§l" + serverName)
                              .withLore()
                              .blank()
                              .line("§7Click to join the server!")
                              .and().build())
                          .build());
                  });
            })
            .build();
        gui.setContainer(18, serversContainer);
        gui.setElement(48, new PagingArrowElement(serversContainer, true, "§a§lPrevious page"));
        gui.setElement(50, new PagingArrowElement(serversContainer, false, "§a§lNext page"));
    })
    .build();

gui.open(player);