GMUI Framework for Godot Engine

GMUI supports a slot/template system similar to Vue's slots for injecting content into child components.

Basic Slots

In the child scene, define a <Slot /> tag. In the parent scene, wrap the content you want to inject inside a <Template> tag.

Child XML:

<Node2D name="SubScene2">
	<Slot></Slot>
</Node2D>

Parent XML:

<Scene name="SubScene2" scene_xml_path="res://layouts/sub_scene2.xml">
	<Template>
		<Node2D name="node"></Node2D>
	</Template>
</Scene>

Named Slots

To handle multiple injection points, use the name attribute on the <Slot> and the slot attribute on the <Template>.

Child XML (Defining multiple slots):

<Node2D name="SubScene1">
	<Slot name="slot1"></Slot>
	<Slot name="slot2"></Slot>
</Node2D>

Parent XML (Targeting specific slots):

<Scene name="SubScene1" scene_xml_path="res://layouts/sub_scene1.xml">
	<Template slot="slot1">
		<Node name="node1"></Node>
	</Template>
	<Template slot="slot2">
		<Node name="node2"></Node>
	</Template>
</Scene>

<!-- Parent XML Example with Named Slots -->
<Scene name="SubScene1" scene_xml_path="res://layouts/sub_scene1.xml">
	<Template slot="slot1">
		<Node name="node1"></Node>
	</Template>
	<Template slot="slot2">
		<Node name="node2"></Node>
	</Template>
</Scene>

GMUI uses the g-model directive to create bidirectional data binding between UI components and reactive data.

To implement logic, add a <Script> tag at the bottom of your .gmui file. Use the reactive() function to initialize your data state. You can access and modify this data using rget() and rset() methods on the reactive object.

Key Concepts:

• reactive({'key': 'value'}): Initializes a reactive data object (must be awaited).
• g-model="key": Binds a component property to a reactive key.
• rget('key'): Retrieves the value of a reactive property.
• rset('key', 'value'): Sets the value of a reactive property.

<Row align="center">
    <Column align="center">
        <Row>
            <Label text="Username"></Label>
            <LineEdit placeholder_text="Enter username" g-model="username"></LineEdit>
        </Row>
        <Row>
            <Button text="Login" ref="loginBtn"></Button>
        </Row>
    </Column>
</Row>

<Script>
@onready var data = await reactive({'username': 'name'})
func _mounted():
    gmui.refs['loginBtn'].rnode.pressed.connect(
        func():
        print('username:', data.rget('username'))
    )
</Script>

Slots allow you to pass content into components, similar to Vue.js.

Default Slots

Define a <Slot /> tag in your component. When using the component, any children wrapped inside the component tags will replace the slot.

Named Slots

For multiple injection points, use named slots with <Template #name="value"> in the consumer and <Slot name="name" /> in the component.

Slot Props (Passing Data to Slots)

You can pass data from the component back to the slot content by declaring a variable in the slot declaration and receiving it in the template.

Component Definition:

<Slot text="my text"></Slot>

Component Usage:

<Component #default="props">
    <Label :text="props.text"></Label>
</Component>

<!-- Component Usage with Named Slots -->
<Component>
    <Template #slot1="NULL">
        <Label text="my text1"></Label>
    </Template>
    <Template #slot2="NULL">
        <Label text="my text2"></Label>
    </Template>
</Component>

Slots allow you to inject content into components. GMUI supports three types of slots:

1. Default Slot: Use the <Slot /> tag in the component definition. Content placed inside the component tag in the parent will replace it.
2. Named Slots: Use <Slot name="slot_name" /> in the component and <Template #slot_name="props"> in the parent to target specific locations.
3. Slot Parameters (Scoped Slots): Pass data from the component to the slot content by declaring variables in the <Slot /> tag and receiving them via the # syntax in the <Template> tag.

<!-- 1. Default Slot Usage -->
<!-- Component Definition -->
<Slot></Slot>

<!-- Parent Usage -->
<Component>
    <Label text="my text"></Label>
</Component>

<!-- 2. Named Slots Usage -->
<!-- Component Definition -->
<Slot name="slot1"></Slot>

<!-- Parent Usage -->
<Component>
    <Template #slot1="NULL">
        <Label text="my text1"></Label>
    </Template>
</Component>

<!-- 3. Slot Parameters (Scoped Slots) -->
<!-- Component Definition -->
<Slot text="my text"></Slot>

<!-- Parent Usage -->
<Component #default="props">
    <Label :text="props.text"></Label>
</Component>

GMUI uses a reactive data pattern similar to Vue. To implement one-way data binding:

1. Inherit GMUI Scripts: The root node of your scene must inherit from a GMUI base script (e.g., res://addons/gmui/scripts/common/g_node_2d.gd).
2. Define Reactive Data: Use the vm.define_reactive() method inside the ready function to convert a dictionary into a reactive object. The vm variable is an instance provided by the parent script that manages scene data.
3. Bind in XML: Use the g-bind:<property> directive in your XML layout to link a node property to a reactive data key.
4. Lifecycle Methods:
   • _mounted(): Executes after ready and after the component has finished rendering.
   • _updated(): Executes whenever the reactive data is changed.

Example Implementation:

GDScript:

extends "res://addons/gmui/scripts/common/g_node_2d.gd"

@onready var data = vm.define_reactive({'visible': false, 'text': 'text'})
	
func _mounted():
	await get_tree().create_timer(5).timeout
	data.rset('visible', true)
	print('mounted')

func _updated():
	print('updated')

XML Layout:

<?xml version="1.0" encoding="UTF-8"?>
<Node2D name="MainScene">
	<Node2D name="node1" g-bind:visible="visible"></Node2D>
</Node2D>