Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-23150] EventListener issues in ScrollableView for IOS.

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2016-04-13T18:04:49.000+0000
Affected Version/sn/a
Fix Version/sRelease 5.4.0
ComponentsiOS
Labelseventlistener, ios, qe-5.4.0, scrollableView, tableView
ReporterSuraj Datta
AssigneeAngel Petkov
Created2016-04-04T08:11:34.000+0000
Updated2016-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

FileDateSize
index.js2016-04-04T08:10:34.000+00001986
index.xml2016-04-04T08:10:34.000+000093
Simulator Screen Shot 04-Apr-2016 1.37.49 pm.png2016-04-04T08:08:56.000+000051158
Simulator Screen Shot 04-Apr-2016 1.37.55 pm.png2016-04-04T08:08:56.000+000055182

Comments

  1. Angel Petkov 2016-04-06

    Demo Code:
       var win = Ti.UI.createWindow({
         backgroundColor: 'white'
       });
        
       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/campFire01.gif",
       		height: '18dp',
       		left: '5dp',
       		width: '13%',
       		top: '25%',
       		touchEnabled:true
       	});
       
       	var slideOptionsView = Ti.UI.createView({
       		backgroundColor: "#1268b3",
       		layout: "horizontal"
       	});
       
       	var img_activity = Ti.UI.createImageView({
       		image: "/images/campFire02.gif",
       		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);
       	// Event Listeners on click event for above images
       	img_activity.addEventListener('click', function(e) {
       		alert("img_activity");
       	});
       
       	image1.addEventListener('click', function(e) {
       		alert("image1");
       	});
       }
       
       table.setData(tableData);
       tableData = null;
       
       
       var visitView = Ti.UI.createView({
       	backgroundColor: 'red'
       });
       visitView.add(table);
       win.add(visitView);
       win.open();
       
    PR : https://github.com/appcelerator/titanium_mobile/pull/7923
  2. Angel Petkov 2016-04-06

    [~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.
  3. Suraj Datta 2016-04-07

    @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.
  4. Chee Kiat Ng 2016-04-07

    [~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!
  5. Suraj Datta 2016-04-07

    Ok it would be good to create new ticket for Android. Thanks team for your help. We can close this ticket. :)
  6. Hans Knöchel 2016-04-07

    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!
  7. Suraj Datta 2016-04-12

    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.
  8. Hans Knöchel 2016-04-12

    [~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.
  9. Harry Bryant 2016-06-09

    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.*

JSON Source