AdditionalOptionsComponent - ParzivalExe/guiapi GitHub Wiki

This may be the most advanced Component implemented into GuiAPI right now but DON'T WORRY, it is still pretty simple to use.

The AdditionOptionsComponent contains a List of Components that will be displayed when you click this Component in one of two ways: Inside a new Gui/Inventory or directly under the AdditionOptionsComponent inside one or more new Lines that are created.

When the Components are inserted in the line under this Component, all the other Components that might have been in this line before are pushed down one line. In this case you can then click the AdditionalOptionsComponent again and the additional Components will be removed again and the Gui should return to it's original state.

Well, as already said in the Overview this might be the complicated Component in the GuiAPI right now, so ... here we go:

To Implement a AdditionalOptionsComponent we need to write the following code:

//Create Options
StaticComponent orange = new StaticComponent(new ComponentMeta("Orange", new ItemStack(Material.WOOL, 1, (short) 0, (byte) 1)));
StaticComponent magenta = new StaticComponent(new ComponentMeta("Magenta", new ItemStack(Material.WOOL, 1, (short) 0, (byte) 2)));
StaticComponent lightBlue = new StaticComponent(new ComponentMeta("Light Blue", new ItemStack(Material.WOOL, 1, (short) 0, (byte) 3)));
StaticComponent yellow = new StaticComponent(new ComponentMeta("Yellow", new ItemStack(Material.WOOL, 1, (short) 0, (byte) 4)));
StaticComponent lime= new StaticComponent(new ComponentMeta("Lime", new ItemStack(Material.WOOL, 1, (short) 0, (byte) 5)));
//Create ArrayList of Components
ArrayList<Component> additionalOptions = new ArrayList<Component>();
additionalOptions.add(orange);
additionalOptions.add(magenta);
additionalOptions.add(lightBlue);
additionalOptions.add(yellow);
additionalOptions.add(lime);

ComponentMeta optionsMeta = new ComponentMeta("Wool-Types", new ItemStack(Material.WOOL));
//manipulate optionsMeta here
AdditionalOptionsComponent optionsComponent = new AdditionalOptionsComponent(optionsMeta, additionalOptions);
//manipulate optionsComponent here
            
gui.addComponent(optionsComponent);

Well, that wasn't that complicated. When you now open the Gui, you will see a White Wool-Block that reveals your colored wool neatly in order in the inventory-line right under the AdditionalOptionsComponent. After you clicked a second time onto your AdditionalOptionsComponent, the additionalOptions will disappear again.

Now, we can make this a bit more complicated by defining the place of your additionalOptions-Components. If we set a place for one of them, this place will be relative to the position it is spawned in. So, we could center your additionalOptions by adding this after their creation:

orange.setPlace(2);
magenta.setPlace(3);
lightBlue.setPlace(4);
yellow.setPlace(5);
lime.setPlace(6);

Just try it out to see, how this really affects the components.

Of course, these additionalComponents are not limited to just StaticComponents. You could also take any other Component including your own or even another AdditionalOptionsComponent and it would work just as well. I simply used StaticComponents because they are the easiest to implement and therefore produce the least amount of unimportant code for this example.

The main implementation I though of when creating this Component by the way was a shop in some Mini-Game where you first choose a category (swords for example) and then the sword-type you want to purchase.

There is also another option for these additionalOptions to be shown because you can change a field called openOptions by calling setOpenOption(OpenOption). Here you can change from OpenOption.UNDER_INVENTORY to OpenOption.NEW_INVENTORY which then opens all the additionalOptions inside a new gui/inventory. The main difference to underInventory is here, that you can't go back to the Gui as it was before.

For this New Inventory you can then also set a title via setNewInvTitle(String). If you don't set any title, the title of this new Inventory will be the same as your AdditionalOptionsComponent.

ComponentClickedEvent = fired, when the AdditionalOptionsComponent (or any other Component) is clicked

ExpandAdditionalOptionsEvent = fired, when the AdditionalOptionsComponent is clicked and either expanded or decreased.

title="{Component-Title}" = sets the Title of this Component (example: title="Hello World")

look="{AMOUNT}xID:{DATA}{[DURABILITY]}" = sets the Look of this Component (example: look="3x322:1" or look="3xGOLDEN_APPLE")

description="[{line1}, {line2}...]" = sets the description of this Component (example: description="[This is a Description, with a \,]")

place="{PLACE}" = sets the place this Component should be placed at in the Gui (example: place="4")

openOption="newInventory | underInventory" = sets how the additionalOptions are displayed, either under the component or in a new gui/inventory (example: openOption="underInventory")

newInvTitle="{title}" = sets the title of the new Inventory if openOption is set to NewInventory (example: newInvTitle="TestTitle")

Inside the Tag <AdditionalOptionsComponent>{Content}</AdditionalOptionsComponent> we must specify all the Components that should be additionalComponents (all the components inside the ArrayList in the Java-Code). Here is the same component in the Implementation-Part of this Tutorial in XML:

<AdditionalOptionsComponent title="Wool-Types" look="35">
    <StaticComponent title="Orange" look="35:1" place="2"/>
    <StaticComponent title="Magenta" look="35:2" place="3"/>
    <StaticComponent title="Light Blue" look="35:3" place="4"/>
    <StaticComponent title="Yellow" look="35:4" place="5"/>
    <StaticComponent title="Lime" look="35:5" place="6"/>
</AdditionalOptionsComponent>

Component-Code: io.github.parzivalExe.guiApi.components.AdditionalOptionsComponent

Great, now you know how to implement a AdditionalOptionsComponent with a few lines. Next Component on the List is YesNoOption