Integrando Extjs 4.2 y Netbeans 8.2 utilizando Sencha CMD

En esta ocasión vamos a ver n ejemplo de cómo integrar Extjs y Netbeans utilizando la utilidad de comando Sencha CMD.
Los pasos que vamos a seguir serán los siguientes:

1. Creamos un proyecot MVC con Sencha CMD(se debe tener instalado Sencha CMD para lograr este objetivo)
2. Crear un Proyecto HTML5 utilizando "HTML5 Application with Existing Source"
3. Crear un Proyecto Java Web(Web Application)
4. Integrar los proyecto HTML5 y Java Web
5. Crear un Theme personalizado con Sencha CMD

Bueno manos a la Obra:

Creando el Proyecto MVC con Sencha CMD

Vamos a crear un proyecto con Sencha CMD utilizando Extjs4.2, también podemos crear utilizando Extjs5, pero para fines de ejemplo lo haremos con la versión 4.2, yo tengo instalado en mi maquina Sencha CMD 5,para poder utilizarlo con extjs, nos dirigimos al directorio donde tenemos instalado extjs en mi caso seria: "D:\GWT\ext-4.2.2-gpl\ext-4.2.2.1144".

Abrimos la consola de comandos en este directorio tal y como se muestra en la siguiente imagen:

Ahora ejecutamos el siguiente comando para generar la aplicación con Sencha CMD:
sencha generate app Demo D:\GWT\DEMOS\DEMOSTRACION

Esta secuencia de comando lo que hace es generar toda la estructura de nuestro proyecto Extjs en el directorio "D:\GWT\DEMOS\DEMOSTRACION", lo siguiente que tenemos que hacer es crear nuestro proyecto HTML5 en Netbeans.

Crear un Proyecto HTML5 utilizando "HTML5 Application with Existing Source"

Abrimos Netbeans, hacemos click en el botón "New Project":

Seleccionamos "HTML5", y en la lista de proyectos seleccionamos "HTML5 Application with Existing Source":

En el campo "Site Root" debemos color el directorio donde están los archivos de código fuente de nuestra aplicación creada con Sencha CMD, en Netbeans nuestro proyecto tendrá la siguiente estructura:

Ahora Procedemos a crear nuestro proyecto "Java Web".

Crear Proyecto Java Web(Web Application)

Ahora vamos a crear un proyecto "Web Application" en netbeans tal cual se muestra en las siguientes imágenes:

Ahora tendremos dos proyectos en Netbeans, en el proyecto Java Web es donde tendremos la lógica de negocio y la comunicación con el servidor atravez de objetos que extiendan de la clase "HttpServlet" , y en el proyecto HTML5 es donde estará nuestra capa de presentación, la cual estará diseñada utilizando objetos de extjs contenido en archivos de JavaScript,la imagen a continuación muestra como estaría nuestro árbol de proyectos en Netbeans:

Ahora solo nos queda integrar estos dos proyectos, para que cuando construyamos la aplicación HTML5 con Senha CMD, todo el código compilado se refleje en el proyecto Java Web.

Integrar los proyectos HTML5 y Java Web

Para integrar los proyectos, vamos a modificar el archivo "build.xml" del proyecto HTML5, adicionando las siguientes sentencias:

<target name="-after-build">
<copy todir=" D:/GWT/DEMOS/DemoExtJs/web ">
<fileset dir="${build.dir}"/>
</copy>
</target>

Con esto simplemente le estamos diciendo que cuando termine la construcción del proyecto , todo se copie al directorio "D:/GWT/DEMOS/DemoExtJs/web", ahora nuestro archivo quedaría de la siguiente forma tal como se muestra en la siguiente imagen:

Con esto ya tenemos integrado los dos proyectos, ahora vamos a construir la aplicación con ayuda de Sencha CMD, para ellos nos dirigimos al directorio donde esta nuestro proyecto HTML5 el cual seria "D:\GWT\DEMOS\DEMOSTRACION", abrimos la consola de comandos en este directorio y ejecutamos: "sencha app build package"

Ahora si revisamos nuestro proyecto Java Web en netbeans notamos que se han creados varios archivos, tal como se muestra en la imagen:

Estos archivos fueron copias por Sencha CMD, estos archivos contienen todo el código fuente de los componentes de extjs, así como también el código fuente de nuestra aplicación, ejecutamos la aplicación:

Vamos hacer una pequeña modificación a nuestra aplicación HTML5, vamos a modificar el archivo "app.js" tal como se muestra en la imagen:

Ahora volvemos a ejecutar el comando: "sencha app build package", luego ejecutamos la aplicación desde netbeans:

Ahora solo nos queda crear un Theme y utilizarlo en nuestra aplicación.

Creando un Theme personalizado con Sencha CMD

En el mismo directorio donde esta nuestra aplicación HTML5 ejecutamos el siguiente comando: sencha generate theme theme-demo tal como se muestra en la figura:

Ahora observamos nuestro proyecto en netbeans y vemos que se nos han creado nuevos archivos:

Estos archivos son los que corresponden al nuevo theme que vamos a personalizar para nuestra aplicación, primero vamos a modificar el archivo package.json el cual esta ubicado en Site Root\packages\theme-demo, vamos a dejarlo tal como se muestra en la imagen:

Luego creamos un archivos .scss llamado "Component.scss" en la carpeta Site Root\packages\theme-demo\sass\var

Ha este archivo le agregamos la siguiente línea: $base-color: #004D70 !default;

Con esta línea estamos definiendo el color base para todos los componentes.

Ahora procedemos a modificar el archivo "sencha.cfg" el cual se encuentra en el directorio "D:\GWT\DEMOS\DEMOSTRACION\.sencha\app", vamos a modificar la línea:

# The name of the package containing the theme scss for the app
app.theme=ext-theme-classic

y la vamos a dejar de la siguiente forma:

# The name of the package containing the theme scss for the app
app.theme= theme-demo

Con esta modificación lo que le estamos diciendo al compilador de extjs, que esta aplicación va a utilizar el tema que hemos creado, ahora en la consola de comando ejecutamos los siguientes 
comandos:

sencha ant clean -- limpiamos el directorio en caso de que ya hayamos construido la aplicación anteriormente

sencha app build -- contruimos la aplicación

Ahora ejecutamos la aplicación y veremos el resultado:

Utilizando Sencha CMD para construir nuestra aplicación es lo más conveniente, ya que el resultado final es un código reducido, si no decidiéramos utilizarlo tendríamos que copiar toda la carpeta Extjs a nuestro proyecto Java Web y esto solo nos ocuparía espacio en disco innecesario, además que para poder crear y utilizar Theme personalizados es necesario crear nuestros proyectos con esta utilidad.

 
La aplicación que hemos realizada aquí es solo una demostración de lo que podríamos hacer, por el momento solo es presentación, agregaremos más adelante la integración con el servidor y con el motor de Base de Datos.

pueden descargar el código fuente de  Aqui

Eso es todo amigos, espero que les haya gustado el artículo.