[TIMOB-17287] Advance Sample - inheritance: Animated dialog does not appears on clicking animatedDialog button

GitHub Issue	n/a
Type	Bug
Priority	Critical
Status	Closed
Resolution	Fixed
Resolution Date	2014-07-11T19:22:24.000+0000
Affected Version/s	Release 3.0.0
Fix Version/s	Release 3.3.0, Release 3.4.0
Components	n/a
Labels	alloy, qe-3.3.0, qe-closed-3.3.0, qe-testadded, regression
Reporter	Neha Mittal
Assignee	Vishal Duggal
Created	2014-07-09T07:13:54.000+0000
Updated	2014-07-15T10:08:33.000+0000

Description

This is a regression since it works fine on 3.2.3 GA. On clicking "animatedDialog" button, Dialog with animation does not appears and app crashes. Steps to Reproduce: 1. Copy 'apps/advanced/inheritance' content into an existing project 'app' folder. 2. Build the app on android device. 3. Click on animatedDialog button. Actual Result: No dialog box appears with animation and app crashes. Expected Result: Dialog with animation should appears, displaying the 'Opened animatedDialog' text. Note: It is working fine on iOS.

Comments

Ingo Muschenetz 2014-07-09

This sounds like not an Alloy issue to me, but rather an Android animation one. Unless the sample is wrong?
Tim Poulsen 2014-07-09

This sample fails for me with Alloy 1.3.1 as well as 1.4.0-rc4 and 1.5.0-dev if I use SDK 3.3.0.x. However, if I use SDK 3.2.3.GA, the sample works properly for me under both Alloy 1.4.0-rc4 and 1.5.0-dev. This doesn't seem to be an Alloy issue.
Ingo Muschenetz 2014-07-09

Okay, thanks. Do you know if you can easily create a classic example that demonstrates the same problem?
Ingo Muschenetz 2014-07-09

[~hpham] Here's the ticket to review.

Tim Poulsen 2014-07-09

Drop this into a new classic project:

   var win1 = Titanium.UI.createWindow({  
       backgroundColor:'#fff'
   });
   var label1 = Titanium.UI.createLabel({
   	color:'#999',
   	text:'Click to open dialog',
   	font:{fontSize:20,fontFamily:'Helvetica Neue'},
   	textAlign:'center',
   	width:'auto'
   });
   label1.addEventListener('click', createAnimatedDialog);
   win1.add(label1);
   
   
   function createAnimatedDialog() {
   	var cover = Ti.UI.createView({
   		backgroundColor: '#000',
   		opacity: 0.5,
   		height: Ti.UI.FILL,
   		width: Ti.UI.FILL
   	});
   	var dialog = Ti.UI.createView({
   		height: '100dp',
   		width: '66%',
   		backgroundColor: '#fff',
   		borderColor: '#000',
   		borderWidth: 2,
   		borderRadius: 4
   	});
   	var lbl = Ti.UI.createLabel({
   		text: 'You opened the dialog',
   		color: '#000',
   		left: 10,
   		right: 10,
   		top: 10,
   		height: Ti.UI.SIZE,
   		font: {
   			fontSize: '16dp'
   		},
   		textAlign: 'center'
   	});
   	dialog.add(lbl);
   	var btn = Ti.UI.createButton({
   		title: 'Close',
   		bottom: 10
   	});
   	btn.addEventListener('click', function() {
   		win1.remove(cover);
   		win1.remove(dialog);
   		dialog = cover = null;
   	});
   	dialog.add(btn);
   
   	// make invisible
   	cover.opacity = 0;
   	dialog.opacity = 0;
   
   	// add to reference window
   	win1.add(cover);
   	win1.add(dialog);
   
   	// animate in the opacity
   	cover.animate({
   		duration: 500,
   		opacity: 0.5
   	});
   	dialog.animate({
   		duration: 500,
   		opacity: 1
   	});
   }
   
   win1.open();

Works on iOS, fails on Android. It's as if the dialog view isn't being drawn on the screen. I tried setting explicit top/left and width properties, but that didn't work. Perhaps it's still transparent (opacity=0) after the animation??

Hieu Pham 2014-07-10

Opacity animation has never worked on views with borders on Honeycomb+ devices before. This bug is exposed by this PR: https://github.com/appcelerator/titanium_mobile/pull/5064. If you run the test case above on 3.2.3.GA, you will not see the border around the dialog.
Ingo Muschenetz 2014-07-10

[~pwang] or [~ayeung] are you able to review this?

Vishal Duggal 2014-07-11

Additional test case

   var win1 = Titanium.UI.createWindow({  
       backgroundColor:'#fff'
   });
   var label1 = Titanium.UI.createLabel({
       color:'#999',
       text:'Click to open dialog',
       font:{fontSize:20,fontFamily:'Helvetica Neue'},
       textAlign:'center',
       width:'auto',
       top:'50dp'
   });
   
   var label2 = Titanium.UI.createLabel({
       color:'#999',
       text:'Click to open window (not working on 3.x devices)',
       font:{fontSize:20,fontFamily:'Helvetica Neue'},
       textAlign:'center',
       width:'auto',
       bottom:'50dp'
   });
   
   
   label1.addEventListener('click', createAnimatedDialog);
   label2.addEventListener('click', openSecondWindow);
   win1.add(label1);
   win1.add(label2);
   
   var opacity = 0; 
   function openSecondWindow(){
   	opacity = 1;
   	var win2 = Titanium.UI.createWindow({  
   	    backgroundColor:'#fff',
   	    layout:'vertical'
   	});
   	
   	var slider = Titanium.UI.createSlider({
   	    top: 50,
   	    min: 0,
   	    max: 1,
   	    width: '80%',
   	    value: 1
   	});
   	
   	var view1 = Ti.UI.createView({
   		backgroundColor:'blue',
   		width:'80%',
   		height:'50dp',
   		top:30
   	});
   	
   	var view2 = Ti.UI.createView({
   		backgroundColor:'blue',
   		width:'80%',
   		height:'50dp',
   		borderWidth:10,
   		borderColor:'green',
   		top:30
   	});
   	
   	win2.add(slider);
   	win2.add(view1);
   	win2.add(view2);
   	
   	slider.addEventListener('change', function(e) {
   	    opacity = e.value;
   	});
   	
   	slider.addEventListener('touchend', function(e) {
   	    Ti.API.info('VALUE = '+opacity);
   	    view1.opacity = opacity;
   	    view2.opacity = opacity;
   	});
   	
   	win2.open();	
   }
   
   
   function createAnimatedDialog() {
       var cover = Ti.UI.createView({
           backgroundColor: '#000',
           opacity: 0.5,
           height: Ti.UI.FILL,
           width: Ti.UI.FILL
       });
       var dialog = Ti.UI.createView({
           height: '100dp',
           width: '66%',
           backgroundColor: '#fff',
           borderColor: 'green',
           borderWidth: 2,
           borderRadius: 4
       });
       var lbl = Ti.UI.createLabel({
           text: 'You opened the dialog',
           color: '#000',
           left: 10,
           right: 10,
           top: 10,
           height: Ti.UI.SIZE,
           font: {
               fontSize: '16dp'
           },
           textAlign: 'center'
       });
       dialog.add(lbl);
       var btn = Ti.UI.createButton({
           title: 'Close',
           bottom: 10
       });
       btn.addEventListener('click', function() {
           win1.remove(cover);
           win1.remove(dialog);
           dialog = cover = null;
       });
       dialog.add(btn);
    
       // make invisible
       cover.opacity = 0;
       dialog.opacity = 0;
    
       // add to reference window
       win1.add(cover);
       win1.add(dialog);
    
       // animate in the opacity
       cover.animate({
           duration: 2500,
           opacity: 0.5
       });
       dialog.animate({
           duration: 2500,
           opacity: 1
       });
   }
    
   win1.open();

Vishal Duggal 2014-07-11

Pull pending against master https://github.com/appcelerator/titanium_mobile/pull/5904
Vishal Duggal 2014-07-11

Backport to 3_3_X https://github.com/appcelerator/titanium_mobile/pull/5907
Pragya Rastogi 2014-07-15

{color:green} Verified the fix using build:{color} || *Component* || *Version*|| |OS | Windows 8.1, OSX 10.9.3 | |Xcode | 5.1.1 | |Appcelerator Studio | 3.3.0.201407111535 | |SDK | 3.3.0.v20140711123603 | |acs | 1.0.15 | |alloy | 1.4.0-rc5 | |npm | 1.3.2 | |titanium | 3.3.0-rc4 | |titanium-code-processor | 1.1.1 | Device: Nexus 5 (4.4.4) *Animated dialog appears successfully on clicking animatedDialog button.*

JSON Source