Stacks and Decks

スタックとデック

There may be need to display elements as a set of overlapping cards. The stack and deck elements can be used for this purpose.

要素を一連の重なり合うカードの様に表示する必要があるかもしれません。 スタック要素 (stack) とデック (deck) 要素がこのために使用できます。

Containers

コンテナ (Containers)

Each XUL box is a container that can contain any other element. There are a number of elements that are specialized types of boxes, such as toolbars and tabbed panels. The box tag creates the simplest box with no special properties. However, the specialized types of boxes work just like regular boxes in the way they orient the elements inside them, but they have additional features.

個々の XUL ボックスは、任意の要素を含むことのできるコンテナです。 ツールバーやタブ付きパネルなど、多くの特殊用途化されたボックス要素があります。 box タグは、特殊なプロパティのない最も単純なボックスを作ります。しかし、特殊用途化されたボックスは、その内部に要素を配置するという意味で、通常のボックスと同じように働きますが、他にも機能をもっています。

In fact, many components can contain other elements. We've already seen that buttons may contain other things besides the default. A scroll bar is just a special type of box that creates its own elements if you don't provide them. It also handles the moving of the scroll bar thumb.

実際、多くのコンポーネントは、他の要素を含むことができます。ボタンが、 デフォルト以外にも他の要素を含むことができるということは、既に見た通りです。 スクロールバーは、開発者が要素を提供しなければ、それ自身の要素を作る特殊な 種類のボックスにすぎません。スクロールバーは自分のサムの移動も処理します。

In the next few sections, we'll introduce some elements that are designed for holding other elements. They are all special types of boxes and allow all of the attributes of boxes on them.

次からの数節では、他の要素を保持するために設計された要素を幾つか紹介することにします。 これらは特殊な種類のボックスで、ボックスの属性すべてを使うことができます。

Stacks

スタック (Stacks)

The stack element is a simple box. It works like any other box but has the special property that its children are laid out all on top of each other. The first child of the stack is drawn underneath, the second child is drawn next, followed by the third and so on. Any number of elements may be stacked up in a stack.

stack 要素は、単純なボックスです。 この要素は他のボックスと同じく動作しますが、その子を重なり合うようにレイアウトできるという特質をもっています。スタックの最初の子が一番下に描かれ、2 番目の子がその上に描かれます。そして、3 番目の子と続きます。 要素は幾つでも、スタックに積み重ねることができます。

The orient property has little meaning on a stack as children are laid out above each other rather than from side to side. The size of the stack is determined by its largest child, but you can use the CSS properties width, height, min-width and other related properties on both the stack and its children.

スタック要素では、 orient プロパティはあまり 意味がありません。というのは、スタックでは、子は並んでレイアウトされるのではなく、重なり合ってレイアウトされるからです。 スタックのサイズは、その最も大きな子によって決められます。 一方で、スタックとその子の両方に、CSS プロパティの widthheightmin-width 及びその他の関連するプロパティを使うこともできます。

The stack element might be used for cases where a status indicator needs to be added over an existing element. For example, a progress bar might be created using a bar and a label overlaid on top of it.

スタック要素は、既にある要素の上にステータスインジケーターを追加する必要がある、といった場合に使うことができます。 例えばプログレスバーは、バーとその上に置かれたラベルからなります。

One convenient use of the stack element however is that you could emulate a number of CSS properties with it. For example, you could create an effect similar to the text-shadow property with the following:

しかし、stack 要素の便利な用法 の 1 つに、それを使って CSS プロパティの多くをエミュレートできるというのがあります。 例えば以下のようにして、text-shadow プロパティに似た効果を作ることができます。

Example 4.1.1: Source View
<stack>
  <description value="Shadowed" style="padding-left: 1px; padding-top: 1px; font-size: 15pt"/>
  <description value="Shadowed" style="color: red; font-size: 15pt;"/>
</stack>

Both description elements create text with a size of 15 points. The first, however is offset one pixel to the right and down by adding a padding to its left and top sides. This has the result of drawing the same text 'Shadowed' again but slightly offset from the other. The second description element is drawn in red so the effect is more visible.

両方の description 要素は、15 ポイントのサイズのテキストを作ります。ただ、最初の要素は、その左端と上端にパディングを加えることにより、右下に 1 ピクセルずらされています。 この結果、同じ 'Shadowed' というテキストが描画されますが、他方からわずかにずれたものになっています。2 番目の description 要素は赤で描画されているため、効果がよく分かります。

This method has advantages over using text-shadow because you could completely style the shadow apart from the main text. It could have its own font, underline or size. (You could even make the shadow blink). It also useful as Mozilla doesn't currently support CSS text shadowing. A disadvantage is that the area taken up by the shadow makes the size of the stack larger. Shadowing is very useful for creating the disabled appearance of buttons:

この方法には、text-shadow を使う以上の利点があります。 本文とはまったく別にシャドーをスタイルできるからです。それは、自分のフォント、下線、サイズをもつことができます (シャドーを点滅させることさえできます)。 Mozilla は現在、CSS のテキストのシャドー付けをサポートしていないので、これは役立ちます。 欠点は、シャドーによって取られたエリアがスタックサイズを大きくしてしまうことです。 シャドー付けは、無効状態のボタンの外観を作る場合に非常に役立ちます:

Example 4.1.2: Source View
<stack style="background-color: #C0C0C0">
  <description value="Disabled" style="color: white; padding-left: 1px; padding-top: 1px;"/>
  <description value="Disabled" style="color: grey;"/>
</stack>

This arrangement of text and shadow colors creates the disabled look under some platforms.

一部のプラットフォームでは、このテキスト配置とシャドーの配色によって、無効の外観が作り出されます。

Note that events such as mouse clicks and keypresses are passed to the element on the top of the stack, that is, the last element in the stack. That means that buttons will only work properly as the last element of the stack.

マウスクリックやキー押し下げといったイベントは、スタックの一番上にある要素、 つまり、スタックに最後に入れられた要素に渡されるということに注意して下さい。 これは、ボタンがスタックに最後に入れられた要素である場合にのみ、正しく動作するということです。

Decks

デック (Decks)

A deck element also lays out its children on top of each other much like the stack element, however decks only display one of their children at a time. This would be useful for a wizard interface where a series of similar panels are displayed in sequence. Rather than create separate windows and add navigation buttons to each of them, you would create one window and use a deck where the content changes.

deck 要素も、 stack 要素に非常によく似たやり方で、その子供を互いの上にレイアウトしますが、デックは一度に一つの子しか表示しません。 このことは、ウィザードインターフェイスに使えるでしょう。そこでは、一連の類似したパネルが順番に表示されます。パネルごとに別々のウィンドウを作ってそれぞれにナビゲーションボタンを加えたりする代わりに、ウィンドウを一つ作り、内容が変わる場所をデックに置くことができます。

Like stacks, the direct children of the deck element form the pages of the deck. If there are three children of the deck element, the deck will have three children. The displayed page of the deck can be changed by setting an selectedIndex attribute on the deck element. The index is a number that identifies which page to display. Pages are numbered starting from zero. So, the first child of the deck is page 0, the second is page 1 and so on.

スタックと同様に、デックのページは deck 要素の直接の子要素から構成されます。 deck 要素に子が 3 つあるとすると、 デックは 3 つの子をもつことになります。表示されるデックのページは、 deck 要素の selectedIndex 属性を設定することによって、変更することができます。 このインデックスは、どのページを表示するかを指定する数値です。 ページの番号は、0 から始まります。そのため、デックの最初の子はページ 0 で、 2 番目の子はページ 1 と、以下同様に続きます。

The following is an example of a deck:

以下は、デックの例です。

Example 4.1.3: Source View
<deck selectedIndex="2">
  <description value="This is the first page"/>
  <button label="This is the second page"/>
  <box>
    <description value="This is the third page"/>
    <button label="This is also the third page"/>
  </box>
</deck>

Three pages exist here, the default being the third one. The third page is a box with two elements inside it. Both the box and the elements inside it make up the page. The deck will be as large as the largest child, which here should be the third page.

ここには、ページが 3 つあります。デフォルトは、3 番目のページです。3 番目のページは、 内部に 2 つの要素をもつボックスです。その内部のボックスと要素がページを作っています。 デックは最大の子と同じ大きさです。ここでは、3 番目のページとなるはずです。

You can switch pages by using a script to modify the selectedIndex attribute. More on this in the section on events and the DOM.

スクリプトを使って selectedIndex 属性を変更する ことにより、ページを切り替えることができます。これについては、イベントと DOM に関するセクションでもっと詳しく説明します。


(Next) The next section describes how stacks can be used to position child elements.

(進む) 次のセクションでは、子要素を配置するのにスタックがどう使われるかを説明します。

Examples: 4.1.1 4.1.2 4.1.3


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