Кнопка Skinning в Actionscript - Добавление границы

Question

Я только начал играть со скинами и нахожу это сложнее, чем что-либо еще, что я встречал в Flex 4 Mobile. Это нужно сделать в ActionScript, так как я пытаюсь создать гибкую мобильную кнопку. Вот то, что я до сих пор: (Это очень мало, только меняет цвет фона)

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();
        }
    }

   }
}

Похоже, что документация для создания скинов для мобильных компонентов Flex только в ActionScript не так уж и сложна. Как мы можем добавить границу, например? Если бы кто-нибудь мог опубликовать свои собственные гибкие мобильные скины, это было бы очень признательно!

Answer 1

В частности, чтобы нарисовать границу, я бы нарисовал ее вручную, используя графический API.

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

У меня есть куча постов / подкастов в блоге о создании мобильных скинов / itemRenderers, которые могут вам помочь:

• https://www.flextras.com/blog/index.cfm/2011/6/17/Mobile-itemRenderers--6172011---Episode-103--Flextras-Friday-Lunch
• https://www.flextras.com/blog/index.cfm/2011/6/23/Understanding-Mobile-itemRenderers
• https://www.flextras.com/blog/index.cfm/2011/6/24/Building-a-Mobile-ItemRenderer-in-Flex
• https://www.flextras.com/blog/index.cfm/2011/7/8/Implementing-States-in-a-Mobile-Skin---782011---Episode-105--Flextras-Friday-Lunch
• https://www.flextras.com/blog/index.cfm/2011/7/13/Implementing-States-in-a-Mobile-Skin-or-Mobile-ItemRenderer

Answer 2

ButtonSkin имеет свойства upBorderSkin и downBorderSkin, которые вы должны установить равными графическим ресурсам fxg в конструкторе:

public function CustomButtonSkin()
{
     super();
     // your padding settings here

     upBorderSkin = path.to.fxg.resource.upBorder;
     downBorderSkin = path.to.fxg.resource.downBorder;
}

И вы переопределите drawBackground пустым телом, даже не super.drawBackground():

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

}

Это сделано для того, чтобы ваш пользовательский скин не рисовал фон по умолчанию.

Вам даже не нужно обнаруживать изменение состояния, чтобы нарисовать что-то другое. Указав свойства границы обложки, вы позволите родительскому классу ButtonSkin обнаруживать изменения состояния и рисовать соответствующую графику.

См. http://www.adobe.com/devnet/flex/articles/mobile-skinning-part1.html для получения дополнительной информации, особенно с использованием ресурсов fxg.