Content Panels

内容パネル (Content Panel)

In this section, we'll look at how to add panels that can display HTML pages or other XUL files.

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

Adding Child Panels

子供パネルを追加する

There may be times when you want to have part of a document loaded from a different page. Sometimes, you will want to change part of the window. A good example is a step-by-step wizard that guides you through a number of screens, asking a set of questions. Each time the user clicks the Next button, the next screen of the wizard is displayed.

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

You could create a wizard interface by opening a different window for each screen. There are three problems with this approach. First, each window could appear in a different location (although there are ways around this). Second, the elements such the Back and Next buttons are the same throughout the interface. It would be much better if just the content area of the wizard changed. Third, it would be difficult to co-ordinate scripts when running in different windows.

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

Note that XUL does have a wizard element which may be used to create wizard interfaces. This will be described in a later section.

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

Another approach is to use the iframe element, which works much like the HTML element of the same name. It creates a separate document within the window. It has the advantage that it can be placed anywhere and the contents can be loaded from a different file. Set the URL to appear in the frame with the src attribute. This URL may point to any kind of file, although it will usually point to an HTML file or another XUL file. You can use a script to change the contents of the iframe without affecting the main window.

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

In the Mozilla browser window, the area where the web page is displayed is created by using an iframe. When the user enters a URL or clicks on a link in a document, the source of the frame is changed.

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

The following is an example of using an iframe:

次は、iframe を使う例です。

Example 4.5.1: Source View
<toolbox>
  <toolbar id="nav-toolbar">
    <toolbarbutton label="Back"/>
    <toolbarbutton label="Forward"/>
    <textbox id="urlfield"/>
  </toolbar>
</toolbox>

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

The example here has created a very simple interface for a web browser. A box has been created containing two elements: a toolbox and an iframe. A Back button, a Forward button and a field for typing is URLs has been added to the only toolbar. The web pages would appear inside the iframe. In this case, the file welcome.html would appear by default.

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

This example isn't functionally complete. Next, we would want to add script which changes the src attribute at the desired time, for example when the user presses the Enter key.

この例は、機能的には完全ではありません。この次は、望んだときに、例えばユーザが Enter キーを押したときに、 src 属性を変更するスクリプトを加えたいでしょう。

Browsers

ブラウザ

There is a second type of content panel, using the browser tag. You would use this when you want to create a frame that displays content like a browser. Actually, the iframe can do this too, but the browser has a variety of additional features. For example, the browser maintains a page history for use with Back and Forward buttons. The browser can also load pages with referers and other flags. Essentially, the browser tag should be used when you want to create a browser like interface, but the iframe may be used when you just need a simple panel.

browser タグを使った、第 2 のタイプの内容パネルがあります。ブラウザのように内容を表示するフレームを作りたい場合に、これを使います。実際、iframe でも同じことができますが、ブラウザにはたくさんの付加機能があります。例えば、 browser は「戻る」、「進む」ボタンで使うページ履歴を保持します。また、リファラや他のフラグの付いたページの読み込みもできます。本質的に、 browser タグはインターフェイスのようなブラウザを作りたいときに使用するべきです。一方 iframe は、単純なパネルが欲しいときに使用します。

A similar element, tabbrowser, provides the functionality of browser but also provides a tab bar for switching between multiple pages. This is the widget used by the Mozilla browser for its tabbed browsing interface. The tabbrowser element is actually implemened as a tabbox containing a set of browser elements. Both types of browser offer similar control over pages that are displayed.

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

Here is an example browser:

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

Example 4.5.2: Source View
<browser src="http://www.mozilla.org" flex="1"/>

As with the iframe, you can specify the url in a browser using the src attribute. For a tabbrowser, you cannot set the url directly like this, as it doesn't display just one url. Instead, you must use a script and call the loadURI function.

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

There are three classes of browser, depending on the kind of content that you want to display inside. The type may be specified using the type. The first type is the default and is used if you don't specify a type. In this case, the content loaded inside the browser is treated as if it was part of the same application and has access to the outer window. That means that when a script loaded inside the browser tries to get the topmost window, it will get the outer XUL window.

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

This would be suitable for a child XUL panel that is part of your application, but this isn't what you want for a browser that loads a web page. Instead, you would want to restrict the web page to only getting access to the web page content. You might note that a Mozilla browser window has XUL content for the toolbars and statusbar and so forth with a tabbrowser forming the main area. This inner area displays a web page, but the web page cannot access the XUL around it. This is because it uses the second type of browser, specified by setting the type attribute to the value content. This prevents the content from traversing up to the XUL window. An example:

このことはアプリケーションの一部である子の XUL パネルでは適当ですが、ウェブページを読み込むブラウザにとっては欲しいものではありません。そうではなく、ウェブページにはそのページの内容へのアクセスのみを得るだけに制限したいでしょう。Mozilla ブラウザウィンドウは、メインエリアを形成する tabbrowser とともに、ツールバーやステータスバーやその他といった XUL 内容を持っていることに気が付いているでしょう。この内部エリアはウェブページを表示しますが、ウェブページからは周りの XUL にアクセスすることはできません。それはブラウザの第 2 の型を使用しているからで、 type 属性に content という値を設定することで指定できます。これにより、内容が XUL ウィンドウへ横断するのを防いでいます。例を示します。

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

It is important that you set the type attribute correctly if you are going to be displaying remote web sites inside the browser element. The tabbrowser sets the content type automatically on all tabbed browsers that it creates. So you don't have to set this explicitly for tabbed browsers.

browser 要素の内部にリモートのウェブサイトを表示しようとしているのであれば、 type 属性を正しく設定することが重要です。 tabbrowser は、作成するタブブラウザ全てに自動的に content 型を設定します。それで、タブブラウザには明示的に設定する必要はないのです。

The third type is used to indicate the primary content inside the window. The tabbed browser sets this automatically to whichever browser is currently visible. But you can set it on a browser if you have more than one in a window, for example if you have a sidebar displaying some content as well. Set the type attribute to content-primary to specify the primary content. This acts just like the content value except that the content inside is accessible using the XUL window's 'content' property. This makes it easy to access the content of the main browser using a script. It is especially convenient when using a tabbed browser, as you will always be able to access the currently visible content in this way.

3 番目の型は、ウィンドウ内に主となる内容を指定するのに使います。タブブラウザでは、現在表示されているブラウザにはどれにでも自動的にこの内容を設定します。しかし、1 つのウィンドウに 1 つ以上を欲しい場合、例えば同様に内容を表示するサイドバーが欲しい場合には、 browser に設定することができます。 type 属性に content-primary を設定すれば、主内容を指定できます。内部の内容に XUL ウィンドウの 'content' プロパティを使ってアクセスできることを除いては、 content と同じように動作します。このことは、スクリプトを使ってのメインブラウザの内容へのアクセスを容易にします。常にこの方法で現在表示されている内容にアクセスできるため、タブブラウザを使うときに特に便利です。


(Next) Next, we'll look at how to create a splitter.

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

Examples: 4.5.1 4.5.2


Copyright (C) 1999 - 2004 XulPlanet.com