You are on page 1of 69

GWT, Google Web Toolkit

Manuel Carrasco Moino Seminarios de JavaHispano (16-Abril-2010)


manolo@apache.org

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.

Libreras y dependencias. GWT y Eclipse. Testing y Depuracin. El corazn 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 GwtWs svn 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 crticos, seguridad, redes y comunicaciones, empec a apasionarme por el software hace 5 aos. Programador de cualquier cosa (asm, c, c++, shell, tcl-tk, dbase, vb, javascript, perl, ruby, groovy, Java ...) Enamorado de Linux. Fantico de TDD y las filosofas giles. Aficionado al Opensource Creador de proyectos como mcmWebmail, powerFax, Lxp, y libreras 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 pasin es la msica folk (me podis llamar hortera :-) He trabajado para Azkar, Intelligent Data, Cibernos, Lucent, Multiasistencia, COATM, mirai, Yell .... Actualmente trabajo como Arquitecto de Sistemas y Sofware en Paradigma Tecnolgico.

Entendiendo GWT Qu es, y qu no es?

Misin de GWT
To radically improve the web experience for users by enabling developers to use existing Java tools to build no-compromise Ajax for 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 librera ms con utiliades Javascript (jquery, prototype ...) No es una librera 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 cdigo java a javascript. Es un compilador Es un linker Es un optimizador completo (no slo compresin y ofuscacin) Es un SDK El cdigo generado puede incluirse en cualquier html (esttico o dinmico), y puede interaccionar con ste (modificar el DOM, ejecutando AJAX, validando forms ...). Proprorciona adems un conjunto de herramientas para testear, depurar, etc .. Proporciona un conjunto de mdulos cliente: DOM, XML, I18N, JSON, RPC, y Widgets bsicos. Y... mucho mas (css sprite, image bundling ...) Es cdigo java para la mquina 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


Alto Nivel: C/C++


<inherits <replace-with Inline JS native code Compiler Optimizer Linker Javascript para cada navegador Advanced IDE and tools for testing, debuging

#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 cdigo 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 solucin no es buscar convenciones en el cdigo javascript escrito a mano, es crear un nivel de separacin para que no se comprometan ambas (mantenibilidad, efectividad). Muchos de los errores mas comunes (sintaxis, errores de tipadom etc) son fcilmente corregibles en tiempo de compilacin en lugar de en tiempo de ejecucin.

Porqu Java?

La sintaxis javascript es ms prxima a java que en otros lenguages, por lo que es mas facil la transformacin 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 cdigo. Refactoring de verdad. Diseo, patrones, OO, hacen mas fcil de comprender el cdigo y las llamadas AJAX, con mucho menos documentacin. Y... TDD

GWT nos facilita


Versionado de ficheros (para cada compilacin) Slo lo necesario para cada navegador y lenguaje. Descarga slo lo que se usa. Eliminar cdigo no usado (slo las clases, y mtodos utilizados). Cdigo ofuscado, comprimido y optimizado. Los ficheros pueden ser cacheados para siempre. Ejecucin ms rpida pero con cdigo legible. Herramientas para Test y Debug. Libreras 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. Seleccin e inclusin de libreras en la pgina. Herramienas de optimizacin Herramientas de ofuscacin Versionado de ficheros para publicar. Mantenimiento de versiones legibles/ilegibles del cdigo. Configuracin http para enviar informacin de cach

Rendimiento?

JavaScript GWT genera cdigo mucho ms pequeo que el que podamos escribir a mano. A diferencia de las aplicaciones tradicionales en javascript, Gwt analiza tu cdigo e incluye exclusivamente lo necesario para cada navegador. Pudiera no ser ms rpido, pero s mas eficaz Usuario Las aplicaciones GWT son normalmente ms rpidas que las escritas a mano, y normalmente requieren menos trucos HTTP. Gwt elimina el uso envoltorios para funcionalidades incluidas nativamente en esa versin 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 aplicacin. La eficiencia en el desarrollo es la parte favorita en Gwt.

Herramientas del toolkit.

Componentes GWT

Libreria emulada JRE: java.util java.lang GWT librera 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 (extensin para chrome)

Y qu ms?

Historia de navegacin (Botn atras, adelante) ClientBundle: permite agrupar y manipular recursos en tiempo de compilacin (Imgenes, Optimizacin de Css, Sprite, lenguages ) UIBinder: lenguage declarativo y extensivo para construir interfaces de usuario. Injecta constructores en el cdigo Java, y genera HTML en tiempo de compilacin. Code split: fragmenta el cdigo javascript en partes para que sean cargadas asncronamente. LayoutPanels: comportamiento predecible de la disposicin de elementos. Compresin: Utiliza las mas avanzadas tcnicas de compresin 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 revisin de cdigo Tests muy exigentes Elevada calidad de cdigo (javadocs, codstyle ) Excelentes desarrolladores. Documentacin Muy bien explicado Muy Actualizada Cientos de libreras Google.

Estructura de un Proyecto GWT.

Estructura del proyecto

src/.../client: cdigo para el navegador src/.../public: html, css, img ... src/.../server: cdigo para el servidor [project].gwt.xml: configuracin 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 proyecto 2. Configura el mdulo 3. Crea tu pgina html y pon la llamada JS 4. Desarrolla en java: cliente, servidor, RPC 5. No olvides Testear: GWTTestCase 6. Prueba y depura: DevMode + Browser + Plugin 7. Compila a JS 8. Despliega 9. Olvidat de versionado, optimizacin, obfuscacin, cach, refactoring, reusing ...

Crear el proyecto
$ ~/gwt-current/webAppCreator -help
Google Web Toolkit 2.0.3 WebAppCreator [-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.Hello


Created directory Hello/src Created directory Hello/war Created directory Hello/war/WEB-INF []

Configurar el mdulo
<module rename-to=hola > <!-- Librerias en el cliente --> <inherits name='com.google.gwt.user.User'/> <inherits name="com.google.code.p.gwtchismes.GWTChismes" /> <!-- Clase(s) a cargar en la inicializacin --> <entry-point class='com.foo.Hello'/> <!-- Hojas de estilo --> <stylesheet src="JsUpload.css"/> <!-- Propiedades especficas de mdulos importados --> <set-property name="export" value="yes" /> <!-- Lenguajes --> <!-- <extend-property name="locale" values="es" /> --> <!-- Linker std, xs, --> <!-- <add-linker name="xs"/> <!-- Deferred binding, --> <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>

Pgina html de la aplicacin


<!-- Hacer la llamada al fichero de javascript generado para nuestra aplicacin en cualquier fichero esttico o dinmico. --> <html> <head> </head> <body> <!-- Llamada a nuestra aplicacin --> <script id="ID" type="text/javascript" language="javascript" src="com.foo.Hello.js?123&provider=1"> </script> <!-- Necesario si queremos tener historia --> <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe> <!-- Se puede poner todo el contenido html que queramos y manipularlo --> <h1>Hello</h1> <!-- GWT no es intrusivo, se puede utilizar cualquier otra librera/s js --> <script id="ID" type="text/javascript" language="javascript" src="jquery.js"> </script> </body> </html>

Trabajar en Java
- El mtodo EntryPoint se llama cuando la aplicacin se carga en el navegador - GWT.create permite asociacin 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 cachear com.foo.Hello.nocache.js ## Cada fichero para la combinacin browser/language ## Se pueden generar ficheros '.js' o '.html' dependiendo del linker ## cross-site (xs), standard (std) ## Se puede cachear 1102DEF681997CEB9DDF55DEA52DAC77.cache.js ( .html) 35041D1CDE8A3F7BA84E28F014AD7763.cache.js 855ACC0BD175268F9BFBDDD1AC46D60C.cache.js BCAE487AACB322FA340C97DFE205CF9C.cache.js EAB3A6766FC64B8FB876749E68EF311D.cache.js ## Definicin de llamadas rpc DACD019E1AB65BD2BCAC2F7BD9DB85F2.gwt.rpc ## Ficheros estticos clear.cache.gif Hello.css history.html Hello.css Hello.html images/

Cmo es el JS generado?
### Compilando con el parmetro -style PRETTY function 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,e0)+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


### Configuracin Apache para GWT
ExpiresActive on ExpiresDefault "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>

Libreras y dependencias

Estructura de las libreras GWT


Crear un mdulo (normalmente sin entryPoint) Crear cdigo Java Aadir elementos estticos Generar un fichero jar que incluya:
Cdigo Fuente *.java Elementos Pblicos (css, jpg ...) Fichero de Mdulo *.gwt.xml Clases compiladas *.class META-INF/MANIFEST.MF

Conclusin: igual que en java


Se puede utilizar maven Se puede utilizar ant

Cmo se usan la Libreras GWT


Aadir el fichero .jar al classpath Heredar el mdulo de la librera en nuestro mdulo.
Incluir libreras que no se utilizan slo penaliza el tiempo de compilacin, porque todo el cdigo no usado ser descartado de nuestro javascript final.
## Hello.gwt.xml <module rename-to=hola > [] <!-- Mdulo/s que la librera provee --> <inherits name="com.google.code.p.gwtchismes.GWTChismes" /> <!-- Otras cosas necesarias para usar la librera --> <stylesheet src="GWTC-compressed.css"/> [] </module>

GWT y Eclipse

Plugin de google para eclipse

El plugin incluye: Asistente para creacin 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 aadir a nuestro navegador el plugin para GWT Existen plugins para: FF Chrome IE Cmo funciona? GWT compila la aplicacin a javascript aadiendo cierta informacin de control. Se utiliza un canal de comunicacin entre el plugin del browser y el modo de desarrollo de GWT (integrado en eclipse) Eclipse interacciona con el usuario mostrando las lneas de cdigo y con el navegador y respetando los puntos de control

Importar un proyecto a Eclipse

File Import Existing projects into workspace Browse

Aadirlo al plugin GWT

Properties Google Web Toolkit Use GWT

Verificar 'Build Path'

Properties Java Build Path Add Library (aadir 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 Depuracin

Ejecutar tests (de Cliente JS)

Dos modos de ejecucin: Desarrollo Se compila la aplicacin para HtmlUnit Se ejecuta HtmlUnit y Jetty Run As GWT Junit Test Produccin Se compila la aplicacin para el browser por defecto Se ejecuta automticamente 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 aadir 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 Aadir las opciones que deseemos: Run Run Configurations HelloTest xArgument VMArguments Nota: 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 depuracin de aplicaciones GWT (cliente) es exactamente igual que para cualquier otra aplicacin java: Poner puntos de control Debug As (Web Application | GWT Junit Test | GWT Junit Test (Production Mode) Conectar el browser Utilizar la vista de depuracin
Se puede mezclar depuracin del lado cliente con lado servidor.

Al igual que depurando aplicaciones grficas, la depuracin contina cuando ocurre un evento. Recomendacin: NO depurar hacer TDD

El corazn de GWT: JSNI Deferred Binding Ajax

JSNI (JavaScript Native Interface)


Cdigo Javascript en comentarios java Permite utilizar Js dentro de GWT y al revs. Usa la declaracin 'native' que indica a java que ese mtodo se resolver en tiempo de 'runtime' Los mtodos nativos se puede utilizar en los IDEs sin que marquen el cdigo 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 cdigo

JSNI
## En este ejemplo exportamos un mtodo 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 mtodo en el objeto window private native void exportHelloMethod(HelloClass instance) /*-{ $wnd.hello = function(name) { return instance.@jschismes.client.HelloClass::helloMethod(Ljava/lang/String;) (name); }; }-*/; }

Deferred Binding
Son clases java que no se utilizan hasta el momento de compilacin Se seleccionan diferentes implementaciones para cada navegador, lenguage Hace posible el emulador JRE de GWT Elimina el cdigo innecesario para cada plataforma. Es el principal responsable del rendimiento del cdigo JS generado por GWT

Deferred Binding
# El modo de establecer la opacidad es diferente en IE y en otros navegadores

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

En el servidor hay que extender RemoteServiceServlet Realmente se transfieren objetos jSON especiales que ambos extremos saben convertir en su propia representacin de objeto

No todos los objetos serializables en JRE son serializables Tienen que ser compatibles con la emulacin JRE de GWT.

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; } //Codigocliente public 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) { } }); } //Codigoenelservidor public 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 cdigo java a javascript gwtc Producir el fichero de la aplicacin 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

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

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 instrumentalizacin de cobertura para tests GWT slo 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. Aadir al proyecto el SDK de GWT Especificar la ubicacin 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 pgina utilizando javascript (progressive enhancement). - Podemos reaprovechar el cdigo de una funcionaliad aadida en una parte de nuestra aplicacin en cualquier otra. - Gquery, es un clon de jquery para Gwt. - La versin 0.2-patched es funcional y estable (1.6.x).

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

- La versin 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 cdigo 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 libreras Js con GWT


- Los objetos, mtodos 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 mtodos que queramos con nombres conocidos en tiempo de compilacin - 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 patrn derivado de MVC que ayuda a separar mucho la vista La clave es una estricta regulacin de la interaccin entre la vista y el presentador La vista y el modelo de datos estan separados a travs de un contrato (interface) MVP es una mejora de MVC basado en:
La vista no conoce al modelo. El presentador es independiente de la tecnologa 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. Acta 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 navegacin a otra vista, debern 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 Libreras 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 patrn MVP, no puede ser implementado sin haber hecho un anlisis 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 lgica de presentacin de forma paralela al diseo grfico. El patrn MVP puede ser caro de implementar en aplicaciones relativamente sencillas, pero es muy til en grandes aplicaciones.

MVP explicacin de clases y mtodos:


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 accin 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 cdigo JS a mano. Posiblemente, algn da 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 generacin de manera fiable. Ray Cromwell

Preguntas

Manuel Carrasco Moino


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

manolo@apache.org

You might also like