introduccion gwt-smartgwt

5/14/2018 introduccion Gwt-SmartGwt - slidepdf.com

http://slidepdf.com/reader/full/introduccion-gwt-smartgwt 1/56

13/03/12 1

GWT y

SmartGWT

1

Br. Carlos Alberto Borda [email protected]

[email protected]

Desarrollo de interfaces

Web

mailto:[email protected]




13/03/12 2

Índicepresentación:Introducción

¿Qué es GWT?

SmartGWT ¿Más listo queGWT?

La tecnología en acción



INTRODUCCIÓN

Primera parte:



13/03/12 4

Introducción

La web síncronaHasta finales de los 90 la web sólo podía funcionar demanera ineficiente ya que se producía la recarga total decada página cada vez que había que actualizar parte de sucontenido. No se podía recargar sólo esa parte.

Para evitar esto se inventó la técnica del framing, queconsiste 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 5

Introducción

FramesUsualmente una para la cabecera, otra para un menú y otrapara el contenido, que era la que realmente se recargaba.Por la cantidad de problemas que conllevaba esta técnicaera poco recomendable, pero durante muchos años fue laúnica manera de abordar el problema.



Introducción

La web asíncronaMicrosoft y Netscape (1996 – 1997) empezaron a utilizar, deforma nativa, elementos que cargaban contenido en unapágina de manera asíncrona, pero de forma muyrudimentaria 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 maneraingeniosa para realizar el envío de datos al servidor y lacarga asíncrona de contenido de manera más elegante.

En 2002, la comunidad de desarrolladores que colaborabanen el proyecto optó por definir la interfaz XMLHttpRequest

(vigente a día de hoy), que debía ser implementada portodos los navegadores para sustituir a los applets eneste cometido.

13/03/12 6



Introducción

La web asíncronaEsta interfaz sería utilizada por código JavaScript para enviar y recibir datos de manera asíncrona utilizando XML para eltransporte de los datos.

Finalmente, se le dio nombre a todo lo anterior: AJAX.

13/03/12 7



13/03/12 8

Introducción

¿Entonces que es AJAX?Como su nombre indica AJAX es:

Asynchronous

JavaScript

And

XMLSi bien puede ser

Synchronous

And

Not XML

JSONHTML

Text/plain



13/03/12 9

Introducción

¿Para qué sirve todo esto?Para que la experiencia de los usuarios en la web seanotablemente mejor. A grandes rasgos:

Evitamos recargar el contenido de una páginainnecesariamente con todo lo que ello conlleva. (reducción detráfico, por lo tanto, de tiempos)

Podemos utilizarlo elegantemente junto a técnicas JavaScriptpara crear aplicaciones web centradas en la experienciade usuario. Rich Internet Applications.



13/03/12 10

Introducción

Rich Internet ApplicationsComo a los ingenieros de software nos encantan losacrónimos nos referiremos a ellas como RIAs.

Con mayor o menor fortuna, el objetivo en el desarrollo deRIAs 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 11

Introducción

Rich Internet ApplicationsPara ello se suele utilizar

HTML

AJAX

Mucho café

Pero no olvidemos que también existenFlex / Flash: el mejor competidor.

Silverlight: de Microsoft.

JavaFX: de Oracle.



13/03/12 12

Introducción

JavascriptEs un lenguaje de script orientado a objetosmuy distinto a lo que esperamos de un lenguajecomo Java o C#.

Se utiliza para manipular el DOM de una páginaweb: accedemos a los elementos que conformanuna página y los modificamos. Desde el estilo deun botón hasta el contenido de una tabla.



13/03/12 13

Introducción

JavascriptCada navegador tiene su propio intérprete que, en la vidareal, viene a ser la lacra de esta tecnología…

…porque el mismo código puede nofuncionar igual en dos navegadoresdistintos.

Este indeterminismo nos lleva a varias alternativas



13/03/12 14

Introducción

Diseñar para un navegador en concreto y convencer anuestro cliente de que eso es razonable

Primer problema: nosotros tendemos a desarrollar paraFirefox / Chrome pero ellos usan Internet Explorer (¡inclusoel 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 sussistemas y su acuerdo a nivel de servicio sóloincluye Internet Explorer – la opción clásica ymás segura ya que está respaldada por unagran empresa detrás –



13/03/12 15

Introducción

Segundo problema: si accedemos a desarrollar para Explorernos encontraremos con que no dispondremos de herramientasimprescindibles para el desarrollo web, estándares de facto,como FireBug.

Tercer problema: como ingenieros de software debemosbuscar, entre otras cosas, la mantenibilidad del sistema y nopermitir este tipo de situaciones. Si dentro de unos años laversión del navegador para la que hemos desarrollado elsistema queda obsoleta y el cliente quiere pasar página puedeque le estemos obligando a utilizar software obsoleto y conproblemas de seguridad o a que tire nuestra aplicación a labasura. Y eso nos haría poco profesionales.



13/03/12 16

Introducción

Diseñar para un navegador en concreto pero realizar laspruebas en varios. En caso de error buscar una solución paraél.

Esta forma de trabajar no es la ideal ya que puede habersituaciones donde la solución sea muy costosa, sobre todo si sedesea desarrollar para más de dos navegadores distintos.



13/03/12 17

Introducción

Mantener una rama de desarrollo de JavaScript por para tipode navegador, específica, probada, segura y estable. Laaplicación detecta el navegador y carga el códigodesarrollado para él.

Los problemas de este sistema son evidentes, pero las ventajastambién.

Es una tarea tediosa e implica multiplicar el esfuerzo.Pero es determinista y cuantificable, requisitos necesariospara ser aceptable desde el punto de vista de la Ingeniería delSoftware.



13/03/12 18

Introducción

¿Qué opción elegiríaGoogle?

Pista:



¿QUÉ ES GWT?

Segunda parte:



13/03/12 20

¿Qué es GWT?

¿Y que es GWT?Google Web Toolkit

Google quiere que seamos más productivos y nos regala latecnologí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 tocarni una sola línea de Javascript (si no se desea).

Para ello, el desarrollo de la interfaz se hace en Java, al estilode una aplicación Swing.



No es magia… es uncompilador.

El compilador de GWT genera Javascript a partir de las clases Java que escribimos y laGWT Class Library , que es un JRE optimizado para la traducción a Javascript . Estaoptimización consiste, básicamente, en utilizar un subconjunto de tipos del JRE.

13/03/12 21



13/03/12 22

¿Qué es GWT?

El compilador de GWT conoce las particularidades de losnavegadores y para cada navegador genera un archivo Javascript distinto, que se cargará en el navegadoradecuado automáticamente.

Si, además, utilizamos las capacidades multilenguaje deGWT (gracias a la librería I18N) se generará un archivo

Javascript por cada navegador e idioma quedefinamos.

A cada uno de estos archivos se les denomina en ladocumentación como permutación.



13/03/12 23

¿Qué es GWT?

El código Javascript que se genera no sólo funciona como seespera, sino que además es muy eficiente.

A parte de haber mapeado la semántica y las funciones deforma eficaz el código se puede ofuscar para minimizar sutamaño (y su legibilidad).

Existen 3 niveles de ofuscación:

Obfuscated (por defecto)

Pretty

Detailed



13/03/12 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 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 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;vari;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 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 tenemosasignado a pruebas para probar la funcionalidad, y no lacorrección.

Estos widgets pueden ampliarse mediante nuestrosconocidos mecanismos de herencia para crear widgets máscomplejos.

A continuación un ejemplo muy sencillo.



13/03/12 28

¿Qué es GWT?

Ejemplo: Botón que al pulsar abre un pop-up



13/03/12 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 30

¿Qué es GWT?

A no ser que te guste desarrollar Javascript, te interesaGWT sea cual sea la tecnología utilizada en la parteservidor de tu aplicación.

GWT es un mecanismo de generación de Javascript a partirde Java. El resultado final es HTML + Javascript que secomunica con un servidor mediante distintos mecanismos,

estándares para cualquier tecnología en el servidor: XML

RPC

Texto / HTML

JSON



13/03/12 31

¿Qué es GWT?

Puedes seguir publicando tus servicios en el lado servidor yutilizarlos en el cliente.

Puedes desarrollar la interfaz en Java con Eclipse y tu parteservidor en .NET con Visual Studio.

Por supuesto también en PHP, Java, Python, Ruby , etc.



¿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



¿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 dememoria.

13/03/12 33



SMARTGWT ¿MÁS LISTOQUE GWT?

Tercera parte:



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 unaenvoltura de SmartClient para GWT.

Además, están preparados para que una complicadacomunicación cliente-servidor sea más sencilla.

Realmente es una importante alternativa a utilizar GWT yaque proporciona mayor nivel de abstracción, nos regalamucho más que GWT.

Se puede integrar totalmente con GWT.

13/03/12 35




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 adaptablePodemos cargar todo el contenido

simultáneamente o bajo demanda

Permite anidar tablas facilmente

Incorporar iconos, botones o cualquier otroelemento es trivial

Tiene una interfaz para crear filtros (Criteria)

Se puede editar sobre ella y añadir validación a loscampos.

Y se puede conectar al servidor, haciendo transparenteel proceso de alta, baja y modificación.

13/03/12 36




13/03/12 37




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 paramejorar la eficiencia. 1900$ por desarrollador – ilimitada.

Enterprise: garantía + utilidades. Llame y pregunte por elprecio

13/03/12 38




El gran problema que tiene SmartGWT es la carencia dedocumentació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 foroSmartClient .

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



ACCIÓN

Tercera parte:



Acción.

Amueblando la casa Java JDK .

Eclipse.

Plugin Google para Eclipse.

GWT SDK .

Plugins para los navegadores: cuando abramos unnavegador para ejecutar la aplicación en el modo dedepuración nos aparecerá un aviso para que lodescarguemos y un enlace.

13/03/12 41

http://code.google.com/intl/es/eclipse/docs/download.html

http://google-web-toolkit.googlecode.com/files/gwt-2.1.0.zip

http://google-web-toolkit.googlecode.com/files/gwt-2.1.0.zip

http://code.google.com/intl/es/eclipse/docs/download.html



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



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. Estasclases 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 traducea Javascript.

13/03/12 43



Acción.

NombreProyecto.gwt.xml: en terminología GWTeste 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 implementala interfaz EntryPoint cuyo método OnModuleLoad() es elmé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

ó



Acción.

Con el fin de reutilizar partes de nuestro proyecto,podemos definir varios módulos y utilizar el mecanismode 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

ó



Acción.

Paquete test: este paquete es opcional. En él se incluyen lostest JUnit del proyecto.

Paquete war: la aplicación web. En él encontraremos losrecursos estáticos (html, imágenes, css…) y código javascript.

Hay un recurso estático especialmente interesante:

NombreProyecto.HTML

13/03/12 46

ió



Acción.

Este archivo se denominaHost Page

enterminología GWT.

Puede tener vacío el bloque <BODY> ya que GWTse encarga de todo el contenido visual.

Pero GWT también puede insertar ciertos widgets

en lugares determinados de este HTML mediante eluso del atributo id de las etiquetas HTML.

Gracias a ello, podemos añadir la funcionalidad deGWT 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

A ió



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 tenerseparado 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 elque se defina la url del servidor y utilizarlo en las llamadasasíncronas a servicios.

13/03/12 48

A ió



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, implementeRemoteService.

Los métodos que definamos en la interfazcorresponden a servicios que vamos a invocar en elservidor.

En el paquete server creamos la claseEjemploServiceImpl que herede deRemoteServiceServlet e implemente la interfaz quehemos creado (EjemploService).

EjemploServiceImpl es un Servlet . Hay que añadirlo

al descriptor Web.xml.13/03/12 49

A ió



Acción.

Esto es AJAX, necesitamos callbacks que se ejecutencuando el servicio haya dado una respuesta.

Añadiremos un parámetro callback a los servicios quehemos definido en EjemploService utilizando el patrónProxy.

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á pornosotros si queremos.

Tendrá los mismos métodos, pero para cada uno de ellos

el tipo de resultado será void y tendrá un nuevoparámetro AsyncCallback<T>, donde T es el tipo deresultado.

13/03/12 50

A ió



Acción.

GWT implementará esta interfaz por nosotrosmediante 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 laimplementación de dos métodos: onFailure yonSuccess.

13/03/12 51

A ió



Acción.

JSONRequestBuilder

Existe otro mecanismo que no es GWT RCP para lacomunicación entre cliente y servidor.

Este mecanismo es parecido, pero desacopla casitotalmente ambos mundos.

Sólo se comparten las estructuras JSON que se envían oreciben.

Ojo con los callbacks: siempre se devuelven envueltosen una función.

13/03/12 52

A ió



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 conparámetros

URL destinoDatos envío

Nombre del callback

13/03/12 53



CONCLUSIONES

Cuarta parte:

Conclusiones



Conclusiones.

GWT sienta las bases para un cambio radical en eldesarrollo web.

SmartGWT y, previsiblemente, otros terceros estánaprovechando 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 conFlex(Muerto).

13/03/12 55



13/03/12 56

Java For Smart Information Technologies

http://www.j4sit.com

CuscoUniversidad San Antonio Abad

Facultad De Ing. Informatica y Sistemas4To Piso

ContactosIng. Vladimir Illis Ascue Lovon Br. Carlos Alberto Borda Benito

Email: [email protected] Email: [email protected] : 984381913 cel: 984722333



introduccion gwt-smartgwt

Documents