Максим «Slon_vsapogah» Качуровский

Flash, Flex и много ActionScript

2009-10-06 00:15 , Рубрики: Development, Flex, ActionScript 3.0

Проблема

При использовании нескольких внешних файлов стилей все они являются copy-paste одного шаблона с разными цветами/картинками. Из этого следует, что:

Каждый из SWF стилей может занимать от 30 Кб до 300 и более Кб, в то же время очевидно что их код во многом совпадает. Хотелось бы не грузить одно и тоже.
Из-за отсутствия настоящей иерархии в стилях одни и те же цвета приходится указывать в множестве мест
Создание нового стиля - нудная работа по копи-пасту и замене цветов и картинок по всему (возможно - огромному) CSS-файлу
Нельзя дать сторонним разработчикам возможность делать свои стили - ведь классы и селекторы переименовываются, добавляются новые. В то время по сути цвета и картинки остаются те же.
Нельзя дать пользователю возможность настроить приложение под свои цвета.

Решение

Решение работает по той же схеме, что и недавний пост про изменение размера текста в приложении.

Вместо указаний явных значений для стилей вроде “backgroundColor", “color", “borderThickness” - указываются идентификаторы значений ("color1″) для стилей “backgroundColorId", “colorId", “borderThicknessId” а реальные значения в них проставляются в процессе выполнения:

Application
{
        colorId: "color4";
        fontSize: 12;
        backgroundColorId: "color0";
}

Стиль можно задать следующим образом:

private var style1:Object = 
{
        color0: 0x222222,
        color1: 0x333333,
        color2: 0x666666,
        color3: 0xAAAAAA,
        color4: 0xDDDDDD
};
 

View Source

Код применения нового стиля:

/**
 *  Applies style to the application.
 * 
 *  @param object Keys are Strings like "color1", values are real style 
 *  values ex. "0xFFCC00". 
 */
private function applyStyle(object:Object):void
{
    var selectors:Array = StyleManager.selectors;
    var bitmapClassCacheIndex:int = 0;
    var n:int = selectors.length;
    for (var i:int = 0; i < n; i++)
    {
        var selector:String = selectors[i];
        var declaration:CSSStyleDeclaration = 
            StyleManager.getStyleDeclaration(selector);
        for each (name in idAttributes)
        {
            var idValue:String = declaration.getStyle(name + "Id") as String;
            if (!idValue)
                continue;
            if (object[idValue] is BitmapData)
            {
                var bitmapClass:Class = RuntimeBitmapAsset.bitmapDatas[idValue];
                if (!bitmapClass)
                {
                    bitmapClassCacheIndex = 
                        bitmapClassCacheIndex % bitmapClassCache.length;
                    bitmapClass = bitmapClassCache[bitmapClassCacheIndex++];
                    RuntimeBitmapAsset.bitmapDatas[getQualifiedClassName(
                        new bitmapClass())] = object[idValue];
                }
                declaration.setStyle(name, bitmapClass);
            }
            else if (object.hasOwnProperty(idValue))
            {
                declaration.setStyle(name, object[idValue]);
            }
            else 
            {
                declaration.clearStyle(name);
            }
        }
        StyleManager.setStyleDeclaration(selector, declaration, i == n - 1);
    }
}