OpenLaszloアドバンスド・テクニック
OpenLaszloアドバンスド・テクニック（2）　Page 2/3

Webアプリと連携するためのコーディング基礎

ネットエイト
小野 圭二
2006/5/9

■LZXアプリケーションからサーバへのデータ送信方法

　それではLZXアプリケーションからサーバサイドプログラムへPOST／GETでデータを送信する方法です。単純に、テキストデータを渡してみましょう。リスト4のサンプルは、<edittext>にデータを入力して<button>をクリックするとservertest.jspにデータが送信される例です。

　<button>タグ内の<method>タグ内の変数「ed」は、<edittext>に入力されたデータを格納します。同様に「d」には使用するサーバサイドオブジェクトプログラムの名前を指定します。そしてオブジェクト「p」に送信するデータを設定するわけです。送信されるデータは「addValue( name, value, boolean )」により、「name=value」形式で格納され、「setQueryString()」で最終的なクエリが作られ、「doRequest()」でサーバへ送信されます。デフォルトではGETでの通信となります。POSTで通信する場合は、リスト5の文を追加します。

<dataset name="servertest" src="http:jsp/servertest.jsp"/>

<simplelayout/>
<edittext name="ed"/>
<button>GET送信
  <method event="onclick">
    var ed = parent.ed.getText();
    var d  = canvas.datasets.servertest;
    var p  = new LzParam();
    p.addValue( "ed", ed, true );
    d.setQueryString( p );
    d.doRequest();
  </method>
</button>
リスト4　サーバサイドプログラムへのデータ送信
servertest.jspは「http://127.0.0.1:8080/lps-3.2/it1/src/jsp/servertest.jsp」に格納している前提で解説しています。

d.setQueryString( p );
d.setQueryType( "POST" );    ←追加分
d.doRequest();
リスト5　POSTでの通信

　サーバサイドプログラムのservertest.jspはリスト6とします。

<%@ page language="java" contentType="text/xml; charset=UTF-8" %>
<%
 String state = "ok";
 String ed = ( String )request.getParameter( "ed" );
 if(( ed == null )||( ed.length() == 0 )) state = "ng";
%>
<resultset>
  <result state="<%= state %>" data1="データ1"/>
  <result state="<%= state %>" data1="データ2"/>
</resultset>
リスト6　サーバサイドのJSPプログラム

　リスト6のJSPプログラムは、LZXアプリケーションから送信されるデータ「ed」を取得してnull判定を行い、結果を出力します。

　さて、このJSPの出力はどうなるのでしょうか。LZXアプリケーションはこの出力（戻り値）を<dataset>で受けます。つまり、「servertest」オブジェクトに格納されるのです。この戻り値を使って、LZXアプリケーションは処理結果の判定を行うことができます。また、もしもservertest.jspが検索プログラムのようなものであった場合、検索キーとしての「ed」に対する検索結果（複数データ）をサーバサイドプログラムは同様にXML形式でLZXアプリケーションに返し、同様に「servertest」オブジェクトに格納されます。

　さらに、サーバサイドプログラムに対してタイムアウトを設定できます。デフォルトでは30秒に設定されているのですが、「OpenLaszlo Server 3.2\Server\lps-3.2\WEB-INF\lps\config\lps.properties」の65行目からにある設定から「#」を取り除き有効にすると、ここで設定した時間（msec設定）がデフォルトになります。また、<dataset>のtimeout属性を設定することで、<dataset>それぞれで異なるタイムアウトを持つこともできます。

■サーバからのデータの受け方

　サーバから送られてくるデータは<dataset>で指定されるオブジェクトに格納されます。通信時のエラーやタイムアウト、または送信されてきたデータによる処理の分岐を行うには<datapointer>タグを使用します。例えばリスト7のような感じです。

<datapointer xpath="servertest:/*[1]">
  <method event="ontimeout">
    //タイムアウト発生時の処理を指定します
  </method>
  <method event="onerror">
    //通信エラーなどの発生時の処理を指定します
  </method>
  <method event="ondata">
    //送信されてきたデータに基づく処理を指定します
  </method>
</datapointer>
リスト7　<datapointer>タグの使用例

　例として、リスト6のXMLデータメッセージを受け取ったとして、以下の場合にそれぞれアラームメッセージを表示してみます（リスト8）。

  • タイムアウト　　[イベント：ontimeout]　→　「タイムアウト」と表示
  • エラー発生　　[イベント：onerror ] →　「エラー」と表示
  • 期待値の場合　　[イベント：ondata ] →　「成功」と表示
  • 期待値以外の場合　　[イベント：ondata ] →　「残念」と表示
<alert name="al"/>
<datapointer xpath="servertest:/resultset[1]/result[1]">
  <method event="ontimeout">
    this.alcall( "タイムアウト" );
  </method>
  <method event="onerror">
    this.alcall( "エラー" );
  </method>
  <method event="ondata">
    <![CDATA[
      var resultChk = this.xpathQuery( '@state' );
      Debug.write( "resultChk: " + resultChk );
      if( resultChk == "ok" ){
        parent.comp.setVisible( true );
        this.alcall( "成功" );
      }else{
        this.alcall( "残念" );
      }
    ]]>
  </method>
  <method name="alcall" args="s">
    parent.al.setAttribute( "text", s );
    parent.al.open();
  </method>
</datapointer>

リスト8　アラームメッセージの条件分岐ロジック

　<alert>タグはアラートメッセージを表示するウィンドウです。<dataset>タグで指定された「servertest」オブジェクトにサーバサイドプログラムからの値が格納されますが、もしもクライアント／サーバ間の通信がタイムアウトした場合は、「ontimeout」イベントが発生します。同様に、通信エラーが発生した場合には「onerror」イベントが発生します。通信が正常に終了し「servertest」オブジェクトに何らかの値がセットされると「ondata」イベントが発生します。これらイベントをキャッチして各<method>タグにてそれぞれのメッセージを指定し、<alert>ウィンドウを表示する「alcall()」メソッドを呼び出してアラームメッセージを表示しています。

　 2/3

　INDEX

OpenLaszloアドバンスド・テクニック（2）
　Webアプリと連携するためのコーディング基礎
  Page1
はじめに
Openlaszloの配備方法
サーバ連携で取り扱うデータ形式
Page2
LZXアプリケーションからサーバへのデータ送信方法
サーバからのデータの受け方
  Page3
データのバインド例




HTML5 + UX フォーラム 新着記事
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

HTML5＋UX 記事ランキング

本日 月間
＠IT