Using panels

Panels are special components which can hold other components. In GÖÖi, panels and layouts are pretty much the same because you need the first one to access the second one.

• Grid layout
• Game layout
• Functions

#Grid layout

Please note:

• It's a 4x4 grid layout
• in 1,1 (row 1, column 1) there's a rowspan = 2
• in 4,3 there's a colspan = 2

The actual code would be this:

require "gooi"
function love.load()
	panelGrid = gooi.newPanel(0, 0, 380, 150, "grid 4x4")
	panelGrid:setRowspan(1, 1, 2)
	panelGrid:setColspan(4, 3, 2)
	panelGrid:add(
		gooi.newButton("Fat Button"),
		gooi.newButton("Button 1"),
		gooi.newButton("Button 2"),
		gooi.newButton("Button 3"),
		gooi.newButton("Button X"),
		gooi.newButton("Button Y"),
		gooi.newButton("Button Z"),
		gooi.newButton("Button ."),
		gooi.newButton("Button .."),
		gooi.newButton("Button ..."),
		gooi.newButton("Button ...."),
		gooi.newButton("Last Button"),
		gooi.newCheck("Check 1"),
		gooi.newCheck("Large Check")
	)
end
function love.draw()
	gooi.draw()
end
function love.mousepressed(x, y, button)  gooi.pressed() end
function love.mousereleased(x, y, button) gooi.released() end

#Game layout

This layout was made for "in game" GUI's, so you can easily put components in "top-right", "bottom-left" and so on.

This would be the code:

require "gooi"
function love.load()
	panelGrid = gooi.newPanel(0, 0, 380, 300, "game")
	panelGrid:add(gooi.newLabel("Score: 999999"), "t-l")
	panelGrid:add(gooi.newBar(), "t-r")
	panelGrid:add(gooi.newJoy({size = 70}), "b-l")
	panelGrid:add(gooi.newButton("Action 1"), "b-r")
	panelGrid:add(gooi.newButton("Action 2"), "b-r")
end
function love.draw()
	gooi.draw()
end
function love.mousepressed(x, y, button)  gooi.pressed() end
function love.mousereleased(x, y, button) gooi.released() end

#Functions

• add(component[,string]) ➤ it adds a new component to the panel (the string is for game layout and it can be "t-l", "t-r", "b-l" or "b-r")
• setRowspan(number, number, number) ➤ It sets the rowspan on the given rown and column (grid only)
• setColspan(number, number, number) ➤ Yeah, the same