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

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

1 голос
/ 04 июня 2011

Пользовательский интерфейс в моем приложении использует множество кнопок, которые в основном одинаковы, за исключением графики 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, специфичными для каждой кнопки, но я не уверен, как лучше всего это сделать.

1 Ответ

2 голосов
/ 04 июня 2011

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

public var buttonTextGraphicClass : Class;

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

public var buttonTextGraphic : Class;

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

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 Component LifeCycle .Если у вас есть проблемы Z-Order;вам, возможно, придется переключиться на создание всех потомков скина в ActionScript;или, возможно, использовать метод "addElementAt".

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

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

...