スタックとデッキ

要素を重なった一組のカードのように扱えると便利なときがあります。 スタック (stack) 要素と、デッキ (deck) 要素がこのために用意されています。

コンテナ

XUL のボックスは、それぞれが任意の要素を含むことのできるコンテナとして位置づけられます。 ツールバーやタブ付きパネルのようないくつかの要素も、特定の用途のために特化したボックスの一種という位置づけになります。 box タグは、特別な性質のない最も単純なボックスを作ります。 特化型のボックスは、内部に要素を配置するという点においては、通常のボックスと同じように動作しますが、それ以外の機能も追加されています。

実際のところ、多くのコンポーネントが、他の要素を含むことができます。 これは「ボタンにラベル以外の要素も含めることができる」といった、 ここまでのセクションで説明した例の中でも既に見ています。 極端な話、スクロールバーも、明示的に子要素を作成しない限り、自動で子要素を作成する機能を持った、特化型のボックスの 1 つにすぎません。 スクロールバーのもう 1 つの特殊な機能は、子要素のサムの移動を自動で処理することです。

ここからの数セクションにわたって、他の要素を保持するために設計された要素をいくつか紹介することにします。 これらは特化型のボックスで、ボックスの属性をすべて使うことができます。

スタック

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

スタック要素では、orient プロパティはあまり意味がありません。 スタックでは、子要素は並んでレイアウトされるのではなく、重なり合ってレイアウトされるからです。 スタック要素のサイズは、最も大きな子要素によって決められます。 または、スタック要素とその子要素のどちらに対しても、CSS プロパティの width、height、min-width 及びその他の関連するプロパティを使って明示的にサイズを指定することも可能です。

スタック要素は、既にある要素に重ねてステータス表示を追加する必要があるといった場合に使うことができます。 例えば、プログレスバーで、バーの上にラベルを表示さたいといった場合です。

スタックで影つき文字を表現する

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

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

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

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

この方法は、影の部分のスタイルを、本体とは完全に独立して設定できるため、 text-shadow にはない利点を持っています。 具体的には、影に、独自のフォント、下線、サイズを持つことができます (影を点滅させることさえ可能です)。 また、現バージョンの Mozilla では、CSS のテキストの影付きスタイルをサポートしていないのため、この方法のみが使用できます。 この方法の欠点としては、影のために取られた領域がスタックサイズを大きくしてしまうことがあります。 影付けは、無効状態のボタンの外観を作る場合に、非常に役立ちます。

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

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

いくつかのプラットフォームでは、このテキスト配置と影の配色によって、無効の外観が作り出されています。

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

デッキ

デッキ (deck) 要素も、stack 要素と同様に、子要素を順に重ねてレイアウトしますが、デッキでは一度に 1 つの子要素しか表示されない点が異なります。 これは、一連の類似したパネルを順番に表示していく、ウィザード型のインターフェイスに使うことができます。 パネルごとに別々のウィンドウを作成し、それぞれにナビゲーションボタンを加えたりする代わりに、 内容が変わる部分にデッキを使用することによって、ウィンドウを 1 つ作るだけで済ますことができます。

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

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

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

<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>

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

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

次のセクションでは、スタックを使用する場合の子要素の配置方法について説明します。