Flex Examples

The following example shows you how you can use an embedded font with the Flex Accordion container by setting the headerStyleName style.

Full code after the jump.

By default, the Accordion header’s text is bold. The following example shows how you can set the accordion header’s font weight to “normal” by setting the fontWeight style in the custom accordion headerStyleName style:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/31/using-embedded-fonts-with-the-accordion-container-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: EmbeddedBase02;
        }

        Accordion {
            headerStyleName: accordionHeaderStyleName;
        }

        .accordionHeaderStyleName {
            fontFamily: EmbeddedBase02;
            fontWeight: normal;
        }
    </mx:Style>

    <mx:Accordion id="accordion"
            creationPolicy="all"
            width="100%"
            height="100%">
        <mx:VBox label="Red"
                backgroundColor="red"
                width="100%"
                height="100%">
        </mx:VBox>
        <mx:VBox label="Orange"
                backgroundColor="haloOrange"
                width="100%"
                height="100%">
        </mx:VBox>
        <mx:VBox label="Yellow"
                backgroundColor="yellow"
                width="100%"
                height="100%">
        </mx:VBox>
        <mx:VBox label="Green"
                backgroundColor="haloGreen"
                width="100%"
                height="100%">
        </mx:VBox>
        <mx:VBox label="Blue"
                backgroundColor="haloBlue"
                width="100%"
                height="100%">
        </mx:VBox>
    </mx:Accordion>

</mx:Application>

View source is enabled in the following example.

The following example shows how you can set the accordion header’s font weight to “bold” by setting the fontWeight style in the @font-face style:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/31/using-embedded-fonts-with-the-accordion-container-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: EmbeddedBase02;
            fontWeight: bold;
        }

        Accordion {
            headerStyleName: accordionHeaderStyleName;
        }

        .accordionHeaderStyleName {
            fontFamily: EmbeddedBase02;
        }
    </mx:Style>

    <mx:Accordion id="accordion"
            creationPolicy="all"
            width="100%"
            height="100%">
        <mx:VBox label="Red"
                backgroundColor="red"
                width="100%"
                height="100%">
        </mx:VBox>
        <mx:VBox label="Orange"
                backgroundColor="haloOrange"
                width="100%"
                height="100%">
        </mx:VBox>
        <mx:VBox label="Yellow"
                backgroundColor="yellow"
                width="100%"
                height="100%">
        </mx:VBox>
        <mx:VBox label="Green"
                backgroundColor="haloGreen"
                width="100%"
                height="100%">
        </mx:VBox>
        <mx:VBox label="Blue"
                backgroundColor="haloBlue"
                width="100%"
                height="100%">
        </mx:VBox>
    </mx:Accordion>

</mx:Application>