Creating a Flex Panel header with a gradient - apache-flex

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

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.

Answer 2

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 3

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