Creating a whole bunch of Elements dynamic from code

zgrssd · 07/23/14, 03:59 AM

I have been thinking for a while now about making something I call the "Event Explorer". A single window that allows you to register every event in the game for simple debugging/testing purposes.
LibConstantMapper provides me the ability to get all the Event ID and thier names in a fully automatic fashion. And later even get me subgroups. My current count for 1.2.6 is 469 Event ID's

The only piece still missing is the GUI side of the equation.
At a simple level the window will look like this:
Window
->Row1
-->Label with event ID
-->Label with event Name
-->Checkbox to enabeled/disable listening to the event
-->maybe extra checkboxes for the way the data is output (into chat, onscreen notification, how detailed the output should be (all parameters or only that the event was fired?))
->Row2
-->Label with event ID
->Row3

I propably have to add some paging/register cards for efficiency.
A later version will likely have some categories/filters/grouping for specific event groups (like all COMBAT Events).

But for now the big issues are the handlers on the first checkbox.
Basically I need one handler that can automagically identify to wich Row (and thus event ID) it belongs too. One handler to regsiter it 469 times at 469 UI Elements.
I wil propably need a big code behind table anyway to hold all the data (wich setting is enabeled/disabeled). So if I need to store something like the UI Element reference after creating it would not be an issue.

merlight · 07/23/14, 05:04 AM

I think paging will be the way to go. That way you create say 50 rows from a template, which you can write in xml with checkbox and labels already in it. You can put any data you want in the row control, similar to how inventory rows have control.data={bagId=1, slotIndex=2, etc}. There were ingame scripts from Aug 2013 on XeNTaX forum, where loot window was paged, and it did pretty much exactly what I described - OnInitialize created a fixed number of rows from a template, and on EVENT_LOOT_UPDATED and when switching pages, updated data in those rows.

Later you can even make a search filter, e.g. events containing "TRADE" in their name

edit: can we even publish snippets from ingame scripts? It's so awkward to always tell people "there is something somewhere ..."

zgrssd · 07/23/14, 06:07 AM

Originally Posted by merlight

I think paging will be the way to go. That way you create say 50 rows from a template, which you can write in xml with checkbox and labels already in it. You can put any data you want in the row control, similar to how inventory rows have control.data={bagId=1, slotIndex=2, etc}. There were ingame scripts from Aug 2013 on XeNTaX forum, where loot window was paged, and it did pretty much exactly what I described - OnInitialize created a fixed number of rows from a template, and on EVENT_LOOT_UPDATED and when switching pages, updated data in those rows.

Later you can even make a search filter, e.g. events containing "TRADE" in their name

edit: can we even publish snippets from ingame scripts? It's so awkward to always tell people "there is something somewhere ..."

Controls have a data property? That makes this a whole lot easier.
I know that as "Tag" property from WinForms and WPF. It is the second best solution for such a problem.

What is the way to get the "parent" XML Element of a control?
I would perfer to just drop the Event's ID as data in the Row. The event handler would get the Checkboxes Reference. Then I would go up on step to get the Row it is contained in and use the ID from that.

Edit:
I think I found it. Something liek thsi event handler code?

Lua Code:

local function eventHandler(sender)
    local senderParent = sender.GetParent()
    local EventID = senderParent.data
 
    --Appropirate code that can now work with the EventID of the dynamicalyl created control
end

merlight · 07/23/14, 06:28 AM

Originally Posted by zgrssd

Controls have a data property?

I'm spamming a bit, but this deserves a post separate from the garbage I posted above

Controls are userdata with metatables, and their __index and __newindex are plain tables, so you can put anything you want in them.

zgrssd · 07/23/14, 02:00 PM

I took the basic window from AIResearch Grid:

xml Code:

<GuiXml>
    <Controls>
        <TopLevelControl name="EventExplorerWindow" mouseEnabled="true" movable="true" clampedToScreen="true" hidden="true">
            <Dimensions x="760" y="650" />
            <Anchor point="CENTER" />
            <Controls>
 
                <Backdrop name="$(parent)BG" inherits="ZO_DefaultBackdrop" />
 
            </Controls>
        </TopLevelControl>
    </Controls>
</GuiXml>

Added merlights template:

xml Code:

<Control name="EventExplorerRow" virtual="true">
    <Dimensions y="45"/>
    <Controls>
        <Label name="$(parent)Id" font="ZoFontGame" horizontalAlignment="RIGHT">
            <Anchor point="RIGHT" relativePoint="LEFT" offsetX="50"/>
        </Label>
        <Label name="$(parent)Name" font="ZoFontGame">
            <Anchor point="LEFT" relativeTo="$(parent)Id" relativePoint="RIGHT" offsetX="20"/>
        </Label>
    </Controls>
</Control>

And made up some basic code to get the table and fill the window with entries:

Lua Code:

local uniqueID = "d893fa70102add4c118054adcc1a1f82"
local LCM = LibStub:GetLibrary("LibConstantMapper")
 
local dataList = {}
 
--get the list of Events
local Events = LCM:getMappedData("Events")
 
local function fillWindow()
    for key, value in ipairs(Events) do
        local row = CreateControlFromVirtual("$(parent)Row", EventExplorerWindow, "EventExplorerRow", key)
    end
end
 
local function windowToggle()
    EventExplorerWindow:SetHidden(not EventExplorerWindow:IsHidden())
end
 
local function OnAddOnLoaded(eventID, AddonName)
    if (AddonName~= "EventExplorer") then return end
    
    fillWindow()
    
    SLASH_COMMANDS["/eventexplo"] = windowToggle
end
 
EVENT_MANAGER:RegisterForEvent("MyAddOn", EVENT_ADD_ON_LOADED, OnAddOnLoaded)

I only added the OnLoadedEvent because I got the errors from below and asumed the code was a bit to "early". But that was not it.

And all I get are those error messages and an empty window:

Code:

CreateControlFromVirtual failed.  ControlName[EventExplorerDynamicRow1], ParentName[EventExplorerWindow], VirtualName[EventExplorerRow].
CreateControlFromVirtual failed.  ControlName[EventExplorerDynamicRow2], ParentName[EventExplorerWindow], VirtualName[EventExplorerRow].
CreateControlFromVirtual failed.  ControlName[EventExplorerDynamicRow3], ParentName[EventExplorerWindow], VirtualName[EventExplorerRow].

And there is no explanation what exactly went wrong. Or even what remotely went wrong.

Garkin · 07/23/14, 02:19 PM

How your xml looks like? It should be something like this:

xml Code:

<GuiXml>
    <Controls>
        <Control name="EventExplorerRow" virtual="true">
            <Dimensions y="45"/>
            <Controls>
                <Label name="$(parent)Id" font="ZoFontGame" horizontalAlignment="RIGHT">
                    <Anchor point="RIGHT" relativePoint="LEFT" offsetX="50"/>
                </Label>
                <Label name="$(parent)Name" font="ZoFontGame">
                    <Anchor point="LEFT" relativeTo="$(parent)Id" relativePoint="RIGHT" offsetX="20"/>
                </Label>
            </Controls>
        </Control>
        <TopLevelControl name="EventExplorerWindow" mouseEnabled="true" movable="true" clampedToScreen="true" hidden="true">
            <Dimensions x="760" y="650" />
            <Anchor point="CENTER" />
            <Controls>
                <Backdrop name="$(parent)BG" inherits="ZO_DefaultBackdrop" />
            </Controls>
        </TopLevelControl>
    </Controls>
</GuiXml>

There is no UI error with this .xml file.

merlight · 07/23/14, 06:21 AM

I tried to write some untested code for illustration. Careful with dot where colon should be -- control:GetParent()

edit: or look at LAM controls, they too have custom data:
control.panel is the panel it's contained in
control.data is the optionData it was created from

Code:

<Control name="EventExplorerRow" virtual="true">
    <Dimensions y="45"/>
    <Controls>
        <Label name="$(parent)Id" font="ZoFontGame" horizontalAlignment="RIGHT">
            <Anchor point="RIGHT" relativePoint="LEFT" offsetX="50"/>
        </Label>
        <Label name="$(parent)Name" font="ZoFontGame">
            <!-- I don't know how, but it's definitely possible to make this clickable,
                 so that you can enable/disable events by cliking on the name (see "ZO_CheckButtonLabel") -->
            <Anchor point="LEFT" relativeTo="$(parent)Id" relativePoint="RIGHT" offsetX="20"/>
        </Label>
    </Controls>
</Control>

Lua Code:

function EventExplorer:createRows()
    local function onRowClicked(...)
        self:onRowClicked(...)
    end
    self.rows = {}
    for i = 1, NUM_PAGE_ROWS do
        local row = CreateControlFromVirtual("$(parent)Row", self.pageScrollWindow, "EventExplorerRow", i)
        row.data = {}
        row:SetHandler("OnClicked", onRowClicked)
        table.insert(self.rows, row)
    end
end
 
function EventExplorer:onRowClicked(control, button)
    -- this handler should be usable for both labels and even the parent row control
    -- (which I think will be useful so that cliking in the empty space between labels works)
    local row
    if control.data then
        row = control
    else
        row = control:GetParent()
    end
    local status = self:toggleEventEnabled(row.data.eventId)
    row:SetEnabled(status)
end

Lua Code:

-- this method will be used to fill the page with event ids and labels;
-- you'd store all event ids returned from a filter in self.selectedEventIds;
-- after the search you'd fill the 1st page with self:setPage(1);
-- if there are more events than NUM_PAGE_ROWS, and you provide
-- a control for switching to the next page, it can call self:setPage(self.currentPage);
function EventExplorer:setPage(pageNumber)
    local offset = math.min(0, pageNumber - 1) * NUM_PAGE_ROWS
    for i, row in ipairs(self.rows) do
        local eventId = self.selectedEventIds[i + offset]
        local idLabel = row:GetNamedChild("Id")
        local nameLabel = row:GetNamedChild("Name")
        row.data.eventId = eventId
        if eventId then
            idLabel:SetText(tostring(eventId))
            nameLabel:SetText(self:getEventName(eventId))
            nameLabel:SetEnabled(self:isEventEnabled(eventId))
        else
            idLabel:SetText("")
            nameLabel:SetText("")
            nameLabel:SetEnabled(false)
        end
    end
end
 
-- toggleEventEnabled, isEventEnabled will work with an internal table
-- that will keep track of what events you have registered