¿Cómo se carga dinámicamente un archivo CSS en una aplicación Flex?

Question

Sé que puedes aplicar CSS para dar estilo a objetos en Flex usando StyleManager:
http://livedocs.adobe.com/flex/ 3 / html / help.html? Content = styles_07.html

También puede cargar compilados archivos CSS (SWF) de forma dinámica:
http://livedocs.adobe.com/flex/ 3 / html / help.html? Content = styles_10.html

Sin embargo, estoy creando dinámicamente mis archivos CSS utilizando una GUI web y un script del lado del servidor. Si se cambia el CSS, el script también deberá compilar el CSS en un SWF (que no es una opción viable). ¿Hay alguna forma de evitar esto?

Answer 1

La aplicación de CSS en Flex se maneja en el lado del servidor en la compilación y no en el lado del cliente en tiempo de ejecución.

Vería dos opciones para usted (no estoy seguro de lo prácticas que sean):

1. Use un script del lado del servidor para compilar su CSS como SWF y luego cárguelos dinámicamente.
2. Analiza una hoja de estilo CSS y usa las funciones setStyle en flex para aplicar los estilos. Un ejemplo similar a este enfoque es el Flex Style Explorer donde puede echa un vistazo a la fuente .

Buena suerte.

Answer 2

En este comentario a un problema relacionado con esto en el Adobe bug tracker T. Busser describe lo que podría ser una solución viable para usted:

  

" He creado una clase pequeña que "analizará" un archivo CSS leído con un   Objeto HTTPService. Desarma el   cadena que es devuelta por el   HTTPService objeto, descomponerlo en   selectores, y crear un nuevo   Objeto CSSStyleDeclaration para cada   Selector que se encuentra. Una vez que todo el   Las propiedades se asignan a la   Se ha agregado el objeto CSSStyleDeclaration   al StyleManager. No lo hace   realizar cualquier verificación, debes hacer   Seguro que el archivo CSS está bien formado, pero   Será suficiente el 99% del tiempo.   Cosas como @font, Embed () y   ClassReference () difícilmente se utilizará   por mis clientes. Ellos necesitan el   capacidad de cambiar colores y cosas   así para que puedan fácilmente tema el   Aplicación flexible a su casa.   estilo. "

Puede intentar contactar a esta persona para obtener su solución o, alternativamente, usar el código de this as3csslib proyecto como base para escribir algo como lo que están describiendo.

Answer 3

También puede implementar una hoja de estilo dinámica en flex como esta. Aquí encontré este artículo: http://askmeflash.com/article_m.php?p=article&id=6

Answer 4

Editar: esta solución no funciona. Todos los selectores que se sacan del analizador se convierten a minúsculas. Esto puede funcionar para su aplicación, pero probablemente no ...

Dejo esta respuesta aquí porque puede ayudar a algunas personas a buscar una solución y advertir a otras sobre las limitaciones de este método.

---

Vea mi pregunta: " Buscando el analizador CSS escrito en AS3 " para una discusión completa, pero encontré un analizador CSS oculto dentro de las bibliotecas estándar. Así es como puede usarlo:

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");
        }
    }
}

Luego puedes aplicar los estilos usando:

cssStyle = new CSSStyleDeclaration();
cssStyle.setStyle("color", "<valid color>);
FlexGlobals.topLevelApplication.styleManager.setStyleDeclaration("Button", cssStyle, true);