2 Replies Latest reply on Jul 22, 2008 8:52 AM by 3Darky

    focusRoundedCorners for tabNavigator

    FernandoMN
      I want to have a tab navigator with all corners rounded except the top left. This should be easy, since there is a style property called focusRoundedCorners which is supposed to do just that. So I set it to "br tr bl" so as to not round the top left and I set cornerRadius to 10. Yet when I run my application, all of the corners are rounded. Is this a bug or am I missing something. Any help is appreciated. Thanks!
        • 1. Re: focusRoundedCorners for tabNavigator
          m_hartnett Level 3
          This property will not work for this object.

          I think the only way to do this (I may be wrong) is to use a skin.
          Below is a skin that I use to make different shape objects.

          In order to use it, you should have properties for the tab navigator defined either in a CSS or hard coded on the object . Stuff like:
          .stdFilterContainer {
          borderStyle: solid;
          borderColor: #000000;
          backgroundColor:#b0de14;
          backgroundAlpha:0.5;
          cornerRadius:15;
          }

          You need to set the tabNavigator.borderSkin = the fully qualified objects name below.

          Save the object below and change the corner properties. This CustomBorder can be used on any object as well.

          package com.febatmon.view.skins {

          import mx.skins.RectangularBorder;
          import flash.display.Graphics;

          public class CustomBorder extends RectangularBorder {

          public var trCorner : int = 0;
          public var tlCorner : int = 0;
          public var brCorner : int = 20;
          public var blCorner : int = 0;

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

          super.updateDisplayList(unscaledWidth, unscaledHeight);

          var cornerRadius:Number = getStyle("cornerRadius");
          var backgroundColor:int = getStyle("backgroundColor");
          var backgroundAlpha:Number = getStyle("backgroundAlpha");
          graphics.clear();

          drawRoundRect(0, 0, unscaledWidth, unscaledHeight,
          { tl: tlCorner, tr: trCorner, bl: blCorner, br: brCorner },
          0, 1, null, null,null,
          {x:1, y:1, w:unscaledWidth-2, h:unscaledHeight-2,
          r:{ tl: tlCorner, tr: trCorner, bl: blCorner, br: brCorner }});

          drawRoundRect(0, 0, unscaledWidth, unscaledHeight,
          { tl: tlCorner, tr: trCorner, bl: blCorner, br: brCorner },
          backgroundColor, backgroundAlpha);

          }
          }
          }

          • 2. Re: focusRoundedCorners for tabNavigator
            3Darky
            nice solution!
            one problem though, the border shows up under the active tab as well.
            any way to remedy this? i tried moving down the active tab by 1 pixel, so it show up over the border, but it won't let me move tabs =\