Using embedded fonts with the Accordion container in Flex

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>

0 thoughts on “Using embedded fonts with the Accordion container in Flex

  1. Hi,

    Great example.
    Just wondering if it is possible to have two lines in the header, one with specific font (or color or any possible style), the other with another one ?

    For example, I’d like to have a calendar with details in the accordion, with 3 headers, the first one would be :

    <big>Day</big>
    <bold>2008/07/20</bold>

    and so on for the two other headers :

    Week
    From 07/14 to 07/21

    Month
    July

    ?