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

Article Metadata

---

Article

Translated:

From Change widget's views triggered by the options menu

By morisawafnj

Last edited: hamishwillee (09 Dec 2011)

対象となるバージョン

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