Быстрое и грязное снятие шкурки кнопки Flex Mobile

Я работаю над мобильным проектом и пытаюсь реализовать на основе красивого дизайна комп. К сожалению, мне не повезло узнать, как это сделать правильно … Поэтому я расскажу вам, как я это сделал, правильно или неправильно.

Итак, я начну с дизайна комп. Вот чего я хочу добиться: 

Сначала я создаю пустой скин, который расширяет spark.skins.mobile.ButtonSkin.

Мобильные скины используют изображение с именем border для визуализации границы кнопки. Я воспользуюсь этим, чтобы показать новое фоновое изображение моей кожи. Для мобильных скинов есть два изображения: вверх и вниз. Кнопка имеет функцию для возврата, которая должна быть правильным изображением для состояния «вверх» или «вниз» … так:

я импортирую новые фоновые изображения, чтобы заменить фоновые кнопки «вверх» и «вниз» по умолчанию.

    //Import the new assets for the background of the button
    [Bindable]
    [Embed(source="/assets/filterbuttonDown.png")]
    private var down:Class;
     
    [Bindable]
    [Embed(source="/assets/filterbuttonUp.png")]
    private var up:Class;

Я переопределяю функцию getBorderClassForCurrentState. (Я также меняю цвет шрифта здесь, в выключенном состоянии, возможно, это не то место, где это нужно, но это работает.)

    // Override this function to return our skin images and not the normal ones.
    override protected function getBorderClassForCurrentState():Class
    {
    if (currentState == "down"){
    labelDisplay.setStyle("color",0xFFFFFF);
    return down;
    }
    else{
    labelDisplay.setStyle("color",0x48250A);
    return up;
    }
    }

Это даст такой результат:
 

Используется фон, но он маленький, поэтому я установил размер в конструкторе.

    public function DemoButton()
    {
    super();
    //Set the width and the height to the size of the image.
    width = 243;
    height = 103;
    }

Это большое «нет-нет», когда речь заходит о разработке мобильных приложений, поскольку она плохо масштабируется на многих экранах. Но мое приложение довольно специфично, и я могу с этим справиться

Это дает:

Хорошо, но мне нужно убрать форму фона. Я делаю это, переопределяя drawBackground и устанавливая его так, чтобы он ничего не делал.

    // Override this function to prvent the button from drawing a background
    override protected function drawBackground(unscaledWidth:Number,
    unscaledHeight:Number):void{
    }

Что дает это:

Наконец мне нужно установить шрифты. У мобильных кнопок есть тени на тексте, но они не визуализируются с использованием фактического фильтра с тенями; они делают это, имея второе текстовое поле после первого. Поэтому мне нужно изменить и настроить этот шрифт на те же настройки, переопределив labelDisplay_valueCommitHandler.

    override protected function labelDisplay_valueCommitHandler(event:FlexEvent):void
    {
    //super.labelDisplay_valueCommitHandler(event);
    labelDisplayShadow.text = labelDisplay.text;
     
    labelDisplay.setStyle("fontFamily","Lions Den");
    labelDisplay.setStyle("fontSize",40);
    labelDisplay.setStyle("fontWeight","normal");
    labelDisplay.setStyle("color",0x48250A);
    labelDisplayShadow.setStyle("fontFamily","Lions Den");
    labelDisplayShadow.setStyle("fontSize",40);
    labelDisplayShadow.setStyle("fontWeight","normal");
     
    }

И вот, у вас это есть кнопка с настраиваемой кожей во Flex Mobile. Если кто-то видит явные проблемы с этим, дайте мне знать.

Вот весь источник, если вам интересно.

    package skins
    {
    import mx.events.FlexEvent;
     
    import spark.skins.mobile.ButtonSkin;
     
    public class DemoButton extends ButtonSkin
    {
     
    //Import the new assets for the background of the button
    [Bindable]
    [Embed(source="/assets/filterbuttonDown.png")]
    private var down:Class;
     
    [Bindable]
    [Embed(source="/assets/filterbuttonUp.png")]
    private var up:Class;
     
    public function DemoButton()
    {
    super();
    //Set the width and the height to the size of the image.
    width = 243;
    height = 103;
    }
     
    // Override this function to return our skin images and not the normal ones.
    override protected function getBorderClassForCurrentState():Class
    {
    if (currentState == "down"){
    labelDisplay.setStyle("color",0xFFFFFF);
    return down;
    }
    else{
    labelDisplay.setStyle("color",0x48250A);
    return up;
    }
    }
     
    // Override this function to prvent the button from drawing a background
    override protected function drawBackground(unscaledWidth:Number,
    unscaledHeight:Number):void{
     
    }
     
    override protected function
    labelDisplay_valueCommitHandler(event:FlexEvent):void
    {
    //super.labelDisplay_valueCommitHandler(event);
    labelDisplayShadow.text = labelDisplay.text;
     
    labelDisplay.setStyle("fontFamily","Lions Den");
    labelDisplay.setStyle("fontSize",40);
    labelDisplay.setStyle("fontWeight","normal");
    labelDisplay.setStyle("color",0x48250A);
    labelDisplayShadow.setStyle("fontFamily","Lions Den");
    labelDisplayShadow.setStyle("fontSize",40);
    labelDisplayShadow.setStyle("fontWeight","normal");
     
    }
     
    }
    }