ExtJS-Instalando Sencha CMD

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

http://www.sencha.com/products/sencha-cmd/download/

Descargar Sencha ExtJS

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:

Instalacion de Sencha CMD

Instalacion Sencha CMD. Aceptar condiciones

Instalacion de Sencha CMD. Seleccion de directorio2015-05-30_13h55_22

y se inicia la instalación

Sencha CMD Progreso de instalacion

hasta que, en pocos minutos finaliza:

Sencha CMD. Finaliza la instalacion

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.

verificando Sencha CMD

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:

2015-08-05_09h39_16

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

2015-08-05_10h43_03

Y a continuación, creamos el “VirtualHost” correspondiente

Creacion del virtual hostEn (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

Arrancando apacheSi esta parado, solo tenéis que pulsar “Start” y en segundos, os indicará que está funcionando,

Arrancando ApacheEmpezando 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:

Sencha CMD. Generacion de la aplicacion

y genera en la carpeta indicada la siguiente estructura:

Estructura aplicacion Sencha CMD

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:

Primera aplicacion con sencha CMD

 

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

Vista de la aplicacion Sencha CMD con Firefox

 

 

A partir de aquí, podemos empezar a trabajar nuestra nueva aplicación, y lo haremos en el próximo artículo

 

 

 

Acerca de Miguel Garcia

Programador, Desarrollador web, Formador en distintas areas de informatica y director de equipos multidisciplinares.
Esta entrada fue publicada en Formacion, Framework Sencha ExtJS, Javascript y etiquetada , . Guarda el enlace permanente.

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.