Skip to content

Instantly share code, notes, and snippets.

@ricardoalcocer
Last active December 15, 2015 23:19
Show Gist options
  • Save ricardoalcocer/5339699 to your computer and use it in GitHub Desktop.
Save ricardoalcocer/5339699 to your computer and use it in GitHub Desktop.
Android Holo Actionbar Alloy Sample Based on ideas by https://github.com/hoyo/ActionBarSample/tree/master/app
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();
@mohamedayed
Copy link

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment