gwt iii - avanzado
DESCRIPTION
GWT Parte-3. Gwt AvanzadoSeminarios JavaHispano.Universidad S.Pablo CEU MadridAbril 2010TRANSCRIPT
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
Preguntas