| « Увеличение размера проекта при переходе на Flex SDK 4 | Runtime иконки для Flex-компонент » |
Другой подход к стилизации Flex-приложения
Проблема
При использовании нескольких внешних файлов стилей все они являются 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
- };
Код применения нового стиля:
- /**
- * 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);
- }
- }
Трекбек адрес этой записи
URL трекбека (щелкните правой кнопкой мыши и скопируйте ссылку)
1 комментарий
Более того, во флексе уже есть встроенный механизм задания цветов-как-строк: StyleManager.registerColorName(colorName:String, colorValue:uint):void 





