アコーディオンボタンの外観の制御 -- Flex 2.01

Accordion コンテナのボタンは AccordionHeader クラスによってレンダリングされます。このクラスは Button のサブクラスで、Button クラスと同じスタイルプロパティがあります。

Accordion ボタンのスタイルを変更するには、Accordion クラスの getHeaderAt() メソッドを呼び出して子コンテナのボタンへの参照を取得してから、ボタンの setStyle() メソッドを呼び出してスタイルを設定します。次の例ではこの手法を使用して、それぞれの Accordion ボタンのテキストを異なる色に設定しています。

<?xml version="1.0"?>
<!-- containers\navigators\AccordionStyling.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="600"
    height="600" 
    creationComplete="setButtonStyles();">

    <mx:Script>
        <![CDATA[
            public function setButtonStyles():void {
                comp.getHeaderAt(0).setStyle('color', 0xAA0000);
                comp.getHeaderAt(1).setStyle('color', 0x00AA00);
            }
        ]]>
    </mx:Script>

    <mx:Accordion id="comp">
        <mx:VBox label="first box">
            <mx:TextInput/>
            <mx:Button label="Button 1"/>
        </mx:VBox>
        <mx:VBox label="second box">
            <mx:TextInput/>
            <mx:Button label="Button 2"/>
        </mx:VBox>
    </mx:Accordion>
</mx:Application>

また、Accordion クラスの headerStyleName スタイルプロパティを使用して、ボタンの外観を制御することもできます。詳細については、『Adobe Flex 2 リファレンスガイド』の Accordion を参照してください。