STEW: adding menu options
STEW is designed for the 240 x 320 (QVGA) and the 360 x 640 (nHD) screen size. The nHD screens are touch enabled and have enough space to fit a button navigation menu. However, a button menu would reserve too much space on QVGA screens, and therefore softkeys and menu items are used instead.
+The Web Runtime (WRT) allows you to create or modify menu items dynamically and to associate them with the left softkey. The following code in the menu.js file extends the Menu object and adds a method that detects the screen size:
function Menu() {
+ var self = this;
+ // Check the screen size we are running on.
+ if ( Helper.isLargeScreen() ) {
+ // nHD code listed in previous text.
+ ...
+ } else {
+ // Create phone's softmenu.
+ this.miUpdateTwitter = new MenuItem( StringTable.Code.menuUpdateTwitter, 9000 );
+ var miUpdate = new MenuItem( StringTable.Code.menuUpdate, 9001 );
+ var miSearch = new MenuItem( StringTable.Code.menuSearch, 9002 );
+ var miSettings = new MenuItem( StringTable.Code.menuSettings, 9003 );
+ var miLogout = new MenuItem( StringTable.Code.menuLogout, 9004 );
+
+ // Assign a callback function for the menu items
+ this.miUpdateTwitter.onSelect = function () { updateScreen.onUpdateClicked(); };
+ miUpdate.onSelect = function () { self.activate( Menu.UPDATE_STATUS_SCREEN ); };
+ miSearch.onSelect = function () { self.activate( Menu.SEARCH_SCREEN ); };
+ miSettings.onSelect = function () { self.activate( Menu.SETTINGS_SCREEN ); };
+ miLogout.onSelect = function () { widgetMenu.activate( Menu.LOGIN_SCREEN ); };
+
+ // Add them to the top-level menu. Don't forget to dim out
+ // the "Update Twitter" menu item since it is only shown on the
+ // Update screen for faster navigation.
+ this.miUpdateTwitter.setDimmed( true );
+ menu.append( this.miUpdateTwitter );
+ menu.append( miUpdate );
+ menu.append( miSearch );
+ menu.append( miSettings );
+ menu.append( miLogout );
+ }
+
+}
+
+The menu object and the MenuItem object are used to create an Options menu that contains the same functions as the button menu on nHD screens. The Options menu is associated with the left softkey.
Figure: STEW Update Status view with an Options menu
The miUpdateTwitter menu item is remembered and dimmed to display it only in the Update Status view.
For more information about using softkeys and adding options to a menu, see Using softkeys.
+