We typically build our UI using XML (rather than creating Frames in Lua) which can be found in the UI tab of the Data Window (the in-built UI editor is based on the same framework as VS Code, so you can use Ctrl+F to search and replace).
This XML is like a blueprint or template, it won’t appear in-game until you create it via Lua. Using “Window” > “UI Previewer” is essential for previewing the final look of your UI from within the editor.
We create and modify it in Lua using our GMUI library. You can take a look at the basic demo map to see how to construct simple UIs. For instance, if you have the XML object “BasicButton”
<Button layout="flex" id="Button" height="80" width="140">
<Text id="Label" text="Press Me" />
</Button>
You can generate it in-game using GMUI such as:
local GMUI = require("GMUI")
-- create and hookup the layout defined as "BasicButton" in xml
local layout = GMUI.Layout.New({
name = "BasicButton",
})
-- update its text label
DCEI.SetTextFrameText(layout.Label, "I'm a button")
The GMUI mod essentially turns your XML frame template into class-objects with their own properties and methods, which you can then expand, with “Frame” pointing towards the actual instantiated UI Frame itself. Using recursive hookups, you can instantiate the XML blueprint and all child Frames.
For the following XML object “MenuStack”
<Frame layout="flex" frameImage="frame_slot00" flexDirection="column" padding="50">
<include id="button_1" name="BasicButton" />
<include id="button_2" name="BasicButton" />
<include id="button_3" name="BasicButton" />
</Frame>
We can hook it up and all its children using the recursive_hookup flag. We can also give the layout new methods