OpenLaszloでマルチデバイス対応RIAを作ろう

第8回 データの取り扱い その1

この記事を読むのに必要な時間:およそ 5 分

OpenLaszloはXML形式のデータを取り扱うことができます。データはプログラムソースの中に埋め込んでも良いし,外部ファイルにしても良いです。GET/POSTを送信してXMLが返ってくるRESTが使えるのでサーバサイド言語を経由してデータベース内のデータも取り扱えます。ネット上のWebサービスAPIでXMLを返してくるものも使えます。

プログラム中に書く場合は固定的なデータを格納しておく用途,外部ファイルはアプリの挙動を簡単に変更するための設定ファイル用途として使い,ユーザの実データはRESTを使ってデータベースに保存する,という使い分けができます。

<dataset>,XPath,レプリケーション

OpenLaszloでXMLデータを扱うためにまず習得する必要があるのは<dataset>,XPath,レプリケーションの3つです。<dataset>はXMLデータを格納するタグ,XPathはXMLデータの特定のデータを指定するための構文,レプリケーションはデータの複製表示機能です。

リスト1のXMLデータをOpenLaszloで取扱ってみましょう。LZX自体もXML形式なのでややこしいですが,一応別物なので混同しないようにご注意ください。

リスト1 XMLデータ

<daimyou address="清須">
  <sei>織田</sei>
  <mei>信長</mei>
</daimyou>

リスト1のXMLデータをOpenLaszloで表示するにはリスト2のように書きます。

リスト2 リスト1のXMLデータを表示

<canvas proxied="false" bgcolor="0xffffcc"> 
  <dataset name="ds">
    <daimyou address="清須"><!--(1)-->
      <sei>織田</sei>
      <mei>信長</mei>
    </daimyou>
  </dataset>
  <text datapath="ds:/daimyou/sei/text()"/><!--(2)-->
  <text datapath="ds:/daimyou/mei/text()"/>
  <text datapath="ds:/daimyou/@address"/><!--(3)-->
  <simplelayout axis="x"/>
</canvas>

リスト2 サンプル

リスト2の(1)について,<dataset>の中にリスト1のXMLデータを記述しています。そのXMLにアクセスするための識別用に<dataset>にdsという名前をつけています。LZXでは<dataset>(の名前)を介してXMLデータにアクセスします。

リスト2の(2)について,文字列表示タグの<text>を使っていますが文字列を記述する代わりにdatapath属性を指定しています。datapathを使うとXPath記法を使って<dataset>内のXMLデータを取得することができます。ds:/daimyou/sei/text()の意味は,⁠dsという名前の<dataset>の中にあるXMLデータ<daimyou>の子の<sei>のデータを取り出す」⁠ということになります。text()を使うと「<タグ>データ<タグ>」の形のときのデータ部分を取り出すことができます。

リスト2の(3)について,datapathのds:/daimyou/@addressというのは<daimyou>のaddress属性の値を取り出すという意味です。@を使うと「<タグ 属性="値">データ<タグ>」の形のときの値部分を取り出すことができます。

次にレプリケーションについて。リスト3とそのサンプルデモを見比べてください。

リスト3

<canvas proxied="false" bgcolor="0xffffcc"> 
  <dataset name="ds">
    <person>
      <daimyou name="織田信長" />
      <daimyou name="豊臣秀吉" />
      <daimyou name="徳川家康" />
      <daimyou name="武田信玄" />
      <daimyou name="上杉謙信" />
    </person>
  </dataset>
  <text datapath="ds:/person/daimyou/@name"/>
  <simplelayout/>
</canvas>

リスト3 サンプル

リスト3のXMLデータは5人分あるのに,表示用のタグ<text>は1個しかありません。それでも5人分表示されています。結局リスト3の動作結果はリスト4のように書いたのと同じ結果になるのです。つまり1つの<text>が内部的に人数分だけ複製(=レプリケーション)されたことになります。このレプリケーション機能により,データの数を気にすることなく効率的にコーディングすることができます。

リスト4

<canvas proxied="false" bgcolor="0xffffcc"> 
  <text>織田信長</text>
  <text>豊臣秀吉</text>
  <text>徳川家康</text>
  <text>武田信玄</text>
  <text>上杉謙信</text>
  <simplelayout/>
</canvas>

リスト4 サンプル

リスト5では1人分のデータを横並びにして,それを人数分だけ縦に並べて住所録表示のようにしてみました。

リスト5

<canvas proxied="false" bgcolor="0xffffcc"> 
  <dataset name="ds">
    <person>
      <daimyou address="清須">
        <sei>織田</sei>
        <mei>信長</mei>
      </daimyou>
      <daimyou address="大阪">
        <sei>豊臣</sei>
        <mei>秀吉</mei>
      </daimyou>
      <daimyou address="岡崎">
        <sei>徳川</sei>
        <mei>家康</mei>
      </daimyou>
    </person>
  </dataset>
  <hbox datapath="ds:/person/daimyou"><!--(1)-->
    <text datapath="sei/text()"/><!--(2)-->
    <text datapath="mei/text()"/>
    <text datapath="@address"/>
  </hbox>
  <simplelayout/>
</canvas>

リスト5 サンプル

リスト5の(1)で,横向き均等配置の<hbox>にdatapath="ds:/person/daimyou"を設定しているのは,ds:/person/daimyou単位で横並びにするという意味です。ds:/person/daimyouのデータは3つあるので,ds:/person/daimyouごとに縦に3つ並ぶという仕組みです。datapathのパスの設定をどこで切るかも重要な点です。

リスト5の(2)は,datapathの中のパスが「sei/text()」と途中から始まってますが,親タグ<hbox>のdatapathを継承するので,いわゆる相対パスとしての書き方になります。

著者プロフィール

ason(あそん)

京都の在宅ITエンジニア。サーバやネットワーク系が得意。初めて触った言語はOpenLaszlo。現在WebプログラマとしてHTML,CSS,PHP,CMSに詳しくなってきたところ。デスメタルドラマー。

URL:http://xtter.openlaszlo-ason.com/

コメント

コメントの記入