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

第15回

アコーディオン

　最近、Webの世界でよく見られるようになった新しいパネルに「アコーディオンパネル」があります。切り替え用のバーがいくつか並んでおり、クリックしたバーの部分がアコーディオンのように広がって内容が表示されるものです。これは「Accordion」として用意されています。

　Accordionには「panels」プロパティが用意されており、ここにコンポーネントを用意すると、それらがそれぞれアコーディオンの項目として表示されるようになります。内容を表示するためのバーのテキストは「Accordion.label」というプロパティとして用意します。では、これも簡単なサンプルコードを挙げておきます。

<Accordion
    preferredWidth="200" preferredHeight="150">
    <panels>
        <BoxPane Accordion.label="First">
            <Label styles="{font:'serif bold 24', color:'#0000FF'}"
                    preferredWidth="200" preferredHeight="150" text="最初の表示"/>
        </BoxPane>
        <BoxPane Accordion.label="Second"
            styles="{font:'serif bold 24'}">
            <Label styles="{font:'serif bold 24', color:'#FF0000'}"
                    preferredWidth="200" preferredHeight="150" text="次の表示"/>
        </BoxPane>
    </panels>
</Accordion>

図9　アコーディオン。項目をクリックすると内容が表示される。

エキスパンダー

　アコーディオンは、複数の項目から選択したものだけが内容を表示しますが、単純に内容を表示したり折りたたんだりするだけなら、エキスパンダーというペインが便利です。これは「Expander」として用意されています。タイトル部分の表示は「title」プロパティとして用意されています。また折りたたみ状態は「expanded」プロパティとして用意されており、trueであれば表示状態、falseならば折りたたんで隠れた状態となります。以下に簡単な利用例を挙げておきます。

<BoxPane orientation="vertical" styles="{fill:true}">
    <Expander title="First">
        <content>
            <Label styles="{font:'serif bold 24', color:'#0000FF'}"
                preferredWidth="200" preferredHeight="150" text="最初の表示"/>
        </content>
    </Expander>
    <Expander title="Second" expanded="false">
        <content>
            <Label styles="{font:'serif bold 24', color:'#0000FF'}"
                preferredWidth="200" preferredHeight="150" text="次の表示"/>
        </content>
    </Expander>
</BoxPane>

図10　エキスパンダー。バーをダブルクリックすると内容を表示・非表示する。