Flex 4.5 простой скин для кнопки зажигания - PullRequest
Новая
       20

Flex 4.5 простой скин для кнопки зажигания

3 голосов
/ 25 июня 2011

Кто-нибудь пропустил старый простой метод создания простой кнопки? 

<mx:Button x="10" y="10" label=""
           upSkin="@Embed('imgs/mainButton_std.png')"
           overSkin="@Embed('imgs/mainButton_over.png')"
           downSkin="@Embed('imgs/mainButton_over.png')"
           disabledSkin="@Embed('imgs/mainButton_std.png')"
           creationComplete="mainButtonHitArea()"
           width="75" height="75" id="menuButton" enabled="true"/>
//mainButtonHitArea() : Is a generic function that generates the hit area

Проблема, с которой я столкнулся, заключается в том, что этот метод создания простой кнопки со скином постепенно прекращается: Infact больше не поддерживается в мобильных проектах flex 4.5.

Итак, вопрос: есть ли простой способ сделать это с помощью кнопок зажигания (что, по-видимому, является новым путем). Как можно проще.

В основном мне нужна только кнопка с 2 изображениями: вниз / вверх и вверх. И я хочу сделать код как можно более простым: новые методы скининга, кажется, действительно добавляют слишком много строк для чего-то, что раньше было так просто, как в примере выше.

Ответы [ 3 ]

12 голосов
/ 25 июня 2011

Вы можете создать скин, то есть (как MyButtonSkin.mxml): 

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin name="MyButtonSkin"
             xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>    
    <fx:Metadata>
        <![CDATA[
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>    
    <s:BitmapImage source.disabled="@Embed('assets/image1.png')" 
                source.down="@Embed('assets/image2.png')" 
                source.up="@Embed('assets/image3.png')" 
                source.over="@Embed('assets/image4.png')" />
</s:SparkSkin>

Затем вы можете назначить этот скин для какой-либо кнопки: 

<s:Button skinClass="MyButtonSkin"/>
8 голосов
/ 25 июня 2011

Вот кнопка основного изображения, которая более общая:

ImageButtonSkin.mxml 

<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
    <fx:Metadata>
        [HostComponent("com.instantdelay.flex.commons.ImageSkinnableButton")]
    </fx:Metadata>
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
    <s:BitmapImage id="image"
                   source.up="{getStyle('upImage')}"
                   source.down="{getStyle('downImage')}"
                   source.over="{getStyle('overImage')}"
                   source.disabled="{getStyle('disabledImage')}"
                   />
</s:SparkButtonSkin>

ImageSkinnableButton.as 

[Style(name="upImage", inherit="no", type="Class")]
[Style(name="downImage", inherit="no", type="Class")]
[Style(name="overImage", inherit="no", type="Class")]
[Style(name="disabledImage", inherit="no", type="Class")]
public class ImageSkinnableButton extends Button
{
    public function ImageSkinnableButton()
    {
        super();
        setStyle("skinClass", ImageButtonSkin);
    }
}

Затем вы можете установить изображения в качестве стилей для кнопки в CSS (предпочтительно) или в mxml: 

<commons:ImageSkinnableButton
    upImage="@Embed('imgs/mainButton_std.png')"
    overImage="@Embed('imgs/mainButton_over.png')"
    downImage="@Embed('imgs/mainButton_over.png')"
    disabledImage="@Embed('imgs/mainButton_std.png')" />
5 голосов
/ 28 июня 2011

Вы также можете определить ButtonImageSkin для стандартного компонента spark.components.Button, например, в пакете imageskins: 

<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
    <s:BitmapImage source="{getStyle('backgroundImage')}"/>
</s:SparkButtonSkin>

Просто определите стиль на самом классе скина и свяжите источникизображение к нему.Теперь вы можете управлять фактическими изображениями, используя псевдоселекторы CSS: 

@namespace imageskins "imageskins.*";
s|Button {
    skinClass: ClassReference("imageskins.ButtonImageSkin");    
}
imageskins|ButtonImageSkin:up {
    backgroundImage: Embed(source="assets/images/button-up.png");
}
imageskins|ButtonImageSkin:down {
    backgroundImage: Embed(source="assets/images/button-down.png");
}
imageskins|ButtonImageSkin:over {
    backgroundImage: Embed(source="assets/images/button-over.png");
}
imageskins|ButtonImageSkin:disabled {
    backgroundImage: Embed(source="assets/images/button-disabled.png");
}

Таким образом, вы можете получить результат с более гибкими правилами на основе CSS.Я закончил тем, что создал набор скинов Spark на основе изображений для различных компонентов Flex: FXG намного мощнее, но иногда работа с изображениями scale9 - это просто самый быстрый способ получить желаемый результат.

Примечание: есливы помещаете свои классы тем оформления и свой файл CSS (с любым именем) в проект библиотеки Flex и компилируете свой клиентский проект с опцией -theme, Flex автоматически применяет CSS .. полезный при создании набора тем оформления вместе с CSSкоторые связывают их с их компонентами хоста.

...