Как вы динамически загружаете файл CSS в приложение Flex?

Я знаю, что вы можете применять CSS для стилизации объектов во Flex с помощью StyleManager:
http://livedocs.adobe.com/flex/3/html/help.html?content=styles_07.html

Вы также можете динамически загружать скомпилированные файлы CSS (SWF):
http://livedocs.adobe.com/flex/3/html/help.html?content=styles_10.html.

Однако я динамически создаю свои файлы CSS, используя веб-интерфейс и серверный скрипт. Если CSS изменен, скрипту также необходимо будет скомпилировать CSS в SWF (что не является приемлемым вариантом). Есть ли способ обойти это?


person Chris MacDonald    schedule 15.10.2008    source источник


Ответы (4)


Применение CSS в Flex обрабатывается на стороне сервера при компиляции, а не на стороне клиента во время выполнения.

Тогда я бы увидел для вас два варианта (я не уверен, насколько они практичны):

  1. Используйте сценарий на стороне сервера, чтобы скомпилировать ваш CSS как SWF, а затем загрузите их динамически.
  2. Разберите таблицу стилей CSS и используйте функции setStyle в flex для применения стилей. Примером, аналогичным этому подходу, является Flex Style Explorer, где можно ознакомьтесь с исходным кодом.

Удачи.

person Brandon    schedule 15.10.2008

В этом комментарии к связанной с этим проблеме в системе отслеживания ошибок Adobe Т. Бассер описывает, что может быть для вас жизнеспособным решением:

«Я создал небольшой класс, который будет« анализировать »файл CSS, прочитанный с помощью объекта HTTPService. Он разделяет строку, возвращаемую объектом HTTPService, разбивает ее на селекторы и создает новый объект CSSStyleDeclaration для каждого найденного селектора. После того, как все свойства назначены объекту CSSStyleDeclaration, он добавлен в StyleManager. Он не выполняет никаких проверок, вы должны убедиться, что файл CSS правильно сформирован, но этого будет достаточно на 99% Мои клиенты вряд ли будут использовать такие вещи, как @font, Embed () и ClassReference (). Им действительно нужна возможность изменять цвета и тому подобное, чтобы они могли легко настроить приложение Flex в своем домашнем стиле. "< / em>

Вы можете либо попытаться связаться с этим человеком для его решения, либо, возможно, использовать код из этого проекта as3csslib как основу для написания чего-то вроде того, что они описывают.

person hasseg    schedule 15.10.2008

Вы также можете реализовать динамическую таблицу стилей в Flex следующим образом. Здесь я нашел эту статью: http://askmeflash.com/article_m.php?p=article&id=6

person Community    schedule 01.04.2009
comment
Это сработало для меня - вместо использования parseCSS я сам проанализировал строку и установил каждое свойство, используя: StyleManager.getStyleDeclaration (Component) .setStyle (property, value); Что-то вроде взлома, ну да ладно ... - person onekidney; 06.04.2009

Изменить: это решение не работает. Все селекторы, взятые из парсера, переводятся в нижний регистр. Это может сработать для вашего приложения, но, вероятно, не будет ...

Я оставляю этот ответ здесь, потому что он может помочь некоторым людям в поиске решения и предупредить других об ограничениях этого метода.


См. Мой вопрос: «Ищу синтаксический анализатор CSS, написанный на AS3» для полное обсуждение, но я нашел синтаксический анализатор CSS, спрятанный внутри стандартных библиотек. Вот как это можно использовать:

public function extractFromStyleSheet(css:String):void {

    // Create a StyleSheet Object
    var styleSheet:StyleSheet = new StyleSheet();
    styleSheet.parseCSS(css);

    // Iterate through the selector objects
    var selectorNames:Array = styleSheet.styleNames;
    for(var i:int=0; i<selectorNames.length; i++){

        // Do something with each selector
        trace("Selector: "+selelectorNames[i];

        var properties:Object = styleSheet.getStyle(selectorNames[i]);
        for (var property:String in properties){

            // Do something with each property in the selector
            trace("\t"+property+" -> "+properties[property]+"\n");
        }
    }
}

Затем вы можете применить стили, используя:

cssStyle = new CSSStyleDeclaration();
cssStyle.setStyle("color", "<valid color>);
FlexGlobals.topLevelApplication.styleManager.setStyleDeclaration("Button", cssStyle, true);
person sixtyfootersdude    schedule 23.09.2011
comment
Почему вы публикуете ответ на вопрос, возраст которого превышает 2 года? - person Rob W; 24.09.2011
comment
@Rob Я нашел этот вопрос, выполнив поиск в Google, и подумал, что ответ был неполным. Мой ответ завершает вопрос и будет полезен для людей, нашедших вопрос (как и я) в Google. - person sixtyfootersdude; 26.09.2011