Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-13020] Android: applyProperties should be atomic for UI actions

GitHub Issuen/a
TypeNew Feature
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2013-03-19T02:14:59.000+0000
Affected Version/sRelease 3.0.2
Fix Version/sRelease 3.1.0, 2013 Sprint 06 API, 2013 Sprint 06
ComponentsAndroid
Labelsmodule_AndroidProperties, qe-testadded
ReporterBlain Hamon
AssigneeBlain Hamon
Created2013-03-11T01:15:16.000+0000
Updated2013-03-23T20:43:04.000+0000

Description

Given:
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

// create tab group
var tabGroup = Titanium.UI.createTabGroup();

// create base UI tab and root window
var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});

var label1 = Titanium.UI.createLabel({
	color:'#999',
	text:'I am Window 1',
	font:{fontSize:20,fontFamily:'Helvetica Neue'},
	textAlign:'center',
	width:'auto'
});

win1.add(label1);

var viewy = Ti.UI.createView({width:100, height:100, top: 50, left: 50, backgroundColor:'#f00'});

function doWork(){
	viewy.applyProperties({top:150,left:150});
	viewy.applyProperties({top:50,left:50});
}

win1.add(viewy);

var btn1 = Ti.UI.createButton({width:200,height:60,left:10,top:410,title:'Test!'});
win1.add(btn1);
btn1.addEventListener('click',function(){
	label1.text = 'Testing...';
	var startTime = Date.now();
	for(i=0;i<1000;i++){
		doWork();
	}
	var endTime = Date.now();
	label1.text = 'This command USED TO take '+(endTime-startTime)+' microsecs.';
	Ti.API.debug(label1.text);	
})


//
// create controls tab and root window
//
var win2 = Titanium.UI.createWindow({  
    title:'Tab 2',
    backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({  
    icon:'KS_nav_ui.png',
    title:'Tab 2',
    window:win2
});

var label2 = Titanium.UI.createLabel({
	color:'#999',
	text:'I am Window 2',
	font:{fontSize:20,fontFamily:'Helvetica Neue'},
	textAlign:'center',
	width:'auto'
});

win2.add(label2);
tabGroup.addTab(tab1);  
tabGroup.addTab(tab2);  
tabGroup.open();
Tapping the button shows the view flickering from top left to bottom right as it should be, BUT sometimes it will show top right and bottom left as the properties in applyProperties are only half-applied before the draw phase. This means wasted draws and possible visual glitches.

Comments

  1. Blain Hamon 2013-03-14

    https://github.com/appcelerator/titanium_mobile/pull/3959
  2. Olga Romero 2013-03-23

    Tested with: Titanium Studio, build: 3.1.0.201303230404 Titanium SDK, build: 3.1.0.v20130322171500 Device: Nexus 4 Android version 4.2 Verified the view flickering from top left to bottom right as it should be, according to code.

JSON Source