noob - android menu does not work

You must Login before you can answer or comment on any questions.

I have been struggling with this, read the api and searched this forum, all to no avail. I am a noob, so it is likely something I am missing. Anyway, I am attempting to run the android sample on the option menu and it does not seem to work. I am running Titanium 1.2.1 on WinXP, and APIS 2.2. The code is completely contained within my app.js. 

Ti.API.debug("Loading app.js");
 
Titanium.UI.setBackgroundColor('#000');
 
Ti.API.debug("create default window");
var win = Titanium.UI.createWindow({
    title:'Win',
    backgroundColor:'#000'
});
 
Ti.API.debug("Creating the Android Main menu items");
//CODE EXAMPLE - BEGIN - http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.Android.OptionMenu-module
var menu = Titanium.UI.Android.OptionMenu.createMenu();
 
var item1 = Titanium.UI.Android.OptionMenu.createMenuItem({
    title : 'Item 1',
    icon : '/images/item1.png'
});
 
item1.addEventListener('click', function(){
    Ti.UI.createAlertDialog({ title : 'You clicked Item 1'}).show();
});
 
var item2 = Titanium.UI.Android.OptionMenu.createMenuItem({
    title : 'Refresh',
    icon : '/images/refresh.png'
});
item2.addEventListener('click', function(){
    Ti.UI.createAlertDialog({ title : 'You clicked Refresh'}).show();
});
 
menu.add(item1);
menu.add(item2);
 
// Set the menu on the current heavyweight window. A heavyweight window maps to an Android
// Activity. To create a heavyweight window, specify one or more of [**fullscreen**,**navBarHidden**,**modal**] to createWindow.
 
Titanium.UI.Android.OptionMenu.setMenu(menu);
// CODE EXAMPLE - END
Ti.API.debug("opening full screen window");
win.open({fullscreen:true});
As you can see, the bulk of this code is straight out of the sample referenced. This problem is extremely frustrating and is completely blocking my ability to proceed. It appears many people have problems with this, but if resolved, it is not clear to me what the resolution is. Being such a fundamental thing, I have to believe it is me, not Titanium, that is the problem.

3 Answers

Accepted Answer

Take all of this code 

var menu = Titanium.UI.Android.OptionMenu.createMenu();
 
var item1 = Titanium.UI.Android.OptionMenu.createMenuItem({
    title : 'Item 1',
    icon : '/images/item1.png'
});
 
item1.addEventListener('click', function(){
    Ti.UI.createAlertDialog({ title : 'You clicked Item 1'}).show();
});
 
var item2 = Titanium.UI.Android.OptionMenu.createMenuItem({
    title : 'Refresh',
    icon : '/images/refresh.png'
});
item2.addEventListener('click', function(){
    Ti.UI.createAlertDialog({ title : 'You clicked Refresh'}).show();
});
 
menu.add(item1);
menu.add(item2);
 
// Set the menu on the current heavyweight window. A heavyweight window maps to an Android
// Activity. To create a heavyweight window, specify one or more of [**fullscreen**,**navBarHidden**,**modal**] to createWindow.
 
Titanium.UI.Android.OptionMenu.setMenu(menu);
// CODE EXAMPLE - END
and put it in it's own JS file (e.g. winmenu.js). Modify your app.js createWindow args to be. 
var win = Titanium.UI.createWindow({
    title:'Win',
    backgroundColor:'#000',
    url: 'winmenu.js',
    navBarHidden : false
});
Set one of the three parameters: navBarHidden, fullscreen, or modal to a value. This will force the creation of an Android Activity. Menu's are associated with Activities. We are looking at ways to restructure so that this technique/workaround isn't required, especially the hidden sideeffect of setting any of those parameters forces the creation of a "heavyweight window".

— answered 2 years ago by Don Thorp
answer permalink
1 Comment

  • Hi,

    Thank you for the response. I can get the menu work now.

    However, I work with a tabgroup, and each tab is a window. When I put the following code in the tab1window.js (containing the window for one of the tab pages).

    This code is in my app.js

    // This code is used to create my tab windows
var tabGroup = Titanium.UI.createTabGroup();
//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({  
    title:'tab1window',
    url:'tab1window.js',
    navBarHidden: true,
    backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({  
    icon:'ic_menu_view.png',
    title:'Bars',
    window:win1
});
tabGroup.open();
    And then I have this code in the tab1window.js
    var menuwin = Titanium.UI.createWindow({
    title:'Win',
    //backgroundColor:'#000',
    url: 'main_windows/winmenu.js',
    navBarHidden : false,
});
 
 
menuwin.open();
    I see when I launch the app, the tabgroup appear and then a black windows slides in the screen over the tabgroup. When I push the menu button, I correctly see the menu appear... But the problem is that the tabgroup is not visible anymore.

    Do you have example code that shows how to use the menu when viewing a tab page?

    Thank you,

    Regards, Tom

    — commented 2 years ago by Tom Deryckere

You have to create and .setMenu on each page you want the menu to appear. I believe that app.js in and of itself isn't considered a window, despite the fact that you're opening one from there. Try creating your window based on a .js file and create and .setMenu in there.

Hi,

Thank you for the response. I am trying out this function to and followed your advice. I used the code from the API documentation in several JS files where I create a window. I also made sure that the window got the fullscreen property. But this does not work.

The documentation seems not to be completely covered, and no examples are available in the Kitchen sink application.

Any ideas on how to make this work?

Your Answer

Think you can help? Login to answer this question!