Few days ago, I come across a question on Tiantium Appcelertor forum regarding single event listener for multiple controls on a view. Here is a sample example that shows, how to implement single event listener for multiple controls concept in Titanium. Let me know, if you've any better idea or question regarding this example, through comments.
You can run this example online @ http://appc.me/learn/. Just paste the following code there, and hit "run" button.
You can run this example online @ http://appc.me/learn/. Just paste the following code there, and hit "run" button.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** I'm going to create a sample example that shows how to implement single event listener for | |
* multiple controls. In this case, the click event listener is added only on the Baseview which | |
* holds all the controls. When user taps any child control or Baseview itself, | |
* it will fire the click event of Baseview - in which you can find the source control | |
* that raised the event by source property. */ | |
var win = Ti.UI.createWindow(); | |
var baseView = Ti.UI.createView({ | |
id: 'baseView', | |
width: Ti.UI.FILL, | |
height: Ti.UI.FILL, | |
layout: 'vertical', | |
backgroundColor: '#fff' | |
}); | |
win.add(baseView); | |
var titleLabel = Ti.UI.createLabel({ | |
id: 'titleLabel', | |
top: 10, | |
left: 10, | |
height: 50, | |
color: '#f00', | |
text: 'Single Event Listener Demo' | |
}); | |
baseView.add(titleLabel); | |
for (var index = 1; index <= 5; index++) { | |
var eventView = Ti.UI.createView({ | |
id: 'eventView', | |
top: 0, | |
width: Ti.UI.FILL, | |
height: 50, | |
borderWidth: 1 | |
}); | |
baseView.add(eventView); | |
var eventTitle = Ti.UI.createLabel({ | |
id: 'eventTitle', | |
top: 10, | |
left: 10, | |
right: 70, | |
height: 30, | |
text: ('Event ' + index) | |
}); | |
eventView.add(eventTitle); | |
/* Button to save event. Note: I haven't added click event listener for each saveButton */ | |
var saveButton = Ti.UI.createButton({ | |
top: 10, | |
right: 10, | |
width: 50, | |
height: 30, | |
title: '+', | |
/* Custom properties */ | |
event: 'add', | |
data: { | |
id: Math.floor((Math.random() * 1000) + 1), | |
title: eventTitle.text, | |
date: new Date() | |
} | |
}); | |
eventView.add(saveButton); | |
} | |
var resultLabel = Ti.UI.createLabel({ | |
id: 'resultLabel', | |
top: 25, | |
left: 10, | |
right: 10 | |
}); | |
baseView.add(resultLabel); | |
function save(event) { | |
resultLabel.text = "Event details stored: \nID: " + event.id + "\nTitle: " + event.title + "\nDate: " + event.date; | |
} | |
baseView.addEventListener('click', function(e) { | |
/* check if custom property "event" exist in the event source */ | |
if (e.source.event === 'add') { | |
save(e.source.data); | |
} | |
/* show the source control which caused the click event to fire */ | |
else { | |
resultLabel.text = "You clicked - " + e.source.id; | |
} | |
}); | |
win.open(); |