1つのviewで複数のページを表示する

jQuery や YUI ( yahoo user interface library ) などのタブ機能を使えば１つのviewで複数のページを簡単に作れるのですが、今回はちょっと違った方法で表現してみます。

OpenSocial の view モジュールを用いると gadgets.views.requestNavigateTo(view, opt_params, opt_ownerId) メソッドでviewの移動を行えるのですが、そのメソッドの第２引数に独自のパラメータをMap型で渡すことができます。
viewの移動後には、gadgets.views.getParams( ) メソッドで先のパラメータの取得が可能となります。

これらを組み合わせることにより1つのviewで複数のページを表現可能となります。
例えば、home view に canvas view へ移動する下記のコードが存在するとします。

var opt_params = {target:'LIST'};
gadgets.views.requestNavigateTo(new gadgets.views.View('canvas'), opt_params);

移動後の canvas view では、下記のコードで先の target を取得し、その値を判定することにより表示するページ(LIST, ITEM 等)を決定します。

var opt_params = gadgets.views.getParams( );
var target = opt_params ? ( opt_params.target ? opt_params.target : null ) : null;
if ( target == 'LIST' ){
   // LIST 用ページの表示
} else if ( target == 'ITEM' ){
  // ITEM 用ページの表示
} else {
  // エラー表示
}

上の例では、home view から canvas view への遷移でしたが、canvas view から canvas view 自身への遷移も可能です。
よって canvas view に複数のボタンを表示し、ボタンがクリックされた際の遷移先は canvas view にし、opt_paramsのtarget キーには別の値を指定することにより1つのviewで複数のページを表現することが可能となります。

<?xml version="1.0" encoding="UTF-8"?>
<Module>
    <ModulePrefs
            title="TestBed"
            author_email="testbed@example.com">
        <Require feature="opensocial-0.8" />
        <Require feature="views" />
    </ModulePrefs>
    <Content type="html" view="canvas"><![CDATA[
<script type="text/javascript">
var onClick = function(page){
   var opt_params = {target:page};
   gadgets.views.requestNavigateTo(new gadgets.views.View('canvas'), opt_params);
}
var init = function(){
   var opt_params = gadgets.views.getParams();
   var target = opt_params ? ( opt_params.target ? opt_params.target : null ) : null;
   if ( target == 'ITEM' ){
      // ITEM 用ページの表示
      document.getElementById("content").innerHTML = 'ITEM PAGE';
   } else if ( target == 'SETTING' ){
     // SETTING 用ページの表示
     document.getElementById("content").innerHTML = 'SETTING PAGE';
   } else {
     // デフォルトで LIST 用ページの表示
     document.getElementById("content").innerHTML = 'LIST PAGE';
   }
}

gadgets.util.registerOnLoadHandler(init);
</script>

<button onclick="onClick('LIST');">List</button>
<button onclick="onClick('ITEM');">Item</button>
<button onclick="onClick('SETTING');">Setting</button>
<br /><br />
<div id="content"></div>
  ]]></Content>
</Module>

下の図は、OSDE を用いて上記コードを試した結果です。

canvasの初期表示 (opt_params に target が指定されていないとき) 画面です。

item ボタンをクリックした時の画面です。

デザインを工夫すればjQueryやYUIのタブ機能を使用しなくても同じようなことが可能になるのでシンプルな実装を保ちたい時には結構良いのではないでしょうか

Trackback URL