|
1 |
|
2 <!DOCTYPE html |
|
3 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="copyright" content="(C) Copyright 2009"/><meta name="DC.rights.owner" content="(C) Copyright 2009"/><meta name="DC.Type" content="concept"/><meta name="DC.Title" content="STEW: adding menu options"/><meta name="abstract" content="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."/><meta name="description" content="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."/><meta name="DC.Relation" scheme="URI" content="GUID-9F3218D9-2BEA-417C-8017-E05AC749BF84"/><meta name="DC.Relation" scheme="URI" content="GUID-775005BC-2FF8-45A9-BBA6-6CED6B5780A2"/><meta name="DC.Relation" scheme="URI" content="GUID-EB2043BB-E557-429B-BA0A-E350A6D06597"/><meta name="DC.Format" content="XHTML"/><meta name="DC.Identifier" content="GUID-EED2A703-672F-4723-87AE-26EA53C7E9E6"/><meta name="DC.Language" content="en"/><title>STEW: adding menu options </title><script type="text/javascript"> |
|
5 function initPage() {} |
|
6 </script><link href="../PRODUCT_PLUGIN/book.css" rel="stylesheet" type="text/css"/><link href="css/s60/style.css" rel="stylesheet" type="text/css" media="all"/></head><body onload="initPage();"><div class="body"><div class="contentLeft prTxt"><h1 class="pageHeading" id="GUID-EED2A703-672F-4723-87AE-26EA53C7E9E6">STEW: adding menu options</h1><div><p>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.</p> |
|
7 <p>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 <code>menu.js</code> file extends the <code>Menu</code> object and adds a method that detects the screen size:</p> |
|
8 <pre class="codeblock">function Menu() { |
|
9 var self = this; |
|
10 // Check the screen size we are running on. |
|
11 if ( Helper.isLargeScreen() ) { |
|
12 // nHD code listed in previous text. |
|
13 ... |
|
14 } else { |
|
15 // Create phone's softmenu. |
|
16 this.miUpdateTwitter = new MenuItem( StringTable.Code.menuUpdateTwitter, 9000 ); |
|
17 var miUpdate = new MenuItem( StringTable.Code.menuUpdate, 9001 ); |
|
18 var miSearch = new MenuItem( StringTable.Code.menuSearch, 9002 ); |
|
19 var miSettings = new MenuItem( StringTable.Code.menuSettings, 9003 ); |
|
20 var miLogout = new MenuItem( StringTable.Code.menuLogout, 9004 ); |
|
21 |
|
22 // Assign a callback function for the menu items |
|
23 this.miUpdateTwitter.onSelect = function () { updateScreen.onUpdateClicked(); }; |
|
24 miUpdate.onSelect = function () { self.activate( Menu.UPDATE_STATUS_SCREEN ); }; |
|
25 miSearch.onSelect = function () { self.activate( Menu.SEARCH_SCREEN ); }; |
|
26 miSettings.onSelect = function () { self.activate( Menu.SETTINGS_SCREEN ); }; |
|
27 miLogout.onSelect = function () { widgetMenu.activate( Menu.LOGIN_SCREEN ); }; |
|
28 |
|
29 // Add them to the top-level menu. Don't forget to dim out |
|
30 // the "Update Twitter" menu item since it is only shown on the |
|
31 // Update screen for faster navigation. |
|
32 this.miUpdateTwitter.setDimmed( true ); |
|
33 menu.append( this.miUpdateTwitter ); |
|
34 menu.append( miUpdate ); |
|
35 menu.append( miSearch ); |
|
36 menu.append( miSettings ); |
|
37 menu.append( miLogout ); |
|
38 } |
|
39 |
|
40 } |
|
41 </pre> |
|
42 <p>The <code>menu</code> object and the <code>MenuItem</code> object are used to create an <span class="uicontrol">Options</span> menu that contains the same functions as the button menu on nHD screens. The <span class="uicontrol">Options</span> menu is associated with the left softkey.</p> |
|
43 <div class="figure" id="GUID-18B05DE2-0DF9-4BF3-B198-4792A932861A"><img src="GUID-98509DF5-5035-4E43-925C-50B96CE41F07_d0e12004_href.png"/><p class="figure-title"><strong>Figure: </strong>STEW Update Status view with an Options menu</p></div> |
|
44 <p>The <code>miUpdateTwitter</code> menu item is remembered and dimmed to display it only in the <span class="uicontrol">Update Status</span> view.</p> |
|
45 <p>For more information about using softkeys and adding options to a menu, see <a href="GUID-94946735-D23B-49C6-BB65-8BE31737AE42.html#GUID-94946735-D23B-49C6-BB65-8BE31737AE42">Using softkeys</a>.</p> |
|
46 </div></div></div><div class="footer"><hr/><div class="copy">© Nokia 2009.</div></div></body></html> |