Gideros UI and layouts (WidgetKit) Thread

vitalitymobile

Hello everyone, while working on UI/UX for games, I stumbled upon the "Library/ui" folder which contains a variety of components like Buttons, Text, ScrollList, DropDown, and even a Calendar. So, I'm starting this thread hoping to engage with you all about Gideros' GUI system. I believe many of you might be interested as well. Please share any examples and questions related to this built-in UI and Layout system. I find its architecture and code quite lightweight, and with comprehensive documentation and examples, it has great potential!

@hgy29 I hope that when you have the time, you will post some small examples and tutorials about this system so that everyone can use it and make it more popular!
I now start reading setLayouttConstraints/ setLayoutParameters in https://wiki.gideros.rocks/index.php/Sprite:setLayoutConstraints

hgy29

Hi, here is the test code I use to ensure everything works correctly when I update the widget kit. This demo doesn't show all the features of this UI kit, but most of it.

hgy29

I wanted to write a few snippets about Gideros UI library, but I don't have access to the wiki currently so I write them here.

First of all, in order to use Gideros UI Library (GUIL ?) you have to link two folders to your project: Library/ui and Library/luashaders from your Gideros installation (GUIL depends on luashaders).

Now a first example to make a very simple Button:

local button=UI.Button.new() button:setDimensions(200,50) button:setPosition(50,50) button:setText("Click me!")   function button:onWidgetAction() print("Hello UI World!") end   stage:addChild(button)

Straightforward, right ?

hgy29

New with two buttons, introducing the events system:

local buttonA=UI.Button.new() buttonA:setDimensions(200,50) buttonA:setPosition(50,50) buttonA:setText("Click me!")   local buttonB=UI.Button.new() buttonB:setDimensions(200,50) buttonB:setPosition(50,150) buttonB:setText("Don't click me!")   stage:addChild(buttonA) stage:addChild(buttonB)   --Here we put the WidgetAction listener on stage. --It will be propagated from each button up to stage through the sprite tree --First parameter of event listeners are always the source widget of the event function stage:onWidgetAction(w) if w==buttonA then print("Yes that's it") elseif w==buttonB then print("You a rebel!") end end

hgy29

Another example with Sliders this time:

--Sliders give value from 0 to 1 local sliderA=UI.Slider.new() sliderA:setDimensions(200,50) sliderA:setPosition(50,50) sliderA.name="Slider A"   local sliderB=UI.Slider.new() sliderB:setDimensions(200,50) sliderB:setPosition(50,150) --This slider center is in the middle of the range sliderB:setCenter(.5) --Initial value is .6 sliderB:setKnobPosition(.6) --Discrete steps of .1 sliderB:setResolution(.1) sliderB.name="Slider B"   stage:addChild(sliderA) stage:addChild(sliderB)   --Here we put the WidgetAction listener on stage. --It will be propagated from each button up to stage through the sprite tree --First parameter of event listeners are always the source widget of the event function stage:onWidgetChange(w,v) print(w.name.." value is "..v) end

hgy29

Now a demo with two new widgets: a label (a simple non editable text widget), and a viewport (scrollable area):

local label=UI.Label.new([[ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ]],{ flags=FontBase.TLF_BREAKWORDS|FontBase.TLF_REF_LINETOP}) label:setLayoutConstraints({fill=1})   local viewport=UI.Viewport.new() viewport:setDimensions(application:getContentWidth(),application:getContentHeight()) viewport:setContent(label) viewport:setScrollbar({UI.Viewport.SCROLLBAR.AUTO,UI.Viewport.SCROLLBAR.AUTO}) stage:addChild(viewport)

hgy29

A last one for this evening: a textfield demo.
For this to work you'll have to use a TTF font (it doesn't work well with gideros embedded font).

In init.lua:

UI={ Default={ TTF="OpenSans.ttf", } }

Then in main.lua:

local tf=UI.TextField.new() tf:setDimensions(200,50) tf:setPosition(50,50) tf:setTipText("Enter your name and press enter")   function tf:onTextValid(w,txt) print("Hello "..txt) end   stage:addChild(tf)