max1mde / AG-Wiki

Non-official wiki of the plugin advanced gui

AdvancedGui API Wiki (Unofficial)

You are using the AdvancedGUI API and the official wiki has not enough information for you?

Here you can find some ideas and examples how to implement things using the API.

TABLE OF CONTENTS

• Basics (For a more detailed explanation of some things look at the official wiki)
  • Installation
  • Your extension
  • Events
  • Access components
  • Click actions
• Custom components & more
  • Creating your own component
  • The list component
• My ideas
  • Remove the block selection box
  • Cache remote images
• Examples
  • Example custom component
  • Saving current interactions
  • ListComponent example

---

Installation

Note

v2.2.2 is not the newest AdvancedGUI version
But it is the latest version here

Gradle

• Groovy

  Add the following code to your build.gradle file

  repositories {
    maven {
      name ="leoko-dev"
      url = "https://repo.leoko.dev/releases"
    }
  }
      
  dependencies {
    compileOnly "me.leoko.advancedgui:AdvancedGUI:2.2.2"
  }

• Kotlin

  Add the following code to your build.gradle.kts file

  repositories {
      maven("leoko-dev") {
          setUrl("https://repo.leoko.dev/releases")
      }
  }
      
  dependencies {
      compileOnly("me.leoko.advancedgui:AdvancedGUI:2.2.2")
  }

Maven

Add the following code to your pom.xml file

<repository>
    <id>leoko-dev</id>
    <url>https://repo.leoko.dev/releases</url>
</repository>

<dependency>
    <groupId>me.leoko.advancedgui</groupId>
    <artifactId>AdvancedGUI</artifactId>
    <version>2.2.2</version>
    <scope>provided</scope>
</dependency>

Add this to your plugin.yml depend: [AdvancedGUI]

---

Your layout extension

• Create a new class
• Add implements LayoutExtension to your class

import me.leoko.advancedgui.utils.LayoutExtension;

public class MyLayout implements LayoutExtension {

}

• Register the class in your onEnable()

@Override
public void onEnable() {
    LayoutManager.getInstance().registerLayoutExtension(new MyLayout(), this);
}

---

AdvancedGui Events

There are 5 events in AdvancedGUI

1. GuiInteractionBeginEvent
2. GuiInteractionExitEvent
3. GuiWallInstanceRegisterEvent
4. GuiWallInstanceUnregisterEvent
5. LayoutLoadEvent

We will start with the LayoutLoadEvent That event is called once (on server start up when a layout is loaded)

import me.leoko.advancedgui.utils.Layout;
import me.leoko.advancedgui.utils.LayoutExtension;
import me.leoko.advancedgui.utils.components.GroupComponent;
import me.leoko.advancedgui.utils.events.LayoutLoadEvent;
import org.bukkit.event.EventHandler;

public class MyLayout implements LayoutExtension {
    private final String LAYOUT_NAME = "MyLayout";

    @Override
    @EventHandler
    public void onLayoutLoad(LayoutLoadEvent event) {
        Layout layout = event.getLayout();
        if (!layout.getName().equals(LAYOUT_NAME)) return;
        GroupComponent componentTree = layout.getTemplateComponentTree();
        // Here you can for example edit the layout template which is sent to every player in the GuiInteractionBeginEvent
        // You can also specify click actions here
    }

}

There is also the GuiInteractionBeginEvent and GuiInteractionExitEvent which will also be used in the following examples

public class MyLayout implements LayoutExtension {
    private final String LAYOUT_NAME = "MyLayout";

    @Override
    @EventHandler
    public void onLayoutLoad(LayoutLoadEvent event) {
        // ...
    }

    @EventHandler
    private void onLayoutJoin(GuiInteractionBeginEvent event) {
        Layout layout = event.getInteraction().getLayout();
        if (!layout.getName().equals(LAYOUT_NAME)) return;
        Player player = event.getPlayer();
        GroupComponent playerComponentTree = event.getInteraction().getComponentTree();
        // If you edit the components in the playerComponentTree
        // it will only change them for the player in this event
    }

    @EventHandler
    public void onLayoutLeave(GuiInteractionExitEvent event) {
        Layout layout = event.getInteraction().getLayout();
        if (!layout.getName().equals(LAYOUT_NAME)) return;
        Player player = event.getPlayer();
        // This event will be called when a player is out of the display radius
    }

}

---

Access components

Note

There are many different components...
TextComponent, HoverComponent, ImageComponent RectComponent...

Important

If you modify a component in the LayoutLoadEvent only the template of the layout will be changed.
That means it will change the components for everyone who loads the layout again after that.
In the GuiInteractionBeginEvent a copy of that layout will be sent the player then.

If you want to modify a component for a specific player and not for everyone use the GuiInteractionBeginEvent and use event.getInteraction().getComponentTree() to get the component tree instead of layout.getTemplateComponentTree()

public class MyLayout implements LayoutExtension {
    private final String LAYOUT_NAME = "MyLayout";

    @Override
    @EventHandler
    public void onLayoutLoad(LayoutLoadEvent event) {
        Layout layout = event.getLayout();
        if (!layout.getName().equals(LAYOUT_NAME)) return;
        GroupComponent componentTree = layout.getTemplateComponentTree();
        // You can simply get a component by the ID
        Component component = componentTree.locate("COMPONENT-ID");

        // Or a specific component
        TextComponent textComponent = componentTree.locate("COMPONENT-ID", TextComponent.class);
        textComponent.setText("Hello world!");

        ImageComponent imageComponent = componentTree.locate("COMPONENT-ID", ImageComponent.class);
        imageComponent.setImage(/*Your Image*/);
        
        RectComponent rectComponent = componentTree.locate("COMPONENT-ID", RectComponent.class);
        rectComponent.setColor(Color.RED);
    }

}

---

Click actions

public class MyLayout implements LayoutExtension {
    private final String LAYOUT_NAME = "MyLayout";

    @Override
    @EventHandler
    public void onLayoutLoad(LayoutLoadEvent event) {
        Layout layout = event.getLayout();
        if (!layout.getName().equals(LAYOUT_NAME)) return;
        GroupComponent componentTree = layout.getTemplateComponentTree();
        // Get the component by the ID
        Component component = componentTree.locate("COMPONENT-ID");

        component.setClickAction((interaction, player, primaryTrigger) -> {
            // Do what every you want here
            player.sendMessage("You clicked the component");
            player.playSound(player.getLocation(), Sound.UI_BUTTON_CLICK, 1F, 1F);
        });

    }

}

---

Custom components

Important

If you want to use a custom component in your layout you first need to manually add a dummy component after that you can insert your component in the dummy component

public class MyLayout implements LayoutExtension {
    private final String LAYOUT_NAME = "MyLayout";

    @Override
    @EventHandler
    public void onLayoutLoad(LayoutLoadEvent event) {
        Layout layout = event.getLayout();
        if (!layout.getName().equals(LAYOUT_NAME)) return;
        GroupComponent componentTree = layout.getTemplateComponentTree();
        // Create your component
        DummyComponent dummyComponent = componentTree.locate("COMPONENT-ID", DummyComponent.class);
        // Insert your component into the dummy component
        dummyComponent.setComponent(YourCustomComponent);
    }

}

Creating your own component

• Create a new class which extends the CustomComponent class

Here is an example for a simple hover component with a text and background

public class ExampleComponent extends CustomComponent {
    public ExampleComponent(String text, int x, int y, Interaction interaction) {
        super(interaction);

        final Font textFont = ResourceManager.getInstance().getFont("Roboto", 23);

        final GroupComponent normal = new GroupComponent("", null, false, interaction, Arrays.asList(
                new TextComponent("", null, false, interaction, x, y, textFont, text, Color.RED, TextComponent.Alignment.CENTER),
                new RectComponent("", null, false, interaction, x, y, 202, 135, new Color(86, 65, 47), 10)
        ));
        final GroupComponent hovered = new GroupComponent("", null, false, interaction, Arrays.asList(
                new TextComponent("", null, false, interaction, x, y, textFont, text, Color.WHITE, TextComponent.Alignment.CENTER),
                new RectComponent("", null, false, interaction, x, y, 202, 135, new Color(49, 40, 32), 10)
        ));

        this.component = new HoverComponent("", new Action() {
            @Override
            public void execute(Interaction interaction, Player player, boolean primaryTrigger) {
                player.sendMessage("You clicked your custom component!");
            }
        }, false, interaction, normal, hovered);
    }
}

Now you can insert your custom component in your dummy component

    @Override
    @EventHandler
    public void onLayoutLoad(LayoutLoadEvent event) {
        ...
        DummyComponent dummyComponent = componentTree.locate("COMPONENT-ID", DummyComponent.class);

        ExampleComponent exampleComponent new ExampleComponent("Hello world!", 100, 100, event.getLayout().getDefaultInteraction());
        dummyComponent.setComponent(exampleComponent);
    }

The list component

Note

The list component works completely different in the api than in the web editor

Because the list component is way more complicated the documentation is located here