GWT y SmartGWT Desarrollo de interfaces Web

Br. Carlos Alberto Borda Benito

cabb@j4sit.com javadebian@gmail.com

13/03/12

ndice presentacin:
Introduccin Qu es GWT? SmartGWT Ms listo que GWT? La tecnologa en accin

13/03/12

Primera parte:

INTRODUCCIN

Introduccin

La web sncrona
Hasta finales de los 90 la web slo poda funcionar de manera ineficiente ya que se produca la recarga total de cada pgina cada vez que haba que actualizar parte de su contenido. No se poda recargar slo esa parte. Para evitar esto se invent la tcnica del framing, que consiste en el uso de los elementos HTML frame y frameset para dividir las pginas de los sitios web en distintas pginas independientes a su vez.

13/03/12

Introduccin

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 tcnica era poco recomendable, pero durante muchos aos fue la nica manera de abordar el problema.

13/03/12

Introduccin
La web asncrona
Microsoft y Netscape (1996 1997) empezaron a utilizar, de forma nativa, elementos que cargaban contenido en una pgina de manera asncrona, pero de forma muy rudimentaria y alejada de la ingeniera del software. No fueron sino los desarrolladores de Microsoft (1998) quienes empezaron a aplicar los applets de Java de manera ingeniosa para realizar el envo de datos al servidor y la carga asncrona de contenido de manera ms elegante. En 2002, la comunidad de desarrolladores que colaboraban en el proyecto opt por definir la interfaz XMLHttpRequest (vigente a da de hoy), que deba ser implementada por todos los navegadores para sustituir a los applets en este cometido.

13/03/12

Introduccin
La web asncrona
Esta interfaz sera utilizada por cdigo JavaScript para enviar y recibir datos de manera asncrona utilizando XML para el transporte de los datos. Finalmente, se le dio nombre a todo lo anterior: AJAX.

13/03/12

Introduccin

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

Introduccin

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 pgina innecesariamente con todo lo que ello conlleva. (reduccin de trfico, por lo tanto, de tiempos) Podemos utilizarlo elegantemente junto a tcnicas JavaScript para crear aplicaciones web centradas en la experiencia de usuario. Rich Internet Applications.

13/03/12

Introduccin

Rich Internet Applications

Como a los ingenieros de software nos encantan los acrnimos 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

Introduccin

Rich Internet Applications

Para ello se suele utilizar
HTML AJAX Mucho caf

Pero no olvidemos que tambin existen

Flex / Flash: el mejor competidor. Silverlight: de Microsoft. JavaFX: de Oracle.

13/03/12

11

Introduccin

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 pgina web: accedemos a los elementos que conforman una pgina y los modificamos. Desde el estilo de un botn hasta el contenido de una tabla.

13/03/12

12

Introduccin

Javascript
Cada navegador tiene su propio intrprete que, en la vida real, viene a ser la lacra de esta tecnologa

porque el mismo cdigo puede no funcionar igual en dos navegadores distintos.

Este indeterminismo nos lleva a varias alternativas

13/03/12

13

Introduccin

Disear 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 slo incluye Internet Explorer la opcin clsica y ms segura ya que est respaldada por una gran empresa detrs

13/03/12

14

Introduccin
Segundo problema: si accedemos a desarrollar para Explorer nos encontraremos con que no dispondremos de herramientas imprescindibles para el desarrollo web, estndares 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 aos la versin del navegador para la que hemos desarrollado el sistema queda obsoleta y el cliente quiere pasar pgina puede que le estemos obligando a utilizar software obsoleto y con problemas de seguridad o a que tire nuestra aplicacin a la basura. Y eso nos hara poco profesionales.

13/03/12

15

Introduccin

Disear para un navegador en concreto pero realizar las pruebas en varios. En caso de error buscar una solucin para l.
Esta forma de trabajar no es la ideal ya que puede haber situaciones donde la solucin sea muy costosa, sobre todo si se desea desarrollar para ms de dos navegadores distintos.

13/03/12

16

Introduccin

Mantener una rama de desarrollo de JavaScript por para tipo de navegador, especfica, probada, segura y estable. La aplicacin detecta el navegador y carga el cdigo desarrollado para l.
Los problemas de este sistema son evidentes, pero las ventajas tambin. 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 Ingeniera del Software.

13/03/12

17

Introduccin

Qu opcin elegira Google?

Pista :

13/03/12

18

Segunda parte:

QU ES GWT?

Qu es GWT?

Y que es GWT?
Google Web Toolkit Google quiere que seamos ms productivos y nos regala la tecnologa 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 lnea de Javascript (si no se desea). Para ello, el desarrollo de la interfaz se hace en Java, al estilo de una aplicacin Swing.

13/03/12

20

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 traduccin a Javascript. Esta optimizacin consiste, bsicamente, en utilizar un subconjunto de tipos del JRE.

13/03/12

21

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 automticamente. Si, adems, utilizamos las capacidades multilenguaje de GWT (gracias a la librera I18N) se generar un archivo Javascript por cada navegador e idioma que definamos. A cada uno de estos archivos se les denomina en la documentacin como permutacin.

13/03/12

22

Qu es GWT?

El cdigo Javascript que se genera no slo funciona como se espera, sino que adems es muy eficiente. A parte de haber mapeado la semntica y las funciones de forma eficaz el cdigo se puede ofuscar para minimizar su tamao (y su legibilidad). Existen 3 niveles de ofuscacin:
Obfuscated (por defecto) Pretty Detailed

13/03/12

23

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

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

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.length1].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

Qu es GWT?

Adems, GWT nos proporciona unos widgets bsicos. 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 correccin. Estos widgets pueden ampliarse mediante nuestros conocidos mecanismos de herencia para crear widgets ms complejos. A continuacin un ejemplo muy sencillo.

13/03/12

27

Qu es GWT?

Ejemplo: Botn que al pulsar abre un pop-up

13/03/12

28

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

Qu es GWT?

A no ser que te guste desarrollar Javascript, te interesa GWT sea cual sea la tecnologa utilizada en la parte servidor de tu aplicacin. GWT es un mecanismo de generacin de Javascript a partir de Java. El resultado final es HTML + Javascript que se comunica con un servidor mediante distintos mecanismos, estndares para cualquier tecnologa en el servidor:
XML RPC Texto / HTML JSON

13/03/12

30

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 tambin en PHP, Java, Python, Ruby, etc.

13/03/12

31

Qu es GWT?
Motivos para usarlo
Enfoque Orientado a objetos. Patrones de diseo y UML. Reutilizacin de cdigo. Depuracin en Eclipse. Utilizar tests Junit. Internacionalizacin. Utilizar tu propio Javascript mediante JSNI. Ofuscacin. Gestionar el historial web (flechas anterior y siguiente). Aumentar tu rendimiento evitando particularidades de los navegadores.

13/03/12

32

Qu es GWT?
Problemas de GWT
La librera 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 aplicacin se ejecuta en una pgina. Hay distintos enfoques con respecto a la seguridad. La compilacin a Javascript es lenta. En general, las aplicaciones RIA pueden disparar el consumo de memoria.

13/03/12

33

Tercera parte:

SMARTGWT MS LISTO QUE GWT?

SmartGWT Ms listo que GWT?

Ms listo que GWT?
SmartGWT es un framework basado en GWT. Consiste principalmente en una extensa librera de widgets que utilizan la librera AJAX SmartClient, es decir, es una envoltura de SmartClient para GWT. Adems, estn preparados para que una complicada comunicacin cliente-servidor sea ms sencilla. Realmente es una importante alternativa a utilizar GWT ya que proporciona mayor nivel de abstraccin, nos regala mucho ms que GWT. Se puede integrar totalmente con GWT.

13/03/12

35

SmartGWT Ms 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.

Adems es muy adaptable

Podemos cargar todo el contenido simultneamente 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 aadir validacin a los campos. Y se puede conectar al servidor, haciendo transparente el proceso de alta, baja y modificacin.
13/03/12 36

SmartGWT Ms listo que GWT?

13/03/12

37

SmartGWT Ms listo que GWT?

Tiene cuatro licencias:
LGPL: gratuita, licencia comercial y no comercial. Professional: soporte para Hibernate, exportacin a excel, interfaz visual 745$ por desarrollador ilimitada. Power: caractersticas avanzadas de filtrado + modulos para mejorar la eficiencia. 1900$ por desarrollador ilimitada. Enterprise: garanta + utilidades. Llame y pregunte por el precio

13/03/12

38

SmartGWT Ms listo que GWT?

El gran problema que tiene SmartGWT es la carencia de documentacin. Lamentablemente, las mejores fuentes de informacin (en ingls) son: Blogs. Foros. Sentido comn. 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 encontraris comentarios de desarrolladores de SmartClient defendiendo su documentacin. Cada uno que juzgue.

13/03/12

39

Tercera parte:

ACCIN

Accin.
Amueblando la casa
Java JDK. Eclipse. Plugin Google para Eclipse. GWT SDK. Plugins para los navegadores: cuando abramos un navegador para ejecutar la aplicacin en el modo de depuracin nos aparecer un aviso para que lo descarguemos y un enlace.

13/03/12

41

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

Accin. Qu es cada cosa?

Paquete src:
Client: cdigo del lado cliente que ser transformado a Javascript. Server: cdigo del lado cliente. Shared: cdigo 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 cdigo que se traduce a Javascript.

13/03/12

43

Accin.
NombreProyecto.gwt.xml: en terminologa GWT este archivo se denomina mdulo. En el mdulo definimos:
Qu otros mdulos heredamos (User, HTTP, JSON, Junit, XML). La clase entry-point. Esta es una clase que implementa la interfaz EntryPoint cuyo mtodo OnModuleLoad() es el mtodo de entrada al cdigo del lado cliente. Path a cdigo traducible a Javascript. Path a recursos estticos (imgenes, CSS, etc.) Propiedades. Generadores.

13/03/12

44

Accin.
Con el fin de reutilizar partes de nuestro proyecto, podemos definir varios mdulos y utilizar el mecanismo de herencia en un mdulo a ms alto nivel. El entrypoint slo se definira en dicho mdulo.

13/03/12

45

Accin.
Paquete test: este paquete es opcional. En l se incluyen los test JUnit del proyecto. Paquete war: la aplicacin web. En l encontraremos los recursos estticos (html, imgenes, css) y cdigo javascript.
Hay un recurso esttico especialmente interesante: NombreProyecto.HTML

13/03/12

46

Accin.
Este archivo se denomina Host Page en terminologa GWT. Puede tener vaco el bloque <BODY> ya que GWT se encarga de todo el contenido visual. Pero GWT tambin puede insertar ciertos widgets en lugares determinados de este HTML mediante el uso del atributo id de las etiquetas HTML. Gracias a ello, podemos aadir la funcionalidad de GWT a aplicaciones que ya existen. Importante: las Host Pages pueden ser generadas tambin por un servlet o por una JSP.

13/03/12

47

Accin.
Alternativa al layout por defecto.
Puede que nuestro cdigo de lado servidor no sea Java o que, por cualquier circunstancia, prefiramos o necesitemos tener separado el cdigo del cliente. Podemos crear un proyecto GWT sin paquete server y que, gracias a su servidor incorporado, podremos comunicar con el lado servidor y, an as, depurar normalmente. Consejo: debemos tener un archivo de propiedades en el que se defina la url del servidor y utilizarlo en las llamadas asncronas a servicios.

13/03/12

48

Accin.
Mecanismo GWT RCP: Mecanismo mediante el que cliente y servidor comparten objetos Java a travs 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 mtodos 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).
13/03/12

EjemploServiceImpl es un Servlet. Hay que aadirlo 49 al descriptor Web.xml.

Accin.
Esto es AJAX, necesitamos callbacks que se ejecuten cuando el servicio haya dado una respuesta.
Aadiremos un parmetro callback a los servicios que hemos definido en EjemploService utilizando el patrn Proxy. Creamos una interfaz con el mismo nombre pero aadiendo la terminacin Async en el mismo paquete. EjemploServiceAsync. Si no la creamos, Eclipse nos lo recordar y la crear por nosotros si queremos. Tendr los mismos mtodos, pero para cada uno de ellos el tipo de resultado ser void y tendr un nuevo parmetro AsyncCallback<T>, donde T es el tipo de resultado.

13/03/12

50

Accin.
GWT implementar esta interfaz por nosotros mediante Generadores. La instanciaremos as:
EjemploServiceAsync ejmpSvc=GWT.Create(EjemploService.class);

Y cuando invoquemos a los mtodos de ejmpSvc creamos una clase AsyncCallback annima (o no, dependiendo de tu diseo). La implementacin de esta clase conlleva la implementacin de dos mtodos: onFailure y onSuccess.

13/03/12

51

Accin.
JSONRequestBuilder Existe otro mecanismo que no es GWT RCP para la comunicacin entre cliente y servidor. Este mecanismo es parecido, pero desacopla casi totalmente ambos mundos.
Slo se comparten las estructuras JSON que se envan o reciben. Ojo con los callbacks: siempre se devuelven envueltos en una funcin.

13/03/12

52

Accin.
JSONRequestBuilder En la documentacin se utiliza JSNI para parsear el JSON, pero no es necesario. Consiste en el envo de una llamada asncrona con parmetros
URL destino Datos envo Nombre del callback

13/03/12

53

Cuarta parte:

CONCLUSIONES

Conclusiones.
GWT sienta las bases para un cambio radical en el desarrollo web. SmartGWT y, previsiblemente, otros terceros estn aprovechando el tirn para situarse en el escenario. No es una solucin 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

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 Email: vlaslov@j4sit.com Cel : 984381913 Br. Carlos Alberto Borda Benito Email: cabb@j4sit.com cel: 984722333

13/03/12

56