それではLZXのグリッドにXMLデータにバインドして表示する方法を説明します。
まずOpenLaszloをインストールしたディレクトリ内にある「my-apps」ディレクトリを開いてください。Windowsであれば「C:¥Program Files¥OpenLaszlo Server 4.0.3¥Server¥lps-4.0.3¥my-apps」、Mac OS Xであれば「/Application/OpenLaszlo/OpenLaszlo Server 4.0.3/My Apps」です。
次にmy-appsディレクトリ内に「laszlocustomerapp」ディレクトリを作成し、「main.lzx」という名前でテキストファイルを作成し、下記のコードを入力してください。
コード2：main.lzx
<canvas height="250">
<attribute name="baseurl" value="http://127.0.0.1:3000" type="string" />
<dataset name="customerdata" request="false" />
<grid name="customers" datapath="customerdata:/customers" width="500" height="200">
<gridtext text="名字" datapath="last-name/text()" />
<gridtext text="名前" datapath="first-name/text()" />
<gridtext text="住所" datapath="address/text()" width="120" />
<gridtext text="電話番号" datapath="tel/text()" width="100" />
<gridtext text="PCメール" datapath="mail/text()" width="120" />
</grid>
<button text="リロード" y="210" onclick="canvas.getdata()" />
<method name="getdata">
customerdata.setSrc(baseurl+ '/customers.xml');
customerdata.setQueryType("get");
customerdata.doRequest();
</method>
<handler name="oninit">
this.getdata()
</handler>
</canvas>
次にWebブラウザを立ち上げて下記のURLにアクセスします。
http://127.0.0.1:8080/lps-4.0.3/my-apps/laszlocustomerapp/main.lzx
すると図5が表示されます。このグリッドでは各列のヘッダをクリックするとソートしたりカラムを選択してデータを編集することができます。
図5：各列のヘッダをクリックするとソートしたりカラムを選択して データを編集することができる （画像をクリックすると別ウィンドウに拡大図を表示します）
これらの操作はクライアント側で処理されており、サーバにはアクセスしていません。整列や編集のたびにサーバにアクセスしないため、RIAの特徴の1つでもあるサーバ負荷の軽減に効果があります。編集されたデータはクライアント側で保持されているため、データベースに反映させるにはRoRに「PUTリクエスト」を行う必要があります。
現在、このアプリケーションはswf7で出力されていますが、OpenLaszlo4ではDHTMLもサポートされているため、JavaScriptを利用したAjaxアプリケーションとして出力させることもできます。
早速試してみましょう。アプリケーション下部の「Compile Option」を「DHTML」に変更して「Commpile」を実行します。これだけでFlashPlayerを使わないDHTMLアプリケーションとして出力できます。もちろんグリッドのソートやカラムの編集もswf版と同じように動作します。
|
