[TIMOB-14964] iOS: SplitWindow with NavigationGroup does not layout properly after Windows refactor

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2013-08-28T20:18:44.000+0000
Affected Version/s	n/a
Fix Version/s	2013 Sprint 18, 2013 Sprint 18 API, Release 3.1.3, Release 3.2.0
Components	iOS
Labels	n/a
Reporter	Sabil Rahim
Assignee	Vishal Duggal
Created	2013-08-27T18:01:50.000+0000
Updated	2013-08-28T22:06:37.000+0000

Description

This bug only occurs on iOS 6 SDK.(Can be reproduced on Simulator also.)

Steps to Reproduce

1. Copy the following code into app.js

SplitViewNav = {};

// WINDOWS
SplitViewNav.masterWindow = Ti.UI.createWindow({title:'Master',backgroundColor:'red'});
SplitViewNav.detailWindow = Ti.UI.createWindow({title:'Detail',backgroundColor:'#336699'});

// MASTER NAV GROUP
SplitViewNav.masterNav = Ti.UI.iPhone.createNavigationGroup({
	window:SplitViewNav.masterWindow
});

// DETAIL NAV GROUP
SplitViewNav.detailNav = Ti.UI.iPhone.createNavigationGroup({
	window:SplitViewNav.detailWindow
});

// SPLIT VIEW
SplitViewNav.splitView = Titanium.UI.iPad.createSplitWindow({
	masterView:SplitViewNav.masterNav,
	detailView:SplitViewNav.detailNav,
});


// MASTER BUTTON
SplitViewNav.masterButton = Ti.UI.createButton({
	title:'Open Window',
	height:50,
	width:200
});
SplitViewNav.masterButton.addEventListener('click', function()
{
	var w = Ti.UI.createWindow({backgroundColor:'#ff9900'});
	var l = Ti.UI.createLabel({
		text:'New Window',
		color:'white',
		textAlign:'center'
	});
	w.add(l);
	w.addEventListener('blur', function() {
		Titanium.UI.createAlertDialog({
			title:'Master blur',
			message:'You blurred the master window!'
		}).show();
	});
	SplitViewNav.masterNav.open(w,{animated:true});
});
SplitViewNav.masterWindow.add(SplitViewNav.masterButton);

// DETAIL BUTTON
SplitViewNav.detailButton = Ti.UI.createButton({
	title:'Open Window',
	height:50,
	width:200,
	textAlign:'center'
});
SplitViewNav.detailButton.addEventListener('click', function()
{
	var w = Ti.UI.createWindow({backgroundColor:'#fff'});
	var b = Ti.UI.createButton({
		title:'Show modal',
		width:150,
		height:40
	});
	w.add(b);
	b.addEventListener('click', function() {
		var modal = Titanium.UI.createWindow({ 
			backgroundColor:'#336699',     
			title:'Modal Window',
			barColor:'black',
			modal:true
		});
		
		var bb = Ti.UI.createButton({
			title:'Dismiss modal',
			width:150,
			height:40
		});
		bb.addEventListener('click', function() {
			modal.close();
		});
		
		modal.add(bb);
		modal.open();
	});
	
	w.addEventListener('blur', function() {
		Titanium.UI.createAlertDialog({
			title:'Detail blur',
			message:'You blurred the detail window!'
		}).show();
	});
	SplitViewNav.detailNav.open(w,{animated:true});
});
SplitViewNav.detailWindow.add(SplitViewNav.detailButton);

var done = Titanium.UI.createButton({
	title:'Flash Popover'
});

SplitViewNav.detailWindow.setRightNavButton(done);
done.addEventListener('click',function()
{
	SplitViewNav.splitView.setMasterPopupVisible(true);
	setTimeout(function()
	{
		SplitViewNav.splitView.setMasterPopupVisible(false);
	},3000);
});


SplitViewNav.open = function()
{
	Ti.API.info('in open for split view nav');
	SplitViewNav.splitView.open();	
};

SplitViewNav.splitView.addEventListener('visible', function(e) {
	Ti.API.log('View: '+e.view);
	if (e.view == 'detail') {
		e.button.title = "Popover";
		SplitViewNav.detailWindow.leftNavButton = e.button;
		Ti.API.log('Set button');
	}
	else if (e.view == 'master') {
		SplitViewNav.detailWindow.leftNavButton = null;
		Ti.API.log('Removed button');
	}
});

// TEST CLOSE BUTTON
SplitViewNav.closeButton = Ti.UI.createButton({
	title:'Close Test',
	height:50,
	width:200,
	top:30
});
SplitViewNav.closeButton.addEventListener('click', function()
{
	Ti.API.info('Closing currrent Test');
	SplitViewNav.splitView.close();
});
SplitViewNav.detailWindow.add(SplitViewNav.closeButton);
SplitViewNav.open();

2. Run the app.

Actual Behavior.

See attachment for actual behavior.

Expected behavior

Both the master and detail windows should layout out properly extending to the statusbar. This bug only occurs with the iPHone.NavigationGroup and does not occur with the new NavWindow.

NavWindow code used for testing.

	SplitViewNav = {};

	// WINDOWS
	SplitViewNav.masterWindow = Ti.UI.createWindow({title:'Master',backgroundColor:'red'});
	SplitViewNav.detailWindow = Ti.UI.createWindow({title:'Detail',backgroundColor:'#336699'});

	// MASTER NAV GROUP
	SplitViewNav.masterNav = Ti.UI.iOS.createNavWindow({
		window:SplitViewNav.masterWindow
	});

	// DETAIL NAV GROUP
	SplitViewNav.detailNav = Ti.UI.iOS.createNavWindow({
		window:SplitViewNav.detailWindow
	});

	// SPLIT VIEW
	SplitViewNav.splitView = Titanium.UI.iPad.createSplitWindow({
		masterView:SplitViewNav.masterNav,
		detailView:SplitViewNav.detailNav,
	});


	// MASTER BUTTON
	SplitViewNav.masterButton = Ti.UI.createButton({
		title:'Open Window',
		height:50,
		width:200
	});
	SplitViewNav.masterButton.addEventListener('click', function()
	{
		var w = Ti.UI.createWindow({backgroundColor:'#ff9900'});
		var l = Ti.UI.createLabel({
			text:'New Window',
			color:'white',
			textAlign:'center'
		});
		w.add(l);
		w.addEventListener('blur', function() {
			Titanium.UI.createAlertDialog({
				title:'Master blur',
				message:'You blurred the master window!'
			}).show();
		});
		SplitViewNav.masterNav.push(w,{animated:true});
	});
	SplitViewNav.masterWindow.add(SplitViewNav.masterButton);

	// DETAIL BUTTON
	SplitViewNav.detailButton = Ti.UI.createButton({
		title:'Open Window',
		height:50,
		width:200,
		textAlign:'center'
	});
	SplitViewNav.detailButton.addEventListener('click', function()
	{
		var w = Ti.UI.createWindow({backgroundColor:'#fff'});
		var b = Ti.UI.createButton({
			title:'Show modal',
			width:150,
			height:40
		});
		w.add(b);
		b.addEventListener('click', function() {
		    var modal = Titanium.UI.createWindow({ 
		        backgroundColor:'#336699',     
		        title:'Modal Window',
		        barColor:'black',
		        modal:true
		    });
		    
		    var bb = Ti.UI.createButton({
		    	title:'Dismiss modal',
		    	width:150,
		    	height:40
		    });
		    bb.addEventListener('click', function() {
		    	modal.close();
		    });
		    
		    modal.add(bb);
		    modal.open();
		});
		
		w.addEventListener('blur', function() {
			Titanium.UI.createAlertDialog({
				title:'Detail blur',
				message:'You blurred the detail window!'
			}).show();
		});
		SplitViewNav.detailNav.push(w,{animated:true});
	});
	SplitViewNav.detailWindow.add(SplitViewNav.detailButton);

	var done = Titanium.UI.createButton({
	 	title:'Flash Popover'
	});

	SplitViewNav.detailWindow.setRightNavButton(done);
	done.addEventListener('click',function()
	{
		SplitViewNav.splitView.setMasterPopupVisible(true);
		setTimeout(function()
		{
			SplitViewNav.splitView.setMasterPopupVisible(false);
		},3000);
	});


	SplitViewNav.open = function()
	{
		Ti.API.info('in open for split view nav');
		SplitViewNav.splitView.open();	
	};

	SplitViewNav.splitView.addEventListener('visible', function(e) {
		Ti.API.log('View: '+e.view);
		if (e.view == 'detail') {
			e.button.title = "Popover";
			SplitViewNav.detailWindow.leftNavButton = e.button;
			Ti.API.log('Set button');
		}
		else if (e.view == 'master') {
			SplitViewNav.detailWindow.leftNavButton = null;
			Ti.API.log('Removed button');
		}
	});
	
	// TEST CLOSE BUTTON
	SplitViewNav.closeButton = Ti.UI.createButton({
		title:'Close Test',
		height:50,
		width:200,
		top:30
	});
	SplitViewNav.closeButton.addEventListener('click', function()
	{
		Ti.API.info('Closing currrent Test');
		SplitViewNav.splitView.close();
	});
	SplitViewNav.detailWindow.add(SplitViewNav.closeButton);
	SplitViewNav.open();

Attachments

File	Date	Size
SplitWIndow in Landscape.png	2013-08-27T18:01:50.000+0000	72705
SplitWindow in Portrait.png	2013-08-27T18:01:50.000+0000	67029

Comments

Vishal Duggal 2013-08-28

https://github.com/appcelerator/titanium_mobile/pull/4615
Vishal Duggal 2013-08-28

Backport to 3_1_X https://github.com/appcelerator/titanium_mobile/pull/4616
Lokesh Choudhary 2013-08-28

Verified the fix & the master and detail windows layout out properly extending to the status bar as expected. Closing. Environment: Appcel Studio : 3.1.3.201308252005 Ti SDK : 3.1.3.v20130828133119 Mac OSX : 10.8.4 Ipad4 - 6.0.1 Xcode 5 beta 6

JSON Source