gwt iii - avanzado

GWT, Google Web ToolkitParte 3: GWT Avanzado

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

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>

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

Manuel Carrasco Mo inoñ

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

[email protected]

Preguntas

gwt iii - avanzado

Documents