CODEWITHSUNDEEP
apache-flexactionscript-3
Herms
Herms

Reputation: 38868

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

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?

Upvotes: 1

Views: 4606

Answers (2)

Christian Nunciato
Christian Nunciato

Reputation: 10409

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!

Upvotes: 3

quoo
quoo

Reputation: 6307

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.

Upvotes: 3

Related Questions