Code Patterns

Copy-paste examples for common plugin tasks. Commands, events, ECS, GUI, and more.

← Back to Patterns
ui

ui-dashboard-layout

Two-panel layout with sidebar navigation and main content area. Uses LayoutMode: Left for horizontal arrangement and FlexWeight for flexible sizing. Great for settings pages, dashboards, or info panels.

Example Code

java
// Dashboard layout with sidebar
Group {
    Anchor: (Width: 600, Height: 400);
    LayoutMode: Left;  // Horizontal layout

    // Left sidebar - fixed width
    Group #LeftPanel {
        Anchor: (Width: 180);
        Background: #0a1119(0.95);
        LayoutMode: Top;
        Padding: (Full: 16);

        Label {
            Text: "MENU";
            Anchor: (Height: 25);
            Style: (FontSize: 11, TextColor: #4a5568, RenderUppercase: true, LetterSpacing: 2);
        }

        Group { Anchor: (Height: 8); }  // Spacer

        // Menu items - active item highlighted
        Label {
            Text: "> Overview";
            Anchor: (Height: 30);
            Style: (FontSize: 14, TextColor: #ffffff, RenderBold: true);
        }

        Label {
            Text: "  Settings";
            Anchor: (Height: 30);
            Style: (FontSize: 14, TextColor: #6e7da1);
        }
    }

    // Right content - flexible width
    Group #RightPanel {
        FlexWeight: 1;  // Takes remaining space
        Background: #141c26(0.98);
        LayoutMode: Top;
        Padding: (Full: 20);

        Label #PanelTitle {
            Text: "Overview";
            Anchor: (Height: 40);
            Style: (FontSize: 24, TextColor: #ffffff, RenderBold: true);
        }

        // Divider line
        Group {
            Anchor: (Height: 1);
            Background: #2b3542;
        }

        // Stats grid - equal columns
        Group #StatsGrid {
            LayoutMode: Left;
            Anchor: (Height: 70);

            Group {
                FlexWeight: 1;  // Equal width
                LayoutMode: Top;

                Label #Stat1Value {
                    Text: "1,234";
                    Anchor: (Height: 32);
                    Style: (FontSize: 26, TextColor: #4a9eff, RenderBold: true);
                }
                Label {
                    Text: "Players";
                    Style: (FontSize: 11, TextColor: #6e7da1);
                }
            }

            Group {
                FlexWeight: 1;
                LayoutMode: Top;

                Label #Stat2Value {
                    Text: "42";
                    Anchor: (Height: 32);
                    Style: (FontSize: 26, TextColor: #4aff7f, RenderBold: true);
                }
                Label {
                    Text: "Quests";
                    Style: (FontSize: 11, TextColor: #6e7da1);
                }
            }
        }

        Group { FlexWeight: 1; }  // Push button to bottom

        Group {
            LayoutMode: Right;  // Align button to right
            Anchor: (Height: 40);

            TextButton #CloseButton {
                Text: "CLOSE";
                Anchor: (Width: 100, Height: 36);
            }
        }
    }
}

Common Mistakes

Using fixed widths for all panels - use FlexWeight: 1 for responsive layouts that adapt to window size