softkeys tutorial

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

This chapter present the Tiny Mobile Widgets softkeys.
Tiny Mobile Widgets widget can use 2 softkeys:

Left softkeys
Right softkeys

example

Tiny Mobile Widgets softkeys are initialized via a Message on the "Board" channel.

Browser.sendMessage ('Board', 'INIT', title, lsk, rsk, iconOption);

title : the title of your scene.
lsk : the left softkey label.
rsk : the right softkey label.
iconOption : icon display and position option.

Notes:
Use the initialize() JavaScript function to initialize left and right softkeys on widget startup.
Use internationalization functions to define the softkeys label.

Current widget code :

Group {
    children [
        # Script
        DEF SCRIPT Script {
            url "
            // Widget initialization
            function initialize () {
                // Initialize widget
                Browser.sendMessage ('Board', 'INIT', 'My Widget', 'Left', 'Right');
            }
            "
        }
    ]
}

We can change softkeys label, but the softkeys do nothing when pressed.
This part explains how to listen events on the softkeys.

Manager send message on "Board" channel when softkeys are pressed.
Define the Message to read message on "Board" channel.

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

Create a JavaScript event and the function to process messages on "Board" channel.
This function read message and verify if message is a left or right softkeys event.

# Script
DEF SCRIPT Script {
  # Define 'data changed' event
  eventIn MFString data_changed
  url "
    //Initialization...
    //...

    //Function of 'data changed' event
    function data_changed (val, time) {
      //Message data are stored in 'data_changed'
      if (data_changed[0] == 'RSK') {
        //Right softkey
      } else if (data_changed[0] == 'LSK') {
        //Left softkey
      }
    }
  "
}

Link "Board" channel and data_changed event.

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

We can add code into data_changed(...) function to trace event.

The final widget 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', 'Left', 'Right');
            }

            //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
                Browser.print('Right');
              } else if (key == 'LSK') {
                //Left softkey
                Browser.print('Left');
              }
            }
            "
        }

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

    ]
}