XMLとJavascript

OpenLaszloでのXMLとJavascriptの位置づけを簡単に説明します。

おおまかにいうと、画面に表示するモノをXMLタグで、その動作をJavascriptで、記述していく形になります。取り扱うデータはXML形式になります。

OpenLaszloではXMLタグを使って画面に表示する部品を記述していきます。OpenLaszloのソースプログラムの構造はXML文書そのものです。

下記はボタンを表示している例です。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <button>ボタン</button>
</canvas>

ボタンを押したらどうするかといった動作をJavascriptで記述していきます。ここで使うメソッド類はOpenLaszloで定義されているものを使えます。

下記はボタンを押したときに、x位置を50ピクセルずつ1000ミリ秒(＝1秒)かけて移動するというスクリプト

 onclick="this.animate('x',50,1000,true)" 

を上記サンプルに追加した例です。ボタンを押してみてください。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <button onclick="this.animate('x',50,1000,true)">ボタン</button>
</canvas>

OpenLaszloのプログラム自体がXML文書ですが、取り扱うデータ形式もXML文書です。

XMLファイルやWebサービスからのXMLデータを取り扱えます。RDBMS内のデータもJavaやPHPなどの言語で処理してXML形式で表示できるようにすれば取り扱えます。 XMLデータはプログラムソースファイルに直接書き込んでも良いし、HTTP経由で外部からとってくることもできます。

とりこんだXMLデータは、表示部品のXMLタグにバインドして表示できます。部品タグは一つでも、データがあるだけ自動的にコピー(データバインディング)して表示してくれるので、コーディングがすっごい楽々ですね！

↑びっくりする機能があります。右側の表にある文字列をクリックして変更してみてください。。。。あと、ヘッダもクリック！

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
 
  <!-- 取り扱いデータの定義 -->
  <dataset name="ds">
     <sample>
        <data kanji="山" yomi="やま"/>
        <data kanji="川" yomi="かわ"/>
        <data kanji="谷" yomi="たに"/>
        <data kanji="海" yomi="うみ"/>
        <data kanji="空" yomi="そら"/>
        <data kanji="陸" yomi="りく"/>
        <data kanji="星" yomi="ほし"/>
        <data kanji="雲" yomi="くも"/>
        <data kanji="島" yomi="しま"/>
     </sample>
  </dataset>
 
  <simplelayout axis="x" spacing="50"/>
 
  <!-- 生テキストを表示する（実行画面の左側） -->
  <vbox spacing="5">
    <hbox datapath="ds:/sample/data">
      <text datapath="@kanji"/>
      <text datapath="@yomi"/>
    </hbox>
  </vbox>
 
  <!-- グリッド(表)にデータを表示する(実行画面の右側) -->
  <grid datapath="ds:/sample">
     <gridtext datapath="@kanji">漢字</gridtext>
     <gridtext datapath="@yomi">読み</gridtext>
  </grid>
 
</canvas>