import spark.components.TabBar;
static private const exclusions:Array = ["labelDisplay"];
/**
* @private
*/
override public function get colorizeExclusions():Array {return exclusions;}
/**
* @private
*/
override protected function initializationComplete():void
{
useChromeColor = true;
super.initializationComplete();
}
private var cornerRadius:Number = 4
/**
* @private
* The borderTop s:Path is just a s:Rect with the bottom edge left out.
* Given the rounded corners per the cornerRadius style, the result is
* roughly an inverted U with the specified width, height, and cornerRadius.
*
* Circular arcs are drawn with two curves per flash.display.Graphics.GraphicsUtil.
*/
private function updateBorderTop(width:Number, height:Number):void
{
var path:String = createPathData(true);
borderTop.data = path;
}
/**
* @private
* Draw the selected highlight strokes. The highlight is the same shape as the tab's
* border and is inset just within the border. It must be rendererd with three separate paths,
* since the top leg is rendered with two horizontal lines, with different stroke
* alpha values, and the left and right vertical legs are rendered with a third alpha value.
*
* Circular arcs are drawn with two curves per flash.display.Graphics.GraphicsUtil.
*/
private function updateSelectedHighlight(width:Number, height:Number):void
{
if (!selectedHighlightV)
return;
var left:Number = -0.5; // assuming stroke weight is 1.0
var right:Number = width - 0.5;
var path:String = createPathData(false);
selectedHighlightV.data = path;
// Configure the left/right sides of the two horizontal lines, defined with
// s:Rects, that appear at the top of the selected highlight.
selectedHighlightH1.x = selectedHighlightH2.x = left + cornerRadius;
selectedHighlightH1.width = selectedHighlightH2.width = (right - left) - (2 * cornerRadius);
}
/**
* @private
* This function creates the path data used by borderTop and selectedHighlight.
*/
private function createPathData(isBorder:Boolean):String
{
var left:Number = -0.5; // assuming stroke weight is 1.0
var right:Number = width - 0.5;
var top:Number = 0.5;
var bottom:Number = height;
var a:Number = cornerRadius * 0.292893218813453;
var s:Number = cornerRadius * 0.585786437626905;
// If the path is for the highlight,
// Draw the vertical part of the selected tab highlight that's rendered
// with alpha=0.07. The s:Path is configured to include only the left and
// right edges of an s:Rect, along with the top left,right rounded corners.
// Otherwise, we draw a full path.
var path:String = "";
path += "M " + left + " " + bottom;
path += " L " + left + " " + (top + cornerRadius);
path += " Q " + left + " " + (top + s) + " " + (left + a) + " " + (top + a);
path += " Q " + (left + s) + " " + top + " " + (left + cornerRadius) + " " + top;
if (isBorder)
path += " L " + (right - cornerRadius) + " " + top;
else
path += " M " + (right - cornerRadius) + " " + top;
path += " Q " + (right - s) + " " + top + " " + (right - a) + " " + (top + a);
path += " Q " + right + " " + (top + s) + " " + right + " " + (top + cornerRadius);
path += " L " + right + " " + bottom;
return path;
}
/**
* @private
* The cornerRadius style is specified by the TabBar, not the button itself.
*
* Rather than bind the corner radius properties of the s:Rect's in the markup
* below to hostComponent.owner.getStyle("cornerRadius"), we reset them here,
* each time a change in the value of the style is detected. Note that each
* corner radius property is explicitly initialized to the default value of
* the style; the initial value of the private cornerRadius property.
*/
private function updateCornerRadius():void
{
var cr:Number = getStyle("cornerRadius");
if (cornerRadius != cr)
{
cornerRadius = cr;
fill.topLeftRadiusX = cornerRadius;
fill.topRightRadiusX = cornerRadius;
lowlight.topLeftRadiusX = cornerRadius;
lowlight.topRightRadiusX = cornerRadius;
highlight.topLeftRadiusX = cornerRadius;
highlight.topRightRadiusX = cornerRadius;
highlightStroke.topLeftRadiusX = cornerRadius;
highlightStroke.topRightRadiusX = cornerRadius;
}
}
/**
* @private
*/
override protected function updateDisplayList(unscaledWidth:Number, unscaleHeight:Number):void
{
updateCornerRadius();
updateSelectedHighlight(unscaledWidth, unscaledHeight);
updateBorderTop(unscaledWidth, unscaledHeight);
super.updateDisplayList(unscaledWidth, unscaledHeight);
}