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.
Related
I have two pages in my application. The first page has a tab group with three tabs. Now on click of button in second page, I need to redirect my control to first tab 2 in my first page. How can I do that.
My code is as follows,
<Alloy>
<TabGroup id="myTabGrp"> //Tabgroup Added
<Tab id="one">
<Window class="container">
<Label>This is the Home View</Label>
</Window>
</Tab>
<Tab id="two">
<Window class="container" id="winTwo">
<Label>This is the second View</Label>
</Window>
</Tab>
<Tab id="three">
<Window class="container">
<Button onClick="saveLang">Proceed</Button>
</Window>
</Tab>
</TabGroup>
</Alloy>
second page,
<Alloy>
<Window class="container">
<Button onClick="submitFun">submit</Button>
</Window>
</Alloy>
function submitFun()
{
var homeWindow = Alloy.createController('index').getView();
homeWindow.open({transition:Titanium.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT});
}
I don't wat load the full index page because it will take long time to load. I need to load only one tab in the index page. How can I do that?
I think you would have the code in index.js from where you open your second page; maybe like :
Alloy.createController('second').getView().open();
Now in second.js you can just call close method of the window to close current window and return back to index.
function submitFun()
{
$.second.close(); //id of second window = second
}
Also now add a focus event listener in index.js for the tabgroup and navigate to the desired tab.
$.myTabGrp.addEventListener('focus',function(e) {
$.myTabGrp.setActiveTab($.two);
});
I'm trying to customize my alloy TabGroup to look like the image below (with no luck). no "height" properties on Tab item in the default documentation and with my current version of titanium 3.4.0 can't add View to TabGroup.
anybody know how to create a raised center button using alloy?
that's my index.xml view
<Alloy>
<TabGroup tabsBackgroundColor="white" barColor="#f15b26" activeTabIconTint="black" tintColor="white">
<Require src="home" nr="1" />
<Require src="play" nr="2" />
<Tab icon="/menu/logo.png" height="100">
<Window title="" id="">
<Label></Label>
</Window>
</Tab>
<Require src="chat" nr="3" />
<Require src="config" nr="4" />
</TabGroup>
</Alloy>
you can use an image in the middle of the that exceed the height of the bar.
When we implemented this solution in the past, we did a completely custom tabBar. I dont think you can accomplish what you are trying to do with the base tabBar control
Not sure where I am doing wrong. I tried via code and by xml, but for some reason the left nav button does not show up. I am using the simulator since I don't have an actual device for ios.
The xml view
<!--filename: playType.xml->
<Alloy>
<Window class="container">
<LeftNavButton platform="ios">
<Button title="Back" onClick="closeWindow"/>
</LeftNavButton>
<View class="buttonContainer">
<Button class="menuButton" title="Single Player"/>
<Button class="menuButton" title ="Duel"/>
</View>
</Window>
</Alloy>
The Controller
//playType.js
var args = arguments[0] || {};
var closeWindow = function(){
$.playType.close();
};
The tss style
//playType.tss
".container" : {
backgroundColor:"white",
height:Ti.UI.FILL,
},
".buttonContainer":{
center:{x:"50%",y:"50%"},
height:Ti.UI.SIZE,
layout:"vertical"
}
I using this from the index.js
var playType = Alloy.createController('playType').getView();
playType.open();
The window shows up fine with the two buttons in the center but the back button doesn't appear.
What am I doing wrong. I went through the doc and also tried the code way too. Same result, no back button. :(
You have to create the window using navigation window otherwise navButton wont show up.here goes the code link for you
http://docs.appcelerator.com/titanium/3.0/#!/api/Titanium.UI.iOS.NavigationWindow
Thanks
Your window must be placed inside a TabGroup which handles all the capabilities of a navigation controller inside each tab.
<Alloy>
<TabGroup>
<Tab id="tab1" title="Tab 1">
<Window id="win1" title="Tab 1">
<LeftNavButton platform="ios">
<Button title="Back" onClick="closeWindow"/>
</LeftNavButton>
...
</Window>
</Tab>
</TabGroup>
</Alloy>
As for the back button, open a child window of the current tab using the tab as the reference to the open method.
tab.open(newWindow);
<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
});