ビュー間の移動の仕方

OpenSocialには、

• preview（アプリ登録前のプレビュー用）
• home（自分が見るホーム画面）
• profile（他人が見るプロフィール画面）
• canvas（全画面表示）

の４つのビューがある（ただしmixiアプリは、現状previewビューには対応していないようだ）。これまでのサンプルアプリでは、ビューを区別せずに全てのビューで同じものを表示するようなものだったけれど、今回は各ビューで違うものを表示させてみる。また、ビュー間の遷移の仕方も見てみようと思う。

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="ViewTransitionTest">
    <Require feature="opensocial-0.8"/>
    <Require feature="views"/>
  </ModulePrefs>
  
  <Content type="html" view="home">
  <![CDATA[
    <div>ここはHomeビューです。</div>
    <input type="button" onclick="navigateToProfile()" value="Profileビューへ移動"/>
    <input type="button" onclick="navigateToCanvas()" value="Canvasビューへ移動"/>
  ]]>
  </Content>
  
  <Content type="html" view="profile">
  <![CDATA[
    <div>ここはProfileビューです。</div>
    <input type="button" onclick="navigateToHome()" value="Homeビューへ移動"/>
    <input type="button" onclick="navigateToCanvas()" value="Canvasビューへ移動"/>
  ]]>
  </Content>
  
  <Content type="html" view="canvas">
  <![CDATA[
    <div>ここはCanvasビューです。</div>
    <input type="button" onclick="navigateToHome()" value="Homeビューへ移動"/>
    <input type="button" onclick="navigateToProfile()" value="Profileビューへ移動"/>
  ]]>
  </Content>
  
  <Content type="html" view="home, profile, canvas">
  <![CDATA[
    <script type="text/javascript">
      function navigateToHome() {
        gadgets.views.requestNavigateTo(new gadgets.views.View("home"));
      }
      function navigateToProfile() {
        gadgets.views.requestNavigateTo(new gadgets.views.View("profile"));
      }
      function navigateToCanvas() {
        gadgets.views.requestNavigateTo(new gadgets.views.View("canvas"));
      }
    </script>
  ]]>
  </Content>
</Module>

それぞれのビューの内容を別に記述するには、Content要素のview属性に、<Content view="canvas">などと設定する。複数のビューを設定する場合は、<Content view="home, profile">のように「,」で区切って書く。

ビュー間でページの遷移をするためには、gadgets.viewsクラスのrequestNavigateTo()メソッドを使う。gadgets.viewsクラスを使うためには、<ModulePrefs>要素の中に<Require feature="views">を入れないといけないので注意。

requestNavigateTo()メソッドは、gadgets.views.Viewオブジェクトを引数にとるので、例えばCanvasビューに移動させたかったら、

gadgets.views.requestNavigateTo(new gadgets.views.View("canvas"));

とすればOK。

参考URL:
gadgets.* API デベロッパー ガイド