ページ

2011年3月10日木曜日

iGoogle Gadget -10

■ 値の保持(状態の保持)には setprefs 機能をガジェットに追加する必要があります。

■ ユーザー設定の値は編集ボックスでユーザー自身が設定できるようにするのが一般的です。

■ ユーザーに入力させる代わりにプログラム的に値を設定した方が便利な場合もあります。

■ URL の制約によりユーザー設定のサイズは 2 K に制限されています(2011/03)

■ サンプルです 




ガジェットには 2 つのボタンがあります。 

1 つはカウンタの値を増やすボタン、もう 1 つはカウンタの値を 0 にリセットするボタンです。 

このサンプルでは、「counter」がユーザー設定です。 
データ型は hidden なので、この値をユーザーが直接変更することはできません。



<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs  title="Setprefs New">
    <Require feature="opensocial-0.8"/> // ソーシャルガジェットの詳細を
    <Require feature="setprefs" /> //setprefs ライブラリを読み込むようガジェットに指示する
  </ModulePrefs>
    <UserPref  name="counter"  default_value="0" datatype="hidden"/>
             //値をプログラム的に設定して永続的に保持したいユーザー設定(通常のデータ型は hidden)

    <Content type="html">
    <![CDATA[
    <div id="content_div" style="height: 100px;"></div>
    <script type="text/javascript">

    var prefs = new gadgets.Prefs();  // preferencesの取得
    var html = "";
    var div = document.getElementById('content_div');
    function incrementCounter() {
      var count = prefs.getInt("counter");
      div.innerHTML = "The count is " + count + ".";
      prefs.set("counter", count + 1);  // "counter"のインクリメント
    }


    // "counter"のリセット
       function resetCounter(){
      prefs.set("counter", 0); // 値を保存したいユーザー設定の JavaScript 関数 set() の呼び出し
      div.innerHTML = "Count reset to " + prefs.getInt("counter") + ".";
    }

    </script>
    <input type=button value="Count" name="count" onClick="incrementCounter()">
    <input type=button value="Reset" name="reset" onClick="resetCounter()">
  ]]>
  </Content>
</Module>

■ 編集用リンク