popup tutorial

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

This chapter present the Tiny Mobile Widgets Popup.
Tiny Mobile Widgets provide a popup component. Developer can display this popup into widgets.
example

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

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

Browser.sendMessage ('Board', 'POPUP', title, msg, lsk, rsk, type);

title: menu title
msg: Popup message
lsk: the left softkey label
rsk: the right softkey label
type: define popup type and display an icon in title bar.

See "Board" channel chapter for more information about parameters.

Note:
Popup can display progress bar (see progress bar tutorial).
Use internationalization functions to define popup labels.

We create a popup to ask if user would quit widget.

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', '', '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, display confirmation popup
                Browser.sendMessage ('Board', 'POPUP', 'Quit', 'Close the widget?', 'Yes', 'No', 'warning');
              }
            }
            "
        }

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

    ]
}

This part explains how to get the popup result (right or left softkey).

Manager send message on "Board" channel when user select right or left softkey.
The process to read message 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, display confirmation popup
     Browser.sendMessage ('Board', 'POPUP', 'Quit', 'Close the widget?', 'Yes', 'No', 'warning');
  } else if (key == 'ANSWER') {
    //Popup response
    var popupResult = data_changed[1];
    if (popupResult == 'LSK') {
      //'Yes' (left softkey) : Close widget
      Browser.print('YES - Close the widget');
      Browser.sendMessage ('Board', 'RESET');
    } else if (popupResult == 'RSK') {
      //'No' (Right softkey) : Do nothing
      Browser.print('NO - Do nothing');
    }
  }
}

This part explains how to hide a popup without user action.

We can send message POPUP_AUTO_HIDE to Manager.
This message hide the current popup.

In current example, we add a process to close popup after 5 seconds.

//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, display confirmation popup
     Browser.sendMessage ('Board', 'POPUP', 'Quit', 'Close the widget?', 'Yes', 'No', 'warning');
     //Wait for 5000ms (5 secondes) before hide popup
     Browser.setTimeout (hidePopup, 5000);
  } else if (key == 'ANSWER') {
    //Popup response
    var popupResult = data_changed[1];
    if (popupResult == 'LSK') {
      //'Yes' (left softkey) : Close widget
      Browser.print('YES - Close the widget');
      Browser.sendMessage ('Board', 'RESET');
    } else if (popupResult == 'RSK') {
      //'No' (Right softkey) : Do nothing
      Browser.print('NO - Do nothing');
    }
  }
}
//Hide popup function
function hidePopup() {
  //Send hide popup message to Manager
  Browser.sendMessage ('Board', 'POPUP_AUTO_HIDE');
}

Note:
It is better to use TimeSensor instead of setTimeout().