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>
<?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>"); %>
![サンプルソースを実行した結果](http://cz-cdn.shoeisha.jp/static/images/article/3999/01.gif)
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>aaa@aaaa.co.jp</email> </user> <user id="2" category="business"> <firstName>花子</firstName> <lastName>諫早</lastName> <phone>222-222-2222</phone> <email>bbb@bbbb.co.jp</email> </user> <user id="3" category="friends"> <firstName>次郎</firstName> <lastName>佐世保</lastName> <phone>333-333-3333</phone> <email>ccc@cccc.co.jp</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>
![サンプルソースを実行した結果](http://cz-cdn.shoeisha.jp/static/images/article/3999/02.gif)