Le header du composant Accordion est un bouton avec un skin un peu particulier … On a donc toutes les propriétés de type style du composant Button. Mais j’ai l’impression que Adobe a oublié quelque chose … On ne peut pas changer la couleur du texte lorsque le bouton est sélectionné ! Ce qui revient à dire dans le cas d’un Accordion, lorsque un panneau est ouvert, on ne peut pas changer la couleur du texte du header (uniquement la couleur de fond) …. pfffffffffffff et grrrrrrrrrrrrrr !

La solution? Nous allons créer un nouveau composant héritant de Button et “overridant” la méthode viewSkinForPhase qui est appelée à chaque changement de phase (rollover, up, down, select, disable…). Ce qui nous donne le code suivant:

package com.locasystem.puccini.ui.controls
{
	import mx.controls.Button;
	import mx.core.mx_internal;

	use namespace mx_internal;

	public class MyAccordionHeaderButton extends Button
	{
		override mx_internal function viewSkinForPhase(tempSkinName:String, stateName:String):void
    	{
    		super.viewSkinForPhase(tempSkinName, stateName);

    		var labelColor:Number;

	        if (enabled)
	        {
	            if (phase == 'over')
	                labelColor = this.getStyle("textRollOverColor");
	            else
	                labelColor = textField.getStyle("color");

	            if (super.selected)
	            {
	            	labelColor = 0xffffff;
	            }

	            textField.setColor(labelColor);
	        }
    	}
	}
}