Using XML For UI

Custom UI can be constructed with XML via the UI Tab of the Data Editor. Custom UI can be previewed via the UI preview window:

This will allow you to preview your currently selected custom UI frame.

To use the GMUI mod to manage custom UI, please refer to this guide.

Example "TestCard"

<HStack>
    <Frame backgroundImage="banner03_gray" padding="40">
        <Text id="text" text="left" color="r: 1, g: 0.5, b: 1"/>
    </Frame>
    <Button id="button" backgroundImage="arrow01_r" width="72" height="94"/>
</HStack>

These XML frames can then be created and referenced in script as such:

-- Create the UI
local parent = DCEI.GetUiRoot()
local card = DCEI.NewUiFromXml(parent, "TestCard")
-- Get references to children frames via their ID.
local text_ui = DCEI.FindXmlUiById(card, "text")
local button_ui = DCEI.FindXmlUiById(card, "button")

Additionally, it is possible to get all XML frames and an XML frame's child frames in lua:

-- Returns a list of all XML frames created in data
local frames = DCEI.GetXmlFrames()
--[[
    Output format:
{ 
    [1] = { 
        ["frame_type"] = Frame,
        ["name"] = Frame,
    } ,
    [2] = { 
        ["frame_type"] = Frame,
        ["name"] = block,
    } ,
} 
]]

-- Returns a list of the parent frame and child frames of "card" - the parent frame "card" will be the first frame in the list
local children = DCEI.GetXmlUiChildrenFrames(card)
-- The output format is the same as GetXmlFrames()