Button Event Listening: Best Practice?

Getting Started Newbie Questions
#1

[code] – Touch function
local function touchButton(event)
print(“Button pressed!”)
end

– Button function
function labelButton(params)

– Imagine various doses of display.newImage and display.newText

end

– Generate the button
local myAwesomeButton = labelButton{ x=200,y=200 }
[/code]

Given that snazzy code, I have to admit I’ve run adrift on finding the best way to make the button clickable.

At first I tried… [lua]myAwesomeButton:addEventListener(“touch”, touchButton)[/lua]… but Corona choked on adding a listener to a function instead of an image. So I guess I’m approaching this the wrong way.

So I have to ask:

When making buttons, do you plant Runtime:addEventListener inside the creation function, or do you do something outside? (I see some functions people use with subfunctions like myAwesomeButton:touch()?) [import]uid: 41884 topic_id: 14875 reply_id: 314875[/import]

#2

I put together a video/sample code that may help. It’s called Better Buttons in Corona SDK and you can find it here:

http://gamedevnation.com/gdn-membership/better-buttons-in-corona-sdk/

That article is “members only” content so you’d have to join Game Dev Nation to see it, but membership is free so don’t let that stop you. :slight_smile:

You said…


At first I tried… myAwesomeButton:addEventListener(“touch”, touchButton)… but Corona choked on adding a listener to a function instead of an image. So I guess I’m approaching this the wrong way.

…but your code snippet doesn’t look wrong – the second parameter of addEventListener() *is* the name of a function, so whatever Corona SDK was choking on probably wasn’t that.

What might be happening is that you’re probably not returning a display object from labelButton(), so myAwesomeButton isn’t really a display object.

Not sure we can tell what the actual problem is without more code, but hope the above helps.

Jay
[import]uid: 9440 topic_id: 14875 reply_id: 54932[/import]

#3

This would work well :

[code]
– Touch function
local function touchButton(event)
if event.phase == “began” then
print(“Button pressed!”)
end
end

– Button function
function labelButton(params)

– Imagine various doses of display.newImage and display.newText

end

– Generate the button
local myAwesomeButton = labelButton{ x=200,y=200 }
myAwesomeButton:addEventListener(“touch”, touchButton)
[/code] [import]uid: 84637 topic_id: 14875 reply_id: 54938[/import]

#4

Thanks, JA and Danny.

JA: I get what you’re saying, but in the situation I was assuming it was choking because the addEventListener kept complaining that myAwesomeButton was nil. Is there anything special to return a display object?

(I really need to read a doc on how return is useful for some of these things, can’t say I’ve used it more than once or twice.)

I’ll give that video a look tonight! :slight_smile: [import]uid: 41884 topic_id: 14875 reply_id: 54943[/import]

#5

Danny, does labelButton() have to return something specific for that to work?

You’re adding an event listener to myAwesomeButton which might not be a display object - depending on what labelButton returns, right?

Or am I misunderstanding/overlooking something?

Jay
[import]uid: 9440 topic_id: 14875 reply_id: 54944[/import]

#6

Hey Jay.

I presumed the thread creator created a function to create buttons that way. If not it wouldn’t work of course. [import]uid: 84637 topic_id: 14875 reply_id: 54945[/import]

#7

@richard9, you have to have *something* to add an event listener to.

The way you’d pass back an object could be something like this:

[lua]local function weGotTouched(e)
if e.phase == “ended” then
print(“touchy!”)
end
end

local function makeMyButton(imgpath, x, y)
local btn = display.newImage(imgpath)
btn.x = x
btn.y = y
btn.foo = bar – just something else to add as a property

return btn
end

local myAwesomeButton = makeMyButton(“images/menubtn.png”, 150, 175)

myAwesomeButton:addEventListener(“touch”, weGotTouched)[/lua]

(Untested, but that should work.)

Basically, you create the button inside makeMyButton(), and do whatever you want in there, but pass back a reference to the button so you can use it outside of that function.

Jay
[import]uid: 9440 topic_id: 14875 reply_id: 54955[/import]

#8

Hey Jay,

  1. Yeah, returning the displaygroup did the trick wonderfully. It’s going to take awhile to wrap my brain around what should return stuff, but thanks.

What I’m trying to grasp now is that I see a lot of function lua files out there that use an “onRelease” parameter, like so:

[code]function dosomething(event)
– (stuff)
end

myAwesomeButton{x=200,y=200,onRelease=dosomething}[/code]

What I think is going on is that the event listeners are inside the function code rather than being added outside…is this where Runtime should be used? Kinda confused how else you would add a listener from within the function otherwise.

  1. Unfortunately I couldn’t view the video. Tried Chrome and Firefox, but both just lead back to the main page when you click the link. Sorry. The normal video links work but the subscriber stuff just isn’t there.

In the meantime, it seems to me that the easiest way to make “over” effects is to draw both the normal and “over” buttons right off the bat, but something like this…

local button = display.newImage(image.png) local buttonover = display.newImage(over.png) buttonover.IsVisible = false

…and then hook up some event listener for…over? Not sure what the event phases are…but is that more or less how you handle it? [import]uid: 41884 topic_id: 14875 reply_id: 55017[/import]