Cambiando Estilos de Temas de Sencha Extjs primeros pasos

Una de las razones por la que una persona no usa un framework x, y o z es por la simple razon de que a pesar de ser tan bueno es muy complejo modificar su estructura de colores y estilos, en si customizar a nuestro antojo el como las interfaces de usuario se veran cuando hayamos acabado de programar. Los sistemas web o aplicaciones web son mas que simples interfaces o funcionalidad pura son una herramienta para facilitar la vida a la gente con funcionalidad con un entorno amigable y sin complejidades para el usuario, el programador puede haber dedicado horas para lograr que un boton ejecute 500000 millones de acciones por segundo pero no solo es importante que esas acciones se realicen sino tambien que la interfaz grafica del sistema o aplicacion web lo reflejen para los ojos del usuario.

Temas que tenemos disponibles para modificacion:

-Clasico

Tema Clasico

Tema Clasico

-Neptuno

Neptune

Neptune

-Crisp

Crisp

Crisp

-Gray

Gray

Gray

-Triton

triton

Triton

Para poder probar todos estos temas en nuestro proyecto de aplicacion web debemos buscar el archivo app.json en la base del proyecto en ese archivo veremos todos y cada una de las configuraciones que podemos usar para darle nuevas caracteristicas  a nuestro proyecto.

Archivo app.json

Archivo app.json

Cuando modificamos este archivo obtenemos nuevas caracteristicas tales como cambiar el tema de nuestra aplicacion y eso se logra modificando las lineas donde se indica lo siguiente:

 

Temas y cambio de temas

Temas y cambio de temas

Dependiendo el toolkit sobre el que estemos trabajando o ambos si es el caso podemos elegir un tema a usar en nuestra aplicacion web. Por ejm donde dice “theme”: “theme-triton” podriamos usar “theme”: “theme-classic” y tendriamos el tema clasico en nuestra aplicacion por defecto seteado en toda la aplicacion.

Para que podamos ver esos cambios rapidamente y evaluar como se ven ejecutamos el comando:

>> sencha app watch

Y podremos poco a poco cambiar los temas y ver los cambios que ocurren poco a poco en la aplicacion.

Sencha app watch

Sencha app watch

Ver Video Parte 1

Ver Video Parte 1

Formas de usar un tema y estilo propio en nuestra aplicacion modificando:

-Tamaños y Espacios
-Colores
-Fuentes
-Iconos
-Bordes

Los detalles que se pueden modificar en el tema que se usa en la aplicacion tienen matices muy importantes pues pueden degenerar la aplicacion o mejorar la sensacion final del usuario. Por tanto sencha nos permite modificar estos atributos en funcion de los parametros que se pueden leer en la documentacion de Sencha ExtJs.

Ver Video Parte 2

Ver Video Parte 2

variables globales de scss

variables globales de scss

Dentro de la documentacion podemos ver muchas variables utiles en SASS que podemos  modificar para hacer el tema de nuestra eleccion mas acorde a nuestras necesidades.

Como modificar estilos y temas en Sencha ExtJS

Para hacer modificaciones substanciales necesitamos  tener conocimiento de SASS / Compass (http://sass-lang.com/) el sistema de generacion de css para Sencha ExtJS, es interesante el modo de uso de Sencha con las modificaciones de los temas.

SASS es un motor de creacion de css con gran facilidad de uso. Sass nos permite usar variables, selectores anidados, y funciones.

Los requerimientos para lograr nuestro cometido de modificar un tema son los siguientes:

-Java
-Ruby
-Sencha CMD
-ExtJS

Comandos Utiles

sencha -sdk /ruta_a_extjs/ generate workspace theme-demo

sencha sdk ext generate theme -e ext-theme-neptune my-custom-theme

sencha app watch

Modificacion de un tema

Para lograr este cometido debemos escribir variables con valores nuevos segun los valores que estan establecidos en la documentacion de sencha por ejemplo para el caso del Panel de Sencha ExtJS podemos modificar el archivo Panel.scss ubicando este archivo en sass/var/Panel.scss

En el archivo se debe escribir una linea como esta para poder modificar el padding de la cabecera del panel:

$panel-header-padding: 5px 10px !default;

En este caso $panel-header-padding es la variable dentro del standar del lenguaje de SASS y lo que le sigue despues de los dos puntos son los valores asignados a esa variable.

Escrito por Christian Portilla Pauca

Videos del proceso de cambio de estilos:

https://www.youtube.com/watch?v=7gx3xxE06KY

https://www.youtube.com/watch?v=nZYc9q316Oc

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s