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
Respuesta
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.
Gracias por la información sobre el uso de la hoja de estilo en el nivel superior de la aplicación – asawilliams
¿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
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
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.
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.
- 1. ¿Las hojas de estilo externas se cargan antes del HTML?
- 2. ¿Cómo puedo acceder a las propiedades de estilo en objetos JavaScript que usan hojas de estilo externas?
- 3. ¿Ordenando hojas de estilo de Wordpress?
- 4. ¿Hojas de estilo para el contenido?
- 5. Combinar varias hojas de estilo xslt
- 6. Cargando hojas de estilo en Sinatra
- 7. Limpiador CSS para "desplegar" hojas de estilo?
- 8. Hojas de estilo condicional en IE9
- 9. Hojas de estilo dinámicas usando Razor
- 10. Importancia de la jerarquía de hojas de estilo css
- 11. Convenios de nomenclatura de instancias de instancia en Cocoa
- 12. Rails3 de tuberías activo: controlador de hojas de estilo específicas
- 13. Cambiar el formato de hojas de estilo css en Eclipse
- 14. ¿Se cargan hojas de estilo CSS de forma asíncrona
- 15. Carga y descarga dinámicamente de las hojas de estilo
- 16. Uso de QStyledItemDelegate múltiple con hojas de estilo
- 17. Imprimir hojas de estilo para páginas con tablas horizontales largas
- 18. Pantalla y hojas de estilo para dispositivos móviles
- 19. jquery insertando todas las hojas de estilo en iframe
- 20. Rails asset pipleline: compilar en varias hojas de estilo
- 21. LocalStorage HTML5 para activos (hojas de estilo, JavaScript, imágenes, etc.)
- 22. Cómo agregar hojas de estilo en IE usando jQuery?
- 23. ¿Cómo doy estilo a un widget Qt, no a sus hijos con hojas de estilo?
- 24. Cómo tomar el control de las hojas de estilo en ASP.NET Temas con la StylePlaceHolder y Estilo de control
- 25. hojas de estilo de CSS de proveedor en Rails 3.1 y la canalización de activos
- 26. Analizador de CSS/HSS en Treetop y reglas de hojas de estilo anidadas
- 27. ¿Ejemplos de hojas de estilo de alto contraste y baja visión?
- 28. Parámetros de hoja de estilos XSLT en hojas de estilo importadas
- 29. Uso de Compass en Heroku:/tmp para hojas de estilo de forma remota y local
- 30. Establecer el tamaño de fuente del título de QGroupBox con hojas de estilo
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