[TIMOB-23349] Windows: Closing Windows opened via Ti.UI.Tab.open() does not work as expected

GitHub Issue	n/a
Type	Bug
Priority	Critical
Status	Closed
Resolution	Fixed
Resolution Date	2016-05-12T15:39:19.000+0000
Affected Version/s	Release 5.3.0
Fix Version/s	Release 5.3.0
Components	Windows
Labels	qe-5.3.0
Reporter	Fokke Zandbergen
Assignee	Kota Iguchi
Created	2016-05-10T09:41:23.000+0000
Updated	2016-05-12T20:59:45.000+0000

Description

Looking at other Windows apps the expected behaviour when using Ti.UI.Tab.open() to open a child Window should be: * That the Tabs stay visible (/) * That the content of the current tab is replaced by the child Window (/) * That pressing the device back button should close the child Window, reveiling the previous Window again (x) * That calling Ti.UI.Tab.close() passing the child window should do the same (x) * That calling Ti.UI.Window.close() on the child window should do the same (x) The last three are broken and need to be fixed: * Pressing the device back button will close the app. * Calling close on the Window or via the Tab doesn't do anything. In addition, when the child window has a CommandBar, the CommandBar will be dismissed when you first call Ti.UI.Window.close(). Example for all of this:

function createWindow(depth) {

	var win = Ti.UI.createWindow({
		layout : 'vertical'
	});

	win.add(Ti.UI.createLabel({
		text : 'Depth ' + depth
	}));

	var openBtn = Ti.UI.createButton({
		top : 20,
		title : 'Open Child'
	});

	openBtn.addEventListener('click', function() {
		tabA.open(createWindow(depth + 1));
	});

	win.add(openBtn);

	if (depth > 0) {
		var closeViaWinBtn = Ti.UI.createButton({
			top : 20,
			title : 'Close via Window'
		});

		closeViaWinBtn.addEventListener('click', function() {
			win.close();
		});

		win.add(closeViaWinBtn);

		var closeViaTabBtn = Ti.UI.createButton({
			top : 20,
			title : 'Close via Tab'
		});

		closeViaTabBtn.addEventListener('click', function() {
			tabA.close(win);
		});

		win.add(closeViaTabBtn);

		var backViaWinButton = Ti.UI.Windows.createAppBarButton({
			icon : Ti.UI.Windows.SystemIcon.BACK
		});

		backViaWinButton.addEventListener('click', function() {
			win.close();
		});

		var backViaTabButton = Ti.UI.Windows.createAppBarButton({
			icon : Ti.UI.Windows.SystemIcon.BACKTOWINDOW
		});

		backViaTabButton.addEventListener('click', function() {
			tabA.close(win);
		});

		win.add(Ti.UI.Windows.createCommandBar({
			items : [backViaWinButton, backViaTabButton]
		}));
	}

	return win;
}

var tabA = Ti.UI.createTab({
	title : 'Tab A',
	window : createWindow(0)
});

var tabB = Ti.UI.createTab({
	title : 'Tab B',
	window : Ti.UI.createWindow({
		backgroundColor : 'green'
	})
});

Ti.UI.createTabGroup({
	tabs : [tabA, tabB]
}).open();

Comments

Kota Iguchi 2016-05-12

https://github.com/appcelerator/titanium_mobile_windows/pull/680

Christopher Williams 2016-05-12

Note to QE: This fix has been merged to 5_3_X and master, but doesn't address one of the bullet points Fokke mentions - that of the hardware back button exiting the app instead of closing the tab's window. I've opened up TIMOB-23366 to address that remaining issue, given that I think it should no longer be a blocker for the 5.3.0 sample app/5.3.0 GA. So for testing purposes, please use the example above, or a more elaborate one Kota wrote below (which uses different colors for different depths of windows inside tabs). You're looking to confirm that: - when you swap between tabs both tabs are still visible. - When you open a child window in the first tab, that the tabs are still visible - When you close the tab's child window using either button (close via tab, or close via window), that the child window closes, the commandbar goes away, and the tabs remain. Example with colored windows at various depths:

   var colors = ['blue', 'gray', 'red'];
   
   function createWindow(depth) {
   
       var win = Ti.UI.createWindow({
           layout: 'vertical',
           backgroundColor: colors[depth % colors.length]
       });
   
       win.add(Ti.UI.createLabel({
           text: 'Depth ' + depth
       }));
   
       var openBtn = Ti.UI.createButton({
           top: 20,
           title: 'Open Child'
       });
   
       openBtn.addEventListener('click', function () {
           tabA.open(createWindow(depth + 1));
       });
   
       win.add(openBtn);
   
       if (depth > 0) {
           var closeViaWinBtn = Ti.UI.createButton({
               top: 20,
               title: 'Close via Window'
           });
   
           closeViaWinBtn.addEventListener('click', function () {
               win.close();
           });
   
           win.add(closeViaWinBtn);
   
           var closeViaTabBtn = Ti.UI.createButton({
               top: 20,
               title: 'Close via Tab'
           });
   
           closeViaTabBtn.addEventListener('click', function () {
               tabA.close(win);
           });
   
           win.add(closeViaTabBtn);
   
           var backViaWinButton = Ti.UI.Windows.createAppBarButton({
               icon: Ti.UI.Windows.SystemIcon.BACK
           });
   
           backViaWinButton.addEventListener('click', function () {
               win.close();
           });
   
           var backViaTabButton = Ti.UI.Windows.createAppBarButton({
               icon: Ti.UI.Windows.SystemIcon.BACKTOWINDOW
           });
   
           backViaTabButton.addEventListener('click', function () {
               tabA.close(win);
           });
   
           win.add(Ti.UI.Windows.createCommandBar({
               items: [backViaWinButton, backViaTabButton]
           }));
       }
   
       return win;
   }
   
   var tabA = Ti.UI.createTab({
       title: 'Tab A',
       window: createWindow(0)
   });
   
   var tabB = Ti.UI.createTab({
       title: 'Tab B',
       window: Ti.UI.createWindow({
           backgroundColor: 'green'
       })
   });
   
   Ti.UI.createTabGroup({
       tabs: [tabA, tabB]
   }).open();

Josh Longton 2016-05-12

Verified as fixed. Tested on: Nokia Lumia 928 (8.1) Windows Simulator (8.1) Microsoft Lumia 640 (10) Windows Simulator (10) Windows 10 Studio: 4.6.0.201605121040 Ti SDK: 5.3.0.v20160512105713 Appc NPM: 4.2.5-5 App CLI: 5.3.0-44 Node v0.12.7 *Closing Ticket.*

JSON Source