Во-первых, я бы предложил использовать Flex 4, если вы еще не начали. Выпускается Flex 4 .
С Flex 4 они имеют совершенно новую архитектуру скинов . Это означает, что вы никогда больше не будете использовать программные скины. Кроме того, они имеют расширенных селекторов CSS , так что вы можете сделать намного больше с CSS во Flex 4. Программные скины в любом случае очень трудно сделать динамическими. В конечном итоге вы создадите архитектуру, подобную Flex 4 Spark Skins, если попытаетесь абстрагировать логику для программных оболочек.
Настройка
Чтобы сделать скины и стили Flex 4 максимально динамичными, выполните следующие действия:
- Палитры стилей: либо статические классы, либо файлы XML
- Пользовательские скины
- CSS
Стиль Palletes : Это статические классы, которые содержат все переменные, которые вы используете в CSS или скинах. Например, у вас может быть ColorPalette, который имеет все ваши цвета: public static const ColorPalette.BRIGHT_RED:uint = 0xff0000; и т. Д. Затем вы можете использовать их в Flex 4 Skins через связывание, например <mx:Button color="{ColorPalette.RED}"/>. Единственная проблема со статическими классами заключается в том, что они не являются динамическими (вы не можете определить для них произвольное количество цветов). То же самое с XML: вам придется жестко кодировать (в конечном итоге) определенную структуру XML, чтобы использовать их в скинах. Вы даже можете иметь XML, определяющий значения ColorPalette (так что ColorPalette.ACCENT_COLOR может быть установлен на что угодно из XML (золотой, ярко-синий или любой акцент). Забавные вещи.
Пользовательские скины : Flex 4 позволяет легко обрабатывать все Flex 4 и Flex 3 (сетка данных, аккордеон и т. Д.). Поэтому, если вам не нравится, как панели имеют только 1 тень и не имеют градиентов, вы можете добавить фон с 4 градиентами и 2 тенями (для 2 углов света) и, возможно, с некоторым эффектом опрокидывания. И тогда вы могли бы применить свой ColorPalette.BRIGHT_RED к тени (или свечение :)). И вы можете настроить XML для настройки параметров ColorPalette. Вот крутой кастом Flex 4 Skin
CSS : Тогда в CSS вы могли бы написать очень простой анализатор палитры, который бы применял ваши значения ColorPalette (например) к CSS. Проверьте Скин Degrafa CSS для некоторых примеров кода.
Performance
Единственная проблема с палитрами и CSS - это производительность. По определению статический класс и привязка снижают производительность. Привязка приводит к большому количеству событий, отправляемых в фоновом режиме, поэтому такие вещи, как <mx:Button color="{ColorPalette.RED}"/>, снижают производительность (конечно, это не заметно, поскольку существуют гораздо худшие приложения, такие как использование встроенных Adobe Tweens), но это в некоторой степени происходит.
То же самое с CSS. Во Flex каждый CSS-селектор (Panel { properties:values... } преобразуется в объект. Поэтому, если у вас есть 100 селекторов, вы получите не только 100 дополнительных объектов, но, по крайней мере, 100 дополнительных классов в вашем приложении! И это определенно увеличивает размер SWF. И все их свойства являются динамическими, и по определению динамические классы работают медленнее, чем нединамические классы. Плюс, установка стиля (с setStyle(property, value) во Flex очень медленная, потому что вам нужно перебрать все дочерние элементы. Если вы Если вы настраиваете стили через систему администратора (или что-то вроде Flex Style Explorer, как вы предложили), то вам все равно. Но поскольку они используют setStyle(), вы можете увидеть приличный прирост производительности при смене стилей.
Так, если бы производительность была очень большой проблемой, лучшим вариантом было бы жестко кодировать каждое значение стиля , а не изменять стили во время выполнения (кому это нужно делать в любом случае (если только вы не в разделе администратора) )?). Как вы жестко программируете стили, оставаясь при этом agile ? Используйте Palletes (ColorPalette.BRIGHT_RED) и т.п., и преобразуйте выражения привязки (<mx:Button color="{ColorPalette.RED}"/>) в статические объявления через некоторый препроцессор (я использую ruby для компиляции своих swfs, поэтому я просто сопоставляю шаблоны и заменяю) , Таким образом, он преобразует <mx:Button color="{ColorPalette.RED}"/> в <mx:Button color="0xff0000"/>, и вы получите повышение производительности.
В конце концов, лучше создать собственные скины и определить стили там:
- статические объявления
<mx:Button color="0xff0000"/>
- декларации палитры
<mx:Button color="{ColorPalette.RED}"/>
- xml объявлений
<mx:Button color="{myxml.@button_color}"/>
Затем вы можете определить некоторые действительно классные и продвинутые скины, связать их с палитрой или XML-файлом и отредактировать их. Попытка создать очень классную и модульную систему скинов / стилей с помощью Flash или Flex с использованием их встроенных компонентов не легка (и не желательна). Так что лучше
- создать набор скинов (и упаковать их как тему)
- провода скинов в xml
- разрешить пользователю изменять xml
Избегайте CSS, он слишком ресурсоемкий, если только вам не нужны расширенные селекторы, которые вы используете в HTML, потому что это облегчает жизнь. Но для модульности и настраиваемости (и производительности) создайте скины и соедините их с XML.
Я сам создаю базовую тему , которую я могу использовать во всех своих клиентских проектах, что определяет мой стиль. Он состоит из 3 пакетов (myskins, mx, spark). Там я копирую / вставляю все скины Flex 3/4 по умолчанию и начинаю настройку. Вы можете скачать Scale 9 Skin Project бесплатно, чтобы большинство компонентов было готово для обработки и тестирования. Затем я просто объединяю свой дизайн (фотошоп или что-то еще) с Flex по вашему выбору. Для всех цветов, которые я использую, я добавляю их в палитру и, в конечном итоге, в XML. Затем, если мне нужен немного другой скин, и я использую его несколько раз, я использую CSS, чтобы определить новый стиль для скина (возможно, список без цвета фона или рамки). Мой CSS очень скудный. Затем я могу просто скопировать / вставить мою тему / palettes / css в новые проекты, изменить ее по мере необходимости, позволить пользователю редактировать цвета и позиции с помощью XML (или интерфейса администратора), и я готов к работе.
Вы не можете так много сделать только с помощью CSS.
Надеюсь, это поможет.
Lance