コンテンツパネル

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

子パネルを追加する

HTML でページを作成する場合に、 文書 の一部として別のページをロードさせたい場面が、しばしばあると思います。 XUL の場合も、ウィンドウの一部を変更したくなるような場面に、しばしば遭遇することになります。 よい例が対話形式のウィザードです。 これは、いくつかの質問をまとめたスクリーン群を順番に提示していくことで案内する機能です。 利用者が「次へ」ボタンをクリックするたびに、次のウィザードの画面が表示されます。

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

XUL には、ウィザードインタフェースを作成するために使う wizard 要素があることを補足しておきます。 これについては、後のセクションで述べます。

もうひとつのアプローチは、iframe 要素を使うことです。 これは、同名の HTML 要素と同様に、ウィンドウ内に異なった文書を作ります。 iframe 要素には、どこにでも置けるということと、その内容を別のファイルからロードできるという利点があります。 src 属性で、フレーム内に表示するファイルの URL を設定します。 この URL は、普通は HTML ファイルか XUL ファイルを指しますが、どの種類のファイルを指していてもかまいません。 スクリプトを使って、メインウィンドウに影響を与えることなく、iframe の内容を変更することが可能です。

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

iframe の使用例

以下に、iframe を使う例を示します。

var el = env.locale; 例 1 : ソース 表示

<toolbox>
  <toolbar id="nav-toolbar">
    <toolbarbutton label="Back"　/>
    <toolbarbutton label="Forward"　/>
    <textbox id="urlfield"　/>
  </toolbar>
</toolbox>

<iframe id="content-body" src="https://www.mozilla.org/index.html" flex="1"　/>

この例では、ウェブブラウザのための非常に簡単なインタフェースを作ります。 作成されるボックスには、2 つの要素 toolbox と iframe が含まれています。 Back ボタン、Forward ボタン、URL 入力欄を、ひとつだけあるツールバーに加えています。 (ツールバーについては、後のセクションで説明する予定です)。 ウェブページは、iframe に表示されます。 この例の場合、index.html ファイルがデフォルトで表示されます。

この例は、まだ完全には機能しません。 次の段階に進めば、src 属性を、要求が発生したとき (例えば、利用者が Enter キーを押したとき) に変更するためのスクリプトを加えたくなると思います。

ブラウザ要素

次に、コンテンツパネルの一種として、browser タグを使ったものについて説明します。 これは、ブラウザのようにコンテンツを表示するフレームを作りたい場合に使用します。 実際、iframe でも同じことが可能ですが、ブラウザ要素にはたくさんの付加機能が追加されています。 例えば、ブラウザ要素は「戻る」、「進む」ボタンで使うページ履歴を保持します。 また、リファラーや他のフラグの付いたページを読み込むことも可能です。 本質からいって、browser タグは、ブラウザ風のインタフェースを作りたいときに使用するべきだと思います。 一方 iframe は、単純なパネルが欲しいときに使用します。

同様の要素に tabbrowser があります。 これは browser の機能に加えて、さらに複数のページを切り替えるためのタブバーも提供しているもので、 Mozilla ブラウザがタブブラウジング・インタフェースとして使っているウィジェットになります。 tabbrowser 要素は、実際には browser 要素の集合を持つ tabbox として実装されています。 どちらのブラウザ要素とも、表示されるページに対して同様のコントロールを提供しています。

ブラウザ要素の例

ブラウザ要素の例を示します。

<browser src="https://www.mozilla.org" flex="1"　/>

iframe と同じように、src 属性を使って、ブラウザ要素に URL を指定できます。 tabbrowser は、ひとつの URL だけを表示するわけではないので、このように直接 URL を設定することはできません。 代わりにスクリプトを使って loadURI 関数を呼び出す必要があります。

内部に表示したいコンテンツの種別により、ブラウザ要素には 3 つのクラスがあります。 その型は type 属性を使って指定します。 最初の型はデフォルトであり、型を指定しない場合に使用されます。 この場合、ブラウザ要素内に読み込まれるコンテンツは、同じアプリケーションの一部として扱われ、外部のウィンドウにアクセスすることができます。 これは、ブラウザ要素内に読み込まれたスクリプトが、最上位ウィンドウを取得しようとした場合、外側の XUL ウィンドウを得ることになるということです。

この挙動は、アプリケーションの一部として、子の XUL パネルを作成する場合は適当ですが、ブラウザ要素にウェブページを読み込ませたい場合には適当ではありません。 この場合、読み込まれたウェブページには、そのページのコンテンツへのアクセス許可のみが与えられるように制限したいはずです。 Mozilla ブラウザのウィンドウは、メインエリアを形成する tabbrowser とともに、ツールバーやステータスバー、その他いろいろな XUL で作成された内容を持っていることに注意してみてください。 ウィンドウの内部にあるエリアでウェブページを表示しますが、そのウェブページからは周りの XUL にアクセスすることはできないようになっています。 これは、type 属性に content という値を設定することで指定される、ブラウザ要素の第 2 の型を使用しているためです。 この設定によって、コンテンツとして読み込まれた部分から、XUL ウィンドウへ横断的にアクセスされるのを防いでいます。 以下に例を示します。

<browser src="https://www.mozilla.org" type="content" flex="1"　/>

tabbrowser は、作成するタブブラウザ全てに対して自動的に type 属性に content を設定します。 このため、タブブラウザ要素では、明示的に type 属性を設定する必要はありません。

3 番目の型は、ウィンドウが複数のブラウザ要素を含んでいるとき、例えばサイドバーに付加的なコンテンツを表示させているような場合に使用します。 メインとなるブラウザ要素に対して、type 属性に content-primary を設定することで、そこで表示されるコンテンツが、そのウィンドウ内での「主となるコンテンツ」であることを示すことができます。 この型を設定されたブラウザ要素は、読み込まれたコンテンツに XUL ウィンドウの「content」プロパティを使ってアクセスできることを除いては、content を設定された場合と同じように動作します。 これは、スクリプトを使った場合に、メインブラウザのコンテンツへのアクセスを容易にします。 tabbrowser 要素では、表示状態に切り替えられたブラウザ要素に対して自動的に type 属性に content-primary を設定します。 これは、XUL ウィンドウの content プロパティを使用することで、常にそのとき表示されているコンテンツにアクセスできることを意味しています。

次のセクションでは、スプリッターの作り方を見ることにします。