Cannot see LeftNavButton or RightNavButton with TabGroup inside NavigationWindow.
What should I do to have LeftNavButton visible?
<Alloy>
<NavigationWindow>
<TabGroup>
<Tab>
<Window>
<LeftNavButton>
<Button title="Back" onClick="...." />
</LeftNavButton>
..................
</Window>
</Tab>
<Tab>
<Window>
<LeftNavButton>
<Button title="Back" onClick="...." />
</LeftNavButton>
..................
</Window>
</Tab>
</TabGroup>
</NavigationWindow>
</Alloy>
You need to change the hierarchy of your XML & add one more node of NavigationWindow like this:
<Alloy>
<TabGroup>
<Tab>
<NavigationWindow>
<Window>
<LeftNavButton>
<Button title="Back" onClick="...." />
</LeftNavButton>
..................
</Window>
</NavigationWindow>
</Tab>
<Tab>
<NavigationWindow>
<Window>
<LeftNavButton>
<Button title="Back" onClick="...." />
</LeftNavButton>
..................
</Window>
</NavigationWindow>
</Tab>
</TabGroup>
</Alloy>
TabGroup is the root node here & it can only have Tab as child-nodes. Inside each Tab you can put any layout that we normally do in Alloy.
You cannot nest NavigationWindow and tab, as a Tab is already a navigationwindow... TabGroup needs to be topmost element.
If you want to open a tabgroup inside a navigationwindow because of UX flow... you'll need to rethink the flow, as in, open the TabGroup so it looks like it is inside it (using animations), but it actually isn't technically.
Related
In my app for iOS I've used the rightNavButtons property of a window to add two buttons in the top right.
However, the click events on these buttons only work for the first 4 taps and then nothing happens when you click on them. What is going on? Could this be a bug with Titanium?
Here is my code:
Titanium SDK version: 3.4.0.v20140916181713
Alloy version: 1.5.1
Controller - index.js:
var addButton = Ti.UI.createButton({ systemButton: Ti.UI.iPhone.SystemButton.ADD });
var searchButton = Ti.UI.createButton({ systemButton: Ti.UI.iPhone.SystemButton.SEARCH });
addButton.addEventListener("click", function () {
console.log("ADD was clicked!");
});
searchButton.addEventListener("click", function () {
console.log("SEARCH was clicked!");
});
$.win.setRightNavButtons([searchButton, addButton]);
$.index.open();
View - index.xml
<Alloy>
<TabGroup>
<Tab title="Tab 1" icon="KS_nav_ui.png">
<Window id="win" title="Tab 1">
<Label>I am Window 1</Label>
</Window>
</Tab>
<Tab title="Tab 2" icon="KS_nav_views.png">
<Window title="Tab 2">
<Label>I am Window 2</Label>
</Window>
</Tab>
</TabGroup>
</Alloy>
Found a workaround!
I avoid the <RightNavButtons>, which can contain more than one view.
Instead I use <RightNavButton> which can contain only one child view.
To add still add two buttons to my navbar, I nested the buttons in the view container (the single child of the <RightNavButton>.
<RightNavButton>
<View>
<Button class="i i-heart nav-button" id="favorite" onClick="toggleFavorite" right="0" />
<Button class="i i-share nav-button" id="share" right="32" />
</View>
</RightNavButton>
No issues anymore. Both onClick events of the <Button> childs inside the View container are fired.
Tested this code and it should work for you
<Tab title="Tab 1" icon="KS_nav_ui.png">
<Window id="win" title="Tab 1">
<RightNavButtons platform=ios>
<Button systemButton="Ti.UI.iPhone.SystemButton.ADD" onClick="addHandler" />
<Button systemButton="Ti.UI.iPhone.SystemButton.SEARCH" onClick="searchHandler" />
</RightNavButtons>
<Label>I am Window 1</Label>
</Window>
</Tab>
When I tried to execute your code, the event listeners weren't being called at all for me on 3.4.0.GA / Alloy 1.5.0 and iOS8 Simulator.
However, when I put the RightNavButton inside the XML as below, it worked fine and the event listener was called every time I clicked on it. Looks like a bug to me...
<Tab title="Tab 1" icon="KS_nav_ui.png">
<Window id="win" title="Tab 1">
<RightNavButton platform=ios>
<Button systemButton="Ti.UI.iPhone.SystemButton.ADD" onClick="closeWindow" />
</RightNavButton>
<Label>I am Window 1</Label>
</Window>
</Tab>
Is it possible to have the Tab of one TabGroup contain another TabGroup?
Here's what I'm trying to do. This is the content of a Tab within the top TabGroup. I'm trying to add another TabGroup within it. It doesn't give any errors just doesn't display the second TabGroup...
<Alloy>
<Tab title="Testing">
<Window id="window" navBarHidden="true" title="Testing" class="container" >
<TabGroup>
<Tab title="Hello">
<Window title="Hello">
<Label>Hello</Label>
</Window>
</Tab>
<Tab title="Hello">
<Window title="Hello">
<Label>Hello</Label>
</Window>
</Tab>
</TabGroup>
</Window>
</Tab>
</Alloy>
I'm trying to have a tab (positioned at the bottom) contain 2 tabs (positioned at the top). If there's a better way to do this please let me know!
Update:
Here's an example I found of what I'm trying to achieve. I don't actually think the inner tab group is an actual tab group?
TabGroup is the most Parent Element and Tab,Window are their child. So,I did't think,it is possible to add TabGroup to a Tab. But you can create your own Tabgroup then you can do what you want with it.
<Alloy>
<TabGroup backgroundColor="white" id="mainTabGroup">
<Tab id="byFav" title="fav" icon="KS_nav_views.png">
<Window title='fav'>
<TableView id="tableByFav" />
</Window>
</Tab>
<Tab id="byLatest" title="latest" icon="KS_nav_views.png">
<Window title='latest'>
<TableView id="tableByLatest" />
</Window>
</Tab>
</TabGroup>
</Alloy>
Currently I have tabgroup which has two tab.
I am planning to add view at the bottom of the screen height=50 width=100%.
This view must be still however tab changes.
I have tried this
<Alloy>
<TabGroup backgroundColor="white" id="mainTabGroup">
.
.
.
</TabGroup>
<view>
</view>
</Alloy>
or this.
<Alloy>
<TabGroup backgroundColor="white" id="mainTabGroup">
.
.
.
</TabGroup>
<window>
</window>
</Alloy>
But it shows the message like this
invalid method (createwindow) passed to UIModule
I might not understand the basic thought of alloy.
Is it possible to add the view under the tablegroup?
If not, I would like to add the fixed view in each tab.
Does anyone give me the first hint?
I am suffering from the shortage of alloy documents.
you can't do such thing, because TabGroup uses windows and a "Window" in Alloy means the entire screen. I suggest making another view/controller (yourView) for your bottom view and then require it in all your tabs.
<Alloy>
<TabGroup backgroundColor="white" id="mainTabGroup">
<Tab id="byFav" title="fav" icon="KS_nav_views.png">
<Window title='fav'>
<TableView id="tableByFav" />
<Require type="view" src="yourView"/>
</Window>
</Tab>
<Tab id="byLatest" title="latest" icon="KS_nav_views.png">
<Window title='latest'>
<TableView id="tableByLatest" />
<Require type="view" src="yourView"/>
</Window>
</Tab>
</TabGroup>
<Alloy>
<TabGroup backgroundColor="white" id="mainTabGroup">
<Tab id="byFav" title="fav" icon="KS_nav_views.png">
<Window id="byFavWin' title='fav'>
<TableView id="tableByFav" />
</Window>
</Tab>
</TabGroup>
</Alloy>
index.js
var backButton = Ti.UI.createButton({left:0, width:80, height:25, backgroundColor:'red'});
$.byFavWin.setLeftNavButton(backButton);
I have tabgroup which has window which has the title 'Fav'.
Title occupay one line at the top of window, but
I would like to put the button next to the title in the title bar.
thanks to Mike S.
I have updated the code, but it doesn't work.
it shows no error but no button appears.
Could I have more hint?
You can add the nav buttons in the Alloy markup, as well:
<Alloy>
<TabGroup>
<Tab>
<Window title="Title" layout="vertical" backgroundColor="white">
<LeftNavButton>
<Button>pop</Button>
</LeftNavButton>
<RightNavButton>
<Button>push</Button>
</RightNavButton>
</Window>
</Tab>
</TabGroup>
</Alloy>
Yes, you can. Window has a method called setLeftNavButton() and one for the right side as well.
e.tabIndex contains nothing..?
I have application which has four tabs and
I would like to get the 'swipe' gesture and change the current active tab.
However I cant get the current activeTab.
Some sample code says you can get active tab number 'e.tabIndex' though...
my index.js
$.mainTabGroup.addEventListener('swipe',function(e){
var tabIndex = e.tabIndex;
var lastIndex = $.mainTabGroup.getTabs().length - 1;
Ti.API.info(tabIndex);// somehow null????
Ti.API.info(lastIndex);
//switch the tab here.
});
my index.xml
<Alloy>
<TabGroup backgroundColor="white" id="mainTabGroup">
<Tab id="byFav" title="fav" icon="KS_nav_views.png">
<Window title='fav'>
</Window>
</Tab>
<Tab id="byLatest" title="latest" icon="KS_nav_views.png">
<Window title='latest'>
</Window>
</Tab>
<Tab id="byCat" title="category" icon="KS_nav_views.png">
<Window>
</Window>
</Tab>
<Tab id="byDate" title=" icon="KS_nav_views.png">
<Window>
</Window>
</Tab>
</TabGroup>
</Alloy>
swipe event callback does not have any tabindex. You may get active tab using activeTab Property or getActiveTab method
$.mainTabGroup.addEventListener('swipe',function(e){
var tabIndex = $.mainTabGroup.activeTab; //using property
var tabIndex = $.mainTabGroup.getActiveTab(); // using method
});