Features of a Window

ウィンドウの機能

We've already seen some features of windows. We'll look at some more in this section.

ウィンドウの機能の幾つかについては既に見ました。このセクションでは、それ以外の 機能を見ることにしましょう。

Creating Another Window

別のウィンドウを作る

You can create a second window for your application in the same manner as you would create the first one. Just create a second XUL file with the window code in it. As in HTML, you can use the window.open function to open the second window. This function will return a reference to the newly opened window. You can use this reference to call functions of the other window.

自分のアプリケーションで 2 つ目のウィンドウを、最初のウィンドウと同じ方法で 作ることができます。ウィンドウコードを内部にもつ 2 つ目の XUL ファイルを作る だけです。HTML の場合と同じ様に、2 つ目のウィンドウを開くのに window.open 関数 が使えます。この関数は、新しく開いたウィンドウへの参照を返します。この参照は、 別のウィンドウの関数を呼び出すのに使用できます。

The open function takes three arguments. The first is the URL of the file you wish to open. The second is an internal name of the window. The third is a list of display flags. The flag 'chrome' is important to open the window as a chrome file. If you do not add the 'chrome' flag, the file will open up as the content in a browser window.

open 関数は引数を 3 つ取ります。最初は、開きたいファイルの URL です。2 番目は、 ウィンドウの内部名です。3 番目は、表示フラグのリストです。フラグ 'chrome' は、ウィンドウをクロムファイルとして開く時に重要です。'chrome' フラグを引数に とらない場合、ファイルはブラウザウィンドウの内容として開かれます。

For example:

例えば、次のようにします。

window.open("chrome://findfile/content/findfile.xul","findfile","chrome");

Specifying the Width and Height

幅と高さを指定する

You should have noticed that whenever elements were added to a window, the window's width expanded to fit the new elements. The window is really just a box which is flexible and defaults to vertical orientation. You can also specify the width and height directly on the window tag. This, of course, causes the window to be displayed in a specific size. If you leave it out, the size is determined by the elements that are in it.

要素をウィンドウに追加するといつでも、ウィンドウの幅が新しい要素に適した 大きさに拡張されることに気付いていることでしょう。ウィンドウは、実際には、 フレキシブルでデフォルトが垂直方向のボックスにすぎません。でも、 window タグに、直接、幅と 高さを指定することができます。これでもちろん、表示されるウィンドウは指定のサイズになります。指定しない場合は、サイズはウィンドウ内にある要素によって決まります。

<window
  id="findfile-window"
  title="Find Files"
  width="400"
  height="450"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

In this example, the window will open with a width of 400 pixels and a height of 450 pixels. Even if there aren't enough elements to fit this size, the window will still open at this size and there will be blank space in the remaining area. If there are too many elements, the window will not be large enough to fit the elements. The user will have to resize the dialog. You have to be careful when specifying a width and height that the window is not too small or too big.

この例では、ウィンドウは 400 ピクセルの幅と 450 ピクセルの高さで開かれます。 このサイズに適した十分な数の要素がない場合でも、ウィンドウはこのサイズで開かれ、 余った領域には何も表示されません。逆に、要素が多すぎる場合、ウィンドウは それらの要素に適した十分な大きさにはなりません。ユーザはダイアログをリサイズ しなければなりません。ウィンドウの幅と高さを指定するときは、ウィンドウが小さすぎたり大きすぎたりしないように注意する必要があります。

Note that you must specify both the width and the height. If you only specify one, the other will be set to 0. To have the window set its size automatically, leave both the width and height out.

幅と高さの両方を指定しなければならないことに注意して下さい。どちらかを指定 しなければ、もう一方は 0 に設定されます。ウィンドウのサイズを自動化するには、 幅と高さ両方を省きます。

The width and height only specify the initial size of the window. The user may still resize the window to another size, assuming that the window is resizable.

幅と高さは、ウィンドウの初期サイズを指定するにすぎません。ウィンドウがリサイズ 可能な場合、ユーザはウィンドウを別のサイズにするかもしれません。

Other Window Features

他のウィンドウの機能

The flags below can be passed as part of the third argument to the window.open function. Your operating system may not support all of them. You can also use any of the pre-existing flags, which you should find in a JavaScript reference. You may disable a feature by setting it to 'no', for example 'dialog=no'.

下のフラグは、window.open 関数に 3 番目の引数の一部として渡されます。 オペレーティングシステムによっては、そのすべてをサポートしている訳ではないかも しれません。あらかじめ存在するフラグならどれでも使うこともできます。それは JavaScript のリファレンスに載っています。例えば 'dialog=no' のように、それを 'no' に設定することによって機能を無効にすることもできます。

  • alwaysLowered
    The window will always appear behind other windows.
  • alwaysRaised
    The window will always appear above other windows.
  • centerscreen
    The window will be centered on the screen when it is opened.
  • dependent
    The window will always appear relative to the window that opened it. If the window that opened the new window is moved, the new window is moved relative to it.
  • dialog
    The window is a dialog box, which may appear differently.
  • modal
    The dialog is modal. The window that opened the modal window can't be interacted with until the modal window is closed.
  • resizable
    The user can resize the window.
  • alwaysLowered
    ウィンドウは、常に他のウィンドウの背後に表示される。
  • alwaysRaised
    ウィンドウは、常に他のウィンドウの上部に表示される。
  • centerscreen
    ウィンドウは、開かれたとき、スクリーンの中央に表示される。
  • dependent
    ウィンドウは、常にそれを開いたウィンドウに対して相対的に表示される。 新しいウィンドウを開いたウィンドウが移動されると、新しいウィンドウも それに相対的に移動される。
  • dialog
    ウィンドウはダイアログボックスである。これは異なった外観で表示される場合がある。
  • modal
    ダイアログはモーダルである。これを開いたウィンドウは、モーダルウィンドウが 閉じられるまで、やり取りできない。
  • resizable
    ユーザはウィンドウをリサイズできる。

Debugging a Window

ウィンドウをデバッグする

Another feature that is useful only during development is to enable the debugging mode of a window. To do this, add a debug attribute to the window and set it to true. This will cause the window to display the boxes and spacer so you can see what is happening. The example below shows how to use it.

開発の間だけ役に立つ機能に、ウィンドウをデバッグモードにできるというのがあります。 これを有効にするには、ウィンドウに debug という名の 属性を追加し、その値を true にします。これによって、 ウィンドウはボックスとスペーサーを表示します。それによって、何が起きているのか 分かります。下の例はこの使い方を示しています。

<window
  id="findfile-window"
  title="Find Files"
  debug="true"
  xmlns:html="http://www.w3.org/1999/xhtml"
  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

The image below shows the effect when applied to a simple window.

下の画像は、単純なウィンドウに適用した場合の効果を示しています。

  • Blue boxes indicate horizontal boxes.
  • Red boxes indicate vertical boxes. You can see that the entire window is also a vertical box.
  • Zigzags show where there are flexible elements. In this case, the spacer is flexible so a zigzag appears above it.
  • Lines show where inflexible elements are, in this case the text, the input field and the buttons.
  • White square boxes indicate the edges of elements.
  • 青のボックスは、水平方向のボックスを示している。
  • 赤のボックスは、垂直方向のボックスを示している。ウィンドウ全体が 垂直方向のボックスであることが理解できるだろう。
  • ジグザグは、フレキシブルな要素があることを示している。この場合、 スペーサーはフレキシブルである。そのため、ジグザグがその上に表示されている。
  • ラインは、フレキシブルでない要素がどこにあるのかを示している。この場合、 テキスト、入力フィールド、ボタンである。
  • 白の正方形のボックスは、要素の端を示している。

In the image, you might notice a number of additional boxes in place. This is because each XUL element is made up of a number of boxes itself, defined with XBL. You can normally ignore these. You can specify the debug attribute on any box, not just on a window.

画像から、多数の余分なボックスがあるのに気付いたかもしれません。これは、 個々の XUL 要素がそれ自体多数のボックスから作られているためであり、XBL で定義 されています。通常、これらは無視できます。実際には、debug 属性は、ウィンドウだけでなく、どんなボックスにも指定できます。


(Next) Next, we'll look at how to open secondary dialogs.

(進む) 次は、2 次的なダイアログを開く方法を見ることにしましょう。


Copyright (C) 1999 - 2004 XulPlanet.com
訳者: kmine
このドキュメントのオリジナルは XULPlanet において英語で公布されています。
またドキュメントの管理の言語は現在も英語です。この日本語訳は、
利用者の利便のために Mozilla Japan 翻訳部門によって提供されたものです。
フィードバックは英語で、元の著者に送って下さい。
翻訳された文書の一覧は、現在以下のURLで見ることが出来ます。
http://www.mozilla.gr.jp/jt/xul/progress.html