Mon objectif à travers l'utilisation du ProgrammaticSkin était à la base de pouvoir appliquer un dégradé sur n'importe quel composant. Car en effet la propriété css backgroundGradientColors n'est disponible que pour le composant Application. Mais les programmaticSkin se révèlent bien plus intéressants que rendre une propriété disponible à un composant, on peut vraiment tout personnaliser et rendre l'aspect graphique de notre application totalement modulable.

Voici maintenant la classe as3 héritant de ProgrammaticSkin

  package monPaquet
  {
  import mx.skins.ProgrammaticSkin;
  import flash.display.GradientType;//nécessaire pour le dégradé
  import flash.geom.Matrix;//nécessaire pour le dégradé
  public class MaClasseSkin extends ProgrammaticSkin {
  	public function MaClasseSkin(){}
  	override protected function updateDisplayList(unscaledWidth:Number,
  					unscaledHeight:Number):void{
  		//valeur par défaut
  		var cornerTopLeft:Number=6;
  		var cornerO:Number=0;
  		//on récupère la propriété css
  		if(getStyle('Corner')){
  			 if(getStyle('Corner')=='all'){
  				//tous les coins auront un arrondi
  				cornerO=cornerTopLeft;
  			}else if(getStyle('Corner')=='topLeft'){
  				//on laisse par défaut l'arrondi en haut à gauche
  			}else if(getStyle('Corner')=='none'){
  				//tous les coins seront à angle droit
  				cornerTopLeft=cornerO;
  			}
  		}
  		var fillType:String = GradientType.LINEAR;
  		//ne pas vérifier si le style est présent rend la propriété obligatoire
  		//sinon problème de compilation
  		var colors:Array = getStyle('backgroundGradientColors');
  		var alphas:Array = getStyle('backgroundGradientAlphas');
  		var ratios:Array = [0x00, 0xFF];
  		var matr:Matrix = new Matrix();
  		//on nettoie les graphiques existants
  		graphics.clear();
  		//on créé un dégradé de haut en bas
  		matr.createGradientBox(unscaledWidth, unscaledHeight, Math.PI/2, 0, 0);
  		graphics.lineStyle(border, colorBorder, alphaBorder);
  		graphics.beginGradientFill(fillType, colors, alphas, ratios,matr);
  		
  		if(getStyle('CircleBorder')=='on'){
  			//on créé un dessin personnalisé
  			graphics.moveTo(0,unscaledHeight);
  			graphics.curveTo(0,0,unscaledWidth/2,0);
  			graphics.curveTo(unscaledWidth,0,unscaledWidth,unscaledHeight);
  		}else{
  			//on créé un carré arrondi avec la valeur pour chaque angle
  			graphics.drawRoundRectComplex(0, 0, unscaledWidth, unscaledHeight,
  						cornerTopLeft, cornerO, cornerO, cornerO);
	  		}
  		//on termine le dessin
  		graphics.endFill();
  	}
  }
  }
  

Voici maintenant la classe css qui utilise les propriétés personnalisées.

  .monCanvas{
  	CircleBorder:on;
  	Corner:topLeft; //all / none/ topLeft par défaut 
  	backgroundGradientColors: #0086ca, #0062a6; //obligatoire
  	backgroundGradientAlphas: 1, 1; //obligatoire
  	border-skin:ClassReference("monPaquet.MaClasseSkin");
  }