PEAR/PECLウォッチ: PEAR::XML_XULでリッチ・クライアント構築

XML_XULの使用法

 PEAR関連の話題として,XULクライアント構築を行うためのクラスライブラリXML_XULを紹介する。XUL(XML-based User-interface Language,読みは「ズール」)は,Mozillaプロジェクトにより作成されたXMLに基づくGUI構築言語である。スタイル(概観)はCSS,UIがアクセスされた際の動作はJavaScriptにより記述する。XULでは,ファイル操作やネットワーク通信なども可能である。XULはMozilla,FirefoxといったGeckoベースのブラウザがインストールされた環境で動作し,クロスプラットフォームで動作するスタンドアロンのGUIアプリケーションを構築することが可能である。XML_XULでは,動的にXULデータを生成することが可能であり,HTMLに比べて表現力が高いリッチ・クライアントを実現できる。

 XML_XULの最新版は0.8.1であり,PEAEのWebサイト(http://pear.php.net/package/XML_XUL)においてα版としてリリースされている。

 XML_XULのインストールは,以下のようにPEARのインストーラにより行うことができる。

# pear install XML_Parser XML_Util XML_XUL-alpha

 XML_XULはα版としてリリースされているため,パッケージ名の後ろに-alphaを付加する必要がある。また,XML_XULはXML_ParserおよびXML_Utilに依存しているため,未インストールの場合は同時にインストールを行う。

図1●XML_XULを使用したアプリケーション動作の流れ
 XML_XULを使用したアプリケーションの動作の流れは図1[拡大表示]のようになる。クライアントがWebサーバー上のPHPスクリプトにアクセスすると,XUDデータがPHPスクリプトにより動的に生成される。XUDデータにはGUIコンポーネントの配置や構造などが指定されている。スタイルの指定は同時に提供されるCSSスタイルシートにより行う。また,GUIコンポーネントにアクセスが行われた場合の動作は,JavaScriptにより指定する。

 JavaScriptによりWebサーバー側にリクエストを行う手段としては,以下の3種類の方法が用意されている。

1.HTTP(GET/POST)
2.XML_RPC
3.SOAP

 図1には,最もシンプルなHTTPを使用する場合について示している。GUIコンポーネントには各イベントのコールバックとしてJavaScriptのメソッドを指定し,この中でXMLHttpRequestオブジェクトにより,HTTPデータの送受信を行う。Webサーバーからのレスポンスには画面をあらわすXUDデータは含まれずHTTPによるリクエストに対する応答データのみが含まれる。

XML_XULのサンプル

 XML_XULを使用して動的にXULデータを生成するPHPスクリプトの例として,足し算を行う簡易的な電卓をリスト3に示す。このスクリプトを以下のようにxulを引数としてアクセスすると写真1[拡大表示]のような画面が表示される。

http://www.example.com/php/xul/calc.php?xul

写真1●簡易電卓の画面表示例(Webブラウザ版)

 同様にして,以下のようにコマンドラインでchromeオプションを指定してFireFox(またはMozilla)を指定することで,写真2[拡大表示]のようにスタンドアロン版のアプリケーションが起動する。

firefox -chrome http://www.example.com/php/xul/calc.php?xul

写真2●簡易電卓の画面表示例(スタンドアロン版)

 このアプリケーションでは,AおよびBに値を指定して「計算」ボタンをクリックすると,A+BフィールドにAとBの和が表示される。

 内部的には,「計算」ボタンがクリックされるとこのボタンに登録されたJavaScriptのコールバック関数calc()が実行されるこの中でHTTPメソッドによりパラメータAおよびBの値がサーバーに送信され,サーバーから返されたレスポンス(この場合はA+B)がA+Bフィールドに表示される。

 このPHPスクリプトの処理についてより詳しくみてみよう。XML_XULにおけるXULデータの生成方法は,DOMドキュメントの生成方法と基本的に同一であり,ルートノードに各GUIコンポーネントを表すXMLノードをappendChild()メソッドにより付加していくことで,GUIを構築する。

 リスト1に示すスクリプトでは,パラメータxulが指定されると,factoryメソッドとして定義されているcreateDocument()メソッドにより,インスタンスを生成する。(5行目)この後,デフォルトのスタイルシートの指定(6行目)を行い,addRoot()メソッドによりルートウインドウを登録する。(9~10行目)

 この後,createElement()メソッドにより生成した各GUIコンポーネントをappendChild()メソッドによりXMLツリーに追加していくことで,GUIを構築する。(13~41行目)最後にsend()メソッドにより,XULデータを送信する。(43行目)

 パラメータxulが指定されない場合,引数aと引数bを加算した数を出力する。

リスト3●簡易電卓スクリプトclass.php

addStylesheet('chrome://global/skin'); // デフォルトスタイルシート
  
  // ルートウインドウ生成
  $win = $doc->createElement('window'); 
  $doc->addRoot($win);
  
  // JavaScriptファイル指定
  $win->appendChild($doc->createElement('script', array('src' => 'form.js')));
  
  // グループボックス追加
  $gbox =  $doc->createElement('Groupbox', array('orient'=>'horizontal'));
  $gbox->setCaption('簡易電卓');
  $win->appendChild($gbox);
  
  // グリッド追加
  $grid = $doc->createElement('Grid');
  $grid->setColumns(3);
  $gbox->appendChild($grid);
  
  // ヘッダー追加
  $headers = array(
    $doc->createElement('Label',array('style'=>'font-weight:bold;'), 'A'),
    $doc->createElement('Label',array('style'=>'font-weight:bold;'), 'B'),
    $doc->createElement('Label',array('style'=>'font-weight:bold;'), 'A+B'));
  $grid->addRow($headers);
  
  // テキストボックス追加
  $values = array(
  $doc->createElement('Textbox',array('id'=>'valA')),
  $doc->createElement('Textbox',array('id'=>'valB')),
  $doc->createElement('Textbox',array('id'=>'valC')));
  $grid->addRow($values);

  $button = $doc->createElement('button',
   array('id'=>'submit','label'=>'計算','oncommand'=>'calc();return false;'));
  $gbox->appendChild($button);
                
  $doc->send(); // XULファイルを送信
} else {
  if (isset($_GET['a']) && isset($_GET['b'])) {
    print $_GET['a']+$_GET['b'];
  } else {
    print "Error.";
  }
}
?>

 リスト3の13行目で指定しているJavaScriptファイルform.jsにてGUIの動作を指定する。リスト4にJavaScriptのコードを示す。このスクリプトでは,XMLHttpRequest()オブジェクトを生成し,「計算」ボタンで指定したコールバック関数calc()においてHTTP GETメソッドにより変数aおよび変数bの値を指定して,リクエストを送信する。さらに,onloadメソッドにより,レスポンスの処理を行う関数loadfuncを登録し,この関数の中でレスポンスの値を設定する。

リスト4●JavaScriptファイルform.js

var p = new XMLHttpRequest();

function calc() {
    var a = document.getElementById('valA').value;
    var b = document.getElementById('valB').value;
    p.open('GET', 'http://www.example.com/php/xul/calc.php?a='+a+'&b='+b);
    p.onload = loadfunc;
    p.send(null);
}

function loadfunc(e) {
    document.getElementById('valC').value = p.responseText;
}

この先は会員の登録が必要です。有料会員(月額プラン)は申し込み初月無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら