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);
Related
I have an Appcelerator Titanium app to do, i have a Ti.UI.ListView with a view inside (view_one.xml):
...
<ListView onItemclick="getEvaluation" id="myLisview" defaultItemTemplate="templateLm" bottom="0" top="10" onItemclick="changePage" backgroundColor="white">
<Templates>
<Require id="lm_items" src="common/templateLm"/>
</Templates>
</ListView>
...
in common/templateLm :
<Alloy>
<ItemTemplate name="templatePageMission">
<View bindId="evaluate" height="10dp">
<Label text="evaluate"></Label>
</View>
<View bindId="stars" height="15dp"/>
</ItemTemplate>
</Alloy>
in view_one.js :
function getEvaluation(e){
switch(e.bindId){
case 'evaluate':
var item = e.section.getItemAt(e.itemIndex);
console.log(item) // <= this is empty ????
item.stars.backgroundColor = "red";
break;
}
}
and when click on the evaluate view I finally got:
undefined is not an object (evaluating item.stars.backgroundColor)
If anyone can help, this is great, anyway thanks for this great community.
You have assigned the itemclick event twice:
onItemclick="changePage"
and
onItemclick="getEvaluation"
So if you just use the latter one, it should catch the controller function correctly and the item should be updated correctly, since your controller code looks valid.
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
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>
In the view:
I have a view like that:
<Alloy>
<TabGroup id="tab1">
<Tab id="findtab">
<Window id="window1"></Window>
</Tab>
<Tab id="tab2">
<Window id='window2'></Window>
</Tab>
</TabGroup>
</Alloy>
In the controller:
How to set the title for window1?
Use:
$.window1.title="my title"
I believe your issue is that the window is not fully created by the time your are trying to set the title.
I act upon the focus event of the tabgroup (which actually bubbles up from the tab) and I assign the ActionBar title based on the tab.
For ActionBars within TabGroups, I do the the following:
View:
<Alloy>
<TabGroup id="tabGroup1">
<Tab id="tab1">
<Window id="window1"></Window>
</Tab>
<Tab id="tab2">
<Window id='window2'></Window>
</Tab>
</TabGroup>
</Alloy>
Controller:
/**
* Listen to focus on the tabgroup and pass the title to the ActionBar
*/
$.tabGroup1.addEventListener('focus', function(){
if( OS_ANDROID && Ti.Platform.Android.API_LEVEL >= 11 ) {
var tabGroup = $.tabGroup1,
activity = tabGroup.getActivity(),
actionBar;
if(!activity){
Ti.API.error('No activity created for mainTabGroup');
} else {
actionBar = activity.actionBar;
if(!actionBar){
Ti.API.error('No ActionBar created for mainTabGroup activity');
} else {
actionBar.setTitle(tabGroup.activeTab.title);
}
}
}
});
$.mainTabGroup.open();
By using the focus event of the TabGroup your are ensuring the components are available when you need to modify them.
Here you go
$.window1.title='MY custom title';
Thanks