Clase introductoria del curso de desarrollo de aplicaciones web con GWT

1. GWT y
SmartGWT
Desarrollo de interfaces
Web
Br. Carlos Alberto Borda Benito
cabb@j4sit.com
javadebian@gmail.com
13/03/12 1

2. Índice
presentación:
Introducción
¿Qué es GWT?
SmartGWT ¿Más listo que
GWT?
La tecnología en acción
13/03/12 2

3. Primera parte:
INTRODUCCIÓN

4. Introducción
La web síncrona
Hasta finales de los 90 la web sólo podía funcionar de
manera ineficiente ya que se producía la recarga total de
cada página cada vez que había que actualizar parte de su
contenido. No se podía recargar sólo esa parte.
Para evitar esto se inventó la técnica del framing, que
consiste en el uso de los elementos HTML frame y frameset
para dividir las páginas de los sitios web en distintas
“páginas” independientes a su vez.
13/03/12 4

5. Introducción
Frames
Usualmente una para la cabecera, otra para un menú y otra
para el contenido, que era la que realmente se recargaba.
Por la cantidad de problemas que conllevaba esta técnica
era poco recomendable, pero durante muchos años fue la
única manera de abordar el problema.
13/03/12 5

6. Introducción
La web asíncrona
Microsoft y Netscape (1996 – 1997) empezaron a utilizar, de
forma nativa, elementos que cargaban contenido en una
página de manera asíncrona, pero de forma muy
rudimentaria y alejada de la ingeniería del software.
No fueron sino los desarrolladores de Microsoft (1998)
quienes empezaron a aplicar los applets de Java de manera
ingeniosa para realizar el envío de datos al servidor y la
carga asíncrona de contenido de manera más elegante.
En 2002, la comunidad de desarrolladores que colaboraban
en el proyecto optó por definir la interfaz XMLHttpRequest
(vigente a día de hoy), que debía ser implementada por
todos los navegadores para sustituir a los applets en
este cometido.
13/03/12 6

7. Introducción
La web asíncrona
Esta interfaz sería utilizada por código JavaScript para enviar
y recibir datos de manera asíncrona utilizando XML para el
transporte de los datos.
Finalmente, se le dio nombre a todo lo anterior: AJAX.
13/03/12 7

8. Introducción
¿Entonces que es AJAX?
Como su nombre indica AJAX es:
Asynchronous
JavaScript
And
XML
Si bien puede ser
Synchronous
And
Not XML
JSON
HTML
Text/plain
13/03/12 8

9. Introducción
¿Para qué sirve todo esto?
Para que la experiencia de los usuarios en la web sea
notablemente mejor. A grandes rasgos:
Evitamos recargar el contenido de una página
innecesariamente con todo lo que ello conlleva. (reducción de
tráfico, por lo tanto, de tiempos)
Podemos utilizarlo elegantemente junto a técnicas JavaScript
para crear aplicaciones web centradas en la experiencia
de usuario. Rich Internet Applications.
13/03/12 9

10. Introducción
Rich Internet Applications
Como a los ingenieros de software nos encantan los
acrónimos nos referiremos a ellas como RIAs.
Con mayor o menor fortuna, el objetivo en el desarrollo de
RIAs es conseguir aplicaciones web similares a las de
escritorio (pero que se ejecuten en el navegador).
Un caso de éxito: Google Docs.
13/03/12 10

11. Introducción
Rich Internet Applications
Para ello se suele utilizar
HTML
AJAX
Mucho café
Pero no olvidemos que también existen
Flex / Flash: el mejor competidor.
Silverlight: de Microsoft.
JavaFX: de Oracle.
13/03/12 11

12. Introducción
Javascript
Es un lenguaje de script orientado a objetos
muy distinto a lo que esperamos de un lenguaje
como Java o C#.
Se utiliza para manipular el DOM de una página
web: accedemos a los elementos que conforman
una página y los modificamos. Desde el estilo de
un botón hasta el contenido de una tabla.
13/03/12 12

13. Introducción
Javascript
Cada navegador tiene su propio intérprete que, en la vida
real, viene a ser la lacra de esta tecnología…
…porque el mismo código puede no
funcionar igual en dos navegadores
distintos.
Este indeterminismo nos lleva a varias alternativas
13/03/12 13

14. Introducción
Diseñar para un navegador en concreto y convencer a
nuestro cliente de que eso es razonable
Primer problema: nosotros tendemos a desarrollar para
Firefox / Chrome pero ellos usan Internet Explorer (¡incluso
el 5 y el 6!) y no lo van cambiar:
Tienen aplicaciones funcionando en Explorer y no
van a funcionar en otro navegador.
Sus procesos de negocio son complejos: delegan
en departamentos que mantienen sus
sistemas y su acuerdo a nivel de servicio sólo
incluye Internet Explorer – la opción clásica y
más segura ya que está respaldada por una
gran empresa detrás –
13/03/12 14

15. Introducción
Segundo problema: si accedemos a desarrollar para Explorer
nos encontraremos con que no dispondremos de herramientas
imprescindibles para el desarrollo web, estándares de facto,
como FireBug.
Tercer problema: como ingenieros de software debemos
buscar, entre otras cosas, la mantenibilidad del sistema y no
permitir este tipo de situaciones. Si dentro de unos años la
versión del navegador para la que hemos desarrollado el
sistema queda obsoleta y el cliente quiere pasar página puede
que le estemos obligando a utilizar software obsoleto y con
problemas de seguridad o a que tire nuestra aplicación a la
basura.
Y eso nos haría poco profesionales.
13/03/12 15

16. Introducción
Diseñar para un navegador en concreto pero realizar las
pruebas en varios. En caso de error buscar una solución para
él.
Esta forma de trabajar no es la ideal ya que puede haber
situaciones donde la solución sea muy costosa, sobre todo si se
desea desarrollar para más de dos navegadores distintos.
13/03/12 16

17. Introducción
Mantener una rama de desarrollo de JavaScript por para tipo
de navegador, específica, probada, segura y estable. La
aplicación detecta el navegador y carga el código
desarrollado para él.
Los problemas de este sistema son evidentes, pero las ventajas
también.
Es una tarea tediosa e implica multiplicar el esfuerzo.
Pero es determinista y cuantificable, requisitos necesarios
para ser aceptable desde el punto de vista de la Ingeniería del
Software.
13/03/12 17

18. Introducción
¿Qué opción elegiría
Google?
Pista
:
13/03/12 18

19. Segunda parte:
¿QUÉ ES GWT?

20. ¿Qué es GWT?
¿Y que es GWT?
Google Web Toolkit
Google quiere que seamos más productivos y nos regala la
tecnología GWT, su kit de desarrollo Web.
GWT es un conjunto de herramientas y widgets que
proporciona una forma de crear RIA utilizando AJAX sin tocar
ni una sola línea de Javascript (si no se desea).
Para ello, el desarrollo de la interfaz se hace en Java, al estilo
de una aplicación Swing.
13/03/12 20

21. No es magia… es un
compilador.
El compilador de GWT genera Javascript a partir de las clases Java que escribimos y la
GWT Class Library, que es un JRE optimizado para la traducción a Javascript. Esta
optimización consiste, básicamente, en utilizar un subconjunto de tipos del JRE.
13/03/12 21

22. ¿Qué es GWT?
El compilador de GWT conoce las particularidades de los
navegadores y para cada navegador genera un archivo
Javascript distinto, que se cargará en el navegador
adecuado automáticamente.
Si, además, utilizamos las capacidades multilenguaje de
GWT (gracias a la librería I18N) se generará un archivo
Javascript por cada navegador e idioma que
definamos.
A cada uno de estos archivos se les denomina en la
documentación como permutación.
13/03/12 22

23. ¿Qué es GWT?
El código Javascript que se genera no sólo funciona como se
espera, sino que además es muy eficiente.
A parte de haber mapeado la semántica y las funciones de
forma eficaz el código se puede ofuscar para minimizar su
tamaño (y su legibilidad).
Existen 3 niveles de ofuscación:
Obfuscated (por defecto)
Pretty
Detailed
13/03/12 23

24. ¿Qué es GWT?
Ejemplo Detailed
function isHostedMode(){
var result = false;
try {
var query = $wnd.location.search;
return (query.indexOf($intern_5) != -1 ||
(query.indexOf($intern_6) != -1 || $wnd.external &&
$wnd.external.gwtOnLoad)) && query.indexOf($intern_7) == -1;
}
catch (e) {
}
isHostedMode = function(){
return result;
}
;
return result;
}
13/03/12 24

25. ¿Qué es GWT?
Ejemplo Pretty
function isHostedMode(){
var result = false;
try {
var query = $wnd_0.location.search;
return (query.indexOf('gwt.codesvr=') != -1 ||
(query.indexOf('gwt.hosted=') != -1 || $wnd_0.external &&
$wnd_0.external.gwtOnLoad)) && query.indexOf('gwt.hybrid') == -1;
}
catch (e) {
}
isHostedMode = function(){
return result;
}
;
return result;
}
13/03/12 25

26. ¿Qué es GWT?
Ejemplo Obfuscated
function C(){if(q&&r){var b=n.getElementById(R);var
c=b.contentWindow;if(B()){c.__gwt_getProperty=function(a){return
I(a)}}lmsgwt=null;c.gwtOnLoad(z,R,t,y);o&&o({moduleName:R,session
Id:p,subSystem:S,evtGroup:Y,millis:(new
Date).getTime(),type:Z})}} function D(){if(u[$]){t=u[$];return
t}var e;var f=n.getElementsByTagName(_);for(var g=0;g<f.length;+
+g){if(f[g].src.indexOf(ab)!=-1){e=f[g]}}if(!e){var h=bb;var
i;n.write(cb+h+db);i=n.getElementById(h);e=i&&i.previousSibling;w
hile(e&&e.tagName!=eb){e=e.previousSibling}}function j(a){var
b=a.lastIndexOf(fb);if(b==-1){b=a.length}var
c=a.indexOf(gb);if(c==-1){c=a.length}var
d=a.lastIndexOf(hb,Math.min(c,b));return d>=0?
a.substring(0,d+1):Q};if(e&&e.src){t=j(e.src)}if(t==Q){var
k=n.getElementsByTagName(ib);if(k.length>0){t=k[k.length-
1].href}else{t=j(n.location.href)}}else if(t.match(/^w+:///))
{}else{var l=n.createElement(jb);l.src=t+kb;t=j(l.src)}if(i)
{i.parentNode.removeChild(i)}return t}
13/03/12 26

27. ¿Qué es GWT?
Además, GWT nos proporciona unos widgets básicos.
Estos widgets son de calidad: eficientes y libres de errores.
Gracias a esto podemos dedicar el tiempo que tenemos
asignado a pruebas para probar la funcionalidad, y no la
corrección.
Estos widgets pueden ampliarse mediante nuestros
conocidos mecanismos de herencia para crear widgets más
complejos.
A continuación un ejemplo muy sencillo.
13/03/12 27

28. ¿Qué es GWT?
Ejemplo: Botón que al pulsar abre un pop-up
13/03/12 28

29. ¿Qué es GWT?
public Widget onInitialize() {
HorizontalPanel hPanel = new HorizontalPanel();
Button normalButton = new Button(“Normal Button”);
normalButton.addClickListener(new ClickHandler(){
public void onClick(ClickEvent event) {
Window.alert(“Stop poking me!”);
}
});
hPanel.add(normalButton);
return hPanel;
}
13/03/12 29

30. ¿Qué es GWT?
A no ser que te guste desarrollar Javascript, te interesa
GWT sea cual sea la tecnología utilizada en la parte
servidor de tu aplicación.
GWT es un mecanismo de generación de Javascript a partir
de Java. El resultado final es HTML + Javascript que se
comunica con un servidor mediante distintos mecanismos,
estándares para cualquier tecnología en el servidor:
XML
RPC
Texto / HTML
JSON
13/03/12 30

31. ¿Qué es GWT?
Puedes seguir publicando tus servicios en el lado servidor y
utilizarlos en el cliente.
Puedes desarrollar la interfaz en Java con Eclipse y tu parte
servidor en .NET con Visual Studio.
Por supuesto también en PHP, Java, Python, Ruby, etc.
13/03/12 31

32. ¿Qué es GWT?
Motivos para usarlo
Enfoque Orientado a objetos.
Patrones de diseño y UML.
Reutilización de código.
Depuración en Eclipse.
Utilizar tests Junit.
Internacionalización.
Utilizar tu propio Javascript mediante JSNI.
Ofuscación.
Gestionar el historial web (flechas anterior y siguiente).
Aumentar tu rendimiento evitando particularidades de los
navegadores.
13/03/12 32

33. ¿Qué es GWT?
Problemas de GWT
La librería de clases GWT no acepta todos los tipos de la JRE.
Es un enfoque inusual.
Es dificil utilizarlo sobre proyectos ya existentes.
No existen widgets avanzados GWT.
Toda la aplicación se ejecuta en una página. Hay distintos
enfoques con respecto a la seguridad.
La compilación a Javascript es lenta.
En general, las aplicaciones RIA pueden disparar el consumo de
memoria.
13/03/12 33

34. Tercera parte:
SMARTGWT ¿MÁS LISTO
QUE GWT?

35. SmartGWT ¿Más listo que GWT?
¿Más listo que GWT?
SmartGWT es un framework basado en GWT.
Consiste principalmente en una extensa librería de widgets
que utilizan la librería AJAX SmartClient, es decir, es una
envoltura de SmartClient para GWT.
Además, están preparados para que una complicada
comunicación cliente-servidor sea más sencilla.
Realmente es una importante alternativa a utilizar GWT ya
que proporciona mayor nivel de abstracción, nos regala
mucho más que GWT.
Se puede integrar totalmente con GWT.
13/03/12 35

36. SmartGWT ¿Más listo que GWT?
ListGrid, valioso aliado.
Es una tabla muy potente
Permite reordenar sus columnas
Ordenar filas por cualquier columna
Filtrar filas en tiempo real por cualquier columna
Agrupar filas por campos.
Además es muy adaptable
Podemos cargar todo el contenido
simultáneamente o bajo demanda
Permite anidar tablas facilmente
Incorporar iconos, botones o cualquier otro
elemento es trivial
Tiene una interfaz para crear filtros (Criteria)
Se puede editar sobre ella y añadir validación a los
campos.
Y se puede conectar al servidor, haciendo transparente
el proceso de alta, baja y modificación.
13/03/12 36

37. SmartGWT ¿Más listo que GWT?
13/03/12 37

38. SmartGWT ¿Más listo que GWT?
Tiene cuatro licencias:
LGPL: gratuita, licencia comercial y no comercial.
Professional: soporte para Hibernate, exportación a excel,
interfaz visual… 745$ por desarrollador – ilimitada.
Power: características avanzadas de filtrado + modulos para
mejorar la eficiencia. 1900$ por desarrollador – ilimitada.
Enterprise: garantía + utilidades. Llame y pregunte por el
precio 
13/03/12 38

39. SmartGWT ¿Más listo que GWT?
El gran problema que tiene SmartGWT es la carencia de
documentación.
Lamentablemente, las mejores fuentes de información (en inglés)
son:
Blogs.
Foros.
Sentido común.
No se puede esperar gran cosa de la wiki oficial, aunque sí del foro
SmartClient.
Esto no es casual: el servicio de soporte oficial de SmartGWT /
SmartClient es de pago.
En varios blogs encontraréis comentarios de desarrolladores de
SmartClient defendiendo su documentación. Cada uno que juzgue.
13/03/12 39

40. Tercera parte:
ACCIÓN

41. Acción.
Amueblando la casa
Java JDK.
Eclipse.
Plugin Google para Eclipse.
GWT SDK.
Plugins para los navegadores: cuando abramos un
navegador para ejecutar la aplicación en el modo de
depuración nos aparecerá un aviso para que lo
descarguemos y un enlace.
13/03/12 41

42. Acción.
Descomprimir Eclipse.
Descomprimir GWT SDK.
Instalar plugin para eclipse.
Amantes de la consola:
Ir al directorio donde se ha descomprimido GWT SDK.
Ejecutar webAppCreator –out MiApp es.babel.MiApp
13/03/12 42

43. Acción.
¿Qué es cada cosa?
Paquete src:
Client: código del lado cliente que será transformado a
Javascript.
Server: código del lado cliente.
Shared: código que comparten cliente y servidor. Estas
clases deben implementarse con cuidado:
GWT SDK no acepta todos los tipos del JRE.
En el servidor no se puede ejecutar el código que se traduce
a Javascript.
13/03/12 43

44. Acción.
NombreProyecto.gwt.xml: en terminología GWT
este archivo se denomina módulo.
En el módulo definimos:
Qué otros módulos heredamos (User, HTTP, JSON,
Junit, XML).
La clase entry-point. Esta es una clase que implementa
la interfaz EntryPoint cuyo método OnModuleLoad() es el
método de entrada al código del lado cliente.
Path a código traducible a Javascript.
Path a recursos estáticos (imágenes, CSS, etc.)
Propiedades.
Generadores.
13/03/12 44

45. Acción.
Con el fin de reutilizar partes de nuestro proyecto,
podemos definir varios módulos y utilizar el mecanismo
de herencia en un módulo a más alto nivel.
El entrypoint sólo se definiría en dicho módulo.
13/03/12 45

46. Acción.
Paquete test: este paquete es opcional. En él se incluyen los
test JUnit del proyecto.
Paquete war: la aplicación web. En él encontraremos los
recursos estáticos (html, imágenes, css…) y código
javascript.
Hay un recurso estático especialmente interesante:
NombreProyecto.HTML
13/03/12 46

47. Acción.
Este archivo se denomina Host Page en
terminología GWT.
Puede tener vacío el bloque <BODY> ya que GWT
se encarga de todo el contenido visual.
Pero GWT también puede insertar ciertos widgets
en lugares determinados de este HTML mediante el
uso del atributo id de las etiquetas HTML.
Gracias a ello, podemos añadir la funcionalidad de
GWT a aplicaciones que ya existen.
Importante: las Host Pages pueden ser
generadas también por un servlet o por una JSP.
13/03/12 47

48. Acción.
Alternativa al layout por defecto.
Puede que nuestro código de lado servidor no sea Java o que,
por cualquier circunstancia, prefiramos o necesitemos tener
separado el código del cliente.
Podemos crear un proyecto GWT sin paquete server y que,
gracias a su servidor incorporado, podremos comunicar con
el lado servidor y, aún así, depurar normalmente.
Consejo: debemos tener un archivo de propiedades en el
que se defina la url del servidor y utilizarlo en las llamadas
asíncronas a servicios.
13/03/12 48

49. Acción.
Mecanismo GWT RCP:
Mecanismo mediante el que cliente y servidor
comparten objetos Java a través de HTTP.
Evidentemente, el cliente debe estar implementado en
Java.
En el paquete client creamos una interfaz
(EjemploService) que, a su vez, implemente
RemoteService.
Los métodos que definamos en la interfaz
corresponden a servicios que vamos a invocar en el
servidor.
En el paquete server creamos la clase
EjemploServiceImpl que herede de
RemoteServiceServlet e implemente la interfaz que
hemos creado (EjemploService).
EjemploServiceImpl es un Servlet. Hay que añadirlo
13/03/12 al descriptor Web.xml. 49

50. Acción.
Esto es AJAX, necesitamos callbacks que se ejecuten
cuando el servicio haya dado una respuesta.
Añadiremos un parámetro callback a los servicios que
hemos definido en EjemploService utilizando el patrón
Proxy.
Creamos una interfaz con el mismo nombre pero
añadiendo la terminación Async en el mismo paquete.
EjemploServiceAsync.
Si no la creamos, Eclipse nos lo recordará y la creará por
nosotros si queremos.
Tendrá los mismos métodos, pero para cada uno de ellos
el tipo de resultado será void y tendrá un nuevo
parámetro AsyncCallback<T>, donde T es el tipo de
resultado.
13/03/12 50

51. Acción.
GWT implementará esta interfaz por nosotros
mediante Generadores.
La instanciaremos así:
EjemploServiceAsync ejmpSvc=GWT.Create(EjemploService.class);
Y cuando invoquemos a los métodos de ejmpSvc
creamos una clase AsyncCallback anónima (o no,
dependiendo de tu diseño).
La implementación de esta clase conlleva la
implementación de dos métodos: onFailure y
onSuccess.
13/03/12 51

52. Acción.
JSONRequestBuilder
Existe otro mecanismo que no es GWT RCP para la
comunicación entre cliente y servidor.
Este mecanismo es parecido, pero desacopla casi
totalmente ambos mundos.
Sólo se comparten las estructuras JSON que se envían o
reciben.
Ojo con los callbacks: siempre se devuelven envueltos
en una función.
13/03/12 52

53. Acción.
JSONRequestBuilder
En la documentación se utiliza JSNI para parsear el
JSON, pero no es necesario.
Consiste en el envío de una llamada asíncrona con
parámetros
URL destino
Datos envío
Nombre del callback
13/03/12 53

54. Cuarta parte:
CONCLUSIONES

55. Conclusiones.
GWT sienta las bases para un cambio radical en el
desarrollo web.
SmartGWT y, previsiblemente, otros terceros están
aprovechando el tirón para situarse en el escenario.
No es una solución universal para todos los problemas y,
como hemos visto, plantea algunos.
Hoy por hoy y desde el punto de vista del mundo laboral,
es la mejor manera de desarrollar RIAs junto con
Flex(Muerto).
13/03/12 55

56. Java For Smart Information Technologies
http://www.j4sit.com
Cusco
Universidad San Antonio Abad
Facultad De Ing. Informatica y Sistemas
4To Piso
Contactos
Ing. Vladimir Illis Ascue Lovon Br. Carlos Alberto Borda Benito
Email: vlaslov@j4sit.com Email: cabb@j4sit.com
Cel : 984381913 cel: 984722333
13/03/12 56