×
Namespaces

Variants
Actions
Revision as of 03:02, 8 May 2013 by hamishwillee (Talk | contribs)

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

Optionsメニューによって切り替えられる、Widgetのビュー変更

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Compatibility
Platform(s):
Symbian
Article
Translated:
By morisawafnj
Last edited: hamishwillee (08 May 2013)


対象となるバージョン

Web Runtime 1.0

解説

WidgetのHTML要素(input, button, text, imageなど)は、JavaScriptのDOMオブジェクトを用いて表示/非表示を動的に切り替えることができます。

HTML要素を非表示にする場合  [element].style.display = "none";
HTML要素を表示する場合  [element].style.display = "block";

上記コードが、Optionsメニューのメニュー項目の選択、または、右ソフトキー(デフォルトは終了(exit)機能)のクリックで呼ばれた場合、そのHTML要素が直ちに表示/非表示はされませんが、それは必ず、ユーザーがキーパッド上のキー(ナビゲーションキー、数字キー)をクリックした後のみ起こります。

コード例

  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);
  }

上記コード例により、ユーザーによる右ソフトキー操作で、メインビューと設定ビューを切り替えることができます。ただしそのビューは、直ちに替わるわけではありません。

解決法

その問題を解決するため、下記に示す方法を選ぶことができます。

解決法 1: Widgetの表示切り替えを制御する別々の関数を実装し、わずかな遅延を発生させるためにsetTimeout()メソッドを使用します。

コード例

  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";
       }
  }

解決法 2: widget.prepareForTransition()メソッドとwidget.performTransition()メソッドを使用し、わずかな遅延を発生させるためにsetTimeout()メソッドを使用します。

コード例

  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 8 May 2013, at 03:02.
93 page views in the last 30 days.