Кнопки искры со встроенными изображениями

Я новичок в Flex 4, так что наберитесь терпения...

Я хочу сделать что-то вроде:

Основной.mxml

<s:HGroup id="animals">

    <s:Button name="dog">Dog Name</s:Button>
    <s:Button name="bird">Bird Name</s:Button>
    <s:Button name="cat">Cat Name</s:Button>

</s:HGroup>

Скин для #animals s|Button

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" minWidth="40" minHeight="22">

    <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 width="104" height="54" source="@Embed('../../assets/img/animals/__PUT_HERE_BUTTON_NAME__.png')"/>

    <s:Label
    id="labelDisplay"
    textAlign="center"
    color="0xffffff"
    fontFamily="CuteFont"
    fontWeight="bold"
    fontSize="15"
    width="100%"
    top="64"
    />
</s:Skin>

Нужно ли расширять компонент Button или как мне поступить?


button skin apache-flex flex4 flex-spark
person coma    schedule 31.03.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Создайте настраиваемую кнопку со свойством значка (Object) и необходимой частью темы оформления iconBitmapImage (BitmapImage).

В установщике значков примените это свойство к исходному свойству iconBitmapImage.

Тогда вы сможете сделать что-то вроде:

<s:CustomButton name="dog" icon="@Embed('../../assets/img/animals/dog.png')" />
person Florian F    schedule 31.03.2011
comment
Ну, наконец-то я сделал это, так что спасибо!. Не могли бы вы ответить на этот вопрос - person coma; 01.04.2011

arrow_upward
1
arrow_downward

Расположение Add.png должно находиться в каталоге src вашего проекта flex. Если он был где-то еще, вам нужно указать Add.png вместе с его местоположением.

person Kans    schedule 18.05.2015