Flex Examples
The following example shows how you can use the textAlign style to control the text alignment of a label in an Accordion header.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/13/changing-text-alignment-in-an-flex-accordion-header/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init();">
<mx:Style>
.MyHeaderStyle {
color: haloBlue;
fontWeight: bold;
textAlign: left;
textRollOverColor: haloOrange;
textSelectedColor: black;
icon: Embed(source="assets/asterisk_orange.png");
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.events.IndexChangedEvent;
import mx.events.ListEvent;
private function init():void {
comboBox.dataProvider = accordion.getChildren()
}
private function comboBox_change(evt:ListEvent):void {
accordion.selectedIndex = comboBox.selectedIndex;
}
private function accordion_change(evt:IndexChangedEvent):void {
comboBox.selectedIndex = accordion.selectedIndex;
}
private function changeTextAlign(evt:ListEvent):void {
var cssDecl:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".MyHeaderStyle");
cssDecl.setStyle("textAlign", evt.currentTarget.selectedItem);
StyleManager.setStyleDeclaration(".MyHeaderStyle", cssDecl, false);
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:Label text="Selected child:" />
<mx:ComboBox id="comboBox"
change="comboBox_change(event);">
</mx:ComboBox>
<mx:Spacer width="50" />
<mx:Label text="textAlign:" />
<mx:ComboBox change="changeTextAlign(event)">
<mx:dataProvider>
<mx:String>left</mx:String>
<mx:String>center</mx:String>
<mx:String>right</mx:String>
</mx:dataProvider>
</mx:ComboBox>
</mx:ApplicationControlBar>
<mx:Accordion id="accordion"
headerStyleName="MyHeaderStyle"
themeColor="haloSilver"
width="100%"
height="100%"
change="accordion_change(event);">
<mx:VBox label="One" />
<mx:VBox label="Two" />
<mx:VBox label="Three" />
<mx:VBox label="Four" />
<mx:VBox label="Five" />
</mx:Accordion>
</mx:Application>
View source is enabled in the following example.
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
Can we add button / text box in the accordion header? similar to the kind we can do to a panel by extending it.
Aasim,
I haven’t tried either technique (yet), but I’m sure you could either extend the AccordionHeader class (in the mx.containers.accordionClasses package — see Flex 3 Beta LiveDocs) and add whatever functionality you want, or possibly create a custom renderer of sorts.
You can find one example of the latter method (custom renderer) over at jlafferty’s blog “Using a headerRenderer for an Accordion“.
Sorry,
Peter
hi peter
Thanks for your post
When i try to compile your code, this error shown :
1118: Implicit coercion of a value with static type flash.events:Event to a possibly unrelated type mx.events:ListEvent.
Reza.h,
Interesting, are you using Flex 201 or Flex 3 Beta?
Peter
thanks peter
I using flex 2.1
Hi peter,
How can one find the deprecated styles for the header Style? i realised that paddingLeft does not register when i specify it in my header style.
I almost thought that it was a bug when i see it being reflected on my Flex Builder. Or am i wrong?
Ted,
Glad you asked. If you head over to the Flex 3 Beta LiveDocs, you can either check out the Accordion page which will note whether a method, property, or style is deprecated, or there is a super-handy “List of deprecated elements“ appendix which lists all deprecated items on a single page.
Oh, and to answer your question, if you want to specify Accordion header leftPadding [in Flex 3], you can use something like the following:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:Style> .accHeader { paddingLeft: 130; /* pixels */ } </mx:Style> <mx:Accordion headerStyleName="accHeader" width="100%" height="100%"> <mx:VBox label="One" /> <mx:VBox label="Two" /> <mx:VBox label="Three" /> <mx:VBox label="Four" /> </mx:Accordion> </mx:Application>For more information, see Customizing the Accordion header in Flex 3.
Hope that helps,
Peter
Thanks for the detailed reply..
I found it strange when my changes were reflected in Flex Builder and not on my compiled swf..
By the way, am i right to say that (for Flex 3) all headerStyles are inherited from my header renderer, whether default(Button) or not?
Hi thanks for the example it was quite helpful…. i was wondering how do you get those nice blocks in your posts for posting the code in????? thanks!
nate haskins,
The code blocks were the default <pre> blocks for the Redoable WordPress theme. You can download the theme from http://www.deanjrobinson.com/wordpress/redoable/ and view the CSS code.
Peter