[TIMOB-23150] EventListener issues in ScrollableView for IOS.
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | High |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2016-04-13T18:04:49.000+0000 |
Affected Version/s | n/a |
Fix Version/s | Release 5.4.0 |
Components | iOS |
Labels | eventlistener, ios, qe-5.4.0, scrollableView, tableView |
Reporter | Suraj Datta |
Assignee | Angel Petkov |
Created | 2016-04-04T08:11:34.000+0000 |
Updated | 2016-06-09T22:47:15.000+0000 |
Description
Hello,
Inside ScrollableView, i have added two views including some views & images. Their is a TableView & its rows in which scrollview is added.
Also i have added some EventListener's on images which are not executed in case of IOS. It's working perfectly on Android.
var args = $.args;
var table = Ti.UI.createTableView({
editable : 'true',
// editing : 'true',
//id : 'table',
layout : "vertical",
separatorColor : "#1268b3"
});
var tableData = [];
var i, row, header;
for ( i = 0; i < 10; i++) {
row = Ti.UI.createTableViewRow({
id : i,
layout : 'horizontal',
color : '#0066cc',
height : '55'
});
var dataView = Ti.UI.createView({
layout : 'horizontal',
top : '0'
});
var textHolderView = Ti.UI.createView({
layout : 'vertical',
width : '50%'
});
var iconView = Ti.UI.createView({
layout : 'horizontal',
width : '24.5%' //35dp
});
header = Ti.UI.createLabel({
text : "Some Text"+i,
font : {
fontSize : '12dp',
fontFamily : 'OpenSans-Semibold',
fontWeight : 'normal'
},
height : '38dp',
left : '15%',
color : '#000',
width : '85%',
touchEnabled : false,
//borderColor:"black"
});
var image1 = Ti.UI.createImageView({
image : "/images/individual.png",
height : '18dp',
left : '5dp',
width : '13%',
top : '25%'
});
var slideOptionsView = Ti.UI.createView({
backgroundColor : "#1268b3",
layout : "horizontal"
});
var img_activity = Ti.UI.createImageView({
image : "/images/activity_temp.png",
height : "30dp",
width : "70dp",
left : "10%",
top : "15dp",
touchEnabled:true
});
textHolderView.add(header);
iconView.add(image1);
dataView.add(textHolderView);
dataView.add(iconView);
slideOptionsView.add(img_activity);
var scroll = Ti.UI.createScrollableView({
views : [dataView, slideOptionsView],
showPagingControl : false,
});
row.add(scroll);
tableData.push(row);
table.setData(tableData);
// Event Listeners on click event for above images
img_activity.addEventListener('click', function(e) {
alert("img_activity");
});
image1.addEventListener('click', function(e) {
alert("image1");
});
}
$.visitView.add(table);
$.index.open();
Attached some screenshots & files below.
*Versions Used:*
SDK 5.2.1.GA
CLI 5.2.1
Thanks.
Note:
I gave a try by removing TableView & row from above code.
Problem lies with ScrollableView where Listeners are not getting called on click of any image. Scroll & other Listener events are working fine.
// var table = Ti.UI.createTableView({
// id : 'table',
// layout : "vertical",
// separatorColor : "#1268b3"
// });
var tableData = [];
var i, header;
// var row = Ti.UI.createTableViewRow({
// id : i,
// layout : 'horizontal',
// color : '#0066cc',
// height : '55'
// });
var dataView = Ti.UI.createView({
layout : 'horizontal',
top : '0'
});
var textHolderView = Ti.UI.createView({
layout : 'vertical',
width : '50%'
});
var iconView = Ti.UI.createView({
layout : 'horizontal',
width : '24.5%' //35dp
});
header = Ti.UI.createLabel({
text : "Some Text",
font : {
fontSize : '12dp',
fontFamily : 'OpenSans-Semibold',
fontWeight : 'normal'
},
height : '38dp',
left : '15%',
color : '#000',
width : '85%',
touchEnabled : false,
//borderColor:"black"
});
var image1 = Ti.UI.createImageView({
image : "/images/individual.png",
height : '18dp',
left : '5dp',
width : '13%',
top : '25%'
});
var slideOptionsView = Ti.UI.createView({
backgroundColor : "#1268b3",
layout : "horizontal"
});
var img_activity = Ti.UI.createImageView({
image : "/images/activity_temp.png",
height : "30dp",
width : "70dp",
left : "10%",
top : "15dp",
touchEnabled : true
});
textHolderView.add(header);
iconView.add(image1);
dataView.add(textHolderView);
dataView.add(iconView);
slideOptionsView.add(img_activity);
var scroll = Ti.UI.createScrollableView({
views : [dataView, slideOptionsView],
showPagingControl : false,
});
// row.add(scroll);
// tableData.push(row);
// table.setData(tableData);
// Event Listeners on click for above images
// img_activity.addEventListener('click', function(e) {
// alert("img_activity");
// });
Ti.API.info(i);
// scroll.addEventListener('click', function(e){
// alert(JSON.stringify(e.source));
// });
image1.addEventListener('click', function(e) {
alert("image1");
});
//table
$.someView.add(scroll);
$.index.open();
Attachments
File | Date | Size |
---|---|---|
index.js | 2016-04-04T08:10:34.000+0000 | 1986 |
index.xml | 2016-04-04T08:10:34.000+0000 | 93 |
Simulator Screen Shot 04-Apr-2016 1.37.49 pm.png | 2016-04-04T08:08:56.000+0000 | 51158 |
Simulator Screen Shot 04-Apr-2016 1.37.55 pm.png | 2016-04-04T08:08:56.000+0000 | 55182 |
Demo Code:
PR : https://github.com/appcelerator/titanium_mobile/pull/7923
[~Suraj Datta] The PR above should fix the issue you were having :), however putting a scrollableView inside a tableView isn't the best idea , it will work most of the time however it isn't best practice and can cause native issues.
@Angel Petkov Thanks for that fix, it's working now :D. Also, do we need to make some similar changes for Android? It's showing some abnormalities in it. +Example:+ On 5-6 clicks on images alert is getting executed, but after that the *click* event becomes unresponsive & alert message gets executed after scrolling to 1st or 2nd view. Thanks Again.
[~Suraj Datta] Very good to hear that it's working for you now. I think it'll be preferable to create a new ticket specific for the Android issue you described, so as not to make this ticket too bulky with excess info. Appreciate it!
Ok it would be good to create new ticket for Android. Thanks team for your help. We can close this ticket. :)
I tested the issue on some aspects: *5_2_X*: - Does not work by default, but does work with
<run-on-main-thread>true</run-on-main-thread>
inside the<ios/>
section of tiapp.xml *5_4_X* (aka master): - Does work by default, because it uses main-thread by default. Disabling it manually will make it stop working Removing the#ifdef
Statements are no suitable solution, because it breaks several other tickets (see the PR) again, for which those macros have been introduced just this week. We will revisit this issue knowing the above facts and come up with an improved solution. Thanks guys!Hello All, The above build code of *TiUIScrollableViewProxy.m* is working fine. Since the build file changes on some runs, i have to reconfigure the above file every time. So do we have any permanent solution for it? Thanks.
[~Suraj Datta], if the PR works for you, you can patch your Ti-version in
~/Library/Application Support/Titanium/mobilesdk/osx/
, the long-term solution will be available in 5.4.0.Verified as fixed, Using the demo code provided, I receive the EventListener alerts without issue. Tested On: iPhone 6S (9.3.2) Device Mac OSX El Capitan 10.11.5 Ti SDK: 5.4.0.v20160608165242 Appc Studio: 4.6.0.201605201934 Appc NPM: 4.2.7.-2 App CLI: 5.4.0-11 Xcode 7.3 Node v4.2.6 *Closing ticket.*