How to use the PagedComponent

Question

How to use the PagedComponent

Closed this issue a year ago · 19 comments

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>

Answer 1 · 2023-08-09T09:41:54.000Z

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

Answer 2 · 2023-08-09T10:14:27.000Z

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

Answer 3 · 2023-08-09T10:37:21.000Z

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

Answer 4 · 2023-08-09T10:45:35.000Z

Um... whitch pattern?

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

Answer 5 · 2023-08-09T11:07:16.000Z

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

Answer 6 · 2023-08-09T11:18:42.000Z

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)

Answer 7 · 2023-08-09T11:31:34.000Z

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

Answer 8 · 2023-08-09T12:25:16.000Z

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

Answer 9 · 2023-08-09T14:16:47.000Z

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

Answer 10 · 2023-08-09T14:19:09.000Z

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

Answer 11 · 2023-08-09T14:22:01.000Z

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

Answer 12 · 2023-08-09T14:40:54.000Z

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

Answer 13 · 2023-08-09T15:00:06.000Z

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

Answer 14 · 2023-08-09T15:05:38.000Z

The gui code is same as this

Answer 15 · 2023-08-10T12:35:43.000Z

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

Answer 16 · 2023-08-10T15:28:03.000Z

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.

Answer 17 · 2023-08-10T15:46:10.000Z

Fixed it based on your observations with a cleaner implementation

Answer 18 · 2023-08-11T03:05:58.000Z

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

Answer 19 · 2023-08-11T03:53:13.000Z

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