連載 役に立つXMLツール集（8）
XULとJSFでリッチクライアント 〜XUL編〜 Page 3
www.netpotlet.com
原田洋子
2004/6/16
いくつかサンプルを紹介しましょう。ただし、XULにはさまざまなタグがあり多様なUIを作れるので、本記事で紹介できるのはほんの一部だけです。XULに興味を持ったら、ぜひXUL PlanetのチュートリアルにあるXULのサンプルを試してみてください。なお、本記事と次回記事はレンダリングの説明ですので、XULについても表示にかかわる部分のみになっています。振る舞いについては次々回のアクション編で触れる予定です。
ボタンの作成
図2（別ウィンドウで開きます）にもボタンがありますが、リスト4のXULは絵付きボタンを作る例です。図1（別ウィンドウで開きます）のファイル配置になっている場合、Tomcatを起動して
http://localhost:8080/cove/samples/button.xul
をリクエストすると図3のように表示されます。
リスト4には11、14行目にbuttonタグがあります。絵付きボタンを作る場合、このようにimage属性を使うほか、CSSの「list-style-imageプロパティ」を使って、
<button id="english_button" label="English" |
のように指定する方法もあります。ラベルと絵の位置も上下左右を指定できます。
|
図3 ボタンの表示 |
【リスト4 button.xul（別ウィンドウで表示します）】
タブの作成
次はタブ付きボックスの例です。Mozillaのプリファレンスウィンドウでも使われていますが、タブを作った例がリスト5です。ボタンと同様に図1（別ウィンドウで開きます）のファイル配置になっていれば、
http://localhost:8080/cove/samples/tab.xul
をリクエストすると図4のように表示されます。“side”のタブを選び、チェックボックスをチェック、メニューリストから数値を選択したのが図5です。“drink”タブを選ぶこともできますので、試してみたい読者はソースコードをダウンロードしてください。
|
図4 タブの表示 |
|
図5 タブの表示（チェックボックス、メニューリストの使用） |
【リスト5 tab.xul（別ウィンドウで表示します）】
テキストボックスの作成
WebアプリケーションのためのUIとして使うなら、HTMLフォームのように何かを入力できるウィンドウが必要になります。フォームの部分だけHTMLで書いてもいいのですが、XULにも同様のtextbox要素があります。リスト6はtextboxの例で、このとき表示されるのが図6です。パスワード入力用ボックスを作る場合は19行目にあるようにtype属性でpasswordを指定します。すると、図6にあるように入力文字に代わって“*”が表示されます。試してみる場合は
http://localhost:8080/cove/samples/textbox.xul
をリクエストします。
|
図6 テキストボックスの表示 |
【リスト6 textbox.xul（別ウィンドウで表示します）】
ツリーの作成
図1（別ウィンドウで開きます）はcove Webアプリケーションの構成をツリーで示したものですが、実はこれはXULで作ったものです。リスト7が図1を作ったXULで
http://localhost:8080/cove/samples/covetree.xul
をリクエストすると表示できるようになっています。
ツリーはMozillaのブックマークのようにアイコンでフォルダとファイルといったタイプの違いを図示することもできます。
【リスト7 covetree.xul（別ウィンドウで表示します）】
簡単にXULの説明を行いましたが、XULで何ができるのかはMozillaのユーザーインターフェイスを見るといいでしょう。進行状況を表示するプログレスバーやメニューバーなどさまざまなものを作れます。
XULの簡単な紹介をしましたが、いかがだったでしょうか。次回はJSFを使ったレンダリングの説明をして、次々回にはXULとJSFを使ったアクションを解説する予定です。アクション編では、ロジックを動かした結果をXULファイルに反映させられるようなプログラミングを試してみます。
今回使用したプログラムやファイル類は以下からダウンロードできます（このアーカイブには次回掲載予定のJSF用のサンプルも同梱されています）。
Windows環境で利用される場合、euc-jpをWindows-31Jなど適当なエンコーディングに変更してください。また、日本語を含むファイルはEUC-JPになっていますので、あらかじめ文字コードを変えてから利用されるといいでしょう。JSFのAPIと実装はこのアーカイブに含まれていませんので、別途ダウンロードして図1のlibディレクトリに置いてください。（次回に続く）
■関連記事
 Page
2 |
3/3 |
| Index | |
| 連載 役に立つXMLツール集（8） XULとJSFでリッチクライアント 〜XUL編〜 |
|
| リッチクライアントって何？ XULを使いこなす情報源 |
|
| XULを表示するための準備 XULの書き方 |
|
 |
XULのサンプル まとめ＆サンプルダウンロード |
 |
「連載 役に立つXMLツール集」 |
- QAフレームワーク：仕様ガイドラインが勧告に昇格 （2005/10/21）
データベースの急速なXML対応に後押しされてか、9月に入って「XQuery」や「XPath」に関係したドラフトが一気に11本も更新された - XML勧告を記述するXMLspecとは何か （2005/10/12）
「XML 1.0勧告」はXMLspec DTDで記述され、XSLTによって生成されている。これはXMLが本当に役立っている具体的な証である - 文字符号化方式にまつわるジレンマ （2005/9/13）
文字符号化方式（UTF-8、シフトJISなど）を自動検出するには、ニワトリと卵の関係にあるジレンマを解消する仕組みが必要となる - XMLキー管理仕様（XKMS 2.0）が勧告に昇格 （2005/8/16）
セキュリティ関連のXML仕様に進展あり。また、日本発の新しいXMLソフトウェアアーキテクチャ「xfy technology」の詳細も紹介する
 |
|
|
|
|
