Javaで軽快に使える「軽量フレームワーク」特集
～アプレットベースのRIAフレームワーク「Apache Pivot」（3）

第15回

タブパネル

　続いて、コンポーネント類をレイアウトするために役立つコンテナ類に進みましょう。まずは、タブパネルからです。これは「TabPane」として用意されています。これは次のような構造でコンポーネントを組み込みます。

<TabPane>
    <tabs>
        ……コンポーネントを用意……
    </tabs>
</TabPane>

　<tabs>内にコンポーネントを複数追加すると、それらがそれぞれタブで切り替え表示されるようになります。この際、コンポーネントに「TabPane.label」というプロパティを用意しておくことで、タブに表示するテキストを設定することができます。では、簡単な利用例を挙げておきます。2つのタブを切り替え表示するサンプルです。

<TabPane  styles="{padding:8, horizontalSpacing:6}"
    preferredWidth="200" preferredHeight="150">
    <tabs>
        <BoxPane TabPane.label="First">
            <Border>
                <content>
                    <Label styles="{font:'serif bold 24', color:'#0000FF'}" text="1つ目のタブ"/>
                </content>
            </Border>
        </BoxPane>
        <BoxPane TabPane.label="Second">
            <Border>
                <content>
                    <Label styles="{font:'serif bold 24', color:'#FF0000'}" text="2つ目のタブ"/>
                </content>
            </Border>
        </BoxPane>
    </tabs>
</TabPane>

図7　タブパネルの例。<tabs>に用意したコンポーネントがそれぞれタブとして表示される。

　ここでは、<tabs>内に<BoxPane>を複数用意し、これを切り替え表示しています。なお、<BoxPane>内では、<Border>タグというものを使っていますが、これはボーダー（輪郭線）を表示するためのペインです。

分割ペイン

　エリアを上下または左右に分割し、マウスでドラッグしてエリアの幅を調整するのが「スプリットペイン」と呼ばれるコンテナです。これは<SplitPane>として用意されています。これは次のような形で記述します。

<SplitPane  styles="{padding:8}"
    orientation="horizontal" splitRatio="0.6">
    <left>
        ……左側のコンポーネント……
    </left>
    <right>
        ……右側のコンポーネント……
    </right>
</SplitPane>

　<SplitPane>には、その中に<left><right>というタグが用意されています。これらの中に、2つに分割された際の表示を設定します。なお上下に配置した場合も、<left><right>をそのまま利用することができます。

　並び順（縦方向か、横方向か）は、orientationの値で指定します。"horizontal"か"vertical"のいずれかを指定します。では、これも簡単なサンプルコードを挙げておきましょう。2つの<BoxPane>内に<Border>と<Label>を用意しています。

<SplitPane  styles="{padding:8}"
    orientation="horizontal" splitRatio="0.6"
    preferredWidth="200" preferredHeight="150">
    <left>
        <BoxPane>
            <Border>
                <content>
                    <Label styles="{font:'serif bold 24', color:'#0000FF'}"
                        preferredWidth="200" preferredHeight="150" text="左側"/>
                </content>
            </Border>
        </BoxPane>
    </left>
    <right>
        <BoxPane>
            <Border>
                <content>
                    <Label styles="{font:'serif bold 24', color:'#FF0000', background:'#FFCCCC'}"
                        preferredWidth="200" preferredHeight="150" text="右側"/>
                </content>
            </Border>
        </BoxPane>
    </right>
</SplitPane>

図8　スプレットペイン。2つのエリアの間にあるバーをドラッグし、2つの表示エリアを変更できる。