-
-
Save ricardoalcocer/5339699 to your computer and use it in GitHub Desktop.
function doClickMenu(evt){ | |
alert(evt.source.title); | |
} | |
// we need to do some things to the Window once it is properly instanciated, so we add an event listener to its OPEN event | |
$.win.addEventListener('open',function(){ | |
var actionBar = $.win.activity.actionBar; // get a handle to the action bar | |
actionBar.title='My App'; // change the App Title | |
actionBar.displayHomeAsUp=true; // Show the "angle" pointing back | |
actionBar.onHomeIconItemSelected = function() { // what to do when the "home" icon is pressed | |
Ti.API.info("Home icon clicked!"); | |
}; | |
}) | |
// now open the window. The event listener will fire right after this | |
$.win.open(); | |
"Window": { | |
backgroundColor: "#fff" | |
}, | |
"Label": { | |
width: Ti.UI.SIZE, | |
height: Ti.UI.SIZE, | |
color: "#000", | |
font: { | |
fontSize: 20, | |
fontFamily: 'Helvetica Neue' | |
}, | |
textAlign: 'center' | |
}, | |
"MenuItem": { // this tells the menu to be part of the actionbar if there's room. Otherwise the options will be available by pressing the hardware menu button | |
showAsAction: Ti.Android.SHOW_AS_ACTION_IF_ROOM, | |
}, | |
'#menu1': { | |
icon: 'images/action_about.png', | |
title: 'About' | |
}, | |
'#menu2': { | |
icon: 'images/action_settings.png', | |
title: 'Settings' | |
}, | |
'#menu3': { | |
icon: 'images/action_about.png', | |
title: 'About' | |
}, | |
'#menu4': { | |
icon: 'images/action_settings.png', | |
title: 'Settings' | |
}, | |
'#menu5': { | |
icon: 'images/action_about.png', | |
title: 'About' | |
}, | |
'#menu6': { | |
icon: 'images/action_settings.png', | |
title: 'Settings' | |
} |
<Alloy> | |
<TabGroup id="win"> | |
<Tab title="Tab 1" icon="KS_nav_ui.png"> | |
<Window title="Tab 1"> | |
<Label>I am Window 1</Label> | |
<!-- this menu is styled in such a way that it becomes part of the ActionBar. See the TSS file --> | |
<Menu id="menu" platform="android"> | |
<MenuItem id="menu1" onClick="doClickMenu" /> | |
<MenuItem id="menu2" onClick="doClickMenu" /> | |
<MenuItem id="menu3" onClick="doClickMenu" /> | |
<MenuItem id="menu4" onClick="doClickMenu" /> | |
<MenuItem id="menu5" onClick="doClickMenu" /> | |
<MenuItem id="menu6" onClick="doClickMenu" /> | |
</Menu> | |
</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> |
<!-- you need to add this to your tiapp.xml --> | |
<android xmlns:android="http://schemas.android.com/apk/res/android"> | |
<tool-api-level>14</tool-api-level> | |
<manifest> | |
<application android:theme="@android:style/Theme.Holo.Light"></application> | |
<!-- You could also use @android:style/Theme.Holo --> | |
</manifest> | |
</android> |
// this version demonstrates how to specify which menu options you want to always appear on the menu bar | |
// and which you want to display as additional menu items | |
"Window": { | |
backgroundColor: "#fff" | |
}, | |
"Label": { | |
width: Ti.UI.SIZE, | |
height: Ti.UI.SIZE, | |
color: "#000", | |
font: { | |
fontSize: 20, | |
fontFamily: 'Helvetica Neue' | |
}, | |
textAlign: 'center' | |
}, | |
'#menu1': { | |
icon: 'images/action_about.png', | |
title: 'About', | |
showAsAction: Ti.Android.SHOW_AS_ACTION_ALWAYS | |
}, | |
'#menu2': { | |
icon: 'images/action_settings.png', | |
title: 'Menu', | |
showAsAction: Ti.Android.SHOW_AS_ACTION_ALWAYS | |
}, | |
'#menu3': { | |
icon: 'images/action_about.png', | |
title: 'About', | |
showAsAction: Ti.Android.SHOW_AS_ACTION_NEVER | |
}, | |
'#menu4': { | |
icon: 'images/action_settings.png', | |
title: 'Settings', | |
showAsAction: Ti.Android.SHOW_AS_ACTION_NEVER | |
}, | |
'#menu5': { | |
icon: 'images/action_about.png', | |
title: 'About', | |
showAsAction: Ti.Android.SHOW_AS_ACTION_NEVER | |
}, | |
'#menu6': { | |
icon: 'images/action_settings.png', | |
title: 'Settings', | |
showAsAction: Ti.Android.SHOW_AS_ACTION_NEVER | |
} |
// this version demonstrates how to provide a "software" way of invoking the menu button. This is until | |
// Ti supports the MenuInflater | |
function doClickMenu(evt) { | |
switch(evt.source.title){ | |
case "Menu": // in real life you probably wouldn't want to use the text of the menu option as your condition | |
var actionBar = $.win.activity; | |
actionBar.openOptionsMenu(); | |
break; | |
default: | |
alert(evt.source.title); | |
} | |
} | |
// we need to do some things to the Window once it is properly instanciated, so we add an event listener to its OPEN event | |
$.win.addEventListener('open', function() { | |
var actionBar = $.win.activity.actionBar; | |
// get a handle to the action bar | |
actionBar.title = 'My App'; | |
// change the App Title | |
actionBar.displayHomeAsUp = true; | |
// Show the "angle" pointing back | |
actionBar.onHomeIconItemSelected = function() {// what to do when the "home" icon is pressed | |
Ti.API.info("Home icon clicked!"); | |
}; | |
}) | |
// now open the window. The event listener will fire right after this | |
$.win.open(); |
Good point @stevoPersic. In fact, there should not be an "up" button in this example...it's there just to illustrate that you can set it on and off, but in the case of a tabgroup it shouldn't be there.
On Android there is the Back button, provided as hardware or software in case no hardware buttons are available. The ActionBar provides the "up" button, which should move you to the previous screen on the activity stack. Depending on how you structure your app is the use you'll give to the Up and Back buttons. A good and thorough explanation of the Back and Up button behavior can be found at http://www.androiduipatterns.com/2011/12/back-button-androids-achilles-heel.html
@stevoPerisic
MenuItem
onClick = "clickedSettings"
MenuItem
then u add event listener for this function clickedSettings then we will use this to fire it
Ti.App.addEventListener("ourfiredevent",clickedSettings);
we’ll fire the ourfiredevent event from the settings screen view when the user exits the window
in controller
function clickedSettings(){
Ti.App.fireEvent("ourfiredevent");
var settingsWindow=$.getView(); so we can reference to the view we are in wich is settings view
settingsWindow.close();
}
to this step u get what you want
another case if your settings view screen contains something like let say tableView with rows in it and u want the user to check some switches to delete or edit them or whatever you want
then u can call this function in the function that give you a response that the user complete what he did
you can simply fire this function in the other function ...forgive me for a fast and not organized comment
Special thanks for @ricardoalcocer for inspiring us with this solution
How would you navigate using the back button in the action bar if you were deeper into a flow? Or is that used only to exit out of the app?