×
Namespaces

Variants
Actions
(Difference between revisions)

Catching menu events in Symbian Web Runtime

From Nokia Developer Wiki
Jump to: navigation, search
seppo_fn (Talk | contribs)
m
tapla (Talk | contribs)
Line 1: Line 1:
 
__NOTOC__
 
__NOTOC__
 
__NOEDITSECTION__
 
__NOEDITSECTION__
 +
 
{{CodeSnippet
 
{{CodeSnippet
 
|id= 
 
|id= 
 
|platform=S60 5th Edition
 
|platform=S60 5th Edition
|devices=Nokia 5800 XpressMusic, Nokia N97
+
|devices=Nokia 5800 XpressMusic
 
|category=Web Runtime (WRT)
 
|category=Web Runtime (WRT)
 
|subcategory=UI
 
|subcategory=UI
Line 10: Line 11:
 
|keywords=menu, menu.onShow, MenuItem.onSelect
 
|keywords=menu, menu.onShow, MenuItem.onSelect
 
}}
 
}}
 
  
 
==Overview==
 
==Overview==
This code snippet demonstrates how to handle <tt>onShow</tt> menu event.
 
It shows the count how many times menu was opened on screen.
 
  
It uses <tt>JavaScript WRT menu object</tt> and <tt>menu.onShow</tt> property to set the handler for menu events.
+
This code snippet demonstrates how to handle the <tt>onShow</tt> menu event. It shows the count of how many times a menu was opened on screen.
Property <tt>MenuItem.onSelect</tt> is using to set handler for menu item selecting events.
+
 
 +
The snippet uses the WRT's <tt>menu</tt> object and the <tt>menu.onShow</tt> property to set the handler for menu events.
 +
 
 +
The property <tt>MenuItem.onSelect</tt> is used to set the handler for menu item selecting events.
  
 
==Source file: Relevant HTML components==
 
==Source file: Relevant HTML components==
  
 
<code xml>
 
<code xml>
    <p id="menuOpenCountPhrase">
+
<p id="menuOpenCountPhrase">
    Menu was opened <b>0</b> times!
+
The menu is opened <strong>0</strong> times.
    </p>
+
</p>
    <input id="menuOpenCount" type="hidden" value="0"/>
+
<input id="menuOpenCount" type="hidden" value="0" />
 
</code>
 
</code>
  
Line 31: Line 32:
  
 
<code javascript>
 
<code javascript>
// Menu items
 
var menuItemCancel = null;
 
 
var menuItemReset = null;
 
var menuItemReset = null;
  
// Menu id's
 
var CMD_MENU_CANCEL = 10;
 
 
var CMD_MENU_RESET = 11;
 
var CMD_MENU_RESET = 11;
 +
</code>
  
window.onload = init;
+
<code javascript>
 
+
// Set menu's onShow event handler
// Initializes the widget
+
window.menu.onShow = incrementCounter;
function init() {
+
</code>
    createMenu();
+
}
+
  
 +
<code javascript>
 
// Creates the main menu
 
// Creates the main menu
 
function createMenu() {
 
function createMenu() {
     // Create the "Cancel" menu item
+
     // ...
    menuItemCancel = new MenuItem("Cancel", CMD_MENU_CANCEL);
+
 
    menuItemCancel.onSelect = onMenuItemSelected;
+
    window.menu.append(menuItemCancel);
+
   
+
 
     // Create the "Reset" menu item
 
     // Create the "Reset" menu item
 
     menuItemReset = new MenuItem("Reset", CMD_MENU_RESET);
 
     menuItemReset = new MenuItem("Reset", CMD_MENU_RESET);
Line 58: Line 52:
 
     window.menu.append(menuItemReset);
 
     window.menu.append(menuItemReset);
  
    // Show right softkey
 
 
     window.menu.showSoftkeys();
 
     window.menu.showSoftkeys();
 +
 
     // Set menu's onShow event handler
 
     // Set menu's onShow event handler
 
     window.menu.onShow = incrementCounter;
 
     window.menu.onShow = incrementCounter;
 
}
 
}
 +
</code>
  
 +
<code javascript>
 
// Gets called when a menu item is selected
 
// Gets called when a menu item is selected
 
function onMenuItemSelected(menuId) {
 
function onMenuItemSelected(menuId) {
 
     switch (menuId) {
 
     switch (menuId) {
        case CMD_MENU_CANCEL:
 
            // Do nothing.
 
            break;
 
 
         case CMD_MENU_RESET:
 
         case CMD_MENU_RESET:
 
             // Reset the counter of menu events
 
             // Reset the counter of menu events
 
             try {
 
             try {
                 document.getElementById('menuOpenCount').value = "0";
+
                 document.getElementById("menuOpenCount").value = "0";
 
             } catch (e) {
 
             } catch (e) {
 
                 alert("Error: " + e);
 
                 alert("Error: " + e);
Line 80: Line 73:
 
             // Reset the menu openings count phrase
 
             // Reset the menu openings count phrase
 
             try {
 
             try {
                 document.getElementById('menuOpenCountPhrase').innerHTML =
+
                 document.getElementById("menuOpenCountPhrase").innerHTML =
                     "Menu was opened <b>0</b> times!";
+
                     "The menu is opened <strong>0</strong> times.";
 
             } catch (e) {
 
             } catch (e) {
 
                 alert("Error: " + e);
 
                 alert("Error: " + e);
Line 89: Line 82:
 
     }
 
     }
 
}
 
}
 +
</code>
  
 +
<code javascript>
 
/**
 
/**
* Increments counter of menu opening events.
+
* Increments counter of menu opening events.
*/
+
*/
 
function incrementCounter() {
 
function incrementCounter() {
 
     // Get reference to counter value
 
     // Get reference to counter value
 
     try {
 
     try {
         var counterLabel = document.getElementById('menuOpenCount');
+
         var counterLabel = document.getElementById("menuOpenCount");
 
     } catch (e) {
 
     } catch (e) {
 
         alert("Error: " + e);
 
         alert("Error: " + e);
Line 112: Line 107:
 
     // Form the menu openings count phrase
 
     // Form the menu openings count phrase
 
     try {
 
     try {
         document.getElementById('menuOpenCountPhrase').innerHTML =
+
         document.getElementById("menuOpenCountPhrase").innerHTML =
             "Menu was opened <b>" + menuOpenCountNew + "</b> times!";
+
             "The menu is opened <strong>" + menuOpenCountNew +
 +
            "</strong> times.";
 
     } catch (e) {
 
     } catch (e) {
 
         alert("Error: " + e);
 
         alert("Error: " + e);
Line 121: Line 117:
  
 
==Postconditions==
 
==Postconditions==
View of launched snippet contains information - how many times menu was opened.
 
Every time the menu will be opened - indicator on screen will be updated.
 
On click the "Reset" menu item counter is reseted to value "0".
 
  
 +
Every time the menu is opened the indicator on the screen will be updated.
 +
 +
Selecting the "Reset" menu item resets the counter to value "0".
  
 
==Supplementary material==
 
==Supplementary material==
  
* You can test the handling of menu event in action in a simple, executable application into which this code snippet has been patched. The executables and source files are available for download at: [[Media:Catching_menu_events_in_WRT.zip]].
+
This code snippet is part of the stub concept, which means that it has been patched on top of a template application in order to be more useful for developers. The version of the WRT stub application used as a template in this snippet is v1.1.
  
* You can examine all the changes that are required to implement the above mentioned features in an application. The changes are provided in unified diff and color-coded diff formats: [[link_to_patchs]]
+
* The patched, executable application that can be used to test the features described in this snippet is available for download at [[Media:Catching_menu_events_in_WRT.zip]].
 +
* You can view all the changes that are required to implement the above-mentioned features. The changes are provided in unified diff and colour-coded diff (HTML) formats in [[Media:CatchingMenuEvents.diff.zip]].
 +
* For general information on applying the patch, see [[Using Diffs]].
 +
* For unpatched stub applications, see [[Example stub]].
  
 
[[Category:Web Runtime (WRT)]][[Category:Code Examples]]
 
[[Category:Web Runtime (WRT)]][[Category:Code Examples]]

Revision as of 07:36, 11 May 2009


Article Metadata
Tested with
Devices(s): Nokia 5800 XpressMusic
Compatibility
Platform(s): S60 5th Edition
Article
Keywords: menu, menu.onShow, MenuItem.onSelect
Created: (26 Jan 2008)
Last edited: tapla (11 May 2009)

Overview

This code snippet demonstrates how to handle the onShow menu event. It shows the count of how many times a menu was opened on screen.

The snippet uses the WRT's menu object and the menu.onShow property to set the handler for menu events.

The property MenuItem.onSelect is used to set the handler for menu item selecting events.

Source file: Relevant HTML components

<p id="menuOpenCountPhrase">
The menu is opened <strong>0</strong> times.
</p>
<input id="menuOpenCount" type="hidden" value="0" />

Source file: JavaScript file

var menuItemReset = null;
 
var CMD_MENU_RESET = 11;
// Set menu's onShow event handler
window.menu.onShow = incrementCounter;
// Creates the main menu
function createMenu() {
// ...
 
// Create the "Reset" menu item
menuItemReset = new MenuItem("Reset", CMD_MENU_RESET);
menuItemReset.onSelect = onMenuItemSelected;
window.menu.append(menuItemReset);
 
window.menu.showSoftkeys();
 
// Set menu's onShow event handler
window.menu.onShow = incrementCounter;
}
// Gets called when a menu item is selected
function onMenuItemSelected(menuId) {
switch (menuId) {
case CMD_MENU_RESET:
// Reset the counter of menu events
try {
document.getElementById("menuOpenCount").value = "0";
} catch (e) {
alert("Error: " + e);
}
 
// Reset the menu openings count phrase
try {
document.getElementById("menuOpenCountPhrase").innerHTML =
"The menu is opened <strong>0</strong> times.";
} catch (e) {
alert("Error: " + e);
}
 
break;
}
}
/**
* Increments counter of menu opening events.
*/

function incrementCounter() {
// Get reference to counter value
try {
var counterLabel = document.getElementById("menuOpenCount");
} catch (e) {
alert("Error: " + e);
}
 
if (counterLabel == undefined) {
alert("Error: Menu events counter object is undefined!");
}
 
// Get current count of menu opening events
var menuOpenCount = Number(counterLabel.value);
// Increment counter
var menuOpenCountNew = menuOpenCount + 1;
counterLabel.value = String(menuOpenCountNew);
// Form the menu openings count phrase
try {
document.getElementById("menuOpenCountPhrase").innerHTML =
"The menu is opened <strong>" + menuOpenCountNew +
"</strong> times.";
} catch (e) {
alert("Error: " + e);
}
}

Postconditions

Every time the menu is opened the indicator on the screen will be updated.

Selecting the "Reset" menu item resets the counter to value "0".

Supplementary material

This code snippet is part of the stub concept, which means that it has been patched on top of a template application in order to be more useful for developers. The version of the WRT stub application used as a template in this snippet is v1.1.

  • The patched, executable application that can be used to test the features described in this snippet is available for download at Media:Catching_menu_events_in_WRT.zip.
  • You can view all the changes that are required to implement the above-mentioned features. The changes are provided in unified diff and colour-coded diff (HTML) formats in Media:CatchingMenuEvents.diff.zip.
  • For general information on applying the patch, see Using Diffs.
  • For unpatched stub applications, see Example stub.
169 page views in the last 30 days.
×