WoWInterface - How to build UI in order to present a table?

WoWInterface (https://www.wowinterface.com/forums/index.php)

- Lua/XML Help (https://www.wowinterface.com/forums/forumdisplay.php?f=16)

- - How to build UI in order to present a table? (https://www.wowinterface.com/forums/showthread.php?t=58670)

How to build UI in order to present a table?

Hello,

It is possible I am asking about Mixins but I am a total beginner regarding UI and frames in WoW.

I have a small addon, which I use to gather some information about my runs in mythc+ dungeons. It's structured in a table and I simply use default chat to list everything if I am looking for something.

I want to present all this information in a frame. I looked at a few add-ons as well as a couple of frames by Blizzard. For instance, SaveInstances has a list of details about payers saved for dungeons/raids or current state on currencies etc.; it is presented in a frame/table whose background alternates from row to row as well as highlights a row on mouseover. Another example is Blizzard's Guilds and Communities, and particularly a list of members; it looks clean because each name is on the same background repeated per line.

I was wondering if I can do that for my addon. When I searched Google, I came across Mixins, which I am not familiar with but seems to be what I am looking for. If I am correct, it is a way of "presenting" tables. Is it possible to use one of Blizzard's templates for myself? Also, if I know what I want to use, how can I find a particular Mixin?

Thanks

Since you already use the default chat to display, You can just use the SimpleHTML widget, I use it to show details of the table/frames like :

The green text are links, you can click you can move it to show tips.

It's simple to concat string than create fontstring arrays.

Thanks. I have also considered SimpleHTML. I even made a function converting the said table > HTML but somehow it doesn't render HTML but shows the full HTML code in it. Would you mind sharing your code? That frame would be a good start :) but, eventually, I would like to make something with a custom frame :) Just for the sake of learning. i am not very good at UI and would like to learn it, as well.

The html used by the SimpleHtml has many limits. If you get the whole html, it means the widget reject to render it.

You should check the Well-formed HTML in the https://wowwiki-archive.fandom.com/w...ECT_SimpleHTML. Also concat string directly is a real pain.

Create custom UI is a big topic to be discussed here. You may discuss it in the WoWUIDev@discord.

And for the code to create such a frame, if you don't mind using other libs:

Attachment 9606

Lua Code:

Scorpio "SimpleHtmlTest" ""  -- A Module based on my Scorpio Lib
 
-- Create a dialog to contains the viewer
Browser                         = Dialog("SimpleHtmlTestBrowser")
 
-- Create the html view from a template class based on the SimpleHtml
viewer                          = HtmlViewer  ("Viewer", Browser)
 
-- Handle the link click
function viewer:OnHyperlinkClick(path)
    if path then
        -- Click the link and send to the chat box for copy
        ChatEdit_ActivateChat(ChatFrame1EditBox)
        ChatFrame1EditBox:SetText(path)
        ChatFrame1EditBox:HighlightText(0, #path)
    end
end
 
-- The style of those ui, just like xml with properties.
Style[Browser]                  = {
    Header                      = { Text = "Table Viewer" },
    Size                        = Size(800, 600),
    clampedToScreen             = true,
    minResize                   = Size(600, 400),
 
    Viewer                      = {
        location                = { Anchor("TOPLEFT", 24, -32), Anchor("BOTTOMRIGHT", -48, 48) },
    },
}
 
 
-- A template string used to generate the target string with data
-- @xxx is the directives for lua codes, so here `name` and `target`
-- are the special variables to generate the final string
TEMPLATE_TABLE                  = System.Text.TemplateString[[
    <html>
        <body>
            <h1>@name</h1>
            <br/>
            @for k, v in pairs(target) do
            <p><a href="@k">@k</a></p>
            @end
        </body>
    </html>
]]
 
-- A test 
viewer:SetText(TEMPLATE_TABLE{
    name = "C_AuctionHouse",
    target = C_AuctionHouse,
})

It'd could be more longer to create this without a lib.

So this is an ADs :cool:

The Scorpio is a power addon dev platform, you can find my post at https://www.wowinterface.com/forums/...splay.php?f=41.

I don't really like blz's mixin system, but you still can find me in the discord.

Very often, displaying information in table form generally means creating a frame/button for each row where each row is broken up into sections (columns), and then positioning each row one below the next so they form a table. Then you loop through the rows and update the columns.

It's very common to do this with a scrollframe too, which allows your table to be scrollable.

The code that follows adds a /showme slash command to summon a scrollable table of random data. (You can repeat /showme to generate new random data.)

When the number of rows has the potential to far exceed the displayable area, it's common to use a HybridScrollFrameTemplate or FauxScrollFrameTemplate. Then you only have as many rows that can be displayed and you update the content based on the scrollbar offset. In the example below I've doing a basic scrollframe where every row is defined so you don't need to worry about offsets. (This is not suggested for long lists, but probably easier to pick apart.)

Lua Code:

local CELL_WIDTH = 100
local CELL_HEIGHT = 20
local NUM_CELLS = 3 -- cells per row
 
-- we'll use an ordered table of arbitrary data: {{fruit,number,alphabet},{fruit,number,alphabet},etc}
local fruits = {"apple","banana","orange","pear","tomato","pineapple"}
local numbers = {"one","two","three","four","five","six"}
local alphabet = {"abc","def","ghij","klmn","op","qrstuv","wx","yz"}
local data = {}
 
-- just generates a random bunch of data in the data table
local function updateData()
    wipe(data)
    for i=1,10+random(40) do
        tinsert(data,{fruits[random(#fruits)], numbers[random(#numbers)], alphabet[random(#alphabet)]})
    end
end
 
-- creating a basic dialog frame (if you name this frame and define basic bits during the load (not after PLAYER_LOGIN), then
-- the client will restore the window position on login to wherever it was last moved by the user)
local f = CreateFrame("Frame","SimpleScrollFrameTableDemo",UIParent,"BasicFrameTemplateWithInset")
f:SetSize(CELL_WIDTH*NUM_CELLS+40,300)
f:SetPoint("CENTER")
f:Hide()
f:SetMovable(true)
f:SetScript("OnMouseDown",f.StartMoving)
f:SetScript("OnMouseUp",f.StopMovingOrSizing)
 
-- adding a scrollframe (includes basic scrollbar thumb/buttons and functionality)
f.scrollFrame = CreateFrame("ScrollFrame",nil,f,"UIPanelScrollFrameTemplate")
f.scrollFrame:SetPoint("TOPLEFT",12,-32)
f.scrollFrame:SetPoint("BOTTOMRIGHT",-34,8)
 
-- creating a scrollChild to contain the content
f.scrollFrame.scrollChild = CreateFrame("Frame",nil,f.scrollFrame)
f.scrollFrame.scrollChild:SetSize(100,100)
f.scrollFrame.scrollChild:SetPoint("TOPLEFT",5,-5)
f.scrollFrame:SetScrollChild(f.scrollFrame.scrollChild)
 
-- adding content to the scrollChild
local content = f.scrollFrame.scrollChild
content.rows = {} -- each row of data is one wide button stored here
 
local function updateList()
    for i=1,#data do
        -- create a row if not created yet (buttons[i] is a whole row; buttons[i].columns[j] are columns)
        if not content.rows[i] then
            local button = CreateFrame("Button",nil,content)
            button:SetSize(CELL_WIDTH*NUM_CELLS,CELL_HEIGHT)
            button:SetPoint("TOPLEFT",0,-(i-1)*CELL_HEIGHT)
            button.columns = {} -- creating columns for the row
            for j=1,3 do
                button.columns[j] = button:CreateFontString(nil,"ARTWORK","GameFontHighlight")
                button.columns[j]:SetPoint("LEFT",(j-1)*CELL_WIDTH,0)
            end
            content.rows[i] = button
        end
        -- now actually update the contents of the row
        for j=1,3 do
            content.rows[i].columns[j]:SetText(data[i][j])
        end
        -- show the row that has data
        content.rows[i]:Show()
    end
    -- hide all extra rows (if list shrunk, hiding leftover)
    for i=#data+1,#content.rows do
        content.rows[i]:Hide()
    end
end
 
-- create /showme slash command to make up data and summon window
SLASH_SHOWME1 = "/showme"
SlashCmdList["SHOWME"] = function(msg)
    updateData()
    updateList()
    f:Show()
end

Thank you for the example codes and the idea of adding buttons as cells. I think I can follow from here and start trying something :) Thanks