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.
- Basics (For a more detailed explanation of some things look at the official wiki)
- Custom components & more
- My ideas
- Examples
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
filerepositories { 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
filerepositories { 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]
- 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);
}
There are 5 events in AdvancedGUI
- GuiInteractionBeginEvent
- GuiInteractionExitEvent
- GuiWallInstanceRegisterEvent
- GuiWallInstanceUnregisterEvent
- 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
}
}
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);
}
}
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);
});
}
}
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);
}
}
- 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);
}
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