Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Revision as of 09:44, 20 July 2012 by hamishwillee (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Change widget's views triggered by the options menu

From Wiki
Jump to: navigation, search
Article Metadata
Compatibility
Platform(s):
Symbian
Article
Created: vphong (03 Dec 2007)
Last edited: hamishwillee (20 Jul 2012)

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);
  }
This page was last modified on 20 July 2012, at 09:44.
77 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×