Using panels

Panels are special components which can hold other components. In GÖÖi, panels and layouts are pretty much the same because we need to define a layout when creating one of this containers, we also need the first one to access the second one.

• Grid layout
• Game layout
• Functions

#Grid layout

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") -- x, y, w, h, layout
	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.

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")
• debug() ➤ Shows the grid structure for grid layouts
• setRowspan(number, number, number) ➤ It sets the rowspan on the given row and column, the order is row, column, span (grid only)
• setColspan(number, number, number) ➤ Yeah, the same