Red de conocimiento informático - Material del sitio web - Cómo embellecer sus aplicaciones con estilo en ExtJS 6

Cómo embellecer sus aplicaciones con estilo en ExtJS 6

En Ext JS 6, uno de los mayores cambios es la integración del framework, que permite desarrollar las mejores aplicaciones con una gran experiencia para cada dispositivo utilizando una única base de código. También trae nuevas formas de embellecer sus aplicaciones.

Este artículo se centra en Sencha Fashion. ¿qué es? ¿Cómo utilizar? En el siguiente tutorial, le mostraremos cómo crear un excelente tema oscuro.

Compilación de temas

Los temas para aplicaciones Ext JS utilizan SASS, un método para escribir código CSS dinámicamente. Por ejemplo, puedes utilizar variables y acciones en hojas de estilo. Los navegadores no entienden SASS, sólo entienden CSS. Por lo tanto, estos temas SASS deben compilarse en código CSS que el navegador pueda comprender y generar. En una aplicación Ext JS, el tema se puede compilar ejecutando el siguiente comando en Sencha Cmd:

ver código fuente?

1.sencha app build [desarrollo]

o

¿ver código fuente?

1.sencha app watch [kit de herramientas]

La diferencia entre los dos es que Watch sondeará las actualizaciones y las entenderá. como una compilación, mientras que la compilación solo se puede realizar manualmente una vez.

En versiones anteriores de Ext JS o Sencha Touch, los estilos SASS se compilaban en Ruby. En Windows, necesitas instalar Ruby con derechos de administrador. Una vez que se completa la instalación, puede comenzar a compilar el tema. Sin embargo, cuando hay grandes bases de código y temas avanzados, la compilación puede llevar mucho tiempo.

La compilación de temas avanzados a veces lleva un minuto. Luego debe actualizar la ventana del navegador para probar el tema y asegurarse de que las variables SASS estén configuradas correctamente. Luego hay que repetir este proceso una y otra vez. Tenga en cuenta que este proceso lleva bastante tiempo. Por eso usar Moda es un placer.

Sencha Fashion usa javascript para compilar el tema, lo que se puede decir que es súper rápido. Cuando una línea de código cambia en el monitor izquierdo, puedes ver el cambio en el monitor derecho, es así de rápido. Ya no tendrá que esperar a que se complete la compilación (comenzando desde el servidor) ni actualizar la ventana del navegador.

Como Fashion usa javascript, tiene más ventajas. Por ejemplo, puede ampliar y crear sus propias funciones de estilo basadas en Moda (similares a las funciones SASS) y puede depurar el código de la hoja de estilo.

Sin embargo, su mayor ventaja es la capacidad de diseñar temas en la máquina de desarrollo. Para hacer esto, simplemente ejecute sencha app watch desde la línea de comando y agregue los siguientes parámetros a la URL:

view sourceprint?

platformTags=fashion:true