How to use the PagedComponent

[Ling-Ink]

Is this code correct?

<gui title="§eTag" width="9" height="2">
    <component type="item" material="IRON_BLOCK" name="§eBack">
        <on-click type="action">[container:previous]</on-click>
    </component>
    <component type="item" x="8" material="DIAMOND_BLOCK" name="§eNext">
        <on-click type="action">[container:next]</on-click>
    </component>
    <component type="paged" id="container" y="1" width="9" height="1" interactions="true"
            pattern="0,1,2,3,4,5,6,7,8">
        <fill-empty type="item" material="GLASS_PANE">
            <on-click type="action">[message] Nothing here</on-click>
        </fill-empty>
        <page>
            <component type="item" x="1" material="EMERALD_BLOCK" name="§ePage 1">
                <on-click type="action">[message] Page 1</on-click>
            </component>
        </page>
        <page>
            <component type="item" x="7" material="REDSTONE_BLOCK" name="§ePage 2">
                <on-click type="action">[message] Page 2</on-click>
            </component>
        </page>
    </component>
</gui>

[ToberoCat]

Looks right, except the part where you define the pages manually in the component. All compontens get assigned a page, x and y automatically based on your pattern provided.

A version that would fix the component might look like this:

<component type="paged" id="container" y="1" width="9" height="1" interactions="true"
            pattern="0,1,2,3,4,5,6,7,8">
        <fill-empty type="item" material="GLASS_PANE">
            <on-click type="action">[message] Nothing here</on-click>
        </fill-empty>
            <component type="item" material="EMERALD_BLOCK" name="§eItem 1">
                <on-click type="action">[message] Page 1</on-click>
            </component>
            <component type="item" material="REDSTONE_BLOCK" name="§eItem 2">
                <on-click type="action">[message] Page 2</on-click>
            </component>
    </component>

Btw sorry for the bad code style, I'm on mobile and it's not that great to edit code on there.

Basically what the component does, it takes your all items you give it in the body and places them in the slots you defined in the pattern attribute. When the last slot in the pattern is reached, it will create a new page and start assigning the items to the pattern from the beginning again

[Ling-Ink]

It displayed in game looks like this:

If I wanted to move two items below to right, how can I do this, add a "x" property to component or what

By the way, the code for this image is already added the "x" property

[ToberoCat]

All you have to do is adjust the pattern. Take a look at a chest UI with the slots. Then you can change the order of the slots / remove slots / add other slots

[Ling-Ink]

Um... whitch pattern?

Btw when it has nine items, it will switch to next page when I clicked Next Button. Is it normal?

[ToberoCat]

The property pattern. In the example you sent above, it's set to 0,1,2,3,4,5,6,7,8

You mean the page is empty with just nine components? If that's the case, I'll have to see and fix that

[Ling-Ink]

The property pattern. In the example you sent above, it's set to 0,1,2,3,4,5,6,7,8

Ok, it works

You mean the page is empty with just nine components? If that's the case, I'll have to see and fix that

This is the testing code:

<gui title="§eTag" width="9" height="2">
    <component type="item" material="IRON_BLOCK" name="§eBack">
        <on-click type="action">[container:previous]</on-click>
    </component>
    <component type="item" x="8" material="DIAMOND_BLOCK" name="§eNext">
        <on-click type="action">[container:next]</on-click>
    </component>
    <component type="paged" id="container" y="1" width="9" height="1" interactions="true"
            pattern="0,1,2,3,4,5,6,7,8">
        <component type="item" material="EMERALD_BLOCK" name="§eItem 1">
            <on-click type="action">[message] Item 1</on-click>
        </component>
        <component type="item" material="REDSTONE_BLOCK" name="§eItem 2">
            <on-click type="action">[message] Item 2</on-click>
        </component>
        <component type="item" material="REDSTONE_BLOCK" name="§eItem 3">
            <on-click type="action">[message] Item 3</on-click>
        </component>
        <component type="item" material="REDSTONE_BLOCK" name="§eItem 4">
            <on-click type="action">[message] Item 4</on-click>
        </component>
        <component type="item" material="REDSTONE_BLOCK" name="§eItem 5">
            <on-click type="action">[message] Item 5</on-click>
        </component>
        <component type="item" material="REDSTONE_BLOCK" name="§eItem 6">
            <on-click type="action">[message] Item 6</on-click>
        </component>
        <component type="item" material="REDSTONE_BLOCK" name="§eItem 7">
            <on-click type="action">[message] Item 7</on-click>
        </component>
        <component type="item" material="REDSTONE_BLOCK" name="§eItem 8">
            <on-click type="action">[message] Item 8</on-click>
        </component>
        <component type="item" material="REDSTONE_BLOCK" name="§eItem 9">
            <on-click type="action">[message] Item 9</on-click>
        </component>
    </component>
</gui>

When I opened the menu:

And then, I clicked the Next button(Diamond Block):

If I remove the Item 9, nothing will happen when I clicken Next button(It is correctly)

[Ling-Ink]

It seems that when the last slot of line have item, then click the Next button will switch to an empty page

And when I click the item below, the page will become like this(no matter the on-click is exists):

The line above will be replaced by copy of the line below
If the height of PagedComponent is 2:

But the item is still work on its location. For example, if I clicked the Emerald Block, it still execute what Iron Block do

[ToberoCat]

Alright. Good the see that it kinda works. Once I'm home from work I'll take a look at it and see if I can fix it

[Ling-Ink]

Btw when it has nine items, it will switch to next page when I clicked Next Button. Is it normal?

I fixed this problem in Pull Request

It caused because when adding the last item, the currentPatternIndex < pattern.length will be false then create a new empty page, but there is no more items so it left an empty page behind

[ToberoCat]

Alright, thanks. I'll take a look at it

[ToberoCat]

Okay, approved & merged the pull request. Thanks for fixing it again. You can close the issue if you no longer need something

[Ling-Ink]

There is still have problem here
I'm working on it but have no progress

[ToberoCat]

Can you send me the gui file that produced this gui? I'll take a look at it

[Ling-Ink]

The gui code is same as this

[Ling-Ink]

The line above will be replaced by copy of the line below

I fixed this in Pull Request with details because maybe it will have better solution

[ToberoCat]

Oh, thank you. I'll take a look at it. I've got stuck in a rabbit hole of fixing the paged component's api, as the code for the paged component isn't really that great.

[ToberoCat]

Fixed it based on your observations with a cleaner implementation

[Ling-Ink]

Besides, could I share this plugin to mcbbs.net, a Minecraft forum in China? I will forward the download link to Github

[ToberoCat]

Yeah, sure. As long as it stays free and open source you should be able to do it form the license side.

For me it wouldn't be an issue too