Шаблон для скинов кнопок с использованием графики FXG?

Пользовательский интерфейс в моем приложении использует множество кнопок, которые в основном одинаковы, за исключением графики FXG, используемой в их скинах. Их скины выглядят примерно так

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:ai="http://ns.adobe.com/ai/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:flm="http://ns.adobe.com/flame/2008" xmlns:graphics="assets.graphics.*" xmlns:ATE="http://ns.adobe.com/ate/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>
    <graphics:RectangleGraphic bottom="0"/> 
    <graphics:ButtonTextGraphic alpha.disabled="0.45" x="22" y="6"/>
    <graphics:ButtonSymbolGraphic alpha.disabled="0.45" x="4" y="4">
        <graphics:filters>
            <s:GlowFilter includeIn="over, down" blurX="3" blurY="3" inner="false" color="#3F5F93" strength="2" alpha="1.0" quality="2" knockout="false"/>
            <s:GlowFilter includeIn="down" blurX="3" blurY="3" inner="false" color="0x5380d0" strength="2" alpha="1.0" quality="2" knockout="false"/>
        </graphics:filters>
    </graphics:ButtonSymbolGraphic>
    <graphics:SmallButtonLineSeparatorGraphic bottom="-0.5"/>
</s:Skin>

где RectangleGraphic и SmallButtonLineSeparatorGraphic — это FXG, которые используются для всех кнопок, а ButtonTextGraphic и ButtonSymbolGraphic — это FXG, специфичные для каждой кнопки. Мне бы хотелось иметь единый скин-шаблон, на который подаются два FXG, специфичных для каждой кнопки, но я не уверен, как это лучше всего сделать.


apache-flex fxg
person fred august    schedule 04.06.2011    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вам придется немного поколдовать с ActionScript, чтобы все заработало. Вероятно, оставьте RectangleGraphic и SmallButtonLineSeparatorGraphic такими, какие они есть в MXML. Создайте переменные для ButtonTextGraphic и ButtonSymbolGraphic. Я просто продемонстрирую использование примера ButtonTextGraphic. Что-то вроде этого:

public var buttonTextGraphicClass : Class;

Также есть переменные для экземпляра класса:

public var buttonTextGraphic : Class;

В конструкторе вы можете установить значения класса. Или, если вы застряли с MXML, используйте обработчик событий предварительной инициализации:

buttonTextGraphicClass = ButtonTextGraphic;

в createChildren создайте экземпляры и добавьте их:

protected function override createChildren():void{
 super.createChildren();
 buttonTextGraphic = new buttonTextGraphicClass()
 // set other properties
 addElement(buttonTextGraphicClass);
}

Наконец, в updateDisplayList() размер и положение элементов, примерно так:

buttonTextGraphic.x = 22
buttonTextGraphic.y = 6
buttonTextGraphic.width = unscaledWidth // or some other value
buttonTextGraphic.height = unscaledHeight // or some value

Таким образом, вы можете использовать точно такую ​​же кожу; просто заменяя экземпляры класса для ваших изменяющихся активов FXG во время выполнения.

Я предлагаю ознакомиться с жизненным циклом компонентов Flex. . Если у вас есть проблемы с Z-порядком; возможно, вам придется переключиться на создание всех дочерних элементов скина в ActionScript; или, возможно, используйте метод "addElementAt".

Чтобы приспособиться к различным состояниям в коде ActionScript, вам придется переопределить метод set currentState, чтобы вручную внести изменения в наше состояние, например изменить свечение или изменить альфа-канал.

Практически все, что я здесь описываю, представляет собой подход к созданию скинов ActionScript. Вам может быть полезно ознакомиться с некоторыми из существующих мобильных скинов Flex 4.5. Я бы начал с Mobile ButtonSkin. Я думаю, что граница — это актив FXG; который реализован с использованием подхода, аналогичного тому, что я здесь описываю.

person JeffryHouser    schedule 04.06.2011