style - incluir archivo css html

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

Question

Sé que puedes aplicar CSS para diseñar objetos en Flex usando StyleManager:
http://livedocs.adobe.com/flex/3/html/help.html?content=styles_07.html

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

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

Answer 1

En este comentario a un problema relacionado con esto en el rastreador de errores de Adobe T. Busser está describiendo lo que podría ser una solución viable para usted:

"Creé una clase pequeña que ''analizará'' una lectura de archivo CSS con un objeto HTTPService. Descompone la cadena que devuelve el objeto HTTPService, la divide en selectores y crea un nuevo objeto CSSStyleDeclaration para cada selector Una vez que todas las propiedades se asignan al objeto CSSStyleDeclaration, se agrega al StyleManager. No realiza ninguna comprobación, debe asegurarse de que el archivo CSS esté bien formado, pero será suficiente el 99% del tiempo. Cosas como @font, Embed () y ClassReference () difícilmente serán utilizadas por mis clientes. Necesitan la capacidad de cambiar colores y cosas así para que puedan fácilmente adaptar la aplicación Flex al estilo de su casa ".

Puede tratar de ponerse en contacto con esta persona para su solución o, alternativamente, utilizar el código de este proyecto as3csslib como base para escribir algo así como lo que están describiendo.

Answer 2

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

Entonces vería dos opciones para ti (no estoy seguro de qué tan prácticas son):

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

Buena suerte.

Answer 3

También puede implementar hojas de estilo dinámicas 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 extraen 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 otros de las limitaciones de este método.

Vea mi pregunta: " Buscando el analizador de CSS escrito en AS3 " para una discusión completa, pero encontré un analizador de CSS oculto dentro de las bibliotecas estándar. Aquí es cómo puedes 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");
        }
    }
}

A continuación, puede aplicar los estilos usando:

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