I have button named settings in my titanium alloy project. What i want is, to open the settings window upon clicking/tapping the button. So i have used following code
var settingsWindow = Alloy.createController('settings').getView();
settingsWindow.open();
In my settings.xml file which is my view has following code in it
<Alloy>
<window id="settings">
<label onClick="settingsAlert">Settings Page</label>
</window>
</Alloy>
My problem is, i am getting this runtime error on my emulator saying
Uncaught TypeError: Object# has no method 'createwindow'
<Alloy>
<window id="settings">
<label onClick="settingsAlert">Settings Page</label>
</window>
</Alloy>
should be
<Alloy>
<Window id="settings">
<Label onClick="settingsAlert">Settings Page</Label>
</Window>
</Alloy>
Alloy is case sensitive, window should be Window and label should be Label
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
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>
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.