Button class

This button takes two bitmaps as argument. 1 bitmap for the button up state, and 1 for the button down state.

If only 1 bitmap is passed, it will be used for both up and down states.

Button Class

--[[
-- Button
-- A generic Gideros Button class

-- This code is MIT licensed, see http://www.opensource.org/licenses/mit-license.php
-- (C) 2010 - 2011 Gideros Mobile
]]

Button = Core.class(Sprite)

function Button:init(upState, downState) -- upstate and downstate are bitmaps
	self.upState = upState
	self.downState = downState
	self:addChild(self.upState)
	if self.downState then self:addChild(self.downState) end

	self.focus = false

	-- set the visual state as "up"
	self:updateVisualState(false)

	-- register to all mouse and touch events
	self:addEventListener(Event.MOUSE_DOWN, self.onMouseDown, self)
	self:addEventListener(Event.MOUSE_MOVE, self.onMouseMove, self)
	self:addEventListener(Event.MOUSE_UP, self.onMouseUp, self)

	self:addEventListener(Event.TOUCHES_BEGIN, self.onTouchesBegin, self)
	self:addEventListener(Event.TOUCHES_MOVE, self.onTouchesMove, self)
	self:addEventListener(Event.TOUCHES_END, self.onTouchesEnd, self)
	self:addEventListener(Event.TOUCHES_CANCEL, self.onTouchesCancel, self)
end

function Button:onMouseDown(ev)
	if self:hitTestPoint(ev.x, ev.y) then
		self.focus = true
		self:updateVisualState(true)
		ev:stopPropagation()
	end
end

function Button:onMouseMove(ev)
	if self.focus then
		if not self:hitTestPoint(ev.x, ev.y) then
			self.focus = false
			self:updateVisualState(false)
		end
		ev:stopPropagation()
	end
end

function Button:onMouseUp(ev)
	if self.focus then
		self.focus = false
		self:updateVisualState(false)
		self:dispatchEvent(Event.new("clicked")) -- button is clicked, dispatch "clicked" event
		ev:stopPropagation()
	end
end

-- if button is on focus, stop propagation of touch events
function Button:onTouchesBegin(ev)
	if self.focus then
		ev:stopPropagation()
	end
end

-- if button is on focus, stop propagation of touch events
function Button:onTouchesMove(ev)
	if self.focus then
		ev:stopPropagation()
	end
end

-- if button is on focus, stop propagation of touch events
function Button:onTouchesEnd(ev)
	if self.focus then
		ev:stopPropagation()
	end
end

-- if touches are cancelled, reset the state of the button
function Button:onTouchesCancel(ev)
	if self.focus then
		self.focus = false
		self:updateVisualState(false)
		ev:stopPropagation()
	end
end

-- if state is true show downState else show upState
function Button:updateVisualState(state)
	if state then -- downState
		if self.downState then
			self.downState:setVisible(true)
			self.upState:setVisible(false)
		else
			self.upState:setVisible(true)
		end
	else -- upState
		if self.downState then
			self.downState:setVisible(false)
			self.upState:setVisible(true)
		else
			self.upState:setVisible(true)
		end
	end
end

Button Demo

-- bg
application:setBackgroundColor(0x6c6c6c)
-- textures
local texbtnup = Texture.new("gfx/ui/btn_01_up.png")
local texbtndown = Texture.new("gfx/ui/btn_01_down.png")
-- buttons
local btns = {}
btns[#btns+1] = Button.new(Bitmap.new(texbtnup), Bitmap.new(texbtndown))
btns[#btns+1] = Button.new(Bitmap.new(texbtnup))
btns[#btns+1] = Button.new(Bitmap.new(texbtnup), Bitmap.new(texbtndown))
btns[#btns+1] = Button.new(Bitmap.new(texbtnup), Bitmap.new(texbtndown))
btns[#btns+1] = Button.new(Bitmap.new(texbtnup), Bitmap.new(texbtndown))
--...
-- listener
function clicked(btn)
	print("button "..btn.." was clicked!")
end
for k, v in ipairs(btns) do
	v:setScale(0.5)
	v:setPosition(16*(k+(k-1)*4), 16*1) -- horizontal
--	v:setPosition(16*1, 16*(k+(k-1)*2)) -- or vertical
	stage:addChild(v)
	v:addEventListener("clicked", clicked, k)
end

UI Buttons

---

• Main Page
• Lua API
• Main API
• Plugins