[REL] OOP GUI Library v1.0.3

[Skurken]

This is one of my personal libraries that I use. I thought of sharing it, someone might find it useful.

To be able to use it you have to include one script file to your resource (in meta.xml)

Some examples:

local wnd = Window(100, 100, 400, 400, 'Window') 
wnd:Alpha(1) 
wnd:Sizable(false) 
wnd:Visible(false) 
wnd:Destroy() 
  
-- Instead of specifying the x, y you can simply use 'center' and it will automatically calculate the x, y according to the width/height. 
-- Same example as the window above, only that it is centered 
local wnd = Window('center', 400, 400, 'Window') 
  
-- Other elements 
local btn = Button(100, 100, 100, 40, 'Button', false, wnd) -- You just send the returned value of Window 
btn:AddOn('Click', function(button, state) outputChatBox'Clicked' end) 
  
local img = Image(100, 100, 128, 128, 'path', false, wnd) 
img:LoadImage('another path') 
  
local cmb = ComboBox(100, 100, 200, 200, 'Caption', false, wnd) 
cmb:AddItems('Item 1', 'Item 2', 'Item 3') -- Just keep passing arguments to add more items 
local selected = cmb:Selected() -- Gets the selected item index 
cmb:Selected(0) -- Sets the selected item index to zero (first item) 
cmb:AddOnAccepted(function(combobox) outputChatBox'New Item Selected' end) 
cmb:AdjustHeight(3) -- 3 is the item count so the function can calculate the adjusted height, credits to Remi-X for the useful function. 
  
local edit = Edit(100, 100, 100, 40, 'Text', false, wnd) 
edit:Masked(true) 
edit:ReadOnly(true) 
edit:MaxLength(24) 
edit:AddOnChanged(function() outputChatBox('New text: ' .. edit:Text()) end) 
  
local list = GridList(100, 100, 200, 200, false, wnd) 
list:AddColumn('Column 1', 0.4) 
list:AddColumn('Column 2', 0.4) 
list:AddRow('Item 1 under Column 1', 'Item 2 under Column 2') -- Add more items according to column count 
list:Clear() 
  
local prg = ProgressBar(100, 100, 100, 40, 'Progress Label', false, wnd) 
-- You can specify a progress bar label and it will be automatically updated to reflect the progress 
-- For the above example a label will be created above the progress bar saying Progress Label: 0% in Red, if progress is 60% then it will say Progress Label: 60% in Orange, if the progress is 80% the label will say Progress Label: 80% in Green 
prg:Progress(80) -- Sets the progress 
local progress = prg:Progress() -- Gets the progress 
  
local label = Label(100, 100, 100, 100, 'Text', false, wnd) 
label:Color(255, 0, 0) 
label:HorizontalAlign('center', true) 

There are three useful functions that I've added:

createAlert('Alert text') -- Creates a centered window, a centered label on the window and a button to close the window. 
createYesNoPrompt('Do you like me?', function() outputChatBox'Yes button pressed' end, function() outputChatBox'No button pressed' end) -- Like the alert window but with a yes/no buttons, second argument is the yes button callback, third one is the no button callback 
createInputPrompt('Input your name', function(text) outputChatBox('Hello ' .. text) end) -- A window, with an edit to input something, second arg is a callback when the button is clicked, the edit is automatically checked for emptiness 

I will provide later a more detailed list of functions available.

Credits to Remi-X for the guiComboBoxAdjustHeight useful function.

Credits to 50p for some ideas from his gui library.

Community

GitHub

[50p]

It's good to see people want to learn OOP in Lua. I have a suggestion for createInputPrompt, you could change the first param to a table, allowing more than 1 edit in the window (eg. for simple log in window). I've always wanted to update my GUI lib to simply add new UI elements to windows but ignoring x, y, width and height params. Like it's made in MAXScript:

Example:

    group "Map importer:" 
    ( 
        edittext txt_GTAPath "GTA SA folder:" width: 200 across:2 offset:[0,2] text: ( GTAPath as string ) 
        button btn_browseGTA "Browse..." align:#right 
        edittext txt_TempPath "Temp folder:" width: 200 across:2 offset:[0,2] text: ( TempPath as string ) 
        button btn_browseTemp "Browse..." align:#right 
        checkbox cb_importLights "Import lights attached to models" checked:importLights 
        checkbox cb_deleteDffAfterImport "Delete temporary .dff files after import" checked:deleteTempDffs 
    ) 

It's different to Lua but that would make scripting GUI even easier.

[Skurken]

I can add that for createInputPrompt, maybe with a limit or switch to scrollpane if more than a certain quantity of edits.

As for your other suggestion, I can try to do something like that.

local edit = Edit(width, text) -- Maybe a label argument to add a label before the edit 
local button = Button(width, text, 'right') -- right is the alignment 

And the window should be re-sized to fit the elements.

Thanks.

[ixjf]

You should organize the code in multiple files (one file per class?) & let the developer choose where to print the output of the function, and not print it directly to the chat box. Other than that, this seems fine.

[Skurken]

Isn't a one file better than 16 separate files? Also, only one message is output to chatbox and that's if the use clicks proceed with the edit empty, and it should be easy to modify.

[ixjf]

No, it's a pain in the ass to scroll through thousand lines of code to find what you want. Whenever your file or function starts to get big, break it up in smaller, more understable, pieces.

Also, only one message is output to chatbox and that's if the use clicks proceed with the edit empty, and it should be easy to modify.

Libraries should be flexible and not assume the default output stream but rather let the developer do that, no matter the amount of outputs, unless it's some kind of internal log or such which the developer doesn't really need to know about (in this case, the output is actually accessible by the end-user).

[qaisjp]

So just use one callback.

First arg is the input value.

If callback returns true then don't hide it.

This allows flexible error management.