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.
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