[PR]何かを探す前に無料占い:当たる!無料占い『スピリチュアルの館』

XUL チュートリアル - 2.1 - ウィンドウを作る
戻る 内容 リファレンス 進む

XUL チュートリアル - ウィンドウを作る

このチュートリアルを通じて、簡単な「ファイルを開く」ユーティリティーを作ることにします。しかし、そのためには、まず、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"
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 ...
</window>

一行ずつ見て行きましょう。

  1. <?xml version="1.0"?>

    この行は、これが XML ファイルであることを宣言しているだけである。現在は、一つのバージョン (1.0) しかないが、新しいバージョンが公開されたら、ブラウザーはどのバージョンが想定されているのか分からなければならない。通常は、この行は、HTML ファイルの先頭に HTML タグを置くのと同様に、個々の xul ファイルの先頭に加える。

  2. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>

    この行は、ファイルで使うスタイルシートを指定するために使われる。これは、スタイルシートをインポートするために XML ファイルが使うシンタックスである。この場合、global/skin クロムディレクトリーにあるスタイルをインポートする。ここでは、特定のファイルを指定していない。そのため、Mozilla が、ディレクトリーにあるどのファイルを使うのかを判断する。この場合は、すべてのパッケージにとって重要な global.css ファイルが選択される。このファイルは、XUL 要素のすべてのためのデフォルト宣言全部をもつ。XML は、どのように要素を表示すべきかに関する知識を何ももたないので、ファイルが、それを指示する。一般的には、この行は、すべての XUL ファイルの先頭に置く。似たシンタックスを使って、別のスタイルシートをインポートすることもできる。通常は、自分のスタイルシートの行からグローバルスタイルシートをインポートするということに注意すること。

  3. <window

    この行は、ウィンドウ を記述していることを宣言している。個々のユーザーインターフェースウィンドウは、別々のファイルで記述する。このタグは、ファイル全体を取り囲む HTML の BODY タグによく似ている。ウィンドウ タグには、属性を幾つか置くことができる。この場合は、3 つある。この例では、個々の属性は別々の行に置かれているが、必ずそうでなければならない訳ではない。

  4. id="findfile-window"

    id 属性は、識別子として使われている。それによって、ウィンドウを、スクリプトから参照することができる。通常、id は、すべての要素に置く。その名前は何でも構わないが、意味のあるものにすべきである。

  5. title="Find Files"

    title 属性には、ウィンドウが表示されたとき、そのタイトルバーに現われるテキストを記述する。この場合は、テキスト 'Find Files' が現われる。

  6. xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

    これは、ファイルが XUL ファイルであることを指示する XML の機能である。これは奇妙に見える。XML ネームスペースの意味である xmlns 属性は、Mozilla がどのようにタグを解釈すべきかを指示する。指定された URL は、通常、XUL の定義を指す。その作業は進行中なので、これは、ダミーネームにすぎず、おそらく変更されるだろう。今のところは、これをウィンドウタグに加えると、すべては正しく動作するはずである。この URL は、実際には、ダウンロードされることはない。Mozilla は、この URL を内部的に認識する。

  7. ...

    ここに、要素 (ボタン、メニュー、その他のユーザーインターフェースコンポーネント) が宣言される。これらの幾つかを、セクションの次のセットで加えることにする。

  8. </window>

    そして最後に、ファイルの終わりで、ウィンドウ タグを閉じる必要がある。

ウィンドウを開く

XUL ウィンドウを開くために、使えるメソッドが幾つかあります。まだ開発段階であれば、Mozilla ブラウザーウィンドウのロケーションバーに URL (chrome:、file:、あるいは別の URL 型) を入力するだけです。XUL ウィンドウが、新しいウィンドウではなく、ブラウザーウィンドウ内に現われるはずです。開発中は、多くの場合、これで十分でしょう。

もちろん、正しい方法は、JavaScript を使ってウィンドウを開くことです。新しいシンタックスは必要ありません。HTML 文書でするように、window.open() 関数を使うことができます。しかし、ブラウザーに、これによって開くのが XUL 文書であることを指示するため、'chrome' という名前の追加フラグが必要です。シンタックスは、下で説明します。

window.open(url,windowname,flags);
window.open(url,windowname,flags,secondary_url);

ここで、フラグは、"chrome" を含みます。secondary_url は、新しいウィンドウを開き、ウィンドウにロードするページの URL を指定したい場合にのみ、必要となります。
例:
window.open("chrome://navigator/content/navigator.xul", "bmarks", "chrome,width=600,height=300");

「ファイルを開く」ダイアログのための基本ファイルを作ることから始めましょう。findfile.xul という名前のファイルを作り、どこか新しいディレクトリーに置きます。どこに置くかは問題ではありませんが、chrome/packages/findfile/findfile/content ディレクトリーが適切です。このページの先頭で示した XUL テンプレートをファイルに加え、保存します。

XUL ファイルを見るには、幾つかの方法があります。XUL の URL をブラウザーの URL フィールドに入力することもできます。この場合は新しいウィンドウは開きませんが、内容エリアで見ることができます。これは機能的でしょう。

クロム URL かファイル URL のどちらかを使って、「ファイルを開く」ダイアログを参照することができます。クロム URL の方がよいでしょうが、正しく、マニフェストファイルを作り、パッケージをインストールすることが必要になります。これは、余分な作業を必要としますが、後のため、ここでやっておくことにします。これで、ファイル型の URL を使うことができます。

ファイル URL の代りに、Mozilla ディレクトリーにルートディレクトリーをもつ変種を使うこともできます。これは、リソース URL です。このため、次のリソース URL を使って、「ファイルを開く」ダイアログを参照できます。

resource://chrome/packages/findfile/findfile/content/findfile.xul

Mozilla を起動するとき、XUL ファイルを開くことを指定するため、コマンドラインパラメータ '-chrome' を使うことができます。これを指定しない場合、デフォルトウィンドウが開きます (通常は、ブラウザーウィンドウ)。例えば、次のようにして、「ファイルを開く」ダイアログを開くことができます。

mozilla -chrome chrome://findfile/content/findfile.xul
mozilla -chrome resource://chrome/packages/findfile/findfile/content/findfile.xul

(自分のプラットフォームにこれがあると仮定して) コマンドラインからこれを実行すると、「ファイルを開く」ダイアログが、Mozilla ブラウザーウィンドウの代りに、デフォルトで開くはずです。もちろん、まだウィンドウに何も置いていないので、何も現われることはありません。

けれども、本当にそうなるか確かめるため、次のコマンドを実行すると、ブックマークウィンドウが開きます。

mozilla -chrome chrome://communicator/content/bookmarks/bookmarks.xul

(Next) 次のセクションでは、ウィンドウにボタンを追加しましょう。

XUL チュートリアル - 2.1 - ウィンドウを作る
戻る 内容 リファレンス 進む

[PR]在宅副業で驚きの高収入を獲得:バイクを買うためのお金を稼ごう