Соглашения об использовании внешних стилей Flex - PullRequest
Новая
       14

Соглашения об использовании внешних стилей Flex

6 голосов
/ 13 октября 2009

Я знаю, что есть вопросы по этой же теме, но по HTML. Каковы некоторые хорошие соглашения в отношении использования внешних таблиц стилей в приложении Flex? Как бы вы разбили таблицы стилей (названия таблиц стилей и что они включают)?

Ответы [ 3 ]

2 голосов
/ 26 октября 2009

Flex компилирует внешний CSS-файл при публикации проекта.

Существует способ загрузить CSS во время выполнения, используя Flex; это можно сделать, скомпилировав CSS-файлы в SWF-файлы и загрузив их во время выполнения, используя StyleManager.loadStyleDeclarations.

См. LiveDocs на таблицах стилей во время выполнения для получения дополнительной информации.

1 голос
/ 16 февраля 2010

Некоторые соглашения, которые мы используем при организации таблиц стилей:

  • Имеется одна main.css таблица стилей, в которой хранятся все данные для создания оболочки основного приложения.
  • Имейте одну fonts.css таблицу стилей для хранения всех шрифтов в основном приложении, потому что они могут быть довольно грязными.

Таблица стилей main.css включена в основной swf через тег <mx:Style source="main.css"/>. Мы загружаем наше приложение как можно меньше, и как только все загружается, если нам нужно немедленно показать какой-то текст (иногда у нас просто воспроизводится видео, если это рекламный сайт), мы затухаем / анимируем основные элементы и загружаем fonts.css через StyleManager.loadStyleDeclarations во время выполнения.

  • Если у нас есть панель администратора, у нас есть таблица стилей admin.css, которую мы загружаем во время выполнения, потому что главное приложение не нуждается в ней.

Нам больше не нужно разделять CSS, потому что мы обычно создаем целый набор скинов в Theme , поэтому таблица стилей просто применяет эти скины к компонентам и довольно скудна ( используя Flex 4). Я не делю таблицы стилей на что-то меньшее (например, "pages.css", "comments.css", "popups.css" или даже "controls.css" и т. Д.), Потому что это будет излишним и слишком сложным для управления за немного взамен. Это обычное дело для HTML, но это потому, что HTML требует CSS для хорошей презентации; Flex может обойтись без CSS полностью.

При разработке один из нас, как правило, разрабатывает большую часть скина сразу (с настройкой каркаса по умолчанию, подобной тем, которые можно найти в ScaleNine , поскольку они делают photoshop / flash / After-Effects. Нет никакого способа не нужно перекомпилировать SWF-файл CSS, если вы вносите изменения, но если он загружен во время выполнения, вам нужно только перекомпилировать файл CSS, а не основной SWF-файл, который полезен, но не очень полезен при разработке хардкорного скина.

Я пытался держать основную таблицу стилей отдельно во время разработки (в пользовательской теме), и это усложняло разработку LOT, потому что мне приходилось перекомпилировать css отдельно каждый раз, когда я вносил изменения, а иногда мне приходилось перекомпилировать основное приложение также были странные и трудно выявляемые ошибки и т. д. Затем я собирал два разных приложения. Поэтому я рекомендую оставить основной файл CSS частью основного приложения.

Если вы хотели, чтобы css во время выполнения без необходимости что-либо перекомпилировать, попробуйте Ruben's CSS Loader и проверьте источник . Но это может привести к снижению производительности во время выполнения.

0 голосов
/ 25 октября 2009

С Flex я не сталкивался, но я провел некоторые исследования. Похоже, код для вызова удаленной таблицы стилей выглядит так: 

<mx:Style source="com/example/assets/stylesheet.css" />

Быстрый старт Flex: создание простого пользовательского интерфейса: стилизация ваших компонентов говорит следующее:

Примечание: вы должны попытаться ограничить количество таблиц стилей, используемых в приложение и установить таблицу стилей только в документе верхнего уровня в приложение (документ, который содержит тег). Если Вы устанавливаете таблицу стилей у ребенка документ, неожиданные результаты могут происходят.

Смысл этого, по-видимому, заключается в том, что множественные таблицы стилей на самом деле невозможны. Похоже, что вы хотите сделать, это организовать ваши таблицы стилей, посмотрите Организация ваших таблиц стилей и Архитектура CSS для некоторых идей для подходов. Похоже, у вас есть классы и основные теги, но спецификации таблицы стилей W3C отличаются от спецификации таблицы стилей Flex.

Будучи не-Flex разработчиком, Пространства имен выглядят интересными как способ организации пространств имен: Как использовать новый синтаксис CSS во Flex 4 .

...