Positioning the Flex Accordion Header Icon

Posted by Kristofer Joseph Fri, 07 Nov 2008 01:05:32 GMT

I recently had a design comp that required the icon of the Accordion header to be positioned a few pixels from the right.

Accordion Heade Icon Right

The edits were pretty simple in order to get this working as a proof of concept. What follows is a bunch of geeky code stuff so if you have an aversion to code then go to my other blog and look at pretty pictures

Solution after the jump

First you need to subclass ##mx.controls.AccordionHeader which is a subclass of 

mx.controls.Button
so all of properties of button are available. We are really only interested in currentIcon though.

Second add an import for the mx_internal namespace:

import mx.core.mx_internal;
use namespace mx_internal;

Next override the updateDisplayList function, and add your icon positioning code in there. I added some conditional logic that only puts the icon on the right hand side if it is specified by a 

iconPosition: right;
style is present in the css.

update display method:

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
        super.updateDisplayList( unscaledWidth, unscaledHeight );

        if( getStyle("iconPosition") == "right" )
        {
            currentIcon.x = this.unscaledWidth - currentIcon.width - ( getStyle("iconPadding") != null ? getStyle("iconPadding") : 15 );
        }
    }

This handles the AccordionHeader part of the problem, but now we need it to render in the Accordion itself soo.

Subclass 

mx.controls.Accordion
then add a new classFactory that overwrites the headerRenderer property of the super class in the constructor of your new class and pass in your new AccordionHeader subclass.

public function AccordionRounded()
{
    super();
    headerRenderer = new ClassFactory( AccordionHeaderPositionableIcon );
}

Finally I added the style declaration for iconPosition in AccordionHeaders style decleration in the style sheet.

    AccordionHeader
    {
        icon: Embed(source='icons.swf', symbol='btn_accordRight');
        selectedOverIcon: Embed(source='icons.swf', symbol='btn_accordDown');
        selectedUpIcon: Embed(source='icons.swf', symbol='btn_accordDown');
        selectedDownIcon: Embed(source='icons.swf', symbol='btn_accordDown');
        skin: Embed(skinClass="AccordionHeader_skin");
        iconPosition: right;
        iconPadding: 20;

    }

Add your custom component to the display list and you should see your icon now on the right hand side of the AccordionHeader instead of the left as default.

3 comments | atom

Comments

Leave a response

  1. Jason
    4 days later:

    Hi Kristofer,

    Great article. Do you have a sample demo and source available?

    Thanks,

    Jason

  2. Adam
    2 months later:

    Sweet. Thanks for sharing :)

  3. drew
    8 months later:

    Dark site.. not used friendly..

Leave a comment