EnglishEnglishEspañolEspañol
seminarios | ofertas de empleo

Entradas con la etiqueta ‘gwt’

Empezar a trabajar con GWT: configurar el entorno y crear un proyecto para maven

publicado el Jueves, 21 de octubre de 2010 por: Manuel Carrasco Moñino
Etiquetas: - - | 11 comentarios »

La próxima semana daré una charla en el evento ‘IV Encuentro de Programadores Java’ que organiza ‘decharlas.com‘ en la Universitat Jaume I.
Preparando el evento, he visto que conseguir un entorno cómodo de trabajo para desarrollar con GWT puede no ser tan trivial como parece, y es por eso me ha parecido conveniente hacer una pequeña guía con los pasos que yo sigo cuando preparo el mío.

Básicamente, lo que yo necesito es: la máquina virtual java, maven, eclipse y un navegador con el plugin de GWT. Hay otras posibilidades como usar ‘ant’ en lugar de ‘maven’ o ‘NetBeans’ en lugar de ‘eclipse’, pero yo prefiero este último por razones históricas, y además el plugin oficial de Google, que facilita mucho las cosas, sólo está disponible para eclipse.

Voy a describir estos pasos y por medio pondré algún pantallazo

Instalación de java

Seguro que ya tienes una máquina virtual funcionando en tu sistema, pero no viene mal recordarlo, sobre todo a los usuarios de linux, ya que ubuntu no viene con la jvm de sun:

Windows:

Linux (Ubuntu): Deberías tener una version de java openjdk instalada, pero te recomiendo sustituirla por la version de sun (aunque no es necesario).

  • Activa el repositorio multiverse :
    Synaptic → Settings → repositories → multiverse → close → reload
  • Marca para instalar: sun-java6-jdk, y para desinstalar: icedtea-6-jre-cacao , y aplica los cambios.
  • NOTA: es posible que la instalación de algún paquete dependiente de java te vuelva a instalar el openjdk, lo puedes desinstalar otra vez sin problemas.

Instalación de maven

  • Windows: Sigue las instrucciones de la página oficial en apache y asegúrate que el comando ‘mvn’ está en tu path.
  • Linux: Simplemente selecciona e instala el paquete maven2 desde Synaptic.

Instalación de Eclipse:

  • Descargar e instalar ‘Eclipse IDE for Java Developers’ o ‘Eclipse IDE for Java EE Developers’ desde http://www.eclipse.org/downloads
  • En Ubuntu puedes instalarlo directamente usando synaptics.

Añadir plugins a eclipse:

Plugin de Google:

Plugin de Maven:

Plugin de Subversion:

  • Help → Install new software → Add
    • Name → subclipse
    • Location → http://subclipse.tigris.org/update_1.6.x
  • Seleccionar: ‘SVNKit Library’, ‘JNA Library’, ‘Subclipse’, ‘Subversion client adapter’, ‘Subversion JavaHL’ y ‘SVNKit Client Adapter’

Un primer proyecto Gwt en eclipse

Vamos a ver si todo el entorno funciona creando un proyecto con un arquetipo que crea un proyecto para utilizar gwtquery (es un arquetipo que publiqué hace unos meses, si ves algún error házmelo saber):

  • Crear un nuevo projecto:
    File → New → Project → Maven Project → Next → Use default WS → Next → Filter: → gwt.
  • Selecciona gwtgquery-archetype.
    • GroupId: com.example
    • Articfact Id: myfirstgqueryproject
    • projectName: MyFirstGQueryProject → Intro→ finish

  • Arreglamos un par de cosas a mano relativa al ‘classpath’
    proyecto → properties → Java Build Path →

    • Source → Default Output: myfirstgqueryproject/src/main/webapp/WEB-INF/classes
    • Order and Export → Seleccionar GWT SDK y pulsar el boton Top

Ejecutar o depurar el proyecto

Ya deberiamos tener nuestro proyecto listo para ejecutar o para depurar:

  • Arrancar la aplicación:
    proyecto → properties → run as → Web Application
  • Probar la aplicacion desde el navegador.
  • La primera vez, el navegador nos va a solicitar instalar el plugin de gwt, se conectará automáticamente a una URL de google, pulsar sobre instalar y aceptar todo.

Pero una de las características mas alucinantes en GWT es poder depurar el código de cliente en nuestro IDE, para ello lo único que tienes que hacer son poner puntos de control sobre el código java y ejecutarla en modo debug:

  • proyecto → properties → debug as → Web Application

Compilar o Ejecutar la aplicación con maven.

El proyecto está listo para maven:

  • mvn clean package (para compilar y generar el paquete a desplegar)
  • mvn clean gwt:run (para ejecutar el proyecto en modo desarrollo)

Finalmente hemos conseguido tener un entorno listo para empezar a desarrollar con GWT de una manera cómoda.

También hemos creado un proyecto de ejemplo muy simple pero que nos proporciona toda la base para un proyecto GWT usando maven y librerías de terceros, en este caso es gwtquery, pero utilizar cualquier otra librería es tan simple como añadir el repositorio donde se encuentra y la dependencia en nuestro fichero pom.xml, e incluirla en la configuración de nuestro fichero MyFirstGQueryProject.gwt.xml.

Actualización: material del seminario-taller mencionado al principio del artículo

11 comentarios »

Be Sociable, Share!
  • Twitter
  • Facebook
  • email
  • StumbleUpon
  • Delicious
  • Google Reader
  • LinkedIn
  • BlinkList

Entendiendo qué es Gwt

publicado el Viernes, 15 de octubre de 2010 por: Manuel Carrasco Moñino
Etiquetas: - - - | 4 comentarios »

Aunque Gwt se está haciendo muy popular últimamente, es una de las tecnologías más desconocida en el mundo de los desarrolladores Web.

La mayoría creen que es demasiado complicado, otros opinan que sólo sirve para el mundillo Java, y otros creen que es otro framework más para hacer aplicaciones RIA.

En este artículo he hecho un collage ordenando algunas de mis ideas y otras extraídas de la red.

Misión

Gwt nace con la misión de mejorar radicalmente la experiencia web de los usuarios, al permitir a los desarrolladores utilizar las herramientas de Java para hacer Ajax y javascript que funcione en cualquier navegador moderno.

GWT no es …

  • No es una librería más de utilidades Javascript (jquery, prototype …)‏
  • No es una librería de widgets (jquery-ui, ext, scriptaculous, yui …)‏
  • No es un framework (mootools, dojo …)‏
  • No es ‘exclusivamente’ un kit para crear aplicaciones RIA.

GWT es …

  • Es un generador de javascript: convierte código java a javascript.
  • Es un compilador, preprocesador, linker y optimizador completo (no sólo compresión y ofuscación)‏
  • Es un SDK (kit de desarrollo)
  • Proporciona además un conjunto de herramientas para testear, depurar, estadísticas, etc ..
  • Además del compilador proporciona un conjunto de módulos: DOM, XML, I18N, JSON, RPC, y Widgets básicos, y mucho mas: css sprite, image bundling …
  • Resumiendo, es código java para ejecutarse en la máquina virtual ‘browser’ en lugar de sobre el ‘jre’
  • El código generado puede incluirse en cualquier html (estático o dinámico), y puede interaccionar con éste (modificar el DOM, ejecutar AJAX, validar formularios, por lo que es compatible con SEO y ‘progressive enhancement’

Por qué un compilador

  • Para separar la mantenibilidad del código de la efectividad del ejecutable.
  • Porque el javascript escrito a mano tiene un conflicto de intereses:
  • Identificadores largos y legibles → aplicaciones grandes y lentas.
  • Buen Formato → aplicaciones grandes y lentas.
  • Comentarios → aplicaciones grandes y lentas
  • La solución no es buscar convenciones en el código javascript escrito a mano, es crear un nivel de separación para que no se comprometan ambas (mantenibilidad, efectividad).
  • Muchos de los errores mas comunes (sintaxis, errores de escritura, etc) son fácilmente corregibles en tiempo de compilación en lugar de en tiempo de ejecución.

Por qué Java

  • La sintaxis javascript es mucho más próxima a la de java que en otros lenguajes, por lo que es mas sencilla la transformación desde java que desde otros.
  • Hay muchas mas herramientas en el ecosistema de Java para el desarrollo que para cualquier otro lenguaje.
  • El chequeo de tipos de java incrementa la productividad porque reduce errores.
  • La creación de paquetes es fácil, y podemos crear .jar que se comparten entre distintas aplicaciones.
  • La asistencia en la escritura de código evita errores y acelera la codificación.
  • El re-factoring es de verdad.
  • Diseño, patrones, OO, que hacen mas fácil de comprender el código Js y las llamadas Ajax, con mucha menos documentación.
  • Y sobre todo … TDD

Funcionalidades del Javascript generado por GWT:

  • Versionado de ficheros (para cada compilación)‏, evitando los problemas de los proxys y caches.
  • Los ficheros pueden ser cacheados para siempre.
  • Sólo está lo necesario para cada navegador y lenguaje (el usuario descarga sólo lo que usa).
  • Se elimina el código no usado (sólo quedan las clases y métodos utilizados).
  • Código muy ofuscado, muy comprimido y muy optimizado.
  • Ejecución muy rápida en browser pero código legible en eclipse.
  • Herramientas para Test y Debug.
  • Las librerías de lado servidor (RPC java) permiten que se puedan utilizar los mismos objetos java a ambos lados: Servidor ↔ Cliente

Rendimiento:

  • Javascript:
    • GWT genera código mucho más pequeño que el que podamos escribir a mano. A diferencia de las aplicaciones tradicionales en javascript, el compilador de GWT analiza tu código e incluye exclusivamente lo necesario para cada navegador.
    • Pudiera no ser más rápido, pero sí mas eficaz.
    • Implementa su propio gestor de eventos, que evita ‘memory leaks’.
  • Usuario:
    • Las aplicaciones GWT son normalmente más rápidas que las escritas a mano, y normalmente requieren menos trucos HTTP. Gwt elimina el uso envoltorios para funcionalidades incluidas nativamente sólo en un tipo/versión de navegador.
  • Desarrollo:
    • Con el ahorro del tiempo invertido en depurar los problemas en cada navegador, puedes emplear mucho mas tiempo en la funcionalidad de tu aplicación. La eficiencia en el desarrollo es la parte favorita en GWT.

Conclusiones:

  • GWT no hace posible nada que no fuera posible hacer de otra manera, pero sí hace que la acción sea mucho mas productiva.
  • GWT no intenta ensalzar las virtudes de Java, sino reconocer el pragmatismo de las herramientas existentes, IDEs, entornos de prueba, tipos, etc.
  • GWT no quiere hacernos olvidar DOM, CSS, navegador, etc, sino permitir escribir abstracciones de todo ello y hacernos mas productivos que escribiendo código JS a mano.
  • Posiblemente, algún día GWT será capaz de compilar otros lenguages, o incluso procesar JS con anotaciones de tipos.
  • GWT hace productivo y posible el desarrollo de sitios webs de gran escala y abre la posibilidad de crear aplicaciones de nueva generación de manera fiable.

4 comentarios »

Be Sociable, Share!
  • Twitter
  • Facebook
  • email
  • StumbleUpon
  • Delicious
  • Google Reader
  • LinkedIn
  • BlinkList

Spring Roo y GWT

publicado el Lunes, 12 de julio de 2010 por: Manuel Carrasco Moñino
Etiquetas: - - | 3 comentarios »

Google I/O es uno de los más importantes acontecimientos para desarrolladores que suceden cada año.

En éste foro es dónde Google y otras compañías anuncian sus aportaciones más novedosas. Uno de los protagonistas en este evento ha sido Google Web Tolkit (GWT), centrando la atención de numerosas presentaciones y sobre el que se han conocido numerosas mejoras. Muchas compañías han aprovechado para subirse al carro de GWT, y entre ellas, SpringSource ha anunciado la incorporación de GWT en su producto Spring-Roo.

Roo es la apuesta de SpringSource para crear aplicaciones web de una manera muy rápida en el mundo Java. La primera vez que tuve la oportunidad de experimentar con Roo fué en el Spring2gx de Madrid, y mi primera pregunta fué ¿porqué SpringSource desarrolla Roo si ya tiene Grails?, la respuesta es bastante simple: hay muchas empresas que todavía no están preparadas para (o no quieren) hacer una migración a Grails, unas veces por razones políticas, otras por miedo a introducir nuevas tecnologías, por rendimiento, etc.

Roo aporta en estos casos toda la potencia de las herramientas que acompañan a frameworks ágiles como Rails, Grails, etc., pero sin renunciar a la entrega de aplicaciónes puramente java.

Algunas preguntas:

  • ¿Qué es Roo?. Roo es simplemente una utilidad que se ejecuta en modo comando, y que sirve para crear automáticamente código java.
  • ¿Qué hace?. Roo permite crear no sólo un proyecto nuevo al principio sino todos los componentes del proyecto que te van haciendo falta a lo largo del desarrollo (entidades, controladores, etc), e incluso permite añadir elementos a objetos que ya se han creado (campos, seguridad, etc).
  • Cómo lo hace?.  Roo es capaz de editar y modificar los ficheros de configuración añadiendo y modificando los elementos, y crea las clases java necesarias para nuestra aplicación (que podemos modificar a nuestro antojo para añadir la lógica de negocio).
  • ¿Dónde está la magia? Está en los ficheros AspectJ que crea alrededor de nuestras clases, alguno de los cuales no debemos modificar para permitir a Roo añadir más funcionalidades. Estas clases actúan como decoradores de nuestra clase java en tiempo de compilación.
  • ¿Es reversible? Roo permite fusionar en el momento que queramos todos estos ficheros .aj, en nuestros ficheros .java y entregar una aplicación completamente java.

Un ejemplo WEB:

Vamos a crear una simple lista de contactos que nos permita añadir, modificar y eliminar amigos.

  • Instala maven y roo y pon ambos comandos en tu PATH.
  • Crea el directorio contactos y cambiaté a él
  • Ejecuta roo.sh y escribe estas órdenes: 
    project --topLevelPackage com.project.contacts

persistence setup --provider HIBERNATE --database HYPERSONIC_PERSISTENT

database properties set --key database.url --value jdbc:hsqldb:/var/tmp/contacts.db

entity  --class ~.domain.Contact

field string nombre --notNull --sizeMin 1 --sizeMax 30 --class ~.domain.Contact

field string apellido --notNull --sizeMin 1 --sizeMax 30 --class ~.domain.Contact

field string telefono --notNull --sizeMin 1 --sizeMax 15 --class ~.domain.Contact

test integration

controller all --package ~.web

exit
  • Ejecuta la aplicación mvn jetty:run y abre tu navegador http://localhost:8080/contacts

El mismo ejemplo en versión RIA con GWT:

  • Ejecuta roo.sh y escribe éstas órdenes: 
    gwt setup
exit
  • Ejecuta GWT en modo desarrollo: mvn gwt:run y pulsa sobre ‘Lauch Default Browser’
  • Si no tienes instalado en tu navegador el plugin de GWT para desarrollo, te preguntará para instalarlo.

Limitaciones:

  • Las nuevas funcionalidades están disponibles la versión ‘beta’ de Roo 1.1.0-M1.
  • Roo utiliza GWT 2.1.0-M1, que es también versión experimental.
  • Eso implica que hay numerosos fallos, por ejamplo el ‘scaffolding’ con entidades relacionadas falla.

Conclusión:

Aunque no habrá una versión estable de Roo+GWT hasta dentro de algunos meses, la tendencia de SpringSource es facilitar al desarrollador hacer aplicaciones web de una manera rápida.

Justamente ésta es la característica que ha hecho a muchas empresas considerar Rails, Grails u otros frameworks ignorando otros inconvenientes (rendimiento, knowhow, etc). Quién no está harto de ver presentaciones donde se defienden las bondades de estos frameworks haciendo una aplicación en 10 minutos con un par de entidades y un ‘scaffolding’.

GWT proporciona a las aplicaciones RIA numerosas ventajas: usar java en lugar de js, testeabilidad, reutilización, rendimiento, detección de errores, etc, y Spring todo un ecosistema para desarrollar aplicaciones grandes. Ahora Roo añade la facilidad de la puesta en marcha de un proyecto y la velocidad en hacer tareas que son pesadas: crear entidades, beans, tests, controladores, vistas, etc.

3 comentarios »

Be Sociable, Share!
  • Twitter
  • Facebook
  • email
  • StumbleUpon
  • Delicious
  • Google Reader
  • LinkedIn
  • BlinkList

Un puñado de razones para usar Gwt en lugar de jQuery

publicado el Martes, 6 de julio de 2010 por: Manuel Carrasco Moñino
Etiquetas: - - - - - | 1 comentario »

Si eres un programador Web es muy seguro que has tenido que hacer algo de código Javascript y alguna que otra ‘chapucilla’ para que tu aplicación funcione en todos los navegadores.

También es un hecho que mas del 90% de los desarrolladores que utilizan javascript acaban utilizando técnicas de ‘cortar y pegar’ y que jamás han leído un libro del lenguage js. Y es una realidad que un alto porcentaje de nosotros hemos tenido que estudiar Java.

En este artículo pretendo simplemente exponer las ventajas de utilizar Gwt frente a una librería como jQuery y ver en qué casos está justificado su uso, y también intentaré que quede claro qué es Gwt y las ventajas de utilizar java frente a javascript, de manera que al final tengáis una idea clara a la hora de abordar un proyecto.

Diferencias entre GWT y jQuery

  • En el objetivo
    • Jquery es una librería javascript que ayuda a manipular la página y el diálogo con el servidor, con métodos probados para todos los navegadores.
    • GWT es un generador de aplicaciones, de manera que una aplicación diseñada y programada en Java se convierte en una aplicación web optimizada que funciona en cualquier navegador.
  • En las Herramientas
    • Javascript acarrea las dificultades implícitas a su diseño junto a la falta de herramientas buenas de edición, refactoring, testing, reusing, etc.
    • Con Java se pueden utilizar todas sus ventajas el diseño de software y patrones, y todo su ecosistema de desarrollo.
  • En las funcionalidades
    • Jquery es muy bueno para añadir pequeñas funcionalidades en el cliente inyectadas en la pagina desde el servidor, o para insertar o modificar parrtes de la vista que se obtienen del servidor via Ajax. Sin embargo el hecho de utilizarlo en en mundo javascript acarrea una serie de inconvenientes:
      • Es difícil de aplicar patrones de desarrollo y difícil de testear.
      • La edición y el refactoring dista mucho de ser inteligente.
      • Es muy difícil de reaprovechar fragmentos del código en otras aplicaciones .
      • La inclusión de dependencias, ofuscación, compresión, versionado del código no es trivial, y es necesario crear tareas y scripts a mano en la fase de empaquetado o despliegue de la aplicación.
      • Nuevos navegadores implican muy probablemente ajustes en el código.
    • GWT no sólo permite hacer grandes aplicaciones, sino librerías javascript, e incluso código javascript sencillo para manejar unos cuantos elementos de nuestra página.
      • La lógica es java: patrones, paquetes, y Tests
      • IDEs completos (code completion, refactoring, coverage, debug …)
      • Integración con maven, las librerías GWT son una dependencia en el fichero pom
      • El compilador quita toda la paja, comprime, versiona, ofusca, optimiza, y mucho mas automáticamente.
      • Las nuevas versiones de compilador mejoran nuestra aplicación sin tocar nada de código: compatibiliza la aplicación para navegadores futuros, genera mejor código, más rápido, etc…

Cuándo utilizar GWT y cuándo jQuery

  • Utiliza jQuery cuando el código necesario que tengas que hacer para la parte de presentación de de tu aplicación sea pequeño y la mayoría de dicho código ya esté en librerías (date-pickers, menus, validaciones etc.)
  • Utiliza Gwt cuando el código en la capa de presentación sea imprescindible para tu aplicación, cuando necesites testear dicho código, y cuando ese código sea susceptible de ser usado en otras aplicaciones.

Gwt-Query

Pero si quieres la potencia de Gwt y la facilidad en la sintaxis de jQuery, atrévete con GQuery, un clón de jQuery desarrollado completamente en Java, y en la que llevo trabajando junto a Ray Cromwell algo mas de un año.

Y como muestra, aquí transcribo un trozo de código en javascript utilizando jQuery, y otro en java utilizando gQuery, supongo que sabrás diferenciarlos:

$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'})
.find('img').addClass("hover").stop()
.animate({marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%',
width: '174px', height: '174px',padding: '20px'}, 200);
}, function() {
$(this).css({'z-index' : '0'})
.find('img').removeClass("hover").stop()
.animate({marginTop: '0', marginLeft: '0', top: '0', left: '0',
width: '100px', height: '100px', padding: '5px'}, 400);
});

$("ul.thumb li").hover(new Function() {
public void f(Element e) {
$(e).css("z-index", "10")
.find("img").addClass("hover").as(Effects).stop()
.animate("marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', " +
"width: '174px', height: '174px', padding: '20px'", 200);
}} , new Function() {
public void f(Element e) {
$(e).css("z-index", "0")
.find("img").removeClass("hover").as(Effects).stop()
.animate("marginTop: '0', marginLeft: '0', top: '0%', left: '0%', " +
"width: '100px', height: '100px', padding: '5px'", 600);
}
});

1 comentario »

Be Sociable, Share!
  • Twitter
  • Facebook
  • email
  • StumbleUpon
  • Delicious
  • Google Reader
  • LinkedIn
  • BlinkList


Nuestro Blog

Crónica del UX Spain 2012
Autor: Equipo de Experiencia de Usuario - Jueves, 17 de mayo de 2012

Mucho se ha contado ya (basta con revisar la lista abajo) acerca del primer UX Spain (Encuentro de profesionales de la Experiencia de Usuario en España) al que tuvimos ocasión de acudir el pasado 11 y 12 de mayo una representación de ocho Seres Paradigmáticos. A saber; @cvidal, @nacho_herranz, @vissit, @luiscalvodiaz, @jaucan, Óscar, Miguel y @davidmontalvo.

Ver más
Web 4.0
Autor: Paradigma - Jueves, 27 de octubre de 2011