このチュートリアルでは、単純なファイル検索ユーティリティを作成していきます。とはいっても、最初は XUL ファイルの基本的な構文の確認から始めたいと思います。
XUL ファイルを作成する
XUL ファイルはどんな名称を付けてもかまいませんが、拡張子は .xul にする必要があります。 最も単純な XUL ファイルは、以下のような構造になります。
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window
id="findfile-window"
title="Find Files"
orient="horizontal"
xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<!-- Other elements go here -->
</window>
この例で作成されるウィンドウは、UI 要素を含んでいないため何もしません。 UI 要素は次のセクションで追加する予定です。今回は上のコードについて、行単位で詳細に見ていきます。
- <?xml version="1.0"?>
この行は単に「これは XML ファイルである」ということを宣言しています。 通常、各 xul ファイルの先頭には、この行をそのままの形で記述しておくことが必要です。 - <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
この行は、このファイルに使用されるスタイルシートを指定しています。 XML ファイルがスタイルシートをインポートするためにはこの書式を使用します。 この例では、skin パッケージの global パートの中のスタイルがインポートされます。特定のファイルを指定していないため、 Mozilla は、ディレクトリの中から使用に適したファイルを決定します。 この場合、重要なもの全てが含まれている global.css ファイルが選択されます。 このファイルには、全ての XUL 要素に対するデフォルトの宣言が記述されています。 XML では、要素の表示方法に関する前提は全くないため、このファイルで表示方法を指示することになります。 大抵の場合は、この行を 各XUL ファイルの最上部に置いておきます。 また同様の構文を使用して、他のスタイルシートをインポートすることもできます。なお、固有のスタイルシートファイルを使用する場合でも、通常は、その中から global スタイルシートをインポートしておいた方がよいということを注記しておきます。 - <window
この行は、ウィンドウ (window) の記述を行うことを宣言しています。 ユーザーインターフェイスのウィンドウはウィンドウごとにファイルを作成して記述します。 このタグは、HTML 文書全体を囲むという点で HTML タグによく似ていますが、文書ではなくユーザーインターフェイスを記述するという点が異なります。windowタグにはいくつかの属性が設定できます。 例では、4 つ設定されています。 例文では属性ごとに行を分けて書いていますが、そうしなければならないわけではありません。 - id="findfile-window"
idid属性は全ての要素に設定します。名前はどんなものでも構いませんが、関連性のあるものにしておく方が良いと思います。 - title="Find Files"
title - orient="horizontal"
orienthorizontalという値によって、アイテムがウィンドウを横断して水平に並べられるべきであるという事を示します。verticalという値を使用すれば、アイテムを縦一列に配置することもできます。これがデフォルト値なので、縦配置を使用したい場合は、この属性の記述自体を省略してもかまいません。 - xmlns="https://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
この行は、XUL の名前空間を宣言します。全ての子要素が XUL である事を示すために、ウィンドウ要素でこの宣言を記述しておく必要があります。なお、この URL が実際にダウンロードされることはありません。Mozilla は、この URL を内部的に見分けます。 - <!-- Other elements go here -->
このコメント部分をウィンドウに表示する要素 (ボタン、メニュー、その他いろいろなユーザーインターフェース・コンポーネント) に置き換えることになります。今後のセクションでこれらを追加していきます。 - </window>
そして最後に、ファイルの末尾でwindowタグを閉じる必要があります。
ウィンドウを開く
XUL ウィンドウを開くために、いろいろな方法を使用することができます。開発段階なら、Mozilla のブラウザ・ウィンドウのロケーションバーに URL (chrome: 、 file: 、または他の種類の URL のいずれでも) を入力するだけで可能です。または、XUL ファイルが Mozilla と関連付けられていれば、ファイルマネージャでダブルクリックすることでも可能なはずです。この場合、XUL ウィンドウは、新規に開かれるブラウザ・ウィンドウの中に出現することになりますが、開発の初期段階であればこれで充分だと思います。
本格的なやり方は、言うまでもなく JavaScript を使用してウィンドウを開くことです。このために新しい構文は不要で、 HTML 文書の場合と同様に window.open() 関数を使用することで可能です。ただし、ブラウザに chrome 文書を開くことを示すために、「chrome」というフラグの追加が必要になります。開かれるウィンドウは、通常のブラウザウィンドウにはあるツールバーやメニューといったものがない状態で開かれます。実際の構文は、以下のようになります。
window.open(url,windowname,flags);
※ このflags には "chrome"フラグを含める
例:
window.open("chrome://navigator/content/navigator.xul", "bmarks", "chrome,width=600,height=300");
ファイル検索ダイアログの例
それでは、実際に、ファイル検索ダイアログの基本的なファイルの作成にとりかかりましょう。findfile.xul という名前のファイルを作成して、findfile.manifest ファイルで指定したディレクトリに置きます。(このファイルは、前のセクションで作成しています)。このページの上部にある XUL のひな形を、このファイルに追加して保存します。Mozilla の起動時に、「-chrome」コマンドライン・パラメータを使用することで、XUL ファイルを開くことを指定することもできます。これを指定しないと、デフォルトで開くウィンドウ (通常はブラウザウィンドウ) が開くはずです。例えば、ファイル検索ダイアログは、以下のどちらでも開くことができます。
mozilla -chrome chrome://findfile/content/findfile.xul mozilla -chrome resource:/chrome/findfile/content/findfile.xul
このコマンドを (コマンドラインを持つプラットフォームなら) コマンドラインから実行することによって、Mozilla のブラウザウィンドウの代わりに、ファイル検索ダイアログがデフォルトで開くはずです。なお、まだウィンドウには何の UI 要素も配置していないので、実際に実行しても、ウィンドウが表示されるのを見ることはできません。次のセクションではいくつか要素を追加する予定です。
どんな風に動作するかを見たいなら、以下の記述でブックマーク・ウィンドウを開いてみるのがよいでしょう。
mozilla -chrome chrome://communicator/content/bookma...rksManager.xul Firefox を使っている場合は、下記になります firefox -chrome chrome://browser/content/bookmarks/bookmarksPanel.xul
引数 「-chrome」 は、ファイルに対して何の特権も加えません。その代わり、指定されたファイルを、URL 入力欄やメニューといったブラウザ用の chrome を付加せずに、トップレベルのウィンドウとして、開くように作用します。chrome URL を使用してアクセスすることによってのみ特権が付与されます。
次のセクションでは、ウィンドウにボタンを追加してみます。