SharedObjectとXML

SharedObjectにXMLを保存して、OpenLaszlo単体でDBシステムのようにふるまうアプリの例。サンプルアプリはSWFひとつで動いています。データはクッキーみたいにローカルに保存されます。

でも色々やってたら、ちょっとしたアプリになってしまいました(^^;)・・・コードは長いですが、たいしたことしていません。

インターネット向けリッチメディアプラットフォームを開発したい場合、OpenLaszloは最も汎用的なプラットフォームの一つです。 OpenLaszloという名前は、ハンガリーの写真家・画家・バウハウス理論家であるラスロー・モホリ＝ナジ(László Moholy-Nagy)にちなんで命名されたことを覚えておくのは有益です。 彼の進歩的な著作の簡単さと実用性はOpenLaszloと非常に合っています。 多くの複雑な対話型アプリケーション－オンラインカジノ（http://www.partycasino.com/）からGoogle(さらに多くの企業)が提供する数々のアプリケーションまで－の間でのインターネット上での競争は激しいので、このプラットフォームはユーザーにとって非常に有利です。

▼サンプルアプリの仕様

• 初期状態では、デフォルトのデータ３件が表示される。
• 「新規追加」ボタンでデータ追加できる。
• 「保存」ボタンでSharedObjectに保存できる。つまりローカルPC上に保存されるので、ブラウザをリロードしてもデータはそのまま残ってる。
• 「初期状態に戻す」ボタンでSharedObjectの内容が消去され、初期状態に戻る。
• リスト項目をクリックすると、「更新」「削除」ができる画面が出る。ここでの操作も「保存」ボタンを押すとSharedObjectに保存される。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xcccccc">
  <dataset name="ds">
    <root>
      <data d1="織田" d2="信長" d3="名古屋"/>
      <data d1="豊臣" d2="秀吉" d3="大阪"/>
      <data d1="徳川" d2="家康" d3="東京"/>
    </root>
  </dataset>
 
  <!-- データ追加、更新、削除用ビューの共通画面クラス-->
  <class name="dataview" visible="false" x="40" width="230" height="120" bgcolor="0xffffaa">
    <text y="10">姓:</text>
    <edittext name="d1" datapath="@d1" x="40" y="10"/>
    <text y="35">名:</text>
    <edittext name="d2" datapath="@d2" x="40" y="35"/>
    <text y="60">住所:</text>
    <edittext name="d3" datapath="@d3" x="40" y="60"/>
    <button align="right" valign="bottom" onclick="parent.setAttribute('visible',false)" text="閉じる"/>
  </class>
 
  <script>
    // SharedObjectを読み込む
    var so = SharedObject.getLocal("localdata");
  </script>
 
  <handler name="oninit" >
    if(so.data.xml!=null){ 
      // データセット内をいったん全部消す
      ds.setChildNodes([]);
      // 読み込んだSharedObject内のXML文字列をオブジェクトに変換してデータセットに挿入
      ds.appendChild(LzDataElement.stringToLzData(so.data.xml));
      msg.setAttribute('text',"ローカル保存データを表示しています。");
    }else{ 
      msg.setAttribute('text',"初期状態です。");
    }
  </handler>
 
  <text id="msg" fgcolor="0xff0000" bgcolor="0xffffff" fontsize="12" width="270" multiline="true"/>
  <hbox y="40" spacing="10">
    <button onclick="newdata.setAttribute('visible', !newdata.visible);">新規追加</button>
    <button>保存
      <handler name="onclick">
        // データセット内の全データを文字列として取得
        var dp = ds.getPointer();
        dp.selectChild();
        var t ="";
        do{
          t =  t + dp.serialize();
        }while(dp.selectNext());
        // SharedObjectにデータセット内のデータをXML文字列として保存
        so.data.xml = t;
        msg.setAttribute('text',"保存されました。ブラウザをリロードしてみてください。");
      </handler>
    </button>
    <button text="初期状態に戻す">
      <handler name="onclick">
         so.clear();
         msg.setAttribute('text',"保存データを削除しました。初期状態に戻ります。ブラウザをリロードしてみてください。");
      </handler>
    </button>
 
  </hbox>
  <!-- リスト表示エリア -->
  <vbox y="70" spacing="10">
    <!-- １レコード表示分-->
    <vbox datapath="ds:/root/data">
        <hbox width="270" bgcolor="0xffffff" spacing="10"
            onclick="parent.updatedata.setAttribute('visible', !parent.updatedata.visible);"
            onmouseover="this.setAttribute('bgcolor',0xffaaaa)"
            onmouseout="this.setAttribute('bgcolor',0xffffff)" initstage="late">
          <text datapath="position()">
            <handler name="ontext" args="t">
              this.setAttribute('text',"(" + t + ")");
            </handler>
          </text>
          <text datapath="@d1"/>
          <text datapath="@d2"/>
          <text datapath="@d3"/>
        </hbox>
        <!-- 更新・削除ビュー -->
        <dataview name="updatedata" bgcolor="0xaaffaa">
          <button x="160" y="10">更新
            <handler name="onclick">
              parent.parent.datapath.updateData();
              parent.setAttribute('visible',false);
              msg.setAttribute('text',"保存するまでは反映されません。");
            </handler>
          </button>
          <button x="160" y="40">削除
            <handler name="onclick">
              parent.parent.datapath.deleteNode();
              msg.setAttribute('text',"保存するまでは反映されません。");
            </handler>
          </button>
        </dataview>
    </vbox>
  </vbox>
 
  <!-- 追加ビュー -->
  <dataview id="newdata" datapath="new:/data" x="280">
    <button x="160" y="10">追加
      <handler name="onclick">
        parent.datapath.updateData();
        var dp=canvas.datasets.ds.getPointer();
        dp.selectChild();
        dp.addNodeFromPointer( parent.datapath );
        parent.setAttribute('datapath', "new:/data");
        msg.setAttribute('text',"保存するまでは反映されません。");
      </handler>
    </button>
  </dataview>
</canvas>