How to create HBox with only the top corners rounded in Flex?

Question

I'm trying to create an HBox in flex that has only the top corners rounded. HBox (and all the other flex containers) have a cornerRadius style, but it applies to all corners. I'm not seeing a way to specify the style of individual corners.

Is there any built-in way to do this, or will I need to write my own custom drawing code to draw the background with rounded corners?

Answer 1

It depends what border skin you're using. If you're using the built in skins (HaloBorder), there's a style that you can specify "roundedBottomCorners" (which is a boolean), which allows you to control whether the bottom corners are rounded or not. If you're using your own border skin, you can add in whatever styles you want to control the corners.

Answer 2

Alas, the only solution I know is to draw the background yourself, using Programmatic Skinning -- specifically, orderriding RectangularBorder::

package
{
    import mx.skins.RectangularBorder;

    public class HBoxSkin extends RectangularBorder
    {
     public function HBoxSkin()
     {
      super();
     }

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

      var cr:Number = getStyle("cornerRadius");
      var bc:Number = getStyle("backgroundColor");

      graphics.clear();
      graphics.beginFill(bc, 1);

      // Draw the rectangle manually, rounding only the top two corners
      graphics.drawRoundRectComplex(0, 0, unscaledWidth, unscaledHeight, cr, cr, 0, 0);
      graphics.endFill();
     }
    }
}

... and then applying the change using the borderSkin property of your HBox:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

    <!-- Apply the skin using the borderSkin property of your HBox -->
    <mx:HBox borderSkin="HBoxSkin" backgroundColor="#FFFFFF" cornerRadius="10" height="100" width="100" top="10" left="10" />

</mx:Application>

The Flex Documentation gives an example of how to implement programmatic skinning. It's beyond beginner level, unfortunately (this stuff gets a lot easier in Flex 4), but if you follow the code in my example and in the documentation's, you should be able to get something together. Good luck!