menu tutorial

Warning:
This tutorial covers only Tiny Mobile Widgets versions.
On Mobile Widgets, use Menu prototype.

This chapter presents the Tiny Mobile Widgets Menu.
Tiny Mobile Widgets provides a menu component. Developer can display this menu into widgets.

example

Note:
We use the softkeys tutorial code to start this tutorial.

Tiny Mobile Widgets menu is displayed via a Message on the "Board" channel.

Browser.sendMessage ('Board', 'MENU', title, lsk, rsk, item1, item2, ..., '');

title: menu title
lsk : the left softkey label
rsk : the right softkey label
item1: first item
item2: second item
...: other items
'': empty string to flag the end of the items list

Note:
List of items is ended by a empty string.
Use internationalization functions to define menu labels.

We create a menu with 3 items: 'Item 1', 'Item 2' and 'Item 3'. Menu can display 5 items maximum (since SDK V2.2.0).
When menu is closed :

Left softkey open the menu.
Right softkey close the widget.

When menu is opened:

Left softkey valid the selection.
Right softkey closes the menu without selection.

Current widget code (see softkeys tutorial for more information about this code):

Group {
    children [

        # Node to read messages on "Board" channel
        DEF MESSAGE Message { url "Board" }

        # Script
        DEF SCRIPT Script {
            # Define 'data changed' event
            eventIn MFString data_changed
            url "
            // Widget initialization
            function initialize () {
              // Initialize widget
              Browser.sendMessage ('Board', 'INIT', 'My Widget', 'Menu', 'Quit');
            }

            //Function of 'data changed' event
            function data_changed (val, time) {
              //Read event key
              var key = data_changed[0];
              //Message data are stored in 'data_changed'
              if (key == 'RSK') {
                //Right softkey: Close widget
                Browser.sendMessage ('Board', 'RESET');
              } else if (key == 'LSK') {
                //Left softkey: Open menu
                Browser.sendMessage ('Board', 'MENU', 'My menu', 'Ok', 'Cancel', 'Item 1', 'Item 2', 'Item 3', '');
              }
            }
            "
        }

        # Link "Board" channel and ~JavaScript event
        ROUTE MESSAGE.data_changed TO SCRIPT.data_changed

    ]
}

We can create a menu, but menu do nothing when user select an item...
This part explains how to get selected item on the menu.

Manager send message on "Board" channel when user selects an item.
The process of reading messages on "Board" channel is already defined (see softkeys tutorial).

We extend data_changed(...) function to process a new message: "ANSWER".
See "Board" channel chapter for more information about "ANSWER" message.

New data_changed(...) function code:

//Function of 'data changed' event
function data_changed (val, time) {
  //Read event key
  var key = data_changed[0];
  //Message data are stored in 'data_changed'
  if (key == 'RSK') {
     //Right softkey: Close widget
     Browser.sendMessage ('Board', 'RESET');
  } else if (key == 'LSK') {
     //Left softkey: Open menu
     Browser.sendMessage ('Board', 'MENU', 'My menu', 'Ok', 'Cancel', 'Item 1', 'Item 2', 'Item 3', '');
  } else if (key == 'ANSWER') {
    //Item selected in menu
    var itemIndex = data_changed[1];
    if (itemIndex == 'RSK') {
      //Cancel button (right softkey)
      Browser.print('Cancel');
    } else {
      //Item selected: Trace selection
      Browser.print('Selected item index :' + itemIndex);
    }
  }
}