How to create a DecUI component

Creating a DecUI component

With version 1.0.0, DecUI has been refactored to allow users to create their own DecUI components dynamically and without the need to know about DecUI internals. This means that you dont need to know how DecUI works internally to create your own DecUI components. You can follow this guide to learn how to create your custom DecUI components for your server (for example a LoginScreen component, scoreboard component etc...) or to create some general components that you think DecUI is missing, your contributions are welcome.

If you're familiar with React, this is very similar and should be easy to understand. If not, dont worry it's still very simple.

There are 3 steps to creating a DecUI component:

1. Creating your component class
2. Registering your component with DecUI
3. Importing your component

---

1 - Creating your component class

When creating a DecUI component class you must always do 3 things:

1. You must extend the parent DecUIComponent class (this will automatically give you access to all DecUI component features for your new component)
2. You must call the parent DecUIComponent constructor on your component constructor
3. You must create a UI.Canvas that wraps your component, this UI.Canvas must have the same ID that is passed during creation

MyComponent.nut:

class MyComponent extends DecUIComponent { //1. extend the parent DecUIComponent class

    constructor(o){
        base.constructor(o); //2. call the parent DecUIComponent constructor, make sure this is the first thing you do inside the constructor
        this.build();
    }

    function build() {
        UI.Canvas({ //3.  create a UI.Canvas that wraps your component
            id = this.id  
            align = this.align 
            Colour = Colour(150,150,150,150)
            Size = VectorScreen(250, 100)
            children = [
                UI.Label({
                    id = "newLabelID"  
                    align="center"
                    Text = "Hello this a DecUI component"
                    TextColour = ::Colour(255,0,0)
                })
            ]   
        }).addBorders();
    }
}

---

2 - Registering your component with DecUI

Inside your MyComponent.nut, after the class, add this:

UI.registerComponent("MyComponent", { //the string you pass is what you'll be using when creating or fetching an instance of your component ( UI.MyComponent() )
    create = function(o) {
        return MyComponent(o);    
    }
})

---

3 - Importing your component

In your main.nut file, after importing DecUI, you import your new component:

dofile("MyComponent.nut");

Final result

MyComponent.nut:

class MyComponent extends DecUIComponent {
    constructor(o){
        base.constructor(o); 
        this.build();
    }

    function build() {
        UI.Canvas({ 
            id = this.id  
            align = this.align 
            Colour = Colour(150,150,150,150)
            Size = VectorScreen(250, 100)
            children = [
                UI.Label({
                    id = "newLabelID"  
                    align="center"
                    Text = "Hello this a DecUI component"
                    TextColour = ::Colour(255,0,0)
                })
            ]   
        }).addBorders();
    }
}

UI.registerComponent("MyComponent", { 
    create = function(o) {
        return MyComponent(o);    
    }
})

main.nut

dofile("decui/decui.nut");
dofile("MyComponent.nut");

function Script::ScriptLoad(){
 
    //to create
    UI.MyComponent({ 
        id="hello"
        align="center" 
    });

    //to fetch
    local c = UI.MyComponent("hello");
   
}

Your component will be treated the same way as other DecUI components, which means you can nest it in other components. Things like this are perfectly valid:

UI.Canvas({
   id = "newCanvasID"  
   align = "center"
   Size= VectorScreen(350, 200)
   children =[
        UI.MyComponent({ 
           id="hello"
           align="center" 
        })
   ]
            
}).addBorders()