Widgets

Widgets can be basic Roblox UI elements such as TextLabels, TextButtons, etc. But, in Enoria, it can also be more complex elements, such as Forms, ListBuilders, Columns, and many more.

For example, if we want to create a TextLabel :

e.TextLabel("Enter your text here", {
    TextColor3 = Color3.fromRGB(0, 255, 0)
})

The first parameter is just the text that you want to display. Then, you create a dictionnary as the second argument and you can set any properties (or events, but we'll get to that later).

Creating custom widgets

You can also create custom widgets as well! These are useful when you don't want to repeat yourself.

Function based widgets

It is possible (and really fast) to create custom widgets. The fastest way is by creating a function that returns a widget tree:

...
function ColoredContainer(color)
	return e.Container({ 
		BackgroundColor3 = color, 
		Size = UDim2.fromScale(1/3, 1) 
	})
end

e:RunApp({
	Name = "MyApp",
	Home = e.Row({
		Children = {
			ColoredContainer(Color3.fromRGB(255, 85, 0)),
			ColoredContainer(Color3.fromRGB(255, 170, 255)),
			ColoredContainer(Color3.fromRGB(85, 255, 127)),
		}
	})
})

The only downside is that they do not support state management.

"Object-oriented based" widgets

There is another way to create custom widgets. There are some things that you need to know:

• How metatables (object-oriented programming) in Lua works.

• Your class need to inherit Enoria's base Widget class.

• You need to implement a build method.

Here's how you can do that:

(in a new module script)

local e = require(_G.EnoriaPath)
local Widget = require(_G.EnoriaPath.Parent.Widgets.Widget)

local ColoredContainer = {}
ColoredContainer.__index = ColoredContainer
setmetatable(ColoredContainer, Widget)

function ColoredContainer.new(context, color)
	local self = Widget.new(nil, nil, context)
	setmetatable(self, ColoredContainer)
	
	self.Color = color
	
	return self
end

function ColoredContainer:Build()
	return self:BuildTree(
		e.Container({ 
			BackgroundColor3 = self.Color, 
			Size = UDim2.fromScale(1/3, 1)
		})
	)
end

return ColoredContainer

Then, back in your Main localscript:

...
local ColoredContainer = require(script.Parent.ColoredContainer)
...
e:RunApp({
	Name = "MyApp",
	Home = e.Row({
		Children = {
			ColoredContainer.new(e.Context, Color3.fromRGB(255, 85, 0)):Build(),
			ColoredContainer.new(e.Context, Color3.fromRGB(255, 170, 255)):Build(),
			ColoredContainer.new(e.Context, Color3.fromRGB(85, 255, 127)):Build(),
		}
	})
})

This method is used when you want to handle state.