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:
<?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:
<?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>
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
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
?
Try McCune’s example
http://dougmccune.com/blog/2007/09/18/using-complex-headers-with-the-flex-accordion/