Création d'un en-tête de panneau Flex avec un dégradé

Question

J'ai besoin d'une boîte blanche (j'utilise un panneau parce que je suis si proche, mais cela pourrait être n'importe quoi) avec les quatre coins arrondis et la partie supérieure de la boîte avoir un dégradé commençant par une couleur (disons Gray) et se terminant par la couleur de fond (blanc). Le dégradé ne descend pas toute la boîte. Les deux coins supérieurs doivent rester arrondis, de sorte que le dégradé doit également remplir ces zones arrondies.

Ce que j'est à ce jour un mx: Panel avec les styles suivants:

 
Panel { 
    borderColor: #ffffff; 
    borderAlpha: 1; 
    borderThickness: 13; 
    borderThicknessLeft: 0; 
    borderThicknessTop: 0; 
    borderThicknessBottom: 11; 
    borderThicknessRight: 0; 
    roundedBottomCorners: true; 
    cornerRadius: 16; 
    headerHeight: 50; 
    backgroundAlpha: 1; 
    highlightAlphas: 0.29, 0; 
    headerColors: #999999, #ffffff; 
    backgroundColor: #ffffff; 
    dropShadowEnabled: false; 
} 

Comme vous pouvez le voir, il y a une petite ligne unique pixel qui coupe à travers l'en-tête. Si je peux me débarrasser de cette ligne à un seul pixel, ce serait parfait! J'ai essayé de changer la propriété borderStyle à "solide" et ne peux toujours pas obtenir la bonne combinaison de styles pour se débarrasser de cette ligne.

J'ai également essayé d'utiliser un autre conteneur avec une image d'arrière-plan pour le dégradé, mais les coins arrondis deviennent un problème.

Toute aide serait grandement appréciée!

Answer 1

Je n'ai pas trouvé de solution au problème spécifique de Panel ci-dessus, mais j'ai trouvé une solution globale qui fonctionne pour n'importe quel conteneur: définir une image de fond en utilisant bitmapFill et arrondir les coins.

C'est ce qui a fonctionné pour moi (en utilisant une peau programmatique):

[styles.css]

 
HBox { 
    borderSkin:     ClassReference("assets.programmatic.GradientHeaderSkin"); 
} 

[GradientHeaderSkin.as]

 
package assets.programmatic 
{ 
    import flash.display.Bitmap; 
    import flash.display.BitmapData; 
    import mx.skins.ProgrammaticSkin; 

    public class GradientHeaderSkin extends ProgrammaticSkin 
    { 
     [Embed(source="../imgs/panelHeaderGradient.png")] 
     private var _backgroundImageClass:Class; 
     private var _backgroundBitmapData:BitmapData; 
     private var _backgroundImage:Bitmap; 
     private var _backgroundColor:uint; 

     public function GradientHeaderSkin() 
     { 
      super(); 

      _backgroundImage = new _backgroundImageClass(); 
      _backgroundBitmapData = new BitmapData(_backgroundImage.width, _backgroundImage.height); 
     } 

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

      _backgroundBitmapData.draw(_backgroundImage); 
      graphics.clear(); 
      graphics.beginBitmapFill(_backgroundBitmapData, null, false, false); 

      // specify corner radius here 
      this.graphics.drawRoundRectComplex(0, 0, this.width, this.height, 20, 20, 20, 20); 
     } 

    } 
} 

Voici aussi un exemple qui charge une image externe: http://books.google.com/books?id=7fbhB_GlQEAC&pg=PA106&lpg=PA106&dq=flex+filling+rounded+corners+with+graphic&source=bl&ots=HU_jainH4F&sig=F793bjL0a4nU5wx5wq608h_ZPr0&hl=en&ei=GQd3Spi-OYiYMcLDyLEM&sa=X&oi=book_result&ct=result&resnum=1#v=onepage&q=&f=false

Answer 2

Le CSS suivant se débarrasse de la ligne, mais vous empêche d'utiliser un en-tête de gradient.

.richTextEditor 
{ 
    titleBackgroundSkin: ClassReference("mx.skins.ProgrammaticSkin"); /** Gets rid of the line that was there **/ 
} 

Answer 3

Le coupable de la ligne sous la barre de titre est en fait la titleBackgroundSkin par défaut associé au composant du panneau (mx.skins.halo.TitleBackground). Si vous regardez la source de la méthode updateDisplayList vous voyez une section où il tire l'arrière-plan qui comprend les lignes suivantes:

  g.lineStyle(0, colorDark, borderAlpha); 
      g.moveTo(0, h); 
      g.lineTo(w, h); 
      g.lineStyle(0, 0, 0); 

Si vous créez votre propre implémentation qui fait tout le même à l'exception de ces lignes, vous devriez obtenir ce dont vous avez besoin. Au moins, j'ai fait dans mon cas de test limité avec un en-tête de gradient.