El documento trata sobre el desarrollo de aplicaciones web utilizando Google Web Toolkit (GWT), que permite crear aplicaciones Ajax en Java, compiladas a JavaScript y compatible con múltiples navegadores. Se abordan aspectos de la arquitectura de aplicaciones, interfaz de usuario, comunicación con el servidor y procesos de depuración y despliegue. Además, se incluyen ejemplos de aplicaciones y se menciona el futuro de GWT frente a tecnologías como Dart.

1. Desarrollo de aplicaciones Web con
Google Web Toolkit
Emilio Bravo Garcia
www.i2e.es

2. Indice
• Introducción
• GWT ToolBox
• Interfaz de Usuario
• Comunicación con el servidor
• Depuración y test
• Compilación y despliegue
• Extra
• Aplicaciones de Ejemplo
Emilio Bravo Garcia 2
emilio@i2e.es – www.i2e.es

3. Introducción
• Arquitectura
• AJAX
• Google Web Toolkit

4. Introducción - Arquitectura
• SPA (Single Page
Application) o SPI
(Single Page Interface).
• No existe navegación
entre paginas. La
interacción del usuario
con la aplicación no
implica un cambio de
pagina.
Emilio Bravo Garcia 4
emilio@i2e.es – www.i2e.es

5. Introducción - Arquitectura
• Thin Server Architecture – thinserverarchitecture.com
• No uses plantillas en el lado del
servidor para crear la pagina web.
• Usa el clásico modelo cliente-
servidor, donde el cliente se
ejecuta en el navegador.
• Separate concerns using protocol
between client and server
Emilio Bravo Garcia 5
emilio@i2e.es – www.i2e.es

6. Introducción - Arquitectura
Emilio Bravo Garcia 6
emilio@i2e.es – www.i2e.es

7. Introducción - Arquitectura
• Rich Internet Applications
Emilio Bravo Garcia 7
emilio@i2e.es – www.i2e.es

8. Introducción - AJAX
• AJAX no constituye una
tecnología en sí, sino que es
un término que engloba a un
grupo de éstas que trabajan
conjuntamente, XTML, CSS,
JavaScript,
XMLHttpRequest y XML o
JSON para la transferencia
de datos con el servidor.
Emilio Bravo Garcia 8
emilio@i2e.es – www.i2e.es

9. Introducción - AJAX
• HTML5 + CSS3
Emilio Bravo Garcia 9
emilio@i2e.es – www.i2e.es

10. Introducción - AJAX
• El navegador web como maquina virtual universal.
• El navegador web se esta posicionando como el entorno preferente
para el acceso a los servicios que ofrece la web. La industria esta
apostando por los estándares y por las plataformas abiertas.
• Presente en escritorio, tabletas y smartphones.
Emilio Bravo Garcia 10
emilio@i2e.es – www.i2e.es

11. Introducción - GWT
• Version 1.0 Build 1.0.21 - May 25, 2006
• Manifiesto GWT
• La misión de GWT es mejorar radicalmente la experiencia
de los usuarios con la web permitiendo a los
desarrolladores utilizar las herramientas Java existentes
para construir aplicaciones Ajax independientes del
navegador.
Emilio Bravo Garcia 11
emilio@i2e.es – www.i2e.es

12. Introducción - GWT
• Google Web Toolkit (GWT) permite crear aplicaciones AJAX
en el lenguaje de programación Java que son compiladas en
código JavaScript optimizado para los principales
navegadores.
• GWT no es un framework, es un toolkit para el desarrollo de
aplicaciones 2.0.
• Código disponible bajo la licencia Apache 2.0
Emilio Bravo Garcia 12
emilio@i2e.es – www.i2e.es

13. Introducción - GWT
• Programas en Java
• Depuras en Java
• Pruebas en Java
• GWT compila Java a JavaScript
Emilio Bravo Garcia 13
emilio@i2e.es – www.i2e.es

14. Introducción - GWT
• Mejora la experiencia de usuario. Al no ser necesario llamar
al servidor para renderizar las paginas ya no tendremos el
efecto de pagina en blanco.
Emilio Bravo Garcia 14
emilio@i2e.es – www.i2e.es

15. GWT Toolbox

16. GWT ToolBox
GWT SDK Google Plugin Speed Tracer GWT
For Eclipse Designer
Emilio Bravo Garcia 16
emilio@i2e.es – www.i2e.es

17. GWT ToolBox - SDK
• GWT SDK tiene cuatro componentes principales
• Java-to-JavaScript Compiler (+ Optimizer y Linker).
• Development Mode.
• JRE Emulation Library.
• GWT Web UI Class Library
Emilio Bravo Garcia 17
emilio@i2e.es – www.i2e.es

18. GWT ToolBox - SDK
GWT Java-to-JavaScript Compiler: compila el código
desarrollado en Java a JavaScript optimizado y
compatible con los principales navegadores.
Emilio Bravo Garcia 18
emilio@i2e.es – www.i2e.es

19. GWT ToolBox - SDK
Development Mode : Permite ejecutar la aplicación en la JVM y
en el navegador a través de un plugin. Utiliza Jetty como
servidor web embebido.
Emilio Bravo Garcia 19
emilio@i2e.es – www.i2e.es

20. GWT ToolBox - SDK
• JRE Emulation Library: contiene las bibliotecas
más importantes de las clases de Java. GWT emula
parte de la API de Java.
• java.lang
• java.lang.annotation
• java.util
• java.io
• java.sql
Emilio Bravo Garcia 20
emilio@i2e.es – www.i2e.es

21. GWT ToolBox - SDK
GWT Web UI Class Library: contiene un conjunto de
elementos de interfaz de usuario que permite la creación de
objetos tales como textos, cajas de texto, imágenes , botones y
otros widgets.
Emilio Bravo Garcia 21
emilio@i2e.es – www.i2e.es

22. GWT ToolBox - Proceso de desarrollo
Diseño/
Desarrollo
Depuración
Optimización
Emilio Bravo Garcia 22
emilio@i2e.es – www.i2e.es

23. Interfaz de Usuario
• Estructura del Proyecto
• Model View Presenter (MVP)
• Paneles y Widgets
• UiBinder
• Acceso a JavaScript
• Otras Características

24. Interfaz Usuario – Estructura del Proyecto
Emilio Bravo Garcia 24
emilio@i2e.es – www.i2e.es

25. Interfaz Usuario – Estructura del Proyecto
• Ficheros de configuración para una aplicación GWT
• Fichero gwt.xml donde definimos la aplicación y sus
dependencias.
• Fichero Html desde el que iniciamos el código JavaScript
• Fichero CSS con los estilos.
• Clase Java que implementa el EntryPoint (el main para
GWT).
Emilio Bravo Garcia 25
emilio@i2e.es – www.i2e.es

26. Interfaz Usuario – MVP
Emilio Bravo Garcia 26
emilio@i2e.es – www.i2e.es

27. Interfaz Usuario – MVP
• MVP - Activities y Places
• Un Activity representa algo que el usuario está haciendo. No
contiene widgets o código de interfaz de usuario. Es
equivalente al Presenter
• Un Places un objeto Java que representa un estado particular
de la interfaz de usuario. Un Place se puede convertir desde y
en una URL.
Emilio Bravo Garcia 27
emilio@i2e.es – www.i2e.es

28. Interfaz Usuario – MVP
• Editors
• GWT Editor framework permite mapear un grafo de objetos
en un grafo de editores. El escenario mas común es mapear
objetos devueltos por un servicio RPC en la UI (databinding).
Emilio Bravo Garcia 28
emilio@i2e.es – www.i2e.es

29. Interfaz Usuario – Paneles y Widgets
• Layouts Panels
• RootLayoutPanel
• LayoutPanel
• DockLayoutPanel
• SplitLayoutPanel
• StackLayoutPanel
• TabLayoutPanel
Emilio Bravo Garcia 29
emilio@i2e.es – www.i2e.es

30. Interfaz Usuario – Paneles y Widgets
• GXT y Smart GWT
Emilio Bravo Garcia 30
emilio@i2e.es – www.i2e.es

31. Interfaz Usuario – UiBinder
• UIBinder permite definir la interfaz mediante XML, además
podemos utilizar un layout HTML + CSS
<!DOCTYPE ui:UiBinder SYSTEM
"http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:i2e="urn:import:es.i2e.gwt.user.client.ui.rating">
<g:HTMLPanel ui:field="layoutGlobal">
<div class="layout_left">
<div id="user_bar">
<div id="business_bar_info">
Emilio Bravo Garcia 31
emilio@i2e.es – www.i2e.es

32. Interfaz Usuario – Acceso a JavaScript
• JSNI
• JSNI nos permite envolver código javascript en métodos Java
public static native void alert(String msg) /
*-{
$wnd.alert(msg);
}-*/;
Emilio Bravo Garcia 32
emilio@i2e.es – www.i2e.es

33. Interfaz Usuario – Otras Características
• GWT.runAsync() para la optimización de la descarga de la
aplicación.
• ImageBundle y ClientBundle para optimizar la descarga de
los recursos.
Emilio Bravo Garcia 33
emilio@i2e.es – www.i2e.es

34. Interfaz Usuario – Otras Características
• i18n
• ARIA para aplicaciones accesibles
• Soporte de características de HTML5 (Client-side Storage
,Canvas, Audio, Video).
• Integración sencilla con las apis de Google.
Emilio Bravo Garcia 34
emilio@i2e.es – www.i2e.es

35. Comunicación con el Servidor
• Introducción
• GWT RPC
• Request Factory
• RESTful

36. Comunicación – Introducción
• GWT puede comunicarse con cualquier tecnología de
servidor, realizando llamadas AJAX desde el cliente y
transportando la información utilizando JSON o XML.
Emilio Bravo Garcia 36
emilio@i2e.es – www.i2e.es

37. Comunicación – GWT RPC
• GWT proporciona por defecto
el mecanismo GWT RPC, se
encarga de la serializacion
entre Java <-> JSON para
realizar las llamada. En la
parte servidor utiliza Servlets
que se encargan de manejar
la comunicación.
Emilio Bravo Garcia 37
emilio@i2e.es – www.i2e.es

38. Comunicación – Request Factory
• RequestFactory Facilita implementar una capa de
acceso a datos tanto en el cliente como en el servidor.
• Permite estructurar el servidor de una manera orientada
a los datos en vez de al servicio, proporciona un nivel de
abstracción mayor que GWT-RPC.
• Implementa su propio protocolo para el intercambio de
datos entre el cliente y el servidor. Solo envía los
atributos del objeto que han sido modificados.
Emilio Bravo Garcia 38
emilio@i2e.es – www.i2e.es

39. Comunicación – Restful
• GWT AutoBean para la serializacion JSON.
• Restlet http://www.restlet.org/
• RestyGWT http://restygwt.fusesource.org/
Emilio Bravo Garcia 39
emilio@i2e.es – www.i2e.es

40. Depuración y Test
• Development Mode
• Source Maps (2.5)
• Logging
• Test

41. Depuración – Development Mode
• Instalando un plugin podemos ejecutar la aplicación desde el
navegador de nuestra elección y utilizar herramientas como
firebug mientras depuramos el código Java desde Eclipse.
Emilio Bravo Garcia 41
emilio@i2e.es – www.i2e.es

42. Depuración y Test – SourceMaps (2.5)
• Podemos ver el código Java directamente en el
Navegador
http://www.youtube.com/watch?v=-xJl22Kvgjg
Emilio Bravo Garcia 42
emilio@i2e.es – www.i2e.es

43. Depuración – Logging
• Emula java.util.logging
• Esto permite compartir el código de logging entre cliente
y servidor.
• Podemos hacer logging remoto, almacenando las trazas
de logging de cliente en el fichero de logs del servidor.
Emilio Bravo Garcia 43
emilio@i2e.es – www.i2e.es

44. Test
• Para ejecutar los test utiliza HtmlUnit, librería de Java que
emula un navegador web.
• Al estar HtmlUnit escrito enteramente en Java, podemos
ejecutar y depurar directamente desde eclipse.
• Podemos utilizar herramientas como selenium para realizar
pruebas de usuarios sobre la aplicación desplegada.
Emilio Bravo Garcia 44
emilio@i2e.es – www.i2e.es

45. Test
• Si hemos implementado una arquitectura MVP podemos
testear directamente los presenters sin tener que emular el
navegador.
• Esto mejorara considerablemente el rendimiento de los test
y nos permite hacer test de unidad sobre los presenters.
Emilio Bravo Garcia 45
emilio@i2e.es – www.i2e.es

46. Compilación y despliegue
• Introducción
• Ant
• Maven
• Despliegue

47. Compilación – Introducción
• GWT compila el código Java en
archivos JavaScript
independientes que estarán
disponibles a través de
cualquier servidor web. Las
aplicaciones GWT admiten
automáticamente los
navegadores IE, Firefox,
Chrome, Safari y Opera.
• La compilación es un proceso
lento.
Emilio Bravo Garcia 47
emilio@i2e.es – www.i2e.es

48. Compilación – Ant
• Podemos configurar fácilmente una tarea de ant que ejecute
el compilador de GWT
<target name="compile-gwt" depends="prepare" description="Compila la clases java
a JavaScript">
<echo>Realizando la compilacion de gwt con ${gwt.sdk.location}</echo>
<java classname="com.google.gwt.dev.Compiler"
classpathref="gwt.compile.classpath" fork="true" failonerror="true" >
<jvmarg value="-Xms512m" />
…
Emilio Bravo Garcia 48
emilio@i2e.es – www.i2e.es

49. Compilación y Despliegue - Maven
• http://mojo.codehaus.org/gwt-maven-plugin/
Emilio Bravo Garcia 49
emilio@i2e.es – www.i2e.es

50. Despliegue
• El código se empaqueta en un war y se pueden desplegar
en cualquier contenedor de Servlets estándar.
• Si no hemos utilizado Java para los servicios remotos
podemos desplegar en cualquier servidor web http.
Emilio Bravo Garcia 50
emilio@i2e.es – www.i2e.es

51. Despliegue – Proceso de trabajo
Refrescar Funciona? Si Compilar
No
Desarrollar Desplegar
Emilio Bravo Garcia 51
emilio@i2e.es – www.i2e.es

52. Extra
• Aplicaciones Móviles
• Juegos
• Dart

53. Extra – Aplicaciones Móviles
• http://m-gwt.com/
• Permite desarrollar aplicaciones móviles con aspecto
nativo basadas en GWT MVP
• http://code.google.com/p/gwt-phonegap/
• Wrapper en Java de la API
JavaScript de PhoneGap.
Emilio Bravo Garcia 53
emilio@i2e.es – www.i2e.es

54. Extra – Aplicaciones Móviles
• m-gwt
Emilio Bravo Garcia 54
emilio@i2e.es – www.i2e.es

55. Extra - Juegos
• PlayN es una librería multiplataforma que permite a los
desarrolladores programar utilizando Java a través de GWT y
compilar a HTML5, Flash, Java o Android Nativo.
• https://developers.google.com/playn
Emilio Bravo Garcia 55
emilio@i2e.es – www.i2e.es

56. Extra - Juegos
• El ejemplo mas famoso que utiliza PlayN es la versión
web de Angry Birds disponible en G+ y Chrome Web
Store.
Emilio Bravo Garcia 56
emilio@i2e.es – www.i2e.es

57. Extra - Dart
• Lars Bak: “lenguaje estructurado
pero flexible para programación
Web”.
• http://www.dartlang.org/
• Al igual que GWT, tiene un compilador de Dart a JavaScript.
• Google integrará una máquina virtual nativa en Google Chrome
y facilitará a sus competidores la integración en sus
navegadores
Emilio Bravo Garcia 57
emilio@i2e.es – www.i2e.es

58. Extra - Dart
• ¿Sustituirá Dart a GWT?
• Google tiene muchas aplicaciones realizadas en GWT.
• Si es necesario en un futuro proporcionara herramientas para
facilitar la integración/migracion de GWT y Dart
• Conversaciones en G+ sobre el futuro de GWT y Dart:
• https://plus.google.com/u/0/112745976227102540584/posts/MjZgFK6gjLq
• https://plus.google.com/u/0/117487419861992917007/posts/6YWpsHpqMqZ
Emilio Bravo Garcia 58
emilio@i2e.es – www.i2e.es

59. Aplicaciones de Ejemplo
http://gwtgallery.appspot.com/

60. Simbiotika.com
Emilio Bravo Garcia 60
emilio@i2e.es – www.i2e.es

61. Google AdWords
Emilio Bravo Garcia 61
emilio@i2e.es – www.i2e.es

62. Google Offers
Emilio Bravo Garcia 62
emilio@i2e.es – www.i2e.es

63. Google Flights
Emilio Bravo Garcia 63
emilio@i2e.es – www.i2e.es

64. Google Web Fonts
Emilio Bravo Garcia 64
emilio@i2e.es – www.i2e.es

65. Google Orkut
Emilio Bravo Garcia 65
emilio@i2e.es – www.i2e.es

66. Trabber
Emilio Bravo Garcia 66
emilio@i2e.es – www.i2e.es

67. Bonitasoft User Experience
Emilio Bravo Garcia 67
emilio@i2e.es – www.i2e.es

68. Lombardi Blueprint
Emilio Bravo Garcia 68
emilio@i2e.es – www.i2e.es

69. Gracias por su atención
http://www.i2e.es
Twitter: i2e_es
emilio@i2e.es
Emilio Bravo Garcia 69
emilio@i2e.es – www.i2e.es