2009-10-13 12 views
6

Sé que hay preguntas sobre este mismo tema, pero para HTML. ¿Cuáles son algunas buenas convenciones con respecto al uso de hojas de estilo externas en una aplicación Flex? ¿Cómo dividirías las hojas de estilo (nombres de las hojas de estilo y lo que incluyen)?Flex Convenios de hojas de estilo externas

+0

Otra pregunta relacionada: ¿Hay alguna manera de hacer el CSS fuera del archivo compilado, de modo que cuando uno cambia el CSS, la aplicación Flex cambie sin recompilación? – ustun

Respuesta

0

Flex no es algo con lo que haya tratado, pero investigué. Parece que el código para llamar a una hoja de estilo a distancia es la siguiente:

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

Flex Quick Start: Building a simple user interface: Styling your components dice esto:

Nota: Usted debe tratar de limitar el número de hojas de estilo utilizadas en una aplicación , y configure la hoja de estilos solo en el documento de nivel superior en la aplicación (el documento que contiene la etiqueta). Si establece una hoja de estilo en un documento secundario, pueden ocurrir resultados inesperados .

La implicación de esto parece ser que múltiples hojas de estilo no son realmente posibles. Parece que lo que quieres hacer es organizar tus hojas de estilo, echa un vistazo a Organizing Your Stylesheets y Architecting CSS para obtener algunas ideas para los enfoques. Parece que tiene clases y etiquetas básicas, pero el W3C stylesheet specifications es diferente de la especificación de hojas de estilo Flex.

Como desarrollador que no es Flex, Namespaces parece interesante como una forma de organizar espacios de nombres: How to use the new CSS syntax in Flex 4.

+0

Gracias por la información sobre el uso de la hoja de estilo en el nivel superior de la aplicación – asawilliams

+0

¿Alguna de las respuestas resolvió el problema? Si es así, considere aceptar la buena respuesta. Si necesita más información, considere actualizar la pregunta para ayudar a la gente a obtener una respuesta que pueda aceptar. – artlung

+0

El artículo "Organizing Your Stylesheets" aborda la cuestión de cómo organizar los archivos css, pero no parece relevante para Flex. Por lo tanto, no puedo aceptar la respuesta – asawilliams

2

Flex compila el archivo CSS externo cuando publica su proyecto.

Hay una forma de cargar CSS en tiempo de ejecución mediante Flex; se puede hacer compilando archivos CSS en archivos SWF y cargándolos en tiempo de ejecución usando StyleManager.loadStyleDeclarations.

Consulte LiveDocs on Stylesheets at Run Time para obtener más información.

1

Algunas convenciones que utilizamos en la organización de las hojas de estilo:

  • Tiene una hoja de estilo main.css que contiene todos los datos para despellejar la aplicación base.
  • Tenga una hoja de estilo fonts.css para almacenar todas las fuentes en la aplicación principal, ya que pueden ser bastante complicadas.

La hoja de estilos main.css está incluida en el archivo swf principal mediante la etiqueta <mx:Style source="main.css"/>. Cargamos nuestra aplicación lo menos posible, y una vez que todo está cargado, si necesitamos mostrar un texto de inmediato (a veces solo tenemos un video reproduciendo si es un sitio publicitario), nos desvanecemos/interpolamos en los elementos principales y cargamos el fonts.css a través de StyleManager.loadStyleDeclarations en tiempo de ejecución.

  • Si tenemos un panel de administración, tenemos una hoja de estilo admin.css la que cargamos en tiempo de ejecución debido a que la aplicación principal no lo necesita.

No necesitamos dividir el CSS más que eso, ya que suelen crear todo un conjunto de pieles en un Theme, por lo que la hoja de estilo es sólo la aplicación de esas pieles de componentes y es bastante magra (con Flex 4)No suelo dividir las hojas de estilo en algo más pequeño (como "pages.css", "comments.css", "popups.css", o incluso "controls.css", etc.) porque sería excesivo y demasiado difícil de administrar por poco a cambio. Eso es común con HTML, pero eso es porque HTML requiere CSS para una buena presentación; Flex podría prescindir de CSS por completo.

Durante el desarrollo, uno de nosotros usualmente desarrolla la mayor parte de la máscara de inmediato (tiene una configuración de estructura predeterminada, como las que se encuentran en ScaleNine como lo hacen con photoshop/flash/after effects. No hay forma de no tener que recompilar el css swf si realiza cambios. Pero si se carga en tiempo de ejecución, solo tiene que volver a compilar el archivo css y no el swf principal, que es útil pero no realmente útil durante el desarrollo de skin hardcore.

Intenté mantener el la hoja de estilos principal se separó durante el desarrollo (en un tema personalizado), y eso hizo que el desarrollo fuera mucho más difícil, porque tenía que recompilar el css por separado cada vez que hacía un cambio y a veces también tenía que recompilar la aplicación principal, y había errores difíciles de rastrear, etc. Luego fui comp iling dos aplicaciones diferentes. Así que recomiendo mantener el archivo css principal como parte de la aplicación principal.

Si desea tiempo de ejecución css sin tener que volver a compilar nada, intente Ruben's CSS Loader y revise the source. Pero eso vendría a un costo de rendimiento en tiempo de ejecución.

Cuestiones relacionadas