Gwt Seminario JavaHispano ManoloCarrasco

GWT, Google Web Toolkit

Manuel Carrasco MoñinoSeminarios de JavaHispano (16-Abril-2010)[email protected]

Programa

Entendiendo GWT ¿Qué es, y qué no es? Ventajas de usar un compilador frente a escribir javascript a mano Herramientas del toolkit. Soporte, Comunidad. Estructura de un Proyecto GWT.

Librerías y dependencias. GWT y Eclipse. Testing y Depuración. El corazón de GWT: JSNI, Deferred Binding, RPC

Builders: Ant y Maven SEO y GWT Aplicaciones Complejas RIA, modelo MVP

Proyectos de Ejemplo:svn checkout http://gwt-workshop.googlecode.com/svn/trunk GwtWssvn checkout http://svn.apache.org/repos/asf/james/hupa/trunk hupa

Acerca de Mí Licenciado en Farmacia e Ingeniero de Telecomunicaciones. Enganchado a los sistemas desde 2002, y a Internet desde 2005 Experto en sistemas críticos, seguridad, redes y comunicaciones, empecé a

apasionarme por el software hace 5 años. Programador de cualquier cosa (asm, c, c++, shell, tcl-tk, dbase, vb,

javascript, perl, ruby, groovy, Java ...) Enamorado de Linux. Fanático de TDD y las filosofías ágiles. Aficionado al Opensource

– Creador de proyectos como mcmWebmail, powerFax, Lxp, y librerías como gwtUpload, gwtChismes...

– Contribuciones a jetty, apache, ruby, perl, icewm, webmin, linux, uucp, mgetty, postfix ...

– Contribuidor de Gwt

– Committer de Hudson (Performance, Emma, Spanish Translation)

– Miembro de la Apache Software Foundation (James y Hupa). Pero... mi gran pasión es la música folk (me podéis llamar hortera :-)

He trabajado para Azkar, Intelligent Data, Cibernos, Lucent, Multiasistencia, COATM, mirai, Yell ....

Actualmente trabajo como Arquitecto de Sistemas y Sofware en Paradigma Tecnológico.

Entendiendo GWTQu es, y qu no es?¿ é é

Misión de GWT

To radically improvethe web experience for users

by enabling developersto use existing Java tools

to build no-compromise Ajaxfor any modern browser

Mejorar radicalmente la experiencia web de los usuarios al permitir a los desarrolladores utilizar las herramientas de Java para hacer Ajax (no comprometido), para cualquier navegador moderno.

¿Qué NO es GWT?

No es una librería más con utiliades Javascript (jquery, prototype ...)

No es una librería de widgets (ext, scriptaculous, yui ...)

No es un framework (mootools, dojo ...) No es 'exclusivamente' un kit para crear

aplicaciones RIA.

¿Qué es GWT? Generador de javascript: convierte código java a javascript.

− Es un compilador− Es un linker− Es un optimizador completo (no sólo compresión y ofuscación)− Es un SDK

El código generado puede incluirse en cualquier html (estático o dinámico), y puede interaccionar con éste (modificar el DOM, ejecutando AJAX, validando forms ...).

Proprorciona además un conjunto de herramientas para testear, depurar, etc ..

Proporciona un conjunto de módulos cliente: DOM, XML, I18N, JSON, RPC, y Widgets básicos.

Y... mucho mas (css sprite, image bundling ...)

Es código java para la máquina virtual 'browser' en lugar de 'jre'

Ventajas de usar un compilador frente a escribir javascript a mano

ASM sustituido por C, C++, GJC ...Javascript sustituido por Java, ? ... Alto nivel: Java

− <inherits− <replace-with− Inline JS native code − Compiler− Optimizer− Linker− Javascript para cada

navegador− Advanced IDE and tools

for testing, debuging

Alto Nivel: C/C++− #include− #define− Inline ASM native code− Compiler− Optimizer− Linker− Ensamblador para cada

procesador− Advanced IDE and tools

for testing, debuging

¿Porqué un compilador?

Separar la mantenibilidad del código de la efectividad del ejecutable.

El javascript escrito a mano tiene un conflicto de intereses:

− Identificadores largos y legibles = aplicaciones grandes y lentas.− Buen Formato = aplicaciones grandes y lentas.− Comentarios = aplicaciones grandes y lentas

La solución no es buscar convenciones en el código javascript escrito a mano, es crear un nivel de separación para que no se comprometan ambas (mantenibilidad, efectividad).

Muchos de los errores mas comunes (sintaxis, errores de tipadom etc) son fácilmente corregibles en tiempo de compilación en lugar de en tiempo de ejecución.

¿Porqué Java? La sintaxis javascript es más próxima a java que en otros

lenguages, por lo que es mas facil la transformación de java que de otros lenguages (perl, ruby, php ...).

Muchas herramientas Java para desarrollo. El chequeo de tipos de java incrementa la productividad

porque reduce errores. Asistencia en la escritura de código. Refactoring de verdad. Diseño, patrones, OO, hacen mas fácil de comprender el

código y las llamadas AJAX, con mucho menos documentación.

Y... TDD

GWT nos facilita Versionado de ficheros (para cada compilación) Sólo lo necesario para cada navegador y lenguaje. Descarga sólo lo que se usa. Eliminar código no usado (sólo las clases, y métodos utilizados). Código ofuscado, comprimido y optimizado. Los ficheros pueden ser cacheados para siempre. Ejecución más rápida pero con código legible. Herramientas para Test y Debug. Librerías de lado servidor (RPC java) Mismos objetos Servidor <=> Cliente Deja a GWT hacer las cosas que tenemos que hacer a mano, o que dejamos de

hacer por desconocimiento, complejidad, etc.− Selección e inclusión de librerías en la página. − Herramienas de optimización− Herramientas de ofuscación − Versionado de ficheros para publicar.− Mantenimiento de versiones legibles/ilegibles del código.− Configuración http para enviar información de caché

¿Rendimiento? JavaScript

− GWT genera código mucho más pequeño que el que podamos escribir a mano. A diferencia de las aplicaciones tradicionales en javascript, Gwt analiza tu código e incluye exclusivamente lo necesario para cada navegador.

− Pudiera no ser más rápido, pero sí mas eficaz Usuario

− Las aplicaciones GWT son normalmente más rápidas que las escritas a mano, y normalmente requieren menos trucos HTTP. Gwt elimina el uso envoltorios para funcionalidades incluidas nativamente en esa versión de navegador.

Desarrollo− Con el ahorro del tiempo invertido en depurar los problemas en cada

navegador, puedes emplear mucho mas tiempo en la funcionalidad de tu aplicación. La eficiencia en el desarrollo es la parte favorita en Gwt.

Herramientas del toolkit.

Componentes GWT Libreria emulada JRE:

− java.util− java.lang

GWT librería Core – JSON, XML, RPC– DOM, UI, I18N

Compiler, Optimizer, Linker Herramientas para desarrollo:

− Scripts de utiliad:− webAppCreator, i18nCreator

− Testing library (GWTestCase, HtmlUnit)− Customized App Server: Jetty/Tomcat− Eclipse Plugin− Browser plugin− Speed Tracer (extensión para chrome)

¿Y qué más? Historia de navegación (Botón atras, adelante) ClientBundle: permite agrupar y manipular recursos en tiempo de compilación

(Imágenes, Optimización de Css, Sprite, lenguages …) UIBinder: lenguage declarativo y extensivo para construir interfaces de usuario.

Injecta constructores en el código Java, y genera HTML en tiempo de compilación.

Code split: fragmenta el código javascript en partes para que sean cargadas asíncronamente.

LayoutPanels: comportamiento predecible de la disposición de elementos. Compresión: Utiliza las mas avanzadas técnicas de compresión conocidas. Gestor de Eventos y Schedule propios, sin memory leaks. JSNI (JavaScript Native Interface) SOYC (Story of your compile)

Soporte, Comunidad.

Actividad GWT Comunidad muy activa:

– GWT-users cien mensajes diarios– GWT-contributors (lista moderada) 10 mensajes diarios

Desarrollo – Grupo de committers limitado– Decenas de contributors– Exhaustiva revisión de código– Tests muy exigentes– Elevada calidad de código (javadocs, codstyle …)– Excelentes desarrolladores.

Documentación– Muy bien explicado– Muy Actualizada

Cientos de librerías Google.

Estructura de un Proyecto GWT.

Estructura del proyecto

src/.../client: código para el navegador

src/.../public: html, css, img ... src/.../server: código para el

servidor [project].gwt.xml: configuración test/.../client: tests de cliente test/.../server: tests java war/ cosas de despliegue

– war/lib – war/WEB-INF

Pasos para crear un proyecto

1. Crea un nuevo proyecto2. Configura el módulo3. Crea tu página html y pon la llamada JS4. Desarrolla en java: cliente, servidor, RPC 5. No olvides Testear: GWTTestCase6. Prueba y depura: DevMode + Browser + Plugin7. Compila a JS8. Despliega 9. Olvidaté de versionado, optimización,

obfuscación, caché, refactoring, reusing ...

Crear el proyecto $ ~/gwt-current/webAppCreator -helpGoogle Web Toolkit 2.0.3WebAppCreator [-overwrite] [-ignore] [-out dir] [-junit pathToJUnitJar] moduleName

where -overwrite Overwrite any existing files -ignore Ignore any existing files; do not overwrite -out The directory to write output files into (defaults to current) -junit Specifies the path to your junit.jar (optional)and moduleName The name of the module to create (e.g. com.example.myapp.MyApp)

$ ~/gwt-current/webAppCreator \ -junit mylibs/junit-4.3.jar \ -overwrite \ -out Hello \ com.foo.HelloCreated directory Hello/srcCreated directory Hello/warCreated directory Hello/war/WEB-INF[…]

Configurar el módulo <module rename-to=”hola” >  <inherits name='com.google.gwt.user.User'/> <inherits name="com.google.code.p.gwtchismes.GWTChismes" />

 <entry-point class='com.foo.Hello'/>  <stylesheet src="JsUpload.css"/>  <set-property name="export" value="yes" />     <replace-with class="com.foo.MyClassIE"> <when-type-is class="com.foo.MyClass"/> <any> <when-property-is name="user.agent" value="ie6"/> <when-property-is name="user.agent" value="ie8"/> </any> </replace-with></module>

Página html de la aplicación



<html> <head> </head> <body>  <script id="ID" type="text/javascript" language="javascript" src="com.foo.Hello.js?123&provider=1"> </script>

 <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>

 <h1>Hello</h1>

 <script id="ID" type="text/javascript" language="javascript" src="jquery.js"> </script> </body></html>

Trabajar en Java

- El método EntryPoint se llama cuando la aplicación se carga en el navegador

- GWT.create permite asociación aplazada de clases 'deferred binding'

- La clase DOM sirve para manejar elementos de navegador

package com.foo.client;import [...]public class Hello implements EntryPoint { // This method is called whenever the browser loads the page public void onModuleLoad() { MyClass impl = GWT.create(MyClass.class); DOM.getElementById("id").getStyle().setProperty("display", "none"); }}

¿Qué obtenemos al Compilar?

## Único Fichero a incluir en el HTML## Se encarga de detectar browser/lang y cargar el fichero de aplicacion adecuado## No se debe cachearcom.foo.Hello.nocache.js## Cada fichero para la combinación browser/language## Se pueden generar ficheros '.js' o '.html' dependiendo del linker ## cross-site (xs), standard (std)## Se puede cachear1102DEF681997CEB9DDF55DEA52DAC77.cache.js (ó .html)35041D1CDE8A3F7BA84E28F014AD7763.cache.js855ACC0BD175268F9BFBDDD1AC46D60C.cache.jsBCAE487AACB322FA340C97DFE205CF9C.cache.jsEAB3A6766FC64B8FB876749E68EF311D.cache.js## Definición de llamadas rpcDACD019E1AB65BD2BCAC2F7BD9DB85F2.gwt.rpc## Ficheros estáticosclear.cache.gifHello.csshistory.htmlHello.cssHello.htmlimages/

¿Cómo es el JS generado?

### Compilando con el parámetro -style PRETTYfunction getStylePrimaryName(elem){ var fullClassName, spaceIdx; fullClassName = elem['className'] == null?null:String(elem['className']); spaceIdx = fullClassName.indexOf(fromCodePoint(32)); if (spaceIdx >= 0) { return fullClassName.substr(0, spaceIdx - 0); } return fullClassName;}

function removeStyleName_0(style){ setStyleName_0(this.getStyleElement(), style, false);}

### Por defecto -style OBFUSCATED_=gB.prototype=new zdb();_.gC=lB;_.tI=22;function tB(f,d){var a,b,c,e,g;for(b=0;b<d.length;+

+b){c=fi+(d[b]!=null?d[b]:fi);a=sx+b+ux;for(;;){e=f.indexOf(a);if(e<0)break;g=fi;if(e+a.length<f.length)g=gMb(f,e+a.length);f=f.substr(0,e-0)+c+g}}return f}

function mC(c,a,d){var b;b=d>0?~~(a*100/d):0;nC(c,b,a,d)}

Usar la caché de cliente

### Configuración Apache para GWT

ExpiresActive onExpiresDefault "now plus 2 hours"

# Dont cache the main file (browser and locale detector, and application file selector)# ie: com.miraiespana.home.gwt.Home.nocache.js<Files ~ \*.nocache\.*> ExpiresDefault "now plus 2 minutes" Header set Cache-Control "no-store,must-revalidate" AddOutputFilter DEFLATE</Files>

# Cache the application files# ie: 1102DEF681997CEB9DDF55DEA52DAC77.cache.js<Files ~ *\.cache\.*> ExpiresDefault "now plus 2 years" Header set Cache-Control "max-age=290304000,public"</Files>

Librer as y dependenciasí

Estructura de las librerías GWT

• Crear un módulo (normalmente sin entryPoint)

• Crear código Java

• Añadir elementos estáticos

• Generar un fichero jar que incluya:– Código Fuente *.java

– Elementos Públicos (css, jpg ...)

– Fichero de Módulo *.gwt.xml

– Clases compiladas *.class

– META-INF/MANIFEST.MF

• Conclusión: igual que en java– Se puede utilizar maven

– Se puede utilizar ant

Cómo se usan la Librerías GWT

• Añadir el fichero .jar al classpath• Heredar el módulo de la librería en nuestro módulo.

Incluir librerías que no se utilizan sólo penaliza el tiempo de compilación, porque todo el código no usado será descartado de nuestro javascript final.

## Hello.gwt.xml <module rename-to=”hola” > [ … ]

 <inherits name="com.google.code.p.gwtchismes.GWTChismes" />  <stylesheet src="GWTC-compressed.css"/>

[ … ]</module>

GWT y Eclipse

Plugin de google para eclipse El plugin incluye:

– Asistente para creación de proyectos.– Servidor y Lanzador de aplicaciones– Lanzador de Tests– SDK para GWT– SDK para GAE

Web oficial:– http:http://code.google.com/eclipse/

Plugin para Navegadores Para depurar y trabajar en modo desarrollo es necesario añadir a nuestro

navegador el plugin para GWT Existen plugins para:

– FF– Chrome– IE

¿Cómo funciona?– GWT compila la aplicación a javascript añadiendo cierta información de

control.– Se utiliza un canal de comunicación entre el plugin del browser y el

modo de desarrollo de GWT (integrado en eclipse)– Eclipse interacciona con el usuario mostrando las líneas de código y con

el navegador y respetando los puntos de control

Importar un proyecto a Eclipse File → Import → Existing projects into workspace → Browse

Añadirlo al plugin GWT Properties → Google → Web Toolkit → Use GWT

Verificar 'Build Path' Properties → Java Build Path → Add Library …

– (añadir GWT SDK y eliminar gwt*jar)

Ejecutar en modo desarrollo Borrar ficheros *.launch (ya no son necesarios con el plugin) Run As → Web Application Abrir la URL indicada en el Navegador (si no tiene el plugin preguntará).

Testing y Depuraci nó

Ejecutar tests (de Cliente JS) Dos modos de ejecución:

– Desarrollo• Se compila la aplicación para HtmlUnit• Se ejecuta HtmlUnit y Jetty• Run As → GWT Junit Test

– Producción• Se compila la aplicación para el browser por defecto• Se ejecuta automáticamente el navegador y Jetty• Run As → GWT Junit Test (Production Mode)

Otros modos de Test de cliente El resto de modos de Test requieren realizar algunas operaciones en eclipse: Lanzar el test en modo junit

– Run As → Junit Test El test fallará porque le falta añadir al classpath los directorios de fuentes

– Run → Run Configurations → HelloTest → ClassPath → User Entries → Advanced → Add Folders → (src y test)

Probar el test que debe pasar Añadir las opciones que deseemos:

– Run → Run Configurations → HelloTest → xArgument → VMArgumentsNota: poner las siguientes opciones entre comillas dobles

– Manual -Dgwt.args=-runStyle Manual:1

– Selenium -Dgwt.args=-runStyle Selenium:myhost:4444/*firefox

– BrowserManagerServer -Dgwt.args=-runStyle RemoteWeb:rmi://myhost/ie8 java -cp gwt-user.jar;gwt-dev.jar \ com.google.gwt.junit.remote.BrowserManagerServer \ ie8 "C:\Program Files\Internet Explorer\IEXPLORE.EXE"

Depurar

• La depuración de aplicaciones GWT (cliente) es exactamente igual que para cualquier otra aplicación java:

– Poner puntos de control– Debug As → (Web Application | GWT Junit Test | GWT Junit Test

(Production Mode)– Conectar el browser– Utilizar la vista de depuración

• Se puede mezclar depuración del lado cliente con lado servidor.• Al igual que depurando aplicaciones gráficas, la depuración continúa cuando

ocurre un evento.

• Recomendación: NO depurar → hacer TDD

El coraz n de GWT:óJSNI

Deferred BindingAjax

JSNI (JavaScript Native Interface)

• Código Javascript en comentarios java• Permite utilizar Js dentro de GWT y al revés.• Usa la declaración 'native' que indica a java que

ese método se resolverá en tiempo de 'runtime'

• Los métodos nativos se puede utilizar en los IDEs sin que marquen el código con error.

• El compilador GWT lo detecta y lo copia en el fichero javascript resultante

• Finalmente se comprime y obfusca junto con el resto de código

JSNI## En este ejemplo exportamos un método creado en GWT y lo dejamos disponible en el objeto Window

public class HelloClass implements EntryPoint{

String prefix = "Hello: ";

// Al cargar la aplicacion, exportamos el metodo public void onModuleLoad() { exportHelloMethod(this); } // Metodo que queremos usar desde javascript public String helloMethod(String name) { return prefix + " " + name; } // JSNI: ponemos nuestro método en el objeto window private native void exportHelloMethod(HelloClass instance) /*-{ $wnd.hello = function(name) { return [email protected]::helloMethod(Ljava/lang/String;) (name); }; }-*/;}

Deferred Binding

• Son clases java que no se utilizan hasta el momento de compilación

• Se seleccionan diferentes implementaciones para cada navegador, lenguage …

• Hace posible el emulador JRE de GWT• Elimina el código innecesario para cada

plataforma.• Es el principal responsable del rendimiento del

código JS generado por GWT

Deferred Binding# El modo de establecer la opacidad es diferente en IE y en otros navegadoresclass DOM { private static CSSImpl cssImpl = GWT.create(CSSImpl.class); public void cssClearOpacity(Element e) { cssImpl.cssClearOpacity(e.getStyle(); } public native void cssSetOpacity(Element e, double value) { cssImpl.cssSetOpacity(e.getStyle(), value; }}

class CSSImpl { public void cssClearOpacity(Style style) { style.setProperty("opacity", ""); } public native void cssSetOpacity(Style style, double value) { style.setProperty("opacity", String.ValueOf(value); }}

class CSSImplIE extends CSSImpl{ @Override public native void cssClearOpacity(Style style) /*-{ style.filter = ''; }-*/; @Override public native void cssSetOpacity(Style style, double value) /*-{ style.filter = 'alpha(opacity=' + (value * 100) + ')'; }-*/;}

<replace-with class="[...].CSSImplIE"> <when-type-is class="[...].CSSImpl"/> <any> <when-property-is name="user.agent" value="ie6"/> <when-property-is name="user.agent" value="ie8"/> </any> </replace-with>

AJAX, RPC

• GWT puede hacer llamadas Ajax de 4 tipos– XML– JSON– TEXT o HTML– RPC

• RPC es un contrato entre servidor (java) y cliente.

• Se pasan objetos (pojo) que se puedan serializar.– No todos los objetos serializables en JRE son serializables– Tienen que ser compatibles con la emulación JRE de GWT.

• En el servidor hay que extender RemoteServiceServlet• Realmente se transfieren objetos jSON especiales que ambos

extremos saben convertir en su propia representación de objeto

RPC

// Interfaces necesarios (Se ponen en la parte cliente)@RemoteServiceRelativePath ("greet")public interface GreetingService extends RemoteService { String greetServer(String name) throws IllegalArgumentException;}

public interface GreetingServiceAsync { void greetServer(String input, AsyncCallback<String> callback) throws IllegalArgumentException;}

// Codigo clientepublic class Hello implements EntryPoint { private final GreetingServiceAsync greetingService = GWT.create(GreetingService.class);

greetingService .greetServer(textToServer, new AsyncCallback<String>() { public void onFailure(Throwable caught) { } public void onSuccess(String result) { } });}

// Codigo en el servidorpublic class GreetingServiceImpl extends RemoteServiceServlet implements GreetingService { public String greetServer(String input) throws IllegalArgumentException { }}

<web-app> <servlet> <servlet-name>greetServlet</servlet-name> <servlet-class>ws.server.GreetingServiceImpl</servlet-class> </servlet> <servlet-mapping> <servlet-name>greetServlet</servlet-name> <url-pattern>/hello/greet</url-pattern> </servlet-mapping></web-app>

Builders: Ant y Maven

Ant Los proyectos GWT para 'ant' se crean con la herramienta

webAppCreator Se genera un fichero build.xml con las tareas de:

– Ejecutar Tests• test.dev (HtmlUnit)• test.prod (Browser)

– Ejecutar en Modo desarrollo• devmode

– Compilar las clases java• javac • javac.tests

– Compilar el código java a javascript• gwtc

– Producir el fichero de la aplicación empaquetado• war

Maven Aunque hay varios plugins para maven, se debe usar el alojado en codehaus

http://mojo.codehaus.org/gwt-maven-plugin/. Se necesita maven 2.2.x para que funcione. Existe un arquetipo para crear un proyecto GWT:

– mvn archetype:generate -DarchetypeGroupId=org.codehaus.mojo \ -DarchetypeArtifactId=gwt-maven-plugin -DarchetypeVersion=1.1 \ -DgroupId=ws -DartifactId=GwtWsHelloWorld

– Después editar el fichero pom.xml y hacer estas modificaciones<gwt.version>2.0.3</gwt.version>[...]<plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>gwt-maven-plugin</artifactId> <configuration> <runTarget>myGroupId.Application/Application.html</runTarget> </configuration> <executions> <execution> <phase>prepare-package</phase> <goals> <goal>compile</goal> </goals> </execution> </executions></plugin>

http://mojo.codehaus.org/gwt-maven-plugin/

Maven Goles:

– 'mvn gwt:run' ejecutar el modo desarrollo– 'mvn gwt:compile' compilar a javascript

El resto de goles Gwt no funcionan o no son necesarios A partir de ahora podemos utilizar maven como en cualquier otro

proyecto java:– 'mvn clean test package emma:emma site' …

Nota: la instrumentalización de cobertura para tests GWT sólo funciona con Emma.

Importar el proyecto en eclipse como un proyecto maven con el plugin m2eclipse de sonatype

Inportar proyecto maven en eclipse Importar el proyecto maven:

– File Import Maven projects.→ → Añadir al proyecto el SDK de GWT Especificar la ubicación del directorio web:

– Properties Web Application This project has a WAR → → →directory src/main/webapp Mark Launch from this→ →

Borrar index.html Crear index.html con el plugin GWT

– New (G) HTML page index.html ws.Application→ → →

SEO y GWT

SEO- GWT produce javascript con capacidades muy avanzadas de manejar el DOM

y de ejecutar Ajax.

- Podemos modificar el comportamiento de una página utilizando javascript (progressive enhancement).

- Podemos reaprovechar el código de una funcionaliad añadida en una parte de nuestra aplicación en cualquier otra.

- Gquery, es un clon de jquery para Gwt. - La versión 0.2-patched es funcional y estable (1.6.x). http://gwt-workshop.googlecode.com/svn/trunk/lib/gwtquery-0.2-patched.jar

- La versión 0.1-SNAPSHOT-patched es funcional (2.0.x), pero la parte de efectos es inestable, aunque los selectores y eventos funcionan bien.

http://gwt-workshop.googlecode.com/svn/trunk/lib/gwtquery-1.0-patched-SNAPSHOT.jar

- Parte del código de Gquery estará en el core de GWT (selectores Css)

GQuery

$("div.outer > div").css("position", "relative"). dblclick(new Function() { public boolean f(Event e) { $("div.outer > div").as(Effects). animate("left: '+=100'"). animate("top: '+=100'"). animate("left: '-=100'"). animate("top: '-=100'"); } });

$(".note").click(lazy().fadeOut().done()); $(".note").append(" Hello"); $("div > div"). css("color", "blue"). hover( lazy(). css("color", "red"). done(), lazy(). css("color", "blue"). Done() );

$(".w").before("<button>Click me ...</button>"). as(Effects).fadeIn();

$(".w").css($$("border: 'thin double red', padding: '10px', width: '50%', backgroundColor: 'green', position: 'relative'" ));

$("button").click(doEffect);

Creando librerías Js con GWT- Los objetos, métodos y variables creados con GWT se pasan a JS,

pero el compilador obfusca estos nombres aleatoriamente de manera que es imposible referenciarlos desde javascript.

- GwtExporter permite exportar las clases y métodos que queramos con nombres conocidos en tiempo de compilación

- Leer el tutorial:http://code.google.com/p/gwtchismes/wiki/Tutorial_ExportingGwtLib

rariesToJavascript_es

Aplicaciones Complejas RIA, modelo MVP

MVC (Modelo vista controlador)

• Struts, JFace, Spring mvc, ASP, Grails, ROR, etc• Vista no testeable (o dificil)• Desarrollo lento• Vinculos complejos

• Muy acoplado• Dependencias cruzadas

MVP (Modelo Vista Presentador)

• Swing, awt, swt, echo2, vaadin, gwt ...• Vista Testeable unitariamente.• TDD pero desarrollo lento.• Vinculos muy sencillos: 1 → 1

• Objetivo: Crear una vista simple– Testabilidad de la vista no es necesaria

porque utilizamos componentes testados.

– Se pueden crear Mock muy simples• Desarrollo Rapido con TDD

MVP + EventBus + Patron Comando

• Muy desacoplado• Dependencias muy simples

Resumiendo: ¿Qué es MVP?

• MVP patrón derivado de MVC que ayuda a separar mucho la vista• La clave es una estricta regulación de la interacción entre la vista y el

presentador• La vista y el modelo de datos estan separados a través de un contrato

(interface)• MVP es una mejora de MVC basado en:

– La vista no conoce al modelo.– El presentador es independiente de la tecnología de interfaz de

usuario.– La vista y el presentador son testeables independientemente

MVP + Gwt, la clave: el presentador

• Componente encargado de “presentar” las acciones del usuario al sistema y obtener la respuesta.

• Actúa de la siguiente manera:– Recibe datos de la vista– Convierte los datos de la vista en acciones que se ejecutan contra el sistema– Con la respuesta del sistema, actualiza los datos de la vista.– La navegación a otra vista, deberán ser delegadas en el presentador, que

sabrá de historia, caches, etc. • Se ejecuta en el navegador, pero es testeable en la JVM.• Es la clave del desarrollo ágil en Gwt• Librerías disponibles:

– Gwt-Gin → inyeccion en parte cliente– Gwt-presenter → para el presentador, historia, eventbus– Gwt-dispatch → para el modelo comando (cliente/servidor

presentador/modelo)

MVP, Consideraciones

• El patrón MVP, no puede ser implementado sin haber hecho un análisis previo que determine que miembros deben formar parte del contrato de cada vista.

• Una vez que tenemos claro el contrato que debe implementar cada vista, podemos desarrollar la lógica de presentación de forma paralela al diseño gráfico.

• El patrón MVP puede ser caro de implementar en aplicaciones relativamente sencillas, pero es muy útil en grandes aplicaciones.

MVP explicación de clases y métodos:

• EventBus: – addEvent(type, action), – fireEvent(type, data)

• Dispatcher: – execute(action(request), callback(response))

• XXPresenter, XXDisplay– onBind, revealDisplay

• XXEventHandler, XXEvent• XXAction, XXResult• XXActionHandler

Conclusiones

GWT no hace posible nada que no fuera posible hacer de otra manera, pero sí hace que la acción sea mucho mas productiva.

GWT no intenta ensalzar las virtudes de Java, sino reconocer el pragmatismo de las herramientas existentes, IDEs, entornos de prueba, tipos, etc.

GWT no quiere hacernos olvidar DOM, CSS, navegador, etc, sino permitir escribir abstracciones de todo ello y hacernos mas productivos que escribiendo código JS a mano.

Posiblemente, algún día GWT será capaz de compilar otros lenguages, o incluso procesar JS con anotaciones de tipos.

GWT hace productivo y posible el desarrollo de sitios webs de gran escala y abre la posibilidad de crear aplicaciones de nueva generación de manera fiable.

Ray Cromwell

Manuel Carrasco Mo inoñ

http://manolocarrasco.blogspot.comtwitter.com/dodotis

[email protected]

Preguntas

Documents

Gwt Seminario JavaHispano ManoloCarrasco