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

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

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

外部XMLファイル,リモートXMLデータの取得

XMLデータを外部ファイルにすることができます。リスト6のように<dataset>のsrc属性でファイル名を指定します。

リスト6 外部XMLデータファイルの使用

<dataset name="ds" src="mydata.xml"/>

バックエンドのプログラムからXMLデータを取得する場合は,リスト7のように<dataset>のsrc属性でプログラムのパスを指定します。Webサービスの場合はURLをフルパスで指定します。type="http"はHTTP経由,request="true"はアプリ起動時に自動取得するという意味です。バックエンドのプログラム言語はPHP,Java,C,Perl,Rubyなど何でもよく,GET/POSTでアクセスしたときにXMLを返しさえすればOKとなります。データベースに直接アクセスする機能はOpenLaszlo自体にはありませんが,バックエンドのプログラム経由で可能となります。そのため各種WebサービスのAPIを使ったマッシュアップや,データーベースと連携して動く業務アプリの構築が可能です。

リスト7

<dataset name="ds" src="getdata.php" request="true" type="http" />
または
<dataset name="ds" src="http://xxx.xxxx.xxx/getdata.php" request="true" type="http" />

XMLデータの構造が同じなら,ソース内でも,外部ファイルでも,リモートでも,<dataset>経由でのデータの扱い方は全くおなじになります。つまり,XMLデータ構造さえわかっていれば,バックエンドが完成していなくてもローカルのダミーデータで先行開発していけるということです。

データコンポーネント

<dataset>を使ったデータアクセスが前提のコンポーネントを紹介します。HTMLでいうと<table>で表現される表のコンポーネントです。

<grid>

XMLデータを表形式で表示するコンポーネントです。<grid>は入れ物のタグで,文字列データは<grid>の中に入れた<gridtext>で表示します。ここでは割愛しますが,文字列の見せ方を細かくカスタマイズしたり,チェックボックス,ボタンなどのコンポーネントを行の中に入れたりするには<gridtext>の代わりに<gridcolumn>を使用します。

リスト8

<canvas proxied="false" bgcolor="0xffffcc">
  <dataset name="ds" >
    <root>
      <data data1="CCC" data2="888" data3="たちつてと"/>
      <data data1="FFF" data2="555" data3="まみむめも"/>
      <data data1="AAA" data2="333" data3="さしすせそ"/>
      <data data1="DDD" data2="444" data3="あいうえお"/>
      <data data1="EEE" data2="222" data3="なにぬねの"/>
      <data data1="BBB" data2="666" data3="はひふへほ"/>
      <data data1="III" data2="777" data3="かきくけこ"/>
      <data data1="HHH" data2="111" data3="やゆよ"/>
      <data data1="GGG" data2="999" data3="らりるれろ"/>
      <data data1="JJJ" data2="000" data3="わをん"/>
    </root>
  </dataset>
  <grid datapath="ds:/root" >
    <gridtext datapath="@data1">英字</gridtext>
    <gridtext datapath="@data2">数字</gridtext>
    <gridtext datapath="@data3">ひらがな</gridtext>
  </grid> 
</canvas>

リスト8 サンプル

リスト8の<grid>はデフォルト状態ですが,タイトルをクリックするとオンラインでソートでき,データ項目をクリックするとこれもオンラインで編集できるようになっています。デフォルトでは8項目まで表示可能でそれ以上の場合はスクロールバーが自動で出てきます。

<grid>の見た目や動作を変える細かい設定はリファレンスを参照してください。何が指定できるかをざっと紹介すると,縦横の罫線の表示,1行おきの色分け,デフォルト表示数の変更などです。

XPathについて

XMLデータにアクセスする構文XPathはW3Cの標準ですが,OpenLaszloではそのすべての機能に対応しているわけではありません。OpenLaszloで使えるXPath構文を次の表で紹介しておきます。リスト9のXMLデータを使って,<text>のdatapathの設定(★の部分)を変えるとどのような結果を得られるかをまとめてあります。

リスト9

<canvas proxied="false" bgcolor="0xffffcc"> 
  <dataset name="ds" >
    <world>
      <country area="ヨーロッパ">
        <name>イタリア</name>
      </country>
      <country area="ヨーロッパ">
        <name>ギリシャ</name>
      </country>
      <country area="アフリカ">
        <name>ケニア</name>
      </country>
      <country>
        <name>日本</name>
      </country>
      <space>
        <name>月</name>
      </space>
    </world>
  </dataset>
  <simplelayout/>
  <text datapath="★" />
</canvas>

表1 XPath構文と表示例

設定意味表示
ds:/world/country/name/text()すべてのcountryイタリア,ギリシャ,ケニア,日本
ds:/world/country[2]/name/text()2番目のcountryギリシャ
ds:/world/country[2-3]/name/text()2~3番目のcountryギリシャ,ケニア
ds:/world/country[-3]/name/text()最初~3番目のcountryイタリア,ギリシャ,ケニア
ds:/world/country[2-]/name/text()2番目~最後のcountryギリシャ,ケニア,日本
ds:/world/country[@area]/name/text()area属性が存在するcountryイタリア,ギリシャ,ケニア
ds:/world/country[@area='ヨーロッパ']/name/text()areaがヨーロッパのcountryイタリア,ギリシャ
ds:/world/*/name/text()world直下のすべてイタリア,ギリシャ,ケニア,日本,月
ds:/world/country/@areaすべてのcountryのarea属性の値ヨーロッパ,ヨーロパ,アフリカ
ds:/world/country[3]/@area3番目のcountryのarea属性の値アフリカ
ds:/world/country[2-3]/@area2~3番目のcountryのarea属性の値ヨーロッパ,アフリカ
ds:/world/country[1]/name()1番目のcountryのタグの名前country
ds:/world/country/last()counrtyの数4,4,4,4
ds:/world/*/last()world直下のすべてのデータの数5,5,5,5,5
ds:/world/country/position()countryの連番1,2,3,4
ds:/world/*/position()world直下のすべてのデータの連番1,2,3,4,5

著者プロフィール

ason(あそん)

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

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

コメント

コメントの記入