OpenLaszloとサーバーサイド連携

第3回

datasetタグとlz.datapointerクラス

　LZXソースのdatasetタグ、srcプロパティにサーバーサイドのURLをセットしてdoRequestメソッドを実行します。非同期で処理されるので、正常終了したときのイベントハンドラ、エラーが発生したときのイベントハンドラに処理内容を記述します。

　サーバーから取得したXMLデータは、datasetタグのgetPointerメソッドで取得したlz.datapointerクラス経由で操作します。XMLデータは内部でDOM形式で解析されているため、XMLデータをツリー構造としてアクセスすることができます。

サンプルソース

<?xml version="1.0" encoding="UTF-8"?>
<canvas fontsize="15"
        font    ="MS UI Gothic"
        debug   ="false">

  <dataset name="dtData"
           src ="http://localhost:8080/lps-4.3.0/my-apps/sample/getUserInfo.jsp"/>

  <button id="btnRequest">ユーザー情報の取得</button>

  <text id="txt" y="40" multiline="true" resize="true"/>

  <!-- ボタンをクリックした時のイベントハンドラ -->
  <handler name     ="onclick"
           reference="btnRequest">
  <![CDATA[
    txt.clearText();
    dtData.doRequest();  //サーバーサイドにリクエスト
  ]]>
  </handler>

  <!-- サーバーサイド連携が正常終了したときのイベントハンドラ -->
  <handler name     ="ondata"
           reference="dtData">
  <![CDATA[
    txt.setAttribute('fgcolor', lz.colors.black);
    var p = dtData.getPointer();  //データポインタの取得
    p.setXPath('/users/user[1]');  //XPathを使用してuserタグの先頭に移動
    do {
      p.selectChild();  //userタグの子階層に移動
      do {
        //サーバーから取得した名前、年齢、性別を画面に表示
        txt.addText(p.getNodeName() + "=>" + p.getNodeText() + '\n');
      } while (p.selectNext());  //次のノードへ
      p.selectParent(); //userタグの階層に戻す
    } while (p.selectNext());  //次のノードへ
  ]]>
  </handler>

  <!-- サーバーサイド連携でエラーが発生したときのイベントハンドラ -->
  <handler name     ="onerror"
           reference="dtData">
  <![CDATA[
    txt.setAttribute('fgcolor', lz.colors.red);
    txt.setAttribute('text', 'エラーが発生しました。');
  ]]>
  </handler>

  <!-- サーバーサイド連携でタイムアウトが発生したときのイベントハンドラ -->
  <handler name     ="ontimeout"
           reference="dtData">
  <![CDATA[
    txt.setAttribute('fgcolor', lz.colors.red);
    txt.setAttribute('text', 'タイムアウトが発生しました。');
  ]]>
  </handler>

</canvas>

getUserInfo.jspのソース

<?xml version="1.0" encoding="UTF-8"?>
<%@page pageEncoding="UTF-8"%>
<%@page contentType="text/html;charset=UTF-8"%>
<%
  out.println("<users>");
  out.println(" <user>");
  out.println("   <name>長崎太郎</name>");
  out.println("   <age>30</age>");
  out.println("   <sex>男</sex>");
  out.println(" </user>");
  out.println(" <user>");
  out.println("   <name>諫早花子</name>");
  out.println("   <age>25</age>");
  out.println("   <sex>女</sex>");
  out.println(" </user>");
  out.println(" <user>");
  out.println("   <name>佐世保次郎</name>");
  out.println("   <age>20</age>");
  out.println("   <sex>男</sex>");
  out.println(" </user>");
  out.println("</users>");
%>

サンプルソースを実行した結果

XPath（XML Path Language）

　XMLデータのポインタを操作する方法として、selectChildメソッド・selectNextメソッドを使用して目的の位置まで順番に探していく方法以外に、XPathを使用して特定の位置までダイレクトに移動することもできます。XPathを使用すると、配列のようにアクセスできたり、条件を指定してポインタを移動することができます。

サンプルソース

<?xml version="1.0" encoding="UTF-8"?>
<canvas fontsize="15"
        font    ="MS UI Gothic"
        debug   ="false">

  <!-- ダミーのデータセットの準備。
       子タグで直接XMLを記入してdatasetに値をセットすることができる。-->
  <dataset name="dtAddress">
    <users>
      <user id="1" category="friends">
        <firstName>太郎</firstName>
        <lastName>長崎</lastName>
        <phone>111-111-1111</phone>
        <email>[e-mail]</email>
      </user>
      <user id="2" category="business">
        <firstName>花子</firstName>
        <lastName>諫早</lastName>
        <phone>222-222-2222</phone>
        <email>[e-mail]</email>
      </user>
      <user id="3" category="friends">
        <firstName>次郎</firstName>
        <lastName>佐世保</lastName>
        <phone>333-333-3333</phone>
        <email>[e-mail]</email>
      </user>
    </users>
  </dataset>

  <view layout="axis: y; spacing: 20">
    <view layout="axis: y; spacing: 3">
      <button id="btnTest1" text="/users/user[2]/lastName/"/>
      <text id="txtResult1" fgcolor="red" resize ="true"/>
    </view>
    <view layout="axis: y; spacing: 3">
      <button id="btnTest2" text="/users/user[@category="business"]/lastName/"/>
      <text id="txtResult2" fgcolor="red" resize ="true"/>
    </view>
    <view layout="axis: y; spacing: 3">
      <button id  ="btnTest3"
              text="/users/user[@id="3"][@category="friends"]/lastName/"/>
      <text id="txtResult3" fgcolor="red" resize ="true"/>
    </view>
  </view>

  <!-- 1番目のuserの子ノードfirstNameの値を取り出す -->
  <handler name     ="onclick"
           reference="btnTest1">
  <![CDATA[
    txtResult1.clearText();
    var p = dtAddress.getPointer();
    if (p.setXPath('/users/user[1]/lastName/'))
    txtResult1.setAttribute('text', '取得結果 ⇒ ' + p.getNodeText());
  ]]>
  </handler>

  <!-- userの属性categoryが"business"の子ノードfirstNameの値を取り出す -->
  <handler name ="onclick"
           reference="btnTest2">
  <![CDATA[
    txtResult2.clearText();
    var p = dtAddress.getPointer();
    if (p.setXPath('/users/user[@category="business"]/lastName/'))
    txtResult2.setAttribute('text', '取得結果 ⇒ ' + p.getNodeText());
  ]]>
  </handler>

  <!-- userの属性idが3かつ属性categoryが"friends"の子ノードfirstNameの値を取り出す -->
  <handler name ="onclick"
           reference="btnTest3">
  <![CDATA[
    txtResult3.clearText();
    var p = dtAddress.getPointer();
    //xpathQueryメソッドはポインタを移動して値を返します。
    var v = p.xpathQuery('/users/user[@id="3"][@category="friends"]/lastName/');
    if (v != null)
      txtResult3.setAttribute('text', '取得結果 ⇒ ' + v);
  ]]>
  </handler>
</canvas>

サンプルソースを実行した結果