Login de Sistema Creado en Sencha ExtJS 6
La codificacion de los controladores depende en si de como deseamos que funcione nuestra interfaz, asi que hay que definir que debe poder hacer en este caso nuestro formulario.
Ver Video de Como trabajar el controlador aqui:
Login de Sistema Creado en Sencha ExtJS 6
Lo primero que debemos hacer una vez que deseamos trabajar con Sencha ExtJS 6 es descargar la version adecuada del framework en funcion de nuestras necesidades, eso lo logramos en el siguiente link: https://www.sencha.com/legal/GPL/ ahi escogemos el framework damos el mail de usuario y seguidamente en nuestro correo habra un link a la version de ExtJS a descargar.
Seguidamente necesitan poder crear un proyecto basico de Sencha ExtJS, eso lo podran lograr siguiendo los lineamientos de un anterior post de este blog: https://javascriptx.wordpress.com/2015/07/12/proyecto-inicial-para-sencha-extjs-6-0/
y Tambien deberan conocer un poco de la estructura de los proyectos creados para Sencha Extjs 6, eso lo podran revisar en el siguiente link: https://javascriptx.wordpress.com/2015/07/23/estructura-de-un-proyecto-de-sencha-extjs-6-creado-con-sencha-cmd/
Pasos Iniciales Instanciar proyecto
Para quienes trabajen en linux como es mi caso deberan crear un archivo sh de linux donde indicaran el comando de generacion de proyecto:
>>sencha -sd /framework_ruta_a_ext-6.0.0/ generate app app06 app06
De este modo con esta linea de texto guardada en el archivo por ejm crear.sh
luego ejecutamos el siguiente comando:
sh crear.sh
Nota.- en el caso de ser usuarios de windows se puede hacer lo mismo con archivos de terminacion .bat
Codificacion
Debemos codificar archivos de interfaz asimismo como archivos de control (controladores).
Los archivos a definir en el presente proyecto seran :
Estas seran las vistas ubicadas en la carpeta app/view.
Veamos un poco del codigo necesario para LoginForm.js
Login Form cabecera de declaracion
Para declarar nuestra clase de interfaz LoginForm hacemos uso de Ext.define luego colocamos el nombre de nuestra clase en este caso LoginForm luego dentro de llaves ponemos extend para indicar que deseamos heredar de la clase Window para luego indicar el alias de nuestro componente en este caso widget.loginform.
requires para LoginForm
Seguidamente debemos incluir todos los requires necesarios para que nuestra vista tenga todas las dependencias listas para ejecucion.
Propiedades de LoginForm
Se incluye las propiedades necesarias como son el controller donde estara las funciones encargadas de la ejecucion correcta del formulario, tambien se debe hacer la llamada al viewmodel y demas propiedades a incluirse segun convenga en este caso.
Elementos graficos de LoginForm
En nuestra ventana se tendra como elementos de la misma un panel de formulario lo cual se indica con el parametro xtype seguido del alias del componente que usaremos en este caso form que equivale a decir form panel.
Elementos de formulario
Seguidamente debemos disponer de los elementos necesarios para que el formulario este completo. En el caso de este formulario no es necesario que los componentes o widgets de interfaz se les coloque una disposicion de layout a los componentes visuales pues en este caso es por defecto una disposicion vbox que automaticamente colocara cada elemento uno despues de otro.
Autor: Christian Portilla Pauca
Estructura de proyecto
La estructura de un proyecto de Sencha ExtJS, es una estructura base para poder codificar todo tipo de proyectos, y en si nos da la posibilidad de usar ambos toolkits como son el toolkit classic o el toolkit modern, o simplemente escoger cual usar. Ademas generandonos toda la estructura de proyecto ya no debemos preocuparnos por como configurar todo un proyecto de Sencha ExtJS pues ya esta configurado para funcionar y comenzar a codificar de una buena vez sin mas preocupaciones.
Ver Video Explicativo
Dentro de las multiples capacidades de Sencha ExtJS hay que destacar que hay utilidades que simplifican muchas cosas y nuevas implementaciones como son Promises para Ajax que son destacables esfuerzos por brindar facilidades al desarrollador.
Capacidades Heredadas de Sencha ExtJS
Dialogo Rotatorio
Desde implementaciones anteriores podemos encontrar estas caracteristicas que nos pueden ser muy utiles en multiples casos como son:
Clases .- El sistema de clases es una caracteristica que emula la creacion de clases en javascript de un modo parecido a crear clases en otros lenguajes de programacion.
Herencia .– El sistema de clases permite la definicion de clases que puedan tener herencia haciendo mucho mas sencilla la codificacion y reuso de codigo con Sencha ExtJS.
Singleton .- Esta caracteristica es muy poco comun en javascript debido al modo del alcance de las variables de javascript, sin embargo en Sencha ExtJS se puede usar para muchas cosas como pueden ser constantes o funciones estaticas que son muy utiles para las implementaciones de Interfaces de usuario.
Alias .- Esta caracteristica nos permite tener una creacion de objetos en funcion de los alias de cada componente de interfaz grafica, facilitando el uso de las clases en la implementacion de codigo sencillo.
Video Explicativo en el siguiente Link: https://www.youtube.com/watch?v=U0Gt7NIu5jQ
Capacidades Nuevas de Sencha ExtJS 6
Dentro de Sencha ExtJS 6 se puede destacar lo siguiente:
Promises .- Primero que nada, para este tema se necesita explicar un poco de como funciona ajax.
Como bien sabemos ajax funciona de forma asincrona osea que funciona independientemente a las llamadas propias de la aplicacion corriendo en el momento, por tanto no tiene relacion directa con el hilo de ejecucion de nuestra aplicacion pues corre de modo independiente para no paralizar nuestra aplicacion en todo caso aplicacion web para el caso que se discute aca. Esto en algunos casos trae latencias a la aplicacion si los datos, que estamos tratando de traer a nuestra aplicacion por medio de ajax son muy pesados o bien si nuestra conexion al servidor de datos esta teniendo una gran latencia para procesar y mandar los datos a la aplicacion cliente web, por tanto aca el problema es como dividir el problema y afrontarlo de la forma mas facil.
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.
https://www.youtube.com/watch?v=7kH2KSc20iA
Video De Comparativa
Como ya sabemos el desarrollo del framework Sencha ExtJS ha ido incrementando caracteristicas que en web no eran comunes ver en un framework por ejm la programacion basada en herencia en javascript pues javascript no tiene soporte para esa caracteristica de modo nativo sin embargo se puede simular en base a programacion.
Las version 4.2 del framework Sencha ExtJs permitieron ver nuevas funcionalidades y posibilidades de programacion basada en componentes como es charts, dibujo en web, programacion de modelos para datos complejos en javascript, tanto como un sistema de clases con una estructura rigida que asimismo permitia otras caracteristicas tales como herencia, tambien Extjs tenia una caracteristica sobradamente interesante la carga dinamica de codigo una ventaja para la programacion estructurada de codigo en javascript pues esa caracteristica es poco habitual de los frameworks web.
La creacion de un proyecto de Sencha ExtJS 6 usando Sencha CMD es bastante simple.
Hacemos la generacion de un proyecto de una forma relativamente sencilla como es usar el comando:
>> sencha -sd /ruta_a_framework_6.0/ generate app app03 app03
Ver Video
Una vez ejecutado el comando de generacion de proyecto nos genera nuestro proyecto que puede ser visualizado en el navegador de nuestra eleccion por medio del servidor de sencha que se ejecuta por medio del comando :
>> sencha web start
Luego dirigiendonos a la direccion: http://localhost:1841/ veremos nuestro proyecto basico tal como se visualiza aca abajo:
Esto ultimo que podemos ver son ejemplos de posibles colores que podemos usar para una interfaz de Sencha ExtJS 6.0.
Escrito por Christian Portilla Pauca
Link del video de la generacion del proyecto para Sencha ExtJS 6.0 : https://www.youtube.com/watch?v=rehxJnfpj78
La generacion del proyecto Sencha ExtJS 5 con Sencha CMD 6 es mas simple y facil solo debemos hacer uso del comando :
>> sencha -sd /ruta/a/framework/5.1 generate app app02 app02
Command Prompt
Como podemos ver en este video es simple el desarrollo del a generacion de la aplicacion para Sencha Extjs 5:
Lo que nos ofrece Sencha CMD es la opcion de generar proyectos listos para iniciar la programacion sin mas configuracion, ahorrandonos pasos intermedios de unir librerias crear la estructura del proyecto y demas cosas previas a la codificacion de nuestro proyecto en Sencha ExtJS 4.2.
Bueno los pasos necesarios para lograr la creacion de nuestro proyecto base en Sencha ExtJS 4.2 es usar Sencha CMD en linea de comandos de la siguiente forma, escribimos el comando :
>> sencha -sd /ruta/a/extjs4.2 generate app app01 app01
Sencha ExtJS 4.2
donde debemos pasar como parametro la carpeta donde esta el codigo del framework Sencha ExtJS en la version 4.2, y ademas agregamos al comando la orden de generar la app app01 en la carpeta app01. Con este comando immediatamente comenzara la generacion de nuestro proyecto minimo para Sencha ExtJS 4.2.
Escrito por Christian Portilla Pauca
Link del video : https://www.youtube.com/watch?v=Yj3KTt8Bhls&list=PLq0g-O2tr8LVLVo53aNKmYopIb7MYasAW&index=2
Desde los inicios del trabajo con proyectos de Sencha, Sencha CMD era lento para generar la estructura de los proyectos ahora su velocidad es mayor y tiene un mejor desempeño cuando se construye el aplicativo final por tanto vale la pena usarlo, el ultimo Sencha CMD ademas de ser mas sencillo de usar tambien es facil de instalar.
Lo que necesitamos para proceder con la instalacion es simplemente el instalador que podemos descargar de este url: https://www.sencha.com/products/extjs/cmd-download/ luego debemos tener preinstalado los requerimientos basicos de sistema para sencha CMD como son:
Ruby (https://www.ruby-lang.org/es/)
SASS / COMPASS (http://sass-lang.com/)
Java (http://www.oracle.com/technetwork/java/javase/downloads/index.html)
Para proceder con la instalacion simplemente se necesita descomprimir el archivo de instalacion que descargamos y luego en linea de comandos procedemos a usar el siguiente comando :
>> sh SenchaCmd-6.0.0.202-linux-i386.sh
Luego nos aparecera el dialogo de instalacion y procederemos a darle siguiente , luego aceptamos la licencia, despues le damos la ubicacion donde se instalara, y por ultimo dandole a siguiente procedemos a escoger todos los componentes de Sencha CMD a instalar, le damos siguiente y comienza instalacion.
Este proceso de instalacion basico lo podemos ver en el siguiente video:
Ver Video explicativo
Escrito por Christian Portilla Pauca
Direccion del video: https://www.youtube.com/watch?v=_MuCNm4l48E
Javascript , Desarrollo Web Y Codigo Fuente Libre para todo Uso 