Corner radius in Adobe Air application

Question

Hi, all friends,

How can we make rounded corners on the vbox control in the Air application?

I am hiding the header and setting transparent to true, but then it does not show me rounded corners on the VBox in the application. I am showing this VBox to the user.

Thanks in advance.

Answer 1

You can do this by implementing a custom Border:

package your.package
{

  import flash.display.*;
  import flash.geom.*;
  import flash.utils.*;

  import mx.skins.halo.HaloBorder;
  import mx.utils.GraphicsUtil;

  public class RoundedBorder extends HaloBorder 
  {

    private var topCornerRadius:Number;
    private var bottomCornerRadius:Number;
    private var setup:Boolean;

    /**
     * Get the CSS style attributes from the element to which to apply this
     * gradient. 
     */
    private function readElementCssStyles():void
    {
      topCornerRadius = getStyle("cornerRadius") as Number;
      if (!topCornerRadius)
      { 
        topCornerRadius = 0;
      }    

      bottomCornerRadius = getStyle("bottomCornerRadius") as Number;
      if (!bottomCornerRadius) 
      {
        bottomCornerRadius = topCornerRadius;
      }  
    }

    /**
     * Paint the gradient background.
     *  
     * @param unscaledWidth
     * @param unscaledHeight
     * 
     */
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
      super.updateDisplayList(unscaledWidth, unscaledHeight);   
      var rectWidth:Number 
          = unscaledWidth - this.borderMetrics.left - this.borderMetrics.right;
      var rectHeight:Number 
          = unscaledHeight - this.borderMetrics.top - this.borderMetrics.bottom; 

      readElementCssStyles();

      var topRadius:Number = Math.max(topCornerRadius-2, 0);
      var bottomRadius:Number = Math.max(bottomCornerRadius-2, 0);

      GraphicsUtil.drawRoundRectComplex(this.graphics, 
                                        this.borderMetrics.left, 
                                        this.borderMetrics.top, 
                                        rectWidth, 
                                        rectHeight, 
                                        topRadius, 
                                        topRadius, 
                                        bottomRadius, 
                                        bottomRadius);
    }

  }
}

Then in your MXML application you have to define a CSS class for your VBox like this:

  <mx:Style>
    .roundedBorder
    {
      border-style:solid;
      border-thickness: 1;
      border-skin: ClassReference("your.package.RoundedBorder");
      corner-radius: 5;
    }   
  </mx:Style>

I have ripped this code out of a more complex class. Hope I did not forgot anything and that it will work as posted.