Using panels

Panels are components (they are created with component.lua as well) which can hold other components. In GÖÖi, panels and layouts are pretty much the same, because you need to choose either a grid or a game layout when creating them.

• 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 element 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)
• setRowspan(number, number, number) ➤ It sets the rowspan on the given rown and column (grid only)
• setColspan(number, number, number) ➤ Yeah, the same