Desarrollo de aplicaciones AJAX con GWT

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

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

Introducción

• Arquitectura
• AJAX
• Google Web Toolkit

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.


• 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


• Rich Internet Applications


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.


• HTML5 + CSS3


• 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.


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.


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


Introducción - GWT
• Programas en Java
• Depuras en Java
• Pruebas en Java
• GWT compila Java a JavaScript


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.


GWT ToolBox

GWT SDK Google Plugin Speed Tracer GWT
For Eclipse Designer


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


GWT ToolBox - SDK
GWT Java-to-JavaScript Compiler: compila el código
desarrollado en Java a JavaScript optimizado y
compatible con los principales navegadores.


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.


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

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.


GWT ToolBox - Proceso de desarrollo
Diseño/
Desarrollo
Depuración

Optimización

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

Interfaz Usuario – Estructura del Proyecto


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).


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.


• 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).


Interfaz Usuario – Paneles y Widgets
• Layouts Panels
• RootLayoutPanel
• LayoutPanel
• DockLayoutPanel
• SplitLayoutPanel
• StackLayoutPanel
• TabLayoutPanel


Interfaz Usuario – Paneles y Widgets
• GXT y Smart GWT


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">


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);
}-*/;


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.


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.


Comunicación con el Servidor

• Introducción
• GWT RPC
• Request Factory
• RESTful

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.


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.


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.


Comunicación – Restful
• GWT AutoBean para la serializacion JSON.

• Restlet http://www.restlet.org/

• RestyGWT http://restygwt.fusesource.org/


Depuración y Test

• Development Mode
• Source Maps (2.5)
• Logging
• Test

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.


Depuración y Test – SourceMaps (2.5)
• Podemos ver el código Java directamente en el
Navegador

http://www.youtube.com/watch?v=-xJl22Kvgjg

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.


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.


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.


Compilación y despliegue

• Introducción
• Ant
• Maven
• Despliegue

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.

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" />
…


Compilación y Despliegue - Maven
• http://mojo.codehaus.org/gwt-maven-plugin/


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.


Despliegue – Proceso de trabajo

Refrescar Funciona? Si Compilar

No

Desarrollar Desplegar


Extra

• Aplicaciones Móviles
• Juegos
• Dart

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.


Extra – Aplicaciones Móviles
• m-gwt


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


Extra - Juegos
• El ejemplo mas famoso que utiliza PlayN es la versión
web de Angry Birds disponible en G+ y Chrome Web
Store.


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


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


Aplicaciones de Ejemplo

http://gwtgallery.appspot.com/

Simbiotika.com


Google AdWords


Google Offers


Google Flights


Google Web Fonts


Google Orkut


Trabber


Bonitasoft User Experience


Lombardi Blueprint


Gracias por su atención

http://www.i2e.es
Twitter: i2e_es
emilio@i2e.es


Desarrollo de aplicaciones AJAX con GWT

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Desarrollo de aplicaciones AJAX con GWT

Similar a Desarrollo de aplicaciones AJAX con GWT (20)

Más de Ingenieria Informatica Empresarial

Más de Ingenieria Informatica Empresarial (7)

Último

Último (10)

Desarrollo de aplicaciones AJAX con GWT

Notas del editor