Quantcast Good UI lib? - WoWInterface
Thread Tools Display Modes
05-10-18, 02:10 PM   #1
jofmayer
A Murloc Raider
Join Date: Jul 2008
Posts: 7
Good UI lib?

Hi there

I'm new to addon development and I now want to create a nicer ui for https://www.curseforge.com/wow/addon...troke-launcher.

Are there any good libs out there? I found Ace3 GUI and Sushi 3.0, what would you recommend? Ideally one which has support for eg displaying tables (no lua tables, html tables), lists, etc

I'm new to LUA and am probably spoiled from other languages, but the amount of everyday functions (eg trim, or 'is in table') you have to write on you own is too damn high :O

Thanks,
Jan
  Reply With Quote
05-10-18, 02:28 PM   #2
Tim
A Cobalt Mageweaver
 
Tim's Avatar
AddOn Author - Click to view addons
Join Date: Apr 2008
Posts: 238
You cannot run any language outside of Lua/XML.

Look into multiple libraries and see which all is going to fit your needs and go from there.
__________________
AddOns: [email protected]
Website: Ciraxe' Shenanigans
Chars: Monk, Viskaz, Mage, Shaman
  Reply With Quote
05-10-18, 10:45 PM   #3
Phanx
Cat.
 
Phanx's Avatar
AddOn Author - Click to view addons
Join Date: Mar 2006
Posts: 5,617
AceGUI and Sushi are intended primarily for configuration GUIs -- they provide checkboxes, dropdowns, sliders, etc. Based on the screenshots on your addon page, those don't really apply in your case.

You might get more helpful replies if you describe what kind of GUI you're looking to build.

That said, for a non-config GUI you're probably not going to find much of anything. The reason we have libraries for config GUIs is because every checkbox in every addon looks and works pretty much exactly the same way, so abstracting their structure logic away into a library saves everyone whose addon uses a checkbox time and effort. The same doesn't really apply to other UI stuff.
__________________
Author/maintainer of Grid, PhanxChat, oUF_Phanx, and many more.
Troubleshoot an addonTurn any code into an addonMore addon resources
Need help with your code? Post all of your actual code! Attach or paste your files.
Please don’t PM me about addon bugs or code questions. Post a comment or forum thread instead!
  Reply With Quote
05-11-18, 02:48 AM   #4
jofmayer
A Murloc Raider
Join Date: Jul 2008
Posts: 7
Ah, ok ... I would like to do someting like this:

1. have a lua table with multiple rows/ columns
2. print that out into a ui element nicely: fixed column width, table headers, autoscrolling, etc
3. read where the user currently has the cursor and highlight that line
4. on key press execute someting based in the current line

As I understand it currently, I would need to write something which does the parsing/ displaying based on newline, tabstops, etc ... so I would basically need to do everything manually.

If I would be using eg HTML/ Javascript, I would just google for it and take one of the many already available libs which deal with taht topic (eg https://datatables.net/).

My hope was that there already exists a lua lib which has such a functionality ...
  Reply With Quote
05-12-18, 06:13 AM   #5
Phanx
Cat.
 
Phanx's Avatar
AddOn Author - Click to view addons
Join Date: Mar 2006
Posts: 5,617
Originally Posted by jofmayer View Post
As I understand it currently, I would need to write something which does the parsing/ displaying based on newline, tabstops, etc ...
I don't know why you'd need to do anything with newlines or tabs. Just structure your data correctly as nested Lua tables:

Code:
local data = {
   { "this is a cell", "", "5" },
   { "hello world", "row 2 cell 2", "10" },
}
Then loop over it like so:

Code:
for i, row in ipairs(data) do
   for j, cell in ipairs(row) do
      print("Row", i, "cell", j, "contains", tostring(cell))
   end
end
Originally Posted by jofmayer View Post
2. print that out into a ui element nicely: fixed column width, table headers, autoscrolling, etc
I'm not sure what you mean by autoscrolling, but none of the other stuff sounds terribly complicated. Just break it down and tackle one problem at a time.

Each row of the table will be a frame object (or a button, if you want OnClick functionality). Each cell within the row will be a font string.

Lay out the cells within the row by anchoring the first cell's TOPLEFT point to the row's TOPLEFT point, and each subsequent cell's TOPLEFT point to the previous cell's TOPRIGHT point, and setting the width of each cell based on its column position. If you want your cells to be bottom-aligned instead of top-aligned, use BOTTOMLEFT and BOTTOMRIGHT instead. If you want vertical center-alignment, use LEFT and RIGHT instead.

The table header is just another row, maybe with a different background or different font style to distinguish it from the body rows.

To make updating your rows and cells easy, store them in another table when you create them:

Code:
local rowFrames = {}

for i = 1, 10 do
   local row = CreateFrame("Button", nil, MyTableContainerFrame)
   row:SetWidth(MyTableContainerFrame:GetWidth()
   if i == 1 then
      row:SetPoint("TOPLEFT", MyTableContainerFrame)
   else
      row:SetPoint("TOPLEFT", rowFrames[i - 1], "BOTTOMLEFT")
   end

   row.cells = {}
   for j = 1, 3 do
      local cell = row:CreateFontString(nil, "OVERLAY", "GameFontNormal")
      if j == 1 then
         cell:SetPoint("TOPLEFT", row)
      else
         cell:SetPoint("TOPLEFT", row.cells[j - 1], "BOTTOMLEFT")
      end
   end
end
Then to make it show your data, just loop over your data rows and cells and fill in each corresponding GUI object:

Code:
for i, row in ipairs(data) do
   local rowFrame = rowFrames[i]
   for j, cell in ipairs(row) do
      local cellFontString = rowFrame.cells[j]
      cellFontString:SetText(cell)
   end
end
Originally Posted by jofmayer View Post
3. read where the user currently has the cursor and highlight that line
Enable the mouse on your row frames. When a row's OnEnter script runs, change the row's background color, change the color of its cell font strings, etc. to create a highlight effect. When a row's OnLeave script runs, undo the changes to remove the highlight effect.

Originally Posted by jofmayer View Post
4. on key press execute someting based in the current line
If you want line selection to be done by hovering, then in a row's OnEnter script update your "current row" reference to point to that row, and in its OnLeave script remove the reference. If you want to select a line by clicking on it, so your keypress can work whether or not the mouse has moved, then set the reference in each row's OnClick script, and remove it whenever you think makes sense (when the frame is hidden, when the rows are shuffled, after a timeout, etc.). Then in your keypress handler act on the "current row" reference.

Originally Posted by jofmayer View Post
My hope was that there already exists a lua lib which has such a functionality ...
Keep in mind that Lua is a general purpose scripting library. Most of the places where Lua is used are not World of Warcraft, and none of those places use the same GUI widget API as World of Warcraft. There probably are libraries to help you create data table GUIs in, say, wxWidgets for desktop applications, but there's zero common API between wxWidgets and World of Warcraft. If you've searched WoWInterface and CurseForge, and didn't find a WoW library relevant to your needs, then with 99% certainty, no such library exists.
__________________
Author/maintainer of Grid, PhanxChat, oUF_Phanx, and many more.
Troubleshoot an addonTurn any code into an addonMore addon resources
Need help with your code? Post all of your actual code! Attach or paste your files.
Please don’t PM me about addon bugs or code questions. Post a comment or forum thread instead!
  Reply With Quote
05-12-18, 03:07 PM   #6
jofmayer
A Murloc Raider
Join Date: Jul 2008
Posts: 7
@Phanx: cool, thanks for the extensive info, a lot of usefull information now to work through
  Reply With Quote

WoWInterface » Developer Discussions » General Authoring Discussion » Good UI lib?

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off