Creating a Flex Panel header with a gradient

Question

I need a white box (I'm using a Panel because I'm so close, but it could be anything) with all four corners rounded, and the top portion of the box needs to have a gradient that starts out one color (let's say Grey) and ends up as the background color (white). The gradient does not go down the entire box.

The top two corners must remain rounded, so the gradient must fill those rounded regions too.

What I have so far is an mx:Panel with the following styles:

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;
}

As you can see, there is one tiny single-pixel line that cuts across the header. If I can just get rid of that single-pixel line, that would be perfect! I have tried changing the borderStyle property to "solid" and still cannot get the right combination of styles to get rid of that line.

I have also tried using another container with a background image for the gradient, but the rounded corners become an issue.

Any help would be greatly appreciated!

Answer 1

Have you heard of degrafa? http://www.degrafa.org/samples/ You can make flex stuff look any way you like pretty easily. When I need that level of control, I always go straight to degrafa. Check out both the advanced css examples, as well as the full mxml ones.

http://www.degrafa.org/samples/rich-user-interface.html

Answer 2

I didn't find a solution to the specific Panel issue above, but I did find an overall solution that works for any container: set a background image using bitmapFill and round the corners.

This is what worked for me (using a programmatic skin):

[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);
     }

    }
}

Here is also an example which loads an external image: 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 3

I should mention you can set the entire background as the gradient (stretch to fill) using the technique above with minor tweaking (ran into that question a lot during searches!).

Answer 4

The following css gets rid of the line, but prevents you from using a gradient header.

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

Answer 5

The culprit for the line under the title bar is actually the default titleBackgroundSkin associated with the Panel component (mx.skins.halo.TitleBackground). If you look at the source of the updateDisplayList method you see a section where it draws the background that includes the following lines:

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

If you create your own implementation that does everything the same with the exception of these lines, you should get what you need. At least I did in my limited test case with a gradient header.