[TIMOB-20065] iOS Alloy Missing RightNavButton with TabGroup inside NavigationWindow

GitHub Issue	n/a
Type	Bug
Priority	Critical
Status	Closed
Resolution	Invalid
Resolution Date	2015-12-04T18:39:52.000+0000
Affected Version/s	Release 5.1.0, Release 5.0.1, Release 5.0.2, Release 5.0.0, Release 5.1.1
Fix Version/s	n/a
Components	iOS
Labels	ios, navbar, navbutton
Reporter	Ricardo Ramirez
Assignee	Eric Merriman
Created	2015-11-25T19:23:27.000+0000
Updated	2017-03-24T18:01:17.000+0000

Description

Issue Description

When using a TabGroup within a NavigationWindow, the RightNavButton of any Window within the TabGroup do not appear in the navigation bar.

Steps to Replicate

-Create a new titanium alloy project -Open the app folder -Replace the index.xml file inside views folder and the index.js file inside controllers -Add the tabs.xml in in the views folder with the test-case code -Add the tabs.js in in the controllers folder with the test-case code -Build and run -Click open window -The RightNavButton is not showed

Test Case

//index.xml

<Alloy>
	<NavigationWindow id="nav">
		<Window id="win" backgroundColor="#fff">
			<Button onClick="open">Open Window</Button>
		</Window>
	</NavigationWindow>
</Alloy>

//index.js


$.nav.open(); 

function open(){
	var view = Alloy.createController("tabs").getView();
	
	$.nav.openWindow(view);
}

//tabs.xml

<Alloy>
	<TabGroup id="tabGroup" navBarHidden=false>
			<Tab title="one">
				<Window backgroundColor="#fff">
					<RightNavButton id="rightButtons">
						<Button title="push"></Button>
					</RightNavButton>
					<Label>Hello 1</Label>
				</Window>
			</Tab>
			<Tab title="two">
				<Window backgroundColor="#fff">
					<Label>Hello 2</Label>
				</Window>
			</Tab>
	</TabGroup>
</Alloy>

//tabs.js

var args = arguments[0] || {};

Comments

Chee Kiat Ng 2015-11-25

Do we know if this is a regression? Does it work in 4.X or 3.X?
Chee Kiat Ng 2015-12-03

Is this valid? I don't think we support tabGroup INSIDE a NavWindow. the other way around is more accurate.
Kristen Bachman 2015-12-03

In combing through community posts, it appears that a [NavigationWindow inside of a TabGroup is discouraged](https://developer.appcelerator.com/question/175579/tackle-navigation-window-in-tab-group-alloy). Regardless, I'm currently writing an app for a victim services client and at several points through the app, 2 categories of data need to be presented. So the tab groups are not used for navigation but are rather used for presenting 2 different kinds of data within a NavigationWindow. Here's [a link](https://drive.google.com/folderview?id=0ByfmzLGVZbiNWm1hWHAyVUs3N3c&usp=sharing) to a few images showing this interaction. In the first screen shot, there's a TabView that shows 2 tabs: General & Crime. General lists "general" areas of help (e.g., health, family, unemployment, etc.), and the Crime tab lists specific areas of help related to a crime. Clicking on _Domestic Violence_ leads to a new tab group with 2 tabs: "Nearby" and "Quick Call". "Nearby" shows a list of domestic violence resources while "Quick Call" shows a list of resources with crisis numbers/hotlines. Clicking on a resource in the "Nearby" table opens a new Window object with details about that resource. At each point in the app, I must include (at least) 2 buttons in the upper right-hand corner. However, in cases where the NavigationWindow is opening a TabGroup, it seems that the navigation controller of the NavigationWindow is hiding the navigation controller of the TabGroup. Unfortunately, I have not found a workaround for this issue. Although _NavigationWindow_ has a rightNavButtons property, setting that property does not make the _rightNavButtons_ visible. In other words, in index.js, adding the following code has no effect on the navigation bar; no "test" button appears: $.nav.setRightNavButtons(Ti.UI.createButton({title:"test"})); So the question is, is there a way that I can make the RightNavButtons visible when a NavigationWindow opens a TabGroup? Or do I need to abandon the TabGroup in my iOS implementation and write my own TabGroup implementation that does not have a navigation controller attached to it?

Pedro Enrique 2015-12-04

[~bachmakm], what you are trying to accomplish is not possible. Both the NavigationWindow and the TabGroup are supposed to be top level controllers. What that means is that they are not meant to hold other controllers in them. What you need to do, instead, is to create your own "TabGroup" using views and buttons. Something like this:

   var win = Ti.UI.createWindow({
   	backgroundColor: 'black'
   });
   var container = Ti.UI.createView({
   	top: 0, bottom: 50,
   	left: 0, right: 0
   });
   var buttonBar = Ti.UI.createView({
   	bottom: 0, height: 50,
   	left: 0, right: 0
   });
   var leftButton = Ti.UI.createButton({
   	left: 0, width: '50%',
   	height: 50,
   	title: 'tab 1'
   });
   var rightButton = Ti.UI.createButton({
   	right: 0, width: '50%',
   	height: 50,
   	title: 'tab 2'
   });
   buttonBar.add(rightButton);
   buttonBar.add(leftButton);
   
   win.add(container);
   win.add(buttonBar);
   
   // main views:
   var view1 = Ti.UI.createView({
   	backgroundColor: 'green'
   });
   container.add(view1);
   
   var view2 = Ti.UI.createView({
   	backgroundColor: 'blue'
   });
   container.add(view2);
   
   view1.visible = true;
   view2.visible = false;
   
   leftButton.addEventListener('click', function(){
   	view1.visible = true;
   	view2.visible = false;
   });
   rightButton.addEventListener('click', function(){
   	view1.visible = false;
   	view2.visible = true;
   });
   win.open();

Pedro Enrique 2015-12-04

The same can be done with Alloy

   <Window id="win" backgroundColor="black">
   	<View id="container" bottom="50" top="0" left="0" right="0">
   		<View id="view1" backgroundColor="green" visible="true"> 
   			<!-- More views here -->
   		</View>
   		<View id="view2" backgroundColor="blue" visible="false">
   			<!-- More views here -->
   		</View>
   	</View>
   	<View bottom="0" height="50">
   		<Button left="0" width="50%" title="tab 1" onClick="onLeftTabClick"/>
   		<Button right="0" width="50%" title="tab 2" onClick="onRightTabClick"/>
   	</View>
   </Window>

   function onLeftTabClick(){
   	$.view1.visible = true;
   	$.view2.visible = false;
   });
   function onRightTabClick(){
   	$.view1.visible = false;
   	$.view2.visible = true;
   });

Pedro Enrique 2015-12-04

Closing as invalid. NavigationWindows inside TabGroups, or viceversa, is not supported and highly discouraged
Ricardo Ramirez 2015-12-04

Thanks [~penrique] !.
Kristen Bachman 2015-12-04

Thank you for the help, @[~penrique]. I was hoping I'd be able to utilize the default TabGroup object, but I understand the issue. I will try the foundation you laid out and hope for the best! :) Thanks again!
Lee Morris 2017-03-24

Closing ticket as invalid with reference to the above comments.

JSON Source