Adding dialog UI elements in grid pattern

[LeviFiction]

Hello,

I'm playing with the UI, trying to learn how it all works together. Still very new to Lua but coming from Python and BASIC languages it's not completely foreign. Took me way longer than it should have to realize the difference between : and . when calling methods. Crashed Moho so many times.

Anyway, I want to make sure I'm approaching this from the best way possible.

I've created a simple dialog with 9 radio buttons arranged in a square (representing the deformation square nodes plus the center)
* * *
* * *
* * *

The way I did this was first pushing Vertical, then pushing Horizontal, adding three children, popping to the next row, pushing horizontal adding three more children, and the same for the last row.

Each row became it's own selection group meaning that I could select one radio button from each row which is not what I wanted, but I couldn't see any options for defining the groups in code. I'm assuming it's automatic based on the view and where I popped to the next column or row.

So, assuming there wasn't a way to define all 9 elements as being part of the same group I used HandleMessage to deselect any radio button that isn't the recipient of the message.

Code: Select all

function msSetOriginDialog:HandleMessage(msg)
    if msg < 50 or msg > 58 then return end -- Avoid OK and Cancel buttons disabling everything.
    if msg ~= 50 then self.TL:SetValue(false) end
    if msg ~= 51 then self.TC:SetValue(false) end
    if msg ~= 52 then self.TR:SetValue(false) end
    if msg ~= 53 then self.ML:SetValue(false) end
    if msg ~= 54 then self.MM:SetValue(false) end
    if msg ~= 55 then self.MR:SetValue(false) end
    if msg ~= 56 then self.BL:SetValue(false) end
    if msg ~= 57 then self.BC:SetValue(false) end
    if msg ~= 58 then self.BR:SetValue(false) end
end

This all works. Took me a good hour and a half to work it all out, but it works. The question is. Is this the best way to do this? Or this there a better way built into the API?

Any insights are greatly appreciated. Thank you.

[synthsin75]

You still have to use HandleMessage, but there's a cleaner way to do it.

I define my dialog layout like this:

Code: Select all

	d.listRadio = {}
	for i = 1, 9 do 
		table.insert(d.listRadio, LM.GUI.RadioButton("", MOHO.MSG_BASE + i))
	end

	l:PushH()
		l:PushV(LM.GUI.ALIGN_TOP)
			for i, rad in ipairs(d.listRadio) do
				l:AddChild(rad, LM.GUI.ALIGN_LEFT)
				if (i % 3 == 0) then
					l:Pop()
					l:PushV()
				end
			end
		l:Pop()
	l:Pop()
	
	return d

And then HandleMessage like this:

Code: Select all

	if (msg > MOHO.MSG_BASE and msg <= MOHO.MSG_BASE + #self.listRadio) then
		for i = 1, #self.listRadio do
			if (msg - MOHO.MSG_BASE ~= i) then
				self.listRadio[i]:SetValue(false)
			end
		end
	end

[LeviFiction]

Excellent. Thank you very much.

I have a very inefficient coding workflow where I do everything long form then figure out how to make it smaller with loops and array types. But the general idea then for the dialog is at least solid, using the UI messages to force a new logic compared to the default. And I greatly appreciate the code, it'll help as I get used to scripting in both Moho and Lua.

[synthsin75]

Yeah, usually doing it long form is fine, and you're solution was correct. But if you have to layout a lot of controls, in many rows/columns with a lot of unique control messages, it really helps to use loops. But it's rare to have a ton of controls like that.