Categories: Code Examples | Web Runtime (WRT) | S60

This page was last modified 20:19, 6 March 2008.

From Forum Nokia Wiki

Compatibility

WRT 1.0

Description

Widget's HTML elements such as inputs, buttons, texts, images etc. can be shown or hidden dynamically using the JavaScript DOM style object.

To hide an element call [element].style.display = "none";
To show an element call [element].style.display = "block";

If the code above is called as a consequence of a selection of a menu item from the Options menu or of a click on the right softkey (if it was overridden the default "exit" function), the element is not shown or hidden immediately, but the effect happens only after the user clicks on a key on the keypad (navigation keys or a numeric key).

Example codes

  function showSettingView()
  {
    document.getElementById('mainView').style.display = "none";
    document.getElementById('settingView').style.display = "block";
    // change default right softkey label and override default function
    window.menu.setRightSoftkeyLabel("Back", returnToMainView);
  }

  function showMainView()
  {
    document.getElementById('mainView').style.display = "block";
    document.getElementById('settingView').style.display = "none";
    // change default right softkey label and override default function
    window.menu.setRightSoftkeyLabel("Settings", showSettingView);
  }

The example code above allows a user to switch between the main view and the setting view by clicking on the right softkey, but the view is not changed immediately.

Solutions

To overcome the problem, choose one of the options below:

Solution 1: Implement a separate function which handles the widget's display switching and use the setTimeout() to cause a small delay.

Example codes

  function showSettingView()
  {
    // change default right softkey label and override default function
    window.menu.setRightSoftkeyLabel("Back", returnToMainView);
    setTimeout("switchViews(0);", 1);
  }

  function showMainView()
  {
    // change default right softkey label and override default function
    window.menu.setRightSoftkeyLabel("Settings", showSettingView);
    setTimeout("switchViews(1);", 1);
  }

  function switchViews(mainView)
  {
    if (mainView) {
       document.getElementById('mainView').style.display = "block";
       document.getElementById('settingView').style.display = "none";
       }
    else {
       document.getElementById('mainView').style.display = "none";
       document.getElementById('settingView').style.display = "block";
       }
  }

Solution 2: Use the widget.prepareForTransition() and widget.performTransition() methods and use the setTimeout() to cause a small delay.

Example codes

  function showSettingView()
  {
    window.widget.prepareForTransition("fade");
    document.getElementById('mainView').style.display = "none";
    document.getElementById('settingView').style.display = "block";
    setTimeout("window.widget.performTransition();", 1);
    // change default right softkey label and override default function
    window.menu.setRightSoftkeyLabel("Back", returnToMainView);
  }

  function showMainView()
  {
    window.widget.prepareForTransition("fade");
    document.getElementById('mainView').style.display = "block";
    document.getElementById('settingView').style.display = "none";
    setTimeout("window.widget.performTransition();", 1);
    // change default right softkey label and override default function
    window.menu.setRightSoftkeyLabel("Settings", showSettingView);
  }