yui - declarative GUI library for LÖVE

[1414codeforge]

Hi, glad to see Yui is being used

What is the best way to build a custom widget? Just copy paste code out of an existing one, and change it?

Yes, I'd say that's the most straightforward way.

Pick a relatively simple one (like Button, Label or Checkbox) and tweak from there.
It'll help you to understand how it works, then you'll be able to gradually create more complex ones like Input and Slider.

Is there a way to get a label to change it's text field dynamically? Because this doesn't work, as far as I can tell: [...]

I've replied to this on codeberg, thanks for submitting the issue!

[lakotajames]

Thanks! Is it better to contact you in this thread, or on codeburg?

[1414codeforge]

Depends on the subject, for general discussion and questions, the forum is the better, so more people can join the discussion and give their ideas.
For bugs and feature requests, codeberg is better, so development can be tracked more efficiently.

[lakotajames]

So, I was able to make a custom "choiceButton" widget by copying choice widget and adding the toHit stuff from button, then changing every occurrence of "Choice" to ChoiceButton". I added it to the lib folder and added the require to the init.lua. Everything works!

However, if there's a way to keep my custom stuff out of the library itself so that I can just download and replace the library to update it, that'd be ideal.

I presume I'd need to change something about the BASE line to move the file, then just require it manually where I'm requiring yui. Can you point me in the right direction?

[1414codeforge]

So, I was able to make a custom "choiceButton" widget by copying choice widget and adding the toHit stuff from button, then changing every occurrence of "Choice" to ChoiceButton". I added it to the lib folder and added the require to the init.lua. Everything works!

Nice

However, if there's a way to keep my custom stuff out of the library itself so that I can just download and replace the library to update it, that'd be ideal.

I presume I'd need to change something about the BASE line to move the file, then just require it manually where I'm requiring yui. Can you point me in the right direction?

In my projects, I usually keep all third-party libs under a lib subdirectory.
So, for example, if I had to use yui I'd keep it under lib/yui.
Assuming you want to store all your custom widgets under a widgets folder, you'd end up with the following layout:

• lib/yui, the yui module.
• widgets, your custom widgets folder.

So, you could create a widgets/mybutton.lua widget, and you'd require the necessary modules like this.

Code: Select all

local Widget = require 'lib.yui.widget'
local core = require 'lib.yui.core'

local MyButton = setmetatable({
    __call = function(cls, args) return cls:new(args) end
}, Widget)

-- ...

return MyButton

You could then import your widgets anywhere in your project, like this:

Code: Select all

local MyButton = require 'widgets.mybutton'

-- ...

And use it like any other yui "standard" widget to create your ui.

This is just my way to organize projects, not necessarily the best.

[Azzla]

Is it possible to programmatically determine widgets for the template? I don't mean dynamic widget state during runtime, but rather template generation at runtime. Something like:

Code: Select all

return Yui.Ui:new{
	x = x, y = y,
	Yui.Rows{
		--widgets by iteration
		for i,v in ipairs(extern_values) do Yui.Button{ ... } end

		--conditional widgets
		if extern_flag then
			Yui.Slider{ ... }
		else
			Yui.Checkbox{ ... }
		end

		--widgets as return values
		generateButton(extern_options) --inlines 'Yui.Button{ ... }'
	}
}

These obviously throw syntax errors but it shows the idea. I really like Yui's declarative approach to UI but I feel I'm missing some critical flexibility with the templating. Is there a way to accomplish something like the above?

EDIT: I thought of another question here, sorry! Is it possible to query properties of the template at runtime? Say for example, I want to make my own draw calls on top of Yui's, while still utilizing its layout:

Code: Select all

local ui = Yui.Ui:new{ ... }
local img = love.graphics.newImage(some_path)

function love.draw()
	ui:draw()
	love.graphics.draw(img, ui.rows[1].x, ui.rows[1].y)
end

Thanks.

[1414codeforge]

Hello, about question 1, widget by iteration, in theory you could create a function returning the appropriate widget array, and then unpack it:

Code: Select all

function generateLayout()
	local widgets = {}
	for i,v in ipairs(...) do
	    widgets[i] = ...
	end
	return widgets
end

return yui.Ui:new {
    ...
    unpack(generateLayout()),
    ...
}

Conditional widgets can be achieved in much of the same way:

Code: Select all

function conditional(clause)
    return clause and widget1 or widget2
end

return yui.Ui:new {
    ...
    conditional(extern_flag),
    ...
}

About your second question, it is not very clean, but, in principle, you can do it. You'll notice that pretty much every widget uses a common set of properties storing their position, width, etc...
So you could query them and use them, Lua doesn't provide much encapsulation anyway.

Moreover, you can iterate widgets in a Ui pretty easily, in fact, widgets are stored in the table array portion, so you can use ipairs() with a regular for. You can have either a Container widget (a widget containing another widget), or any other "leaf" widget, such as buttons, sliders, ...