Error creating Menu of type toolbar in Android Platform 2.2 API level 8

[dewang]

The control allows two types of controls to be created (Context menu or toolbar). Currently, the control is always creating the context menu even if we specify to create a toolbar menu.

I added the following code to our test page

              var toolbar = document.createElement('menu');
              toolbar.setAttribute('type', 'toolbar');
              toolbar.setAttribute('label', 'Home');

              var commandLogout = document.createElement('command');
              commandLogout.setAttribute('label', 'Logout');
              commandLogout.setAttribute('action', function() { alert('Logout'); });

              var commandAdd = document.createElement('command');
              commandAdd.setAttribute('icon', 'image/plus.png');
              commandAdd.setAttribute('action', function() { alert('Add'); });

              var commandBack = document.createElement('command');
              commandBack.setAttribute('label', 'Back');
              commandBack.setAttribute('accesskey', 'back');
              commandBack.setAttribute('action', function() { alert('Back'); });

              toolbar.appendChild(commandLogout);
              toolbar.appendChild(commandAdd);
              toolbar.appendChild(commandBack);

              // Context Menu

              var context = document.createElement('menu');
              context.setAttribute('type', 'context');

              var commandHome = document.createElement('command');
              commandHome.setAttribute('label', 'Home');
              commandHome.setAttribute('icon',  'image/house.png');
              commandHome.setAttribute('action', function() { alert('Home'); });
              commandHome.setAttribute('disabled', true);

              var commandSearch = document.createElement('command');
              commandSearch.setAttribute('label', 'Search');
              commandSearch.setAttribute('icon',  'image/magnifyingglass.png');
              commandSearch.setAttribute('action', function() { alert('Search'); });

              var commandSettings = document.createElement('command');
              commandSettings.setAttribute('label', 'Settings');
              commandSettings.setAttribute('icon',  'image/preferences.png');
              commandSettings.setAttribute('action', function() { alert('Settings'); });

              context.appendChild(commandHome);
              context.appendChild(commandSearch);
              context.appendChild(commandSettings);

and the outcome we see is that only context menu is created with all six options.

[mwbrooks]

This is the desired functionality.

On Android, it is uncommon for an application to have a toolbar. However, the context menu is the source for all navigation. So, both <menu type="toolbar"> and <menu type="context"> will render to the Android context menu.

In the above example, the Android menu should have six commands - those from the toolbar and those from the context.

[dewang]

Hi,
The toolbar is one of the key requirements for our application. It might not be common in other Android applications but we want the users of our application to see the menu and header on top of our application. Following is an extract from the original requirements.

• The plugin is to be implemented on iOS (iPhone, iPad), Android, Blackberry 5&6
• The buttons in the header are configurable with regards to their visibility, icon and functionality
• The background is configurable through a tiled background image
• The title text is configurable, and probably the same goes for font and colour, otherwise they will be the platform's default
• The header's height might not be configurable but in that case it will be the platform's default
• The context menu activated by the platform's menu button is not a requirement for IE but it would be a nice to have as part of this plugin.
• Titlebar buttons can be stacked to the left or right
• Button text can be changed at any time

The header text and buttons are a key requirement, which is absolutely needed by our application. Can you please re-open this issue.

[mwbrooks]

Hi,

It looks like there was some miscommunication on the goals of the plugin. In the Tender support ticket, I described that the main goal is navigation, and that a fixed header / footer is only one solution (the iOS solution) to navigation. In post #6 and #8 I mentioned that iOS would use a title bar, which Android and BlackBerry would use the menu and back buttons. So for the requirements, my understanding was that all toolbar and button configurations were specific to iOS.

On a BlackBerry WebWorks project, a toolbar is not technically possible. At least without modifying the files in the WebWorks SDK, which is complicated and would be incompatible with future WebWorks SDK updates.

On Android, the PhoneGap library would need to be modified to allow for additional UI elements (at the moment, it is a fullscreen WebView). A much easier approach would be to render the title bar in HTML / CSS, since Android supports the CSS rule position:fixed;.

We can schedule a call to discuss how to solve you problems. I am available anytime today or tomorrow, except 1:30-2:30 PST (both days). I'll make sure that Dave Johnson is also on the call, since he's been overseeing the project and has a deep understanding of the Android implementation.

Michael