Aunque anteriormente ya he presentado este Framework, quizás lo hice de forma un poco apresurada, y creo que las posibilidades que nos ofrece son lo suficientemente interesantes como para encarar unos cuantos artículos,analizando con detalle sus posibilidades,y en lo que nos puede ayudar,y sobre todo su herramienta CMD
Realmente, y como Framework de cliente que es, ExtJs no precisa instalación para que funcione. Otro tema distinto es Sencha CMD, ya que se trata de una herramienta para apoyar el desarrollo; por lo que sera conveniente instalarla en nuestra maquina de desarrollo para:
- Disponer de una herramienta que ayude a generar código y luego extenderlo con componentes MVC
- Compilador de código JS perfectamente adaptado a ExtJs
- Servidor web «ligero» para facilitar las pruebas
- Sistema de empaquetado para poder distribuir las aplicaciones en App stores
- Gestión de paquetes, para ayudar en la integración con paquetes de terceros desde Sencha Package Repository
- Sistema de optimización de componentes
- Gestión de comparticion de código entre distintos desarrollos
- Generación de imágenes para navegadores que no soporten CSS3
- Sistema de loggins
- Versión compatible de Compass, Sass y Apache Ant
- …
Preparando e instalando Sencha CMD
Antes, podéis aseguraros que tenéis instalado JRE 1.7, y Ruby, y sus ejecutables en vuestro Path, luego, podéis descargarlo de
Una vez en vuestro ordenado, debéis extraer el fichero del Zip, os bastara clicar con el botón derecho del Mouse y seleccionar «Extraer aquí», a continuación lanzáis el fichero extraído, con permisos de administrador, y se inicia el clásico proceso:
y se inicia la instalación
hasta que, en pocos minutos finaliza:
Aquí, ya podéis pulsar en «Finalizar» («Finish»), y tendréis instalado en vuestra máquina el Framework ExtJs
Para comprobar la instalación, abrimos una pantalla DOS, y escribimos «sencha», y veremos aparecer algo semejante a la imagen que viene a continuación.
Instalando y configurando XAMPP
El siguiente paso es instalar XAMPP sino lo tenéis ya, y siempre que querais disponer de un entorno de desarrollo completo, ya que si no, nos basta con el servidor que trae CMD, y nos saltamos todo este apartado. En este articulo explico como instalar XAMPP en windows y en este otro, como instalar XAMPP en Centos.
Como a partir de ahora, voy a utilizar rutas concretas para seguir con los ejemplos, os invito también a que leáis como tengo configurada mi maquina de desarrollo, y como se pueden crear los «VirtualHost» en XAMPP
Y a continuacion, crearemos nuestro «VirtualHost» para estas pruebas, y lo llamaremos:
pExtJs.local (de pruebas ExtJs)
Para ello, abrimos el fichero host (ver los articulos mencionados anteriormente) y escribimos:
para que podamos escribir en nuestro navegador «pExtJs.local».
Nos creamos la carpeta en la que vamos a trabajar; lo que voy a hacer es crear una carpeta genérica para todos los artículos que escriba de ExtJs
Y a continuación, creamos el «VirtualHost» correspondiente
En (1) debemos indicar la ruta a la carpeta creada, y en (2), le indicamos el nombre de nuestra web, que deberá coincidir con el que hayamos indicado en el fichero host, anteriormente. En (3) le indicamos las condiciones de seguridad a aplicar a la carpeta, que de momento con las que aparecen escritas nos basta
Podemos reiniciar Apache, si queréis, con el cuadro de control que os dejó la instalación
Si esta parado, solo tenéis que pulsar «Start» y en segundos, os indicará que está funcionando,
Empezando a utilizar Sencha CMD
Una de las cosas que nos va a hacer CMD es generar una estructura de directorio para nuestra aplicación, y ademas, descargara la ultima versión de las librerías de ExtJS.
Si habéis comprado la versión comercial, o no queréis que os descargue las librerías para cada aplicación, podéis especificar la ruta en donde tenéis el framework descargado por medio del parámetro «-sdk».
Podéis abrir una ventana del ejecutor de comandos, y desplazaros a la carpeta del proyecto; en este caso
D:\ProyectosCursos\extjs\ejercicio1
y lanzamos el comando:
D:\…ejercicio1> sencha generate app -ext MiApp1 mi-app
que producirá la siguiente salida:
y genera en la carpeta indicada la siguiente estructura:
Dado que el sistema genera una pequeña aplicación, ya podríamos verla, pero antes, levantaremos el servidor que viene con Sencha; ¿motivo?, conocer otro servidor.
Por lo que sabemos, nuestra aplicación esta en:
D:\ProyectosCursos\extjs\ejercicio1\mi-app
de forma que abrimos una ventana de comandos, y nos situamos en ese directorio, y a continuación lanzamos
D:\Pro…mi-app>sencha app watch
que nos generará la aplicación y quedara a la espera de que modifiquemos cosas, por ejemplo, para volver a generarla, o que nos conectemos con el navegador; cosa que hacemos con
http://localhost:1841
y nos aparece la aplicación:
Si, por el contrario, quisiéramos utilizar nuestro flamante Apache, que instalamos con XAMPP, nos basta con escribir en la barra de navegación:
http://pextjs.local/ejercicio1/mi-app/
para conseguir la misma pantalla
A partir de aquí, podemos empezar a trabajar nuestra nueva aplicación, y lo haremos en el próximo artículo
Descubre más desde Recursos para formacion
Suscríbete y recibe las últimas entradas en tu correo electrónico.
