連載 役に立つXMLツール集(8)
XULとJSFでリッチクライアント 〜XUL編〜 Page 3

www.netpotlet.com
原田洋子
2004/6/16

XULのサンプル

 いくつかサンプルを紹介しましょう。ただし、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"
            style="list-style-image: url('../images/Ice.gif')"/>

のように指定する方法もあります。ラベルと絵の位置も上下左右を指定できます。

図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ツール集」


XML & SOA フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日月間