lunes, 27 de julio de 2009

Montar GWT-Ext en Netbeans

Requisitos

Todo esto ha sido probado con el siguiente software y con las versiónes mencionadas a continuación, los cuales habrá que descargar:

  1. Netbeans (version 6.7)
  2. GWT (version linux-1.6.4)
  3. Gwt-Ext (versión 2.0.6)
  4. Ext (v2.0.2 - es la version que soporta GWT-Ext 2.0.6)

Proceso

  1. Instalar el Plugin que soporta GWT desde Netbeans
  2. Instalar la librería Gwt-Ext en Netbeans.
  3. Iniciar un proyecto GWT
  4. Agregar librería Javascript ExtJS al proyecto
    1. Modificación del archivo: welcomeGWT.html
    2. Modificación del archivo: Main.gwt.xml
  5. Compilar y corregir errores de compilación en GWT4NB
    1. Desde Netbeans
    2. Desde nuestro Proyecto
  6. Prueba

Proceso detallado de creación de un proyecto GWT-Ext

Instalar el Plugin que soporta GWT desde Netbeans

  1. Vamos a Netbeans y en el menu de arriba buscamos: Tools > Plugins > pestaña Available Plugins, y en el casillero de busqueda escribimos para filtrar: GWT y seleccionamos el plugin GWT4NB
  2. Si no lo encontramos, podemos descargar el .nbm desde aqui y después desde Tools > Plugins > pestaña de Downloaded buscamos el archivo
  3. Después descomprimimos GWT en la carpeta que queramos, por ejemplo en /home/juan/gwt-xxx-1.5.x….

Instalar la librería Gwt-Ext en Netbeans

Descomprimimos Gwt-Ext y creamos una carpeta dentro de la carpeta de GWT con el nombre lib y copiamos gwtext.jar ahí (/home/juan/gwt-xx../lib/gwtext.jar) y después la agreguamos al proyecto así:
  1. Hacemos click Tools > Libraries. Se abrira una ventana y
  2. Elegimos New Library, ponemos un nombre representativo como gwtext y Library Type lo dejams como esta (Class Libraries). Le damos al ok.
  3. Le damos a Add JAR/Folder y buscamos el archivo gwtext.jar dentro de la carpeta que descomprimimos (/home/juan/gwt-xx/lib/gwt-ext/gwtext.jar)

Le damos al ok hasta terminar y listo

Iniciar un Proyecto GWT

Vamos a crear un nuevo proyecto en Netbeans con GWT-EXT una vez hecho todo lo anterior.

  1. Elegimos:Web > Web Application Le ponemos un nombre y le damos Siguiente/Next,
  2. Elegimos el servidor, la versión de jvm y el context path, y damos a Siguiente/Next.
  3. En Framework elegimos Google Web Toolkit y abajo:
    1. En GWT Installation Folder ponemos la ruta donde descomprimimos gwt (/home/juan/gwt-xx…)
    2. En GWT Module ponemos el nombre de la clase donde implementaremos el punto de entrada a la aplicación. Es decir, la página de bienvenida para la aplicación, por lo que deberíamos poner el nombre de paquete que vayamos a utilizar, y un nombre de clase como Main, Index, o Welcome.. a vuestro gusto. yo por ejemplo prueba.gwt.Main.
  4. Una vez creado, desplegamos el proy ecto, y hacemos click derecho sobre Libraries > Add Library, y añadimos la librería creada anteriormente como gwtext.

Listo para jugar con GWT.

Agregar la librería Javascript ExtJS

Descomprimimos Ext. Vamos a copiar los archivos necesarios en una carpeta dentro de la carpeta web de nuestro proyecto creada como js/ext… algo parecido a: /home/juan/NetBeansProjects/ProyectoGWT/web/js/ext, y los archivos que tenemos que copiar de la carpeta de origen a esta son:
  • ext-all.js
  • ext-all-debug.js
  • ext-core.js
  • ext-core-debug.js
  • /resources (carpeta completa)
  • /adapter (carpeta completa)
  • /build/locale/ext-lang-es.js

Una vez hecho esto tenemos que hacer unas modificaciones al proyecto para que use estos scripts.

Modificación del archivo: welcomeGWT.html

En Netbeans dentro de nuestro proyecto vamos a Web pages y abrimos el archivo:welcomeGWT.html. Ese archivo tendrá que incluir en las cabeceras los scripts de ExtJS que acabamos de agregar al proyecto, así tendremos que agregar dentro de la entiqueta <head> las siguientes líneas.

<link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css">
<script type="text/javascript" src="js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext/ext-all.js"></script>
<script type="text/javascript" src="js/ext/ext-lang-es.js"></script>

Modificación del archivo: Main.gwt.xml

Vamos ahora a los Source Packages y buscamos en el paquete que especificamos como Gwt Module (prueba.gwt en mi caso) el archivo de configuración de gwt que el plugin ha creado Main.gwt.xml (en mi caso) y abrimos el archivo para editarlo, agregando esta linea en la etiqueta module:

Quedaría algo así:

<inherits name="com.google.gwt.user.User">
<inherits name="com.gwtext.GwtExt">
<entry-point class="org.yournamehere.client.MainEntryPoint">
<!-- Do not define servlets here, use web.xml -->
</module>

Compilando y corrigiendo error en el plugin GWT4NB

Cuando compilemos probablemente (al menos con las versiónes de Netbeans 6.7, Ext-2.0.2, Gwt-Ext 2.0.6 y gwt-linux-1.6.4) dará un error en el archivo /home/juan/NetbeansProjects/ProyectoGwt/nbproject/build-gwt.xml (en mi caso recordad) del tipo java returned: -1 y de deprecación de la clase com.google.gwt.dev.GWTCompiler. Podemos modificar este archivo. Una vez que nos da el error, Netbeans va a resaltar donde esta así es que le hacemos click para que nos lleve hasta alli, donde vamos a ver este codigo:

<java classpath="${javac.classpath}:${src.dir}" failonerror="true"
classname="com.google.gwt.dev.GWTCompiler" fork="true" jvmargs="${gwt.compiler.jvmargs}">
<arg value="-out">
<arg path="${build.web.dir}/">
<arg value="-style">
<arg value="${gwt.compiler.output.style}">
<
<arg value="${gwt.compiler.logLevel}">
<arg value="${gwt.module}">
</java>

Tiene que quedar igual que este:

<java classpath="${javac.classpath}:${src.dir}" failonerror="true"
classname="com.google.gwt.dev.Compiler" fork="true" jvmargs="${gwt.compiler.jvmargs}">
<arg value="-war">
<arg path="${build.web.dir}/">
<arg value="-style">
<arg value="${gwt.compiler.output.style}">
<arg value="-logLevel">
<arg value="${gwt.compiler.logLevel}">
<arg value="${gwt.module}">
<jvmarg value="-Xmx512m">
</java>

Que sustituye al parámetro en el tag El principal inconveniente es que algunas veces (con Netbeans 6.1) tras hacer un Clean & Build, el archivo volvía a su estado original y volvía a fallar. Otra forma de solucionar esto esta en el archivo de nuestro proyecto:/home/juan/NetbeansProjects/ProyectoGwt/nbproject/gwt.properties, donde se definen todos los parámetros y donde podremos asignar:

gwt.compiler.class=com.google.gwt.dev.Compiler
gwt.compiler.jvmargs=-Xmx512m

Y hacer la referencia a ella en build-gwt.xml mediante el siguiente código en build-gwt.xml.

<java classpath="${javac.classpath}:${src.dir}" failonerror="true"
classname="${gwt.compiler.class}" fork="true" jvmargs="${gwt.compiler.jvmargs}">
<arg value="-war">
<arg path="${build.web.dir}/">
<arg value="-style">
<arg value="${gwt.compiler.output.style}">
<arg value="-logLevel">
<arg value="${gwt.compiler.logLevel}">
<arg value="${gwt.module}">
<jvmarg value="-Xmx512m">
</java>

Eso nos permite que en la próxima compilación, asigne más memoria al proceso de compilación y no falle...Y con esto y un bizcocho pues comele a la burra el… Espero que os funcione…

Publicado por en
Etiquetas: ,

1 comentario:

¿Que te parece? Deja un comentario

Suscribirse a: Enviar comentarios (Atom)