Skinning Button in actionscript - Adding a border

Question

I've just started playing about with skinning and am finding it harder than anything else I've come across in Flex 4 Mobile. It needs to be done in actionscript as I am trying to skin a flex mobile button. Here is what I have so far: (It does very little, only changes the background color)

package skins { import flash.display.GradientType; import flash.geom.Matrix; import mx.utils.ColorUtil; import spark.components.supportClasses.StyleableTextField; import spark.skins.mobile.ButtonSkin; import spark.skins.mobile.supportClasses.MobileSkin; public class CustomButtonSkin extends ButtonSkin { public function CustomButtonSkin() { super(); layoutPaddingLeft = 10; layoutPaddingRight = 10; layoutPaddingTop = 2; layoutPaddingBottom = 2; layoutCornerEllipseSize = 1; } private static var colorMatrix:Matrix = new Matrix(); private static const CHROME_COLOR_ALPHAS:Array = [1, 1]; private static const CHROME_COLOR_RATIOS:Array = [0, 127.5]; override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void { super.drawBackground(unscaledWidth, unscaledHeight); var chromeColor:uint = getStyle("chromeColor"); if (currentState == "up") { graphics.beginFill(0x1C1C1C); } else{ var colors:Array = []; colorMatrix.createGradientBox(unscaledWidth, unscaledHeight, Math.PI / 2, 0, 0); colors[0] = 0xFFFFFF;//ColorUtil.adjustBrightness2(chromeColor, 70); colors[1] = 0xEEEEEE;//chromeColor; graphics.beginGradientFill(GradientType.RADIAL, colors, CHROME_COLOR_ALPHAS, CHROME_COLOR_RATIOS, colorMatrix); graphics.endFill(); } } } }

There doesn't seem to be much in the way of documentation for skinning Flex mobile components purely in actionscript. How do we add a border for example? If anyone could post their custom flex mobile skins it would be hugely appreciated!

JeffryHouser · Accepted Answer · 2011-07-29 16:04:22Z

Specifically to draw a border, I would draw one manually using the graphics API.

this.graphics.lineStyle(1, color, alpha, true); this.graphics.drawRect(0, 0, width, height);

I have a bunch of blog posts/podcasts about building mobile skins / itemRenderers that may help you:

Avoid adding a BorderContainer to your mobile skin since it isn't optimized for mobile and will likely result in poor performance. Drawing into the graphics object is recommended for optimized ActionScript skins.
@Steven Shongrunden Good point! I modded my answer to remove the BorderContainer suggestion.

Mickael Caruso · Accepted Answer · 2012-11-28 02:07:36Z

The ButtonSkin has the properties upBorderSkin and downBorderSkin, which you would set equal to fxg graphic resources in the constructor:

public function CustomButtonSkin() { super(); // your padding settings here upBorderSkin = path.to.fxg.resource.upBorder; downBorderSkin = path.to.fxg.resource.downBorder; }

And you would override drawBackground with an empty body, not even super.drawBackground():

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

This is so that your custom skin won't draw the default background.

You don't even have to detect a state change to draw something different. By specifying the border skin properties, you would be letting the ButtonSkin parent class to detect the state changes and draw the appropriate graphic.

See http://www.adobe.com/devnet/flex/articles/mobile-skinning-part1.html for more information, especially using fxg resources.

Collectives™ on Stack Overflow

Skinning Button in actionscript - Adding a border

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related