XUL チュートリアル - 内容パネル (Content Panel)

このセクションでは、HTML ページや他の XUL ファイルを表示できるパネルを追加する方法を見ていくことにします。

子供パネルを追加する

文書の一部を別のページからロードさせたい場合があるかもしれません。時には、ウィンドウの一部を変更したいことでしょう。そのよい例が、質問しながら多数のスクリーンを一歩ずつ案内するウィザードです。ユーザーが Next ボタンをクリックするたびに、次のウィザードスクリーンが表示されます。

個々のスクリーン用に別のウィンドウを開くことによって、ウィザードインターフェースを作ることもできます。このアプローチには 3 つ問題があります。まず、個々のウィンドウが別の位置に表示されるかもしれません (これを揃える方法はありますが)。次に、Back や Next ボタンなどの要素は、インターフェース全体を通して同じです。ウィザードの内容エリアだけが変わればもっとよいでしょう。最後に、別々のウィンドウで実行されるスクリプトを協働させるのは難しいでしょう。

もっとよいアプローチは、iframe 要素を使うことです。これは、その HTML バージョンと同様の働きをします。これは、ウィンドウ内に異なった文書を作ります。これはどこにでも置けるということと、その内容を別のファイルからロードできるという利点があります。スクリプトを使って、メインウィンドウに影響を与えることなく、iframe の内容を変更することができます。

Mozilla のブラウザーウィンドウでは、ウェブページが表示されるエリアは、iframe を使って作られています。ユーザーが URL を入力するか、文書中のリンクをクリックすると、フレームのソースが変更されます。

以下は、iframe を使う例です。

<box orient="vertical">
 <toolbox>
  <toolbar id="nav-toolbar">
    <button label="Back"/>
    <button label="Forward"/>
    <textbox id="urlfield"/>
  </toolbar>
 </toolbox>

 <iframe id="content-body" src="welcome.html"/>

</box>

この例は、機能的に完全ではありませんが、ウェブブラウザーのための非常に簡単なインターフェースを作ります。toolbox と iframe という 2 つの要素を含むボックスが作られています。Back ボタン、Forward ボタン、URL 入力フィールドが、一つあるツールバーに加えられています。ウェブページは、iframe に表示されます。この場合、ファイル welcome.html がデフォルトで表示されます。

iframe は XUL ウィンドウのどこにあってもよいので、スクリーン間で内容を変更する必要がある場合にだけ、ウィザードインターフェース内に置くことができます。

内部フレームは、HTML ファイルや他の XUL ファイルを指すことができます。

(進む) 次は、スプリッター (splitter) の作り方を見ることにしましょう。

例: 4.8.1