Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-13020

Android: applyProperties should be atomic for UI actions

    Details

      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.

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                blainhamon Blain Hamon
                Reporter:
                blainhamon Blain Hamon
                Reviewer:
                Allen Yeung
              • Watchers:
                2 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

                  • Backbone Issue Sync is enabled for your project, but we do not have any synchronization info for this issue.

                    Git Integration