Changing text alignment in an Flex Accordion header

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.

View MXML

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

10 thoughts on “Changing text alignment in an Flex Accordion header

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

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

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

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

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

Comments are closed.