My custom component is not calling the passed in onEvent method

Hey Corona devs,

I’ve got a simple custom component and I’m specifying an onEvent method as follows:

local button1 = customComponent.create({label="Label1", onEvent=onEvent1}) local button2 = customComponent.create({label="Label2", onEvent=onEvent2}) function onEvent1()    print('onEvent1') end function onEvent2()    print('onEvent2') end

The issue I’m facing is that the ‘onEvent2’ method is being called when I tap button1 (even though I’ve specified it to call onEvent1).

This is an example of how I’m creating the customComponent (stripped down)

local M = {} local handleTouchEvent local onEventHandler function M.create( options )     view = display.newGroup()    onEventHandler = options.onEvent    view:addEventListener("touch",handleTouchEvent) -- (THIS DOES NOT WORK AND IS MY ISSUE) -- view:addEventListener("touch",options.onEvent) -- (COMMENTED OUT, BUT THIS WORKS AS EXPECTED)    return view end handleTouchEvent = function(event)    -- do some custom stuff here    -- ...    -- now call the onEvent method passed in via the options var    onEventHandler(event) end

How can I get each custom component above to call their respective onEvent functions?  I’m pretty sure it’s something to do with scoping.

Thanks :slight_smile:

If you’re literally doing this:

local button1 = customComponent.create({label="Label1", onEvent=onEvent1}) local button2 = customComponent.create({label="Label2", onEvent=onEvent2}) function onEvent1() print('onEvent1') end function onEvent2() print('onEvent2') end

then you have TWO major issues.
 
First, those event listeners should not be globals.
 
Second, your order is dead wrong.

local function onEvent1() print('onEvent1') end local function onEvent2() print('onEvent2') end local button1 = customComponent.create({label="Label1", onEvent=onEvent1}) local button2 = customComponent.create({label="Label2", onEvent=onEvent2})

The way you wrote it, neither function was declared or defined when you tried to pass them.

Note: I’m having a little trouble understanding what you want to happen.
 
Do you want every ‘custom component’ to call some touch code that is common and fire a custom event at the end?  If so, do this:
 

local M = {} local handleTouchEvent function M.create( options ) local view = display.newGroup() -- view.customOnEvent = options.onEvent -- view.touch = handleTouchEvent view:addEventListener("touch") -- return view end handleTouchEvent = function( self, event) -- -- I think you meant to say, do standard work here. (same for all touches) -- -- Then, if the builder specified a custom onEvent, call it. -- if( self.customOnEvent ) then self:customOnEvent() end end

local function onEvent1( self ) print('onEvent1') end local function onEvent2( self ) print('onEvent2') end local button1 = customComponent.create({label="Label1", onEvent=onEvent1}) local button2 = customComponent.create({label="Label2", onEvent=onEvent2})

 
Warning: Touch listeners on groups only respond where there is a visible object.

Thank you once again RG.  That’s exactly what I was after and I appreciate the time you spent in helping me out.

I didn’t know about the keyword ‘self’…  I guess it’s a bit like ‘this’ in Javascript?

Yes, a bit like that.

‘self’ is an implied reference to the calling object.

There are many ways to define ‘methods’ in Lua…

Colon Notation - Implicit ‘self’ as first arg

-- Ex1 local obj = { name = "Bob" } function obj:printName( ) print(self.name) end -- Can be called like this: obj:printName() -- or like this obj.printName( obj )

Dot Notation - Explicit ‘self’ as first argument:

-- Ex2 local obj = { name = "Bob" } function obj.printName( self ) print(self.name) end -- Can be called like this: obj:printName() -- or like this obj.printName( obj )

Dot Notation - Explicit alternately named arg as first argument:

-- Ex3 local obj = { name = "Bob" } function obj.printName( me ) print( me.name ) end -- Can be called like this: obj:printName() -- or like this obj.printName( obj )

If you’re literally doing this:

local button1 = customComponent.create({label="Label1", onEvent=onEvent1}) local button2 = customComponent.create({label="Label2", onEvent=onEvent2}) function onEvent1() print('onEvent1') end function onEvent2() print('onEvent2') end

then you have TWO major issues.
 
First, those event listeners should not be globals.
 
Second, your order is dead wrong.

local function onEvent1() print('onEvent1') end local function onEvent2() print('onEvent2') end local button1 = customComponent.create({label="Label1", onEvent=onEvent1}) local button2 = customComponent.create({label="Label2", onEvent=onEvent2})

The way you wrote it, neither function was declared or defined when you tried to pass them.

Note: I’m having a little trouble understanding what you want to happen.
 
Do you want every ‘custom component’ to call some touch code that is common and fire a custom event at the end?  If so, do this:
 

local M = {} local handleTouchEvent function M.create( options ) local view = display.newGroup() -- view.customOnEvent = options.onEvent -- view.touch = handleTouchEvent view:addEventListener("touch") -- return view end handleTouchEvent = function( self, event) -- -- I think you meant to say, do standard work here. (same for all touches) -- -- Then, if the builder specified a custom onEvent, call it. -- if( self.customOnEvent ) then self:customOnEvent() end end

local function onEvent1( self ) print('onEvent1') end local function onEvent2( self ) print('onEvent2') end local button1 = customComponent.create({label="Label1", onEvent=onEvent1}) local button2 = customComponent.create({label="Label2", onEvent=onEvent2})

 
Warning: Touch listeners on groups only respond where there is a visible object.

Thank you once again RG.  That’s exactly what I was after and I appreciate the time you spent in helping me out.

I didn’t know about the keyword ‘self’…  I guess it’s a bit like ‘this’ in Javascript?

Yes, a bit like that.

‘self’ is an implied reference to the calling object.

There are many ways to define ‘methods’ in Lua…

Colon Notation - Implicit ‘self’ as first arg

-- Ex1 local obj = { name = "Bob" } function obj:printName( ) print(self.name) end -- Can be called like this: obj:printName() -- or like this obj.printName( obj )

Dot Notation - Explicit ‘self’ as first argument:

-- Ex2 local obj = { name = "Bob" } function obj.printName( self ) print(self.name) end -- Can be called like this: obj:printName() -- or like this obj.printName( obj )

Dot Notation - Explicit alternately named arg as first argument:

-- Ex3 local obj = { name = "Bob" } function obj.printName( me ) print( me.name ) end -- Can be called like this: obj:printName() -- or like this obj.printName( obj )