Flex- removing border from menubar component

For some reason the menubar component doesn’t allow you to remove the border (borderStyle=”none”), in fact you can’t directly set the border style at all. Here’s a workaround:

example

The Border is drawn in the MenuBarBackgroundSkin.as file found in mx/skins/halo/. We’ll need to either write a custom class that extends MenuBar (that adds the ability to modify the borderStyle – the better way), or (the hacky way), Just write a new background skin. In this case I simply copied and pasted the code into a new file, called in MenuBarCustomSkin.as, and placed it in a components folder in my flex project. Note that when you do this, you need to add the line:

import mx.skins.halo.HaloColors;

now, we simply comment out the following code:
// button border/edge

/* drawRoundRect(

0, 0, w, h, cr,

[ borderColor, borderColorDrk1 ], 1,

verticalGradientMatrix(0, 0, w, h),

GradientType.LINEAR, null,

{ x: 1, y: 1, w: w – 2, h: h – 2, r: cr1 });

*/

so the final actionscript for your custom background skin is this:

(in your mxml you would write <mx:MenuBar backgroundSkin=”components.MenuBarCustomSkin”/>

//MenuBarCustomSkin.as

package components

{

import flash.display.GradientType;

import mx.core.UIComponent;

import mx.core.EdgeMetrics;

import mx.skins.Border;

import mx.styles.StyleManager;

import mx.utils.ColorUtil;

import mx.skins.halo.HaloColors;

/**

* The skin for the background of a MenuBar.

*/

public class MenuBarCustomSkin extends Border

{

// include “../../core/Version.as”;

//————————————————————————–

//

// Class variables

//

//————————————————————————–

/**

* @private

*/

private static var cache:Object = {};

//————————————————————————–

//

// Class methods

//

//————————————————————————–

/**

* @private

* Several colors used for drawing are calculated from the base colors

* of the component (themeColor, borderColor and fillColors).

* Since these calculations can be a bit expensive,

* we calculate once per color set and cache the results.

*/

private static function calcDerivedStyles(themeColor:uint,

fillColor0:uint,

fillColor1:uint):Object

{

var key:String = HaloColors.getCacheKey(themeColor,

fillColor0, fillColor1);

if (!cache[key])

{

var o:Object = cache[key] = {};

// Cross-component styles.

HaloColors.addHaloColors(o, themeColor, fillColor0, fillColor1);

}

return cache[key];

}

//————————————————————————–

//

// Constructor

//

//————————————————————————–

/**

* Constructor.

*/

public function MenuBarCustomSkin()

{

super();

}

//————————————————————————–

//

// Overridden properties

//

//————————————————————————–

//———————————-

// borderMetrics

//———————————-

/**

* @private

* Storage for the borderMetrics property.

*/

private var _borderMetrics:EdgeMetrics = new EdgeMetrics(0, 0, 0, 0);

/**

* @private

*/

override public function get borderMetrics():EdgeMetrics

{

return _borderMetrics;

}

//———————————-

// measuredWidth

//———————————-

/**

* @private

*/

override public function get measuredWidth():Number

{

return UIComponent.DEFAULT_MEASURED_MIN_WIDTH;

}

//———————————-

// measuredHeight

//———————————-

/**

* @private

*/

override public function get measuredHeight():Number

{

return UIComponent.DEFAULT_MEASURED_MIN_HEIGHT;

}

//————————————————————————–

//

// Overridden methods

//

//————————————————————————–

/**

* @private

*/

override protected function updateDisplayList(w:Number, h:Number):void

{

super.updateDisplayList(w, h);

// User-defined styles.

var bevel:Boolean = getStyle(”bevel”);

var borderColor:uint = getStyle(”borderColor”);

var cornerRadius:Number = getStyle(”cornerRadius”);

var fillAlphas:Array = getStyle(”fillAlphas”);

var fillColors:Array = getStyle(”fillColors”);

StyleManager.getColorNames(fillColors);

var themeColor:uint = getStyle(”themeColor”);

// Derivative styles.

var derStyles:Object = calcDerivedStyles(themeColor, fillColors[0],

fillColors[1]);

var borderColorDrk1:Number =

ColorUtil.adjustBrightness2(borderColor, -25);

var cr:Number = Math.max(0, cornerRadius);

var cr1:Number = Math.max(0, cornerRadius – 1);

var upFillColors:Array = [ fillColors[0], fillColors[1] ];

var upFillAlphas:Array = [ fillAlphas[0], fillAlphas[1] ];

graphics.clear();

// button border/edge

/* drawRoundRect(

0, 0, w, h, cr,

[ borderColor, borderColorDrk1 ], 1,

verticalGradientMatrix(0, 0, w, h),

GradientType.LINEAR, null,

{ x: 1, y: 1, w: w – 2, h: h – 2, r: cr1 });

*/

// button fill

drawRoundRect(

1, 1, w – 2, h – 2, cr1,

upFillColors, upFillAlphas,

verticalGradientMatrix(1, 1, w – 2, h – 2));

}

}

}

Tweet This Post