GWT, Google Web Toolkit
Parte 3: GWT Avanzado




           Manuel Carrasco Moñino
           Seminarios de JavaHispano (...
Testing y Depuración
Ejecutar tests (de Cliente JS)

    Dos modos de ejecución:
        – Desarrollo
                • Se compila la aplicaci...
Otros modos de Test de cliente

    El resto de modos de Test requieren realizar algunas operaciones en eclipse:

    La...
Depurar
• La depuración de aplicaciones GWT (cliente) es exactamente igual que para
     cualquier otra aplicación java:
 ...
El corazón de GWT:
        JSNI
  Deferred Binding
        Ajax
JSNI (JavaScript Native Interface)

• Código Javascript en comentarios java
• Permite utilizar Js dentro de GWT y al revés...
JSNI
## En este ejemplo exportamos un método creado en GWT y lo dejamos disponible en el objeto Window

public class Hello...
Deferred Binding

• Son clases java que no se utilizan hasta el
    momento de compilación
• Se seleccionan diferentes imp...
Deferred Binding
# El modo de establecer la opacidad es diferente en IE y en otros navegadores
class DOM {
  private stati...
AJAX, RPC

• GWT puede hacer llamadas Ajax de 4 tipos
    –   XML
    –   JSON
    –   TEXT o HTML
    –   RPC
• RPC es un...
// Interfaces necesarios (Se ponen en la parte cliente)
      @RemoteServiceRelativePath ("greet")
      public interface ...
Inportar proyecto maven en eclipse

    Importar el proyecto maven:
       – File → Import → Maven projects.

    Añadir...
SEO y GWT
SEO
- GWT produce javascript con capacidades muy avanzadas de manejar el DOM
   y de ejecutar Ajax.

- Podemos modificar e...
GQuery
     $("div.outer > div").css("position", "relative").
        dblclick(new Function() {
          public boolean f...
Creando librerías Js con GWT
- Los objetos, métodos y variables creados con GWT se pasan a JS,
   pero el compilador obfus...
Preguntas




            Manuel Carrasco Moñino

               http://manolocarrasco.blogspot.com
                      ...
Upcoming SlideShare
Loading in …5
×

Gwt III - Avanzado

3,343 views

Published on

GWT Parte-3. Gwt Avanzado
Seminarios JavaHispano.
Universidad S.Pablo CEU Madrid
Abril 2010

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,343
On SlideShare
0
From Embeds
0
Number of Embeds
42
Actions
Shares
0
Downloads
112
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Gwt III - Avanzado

  1. 1. GWT, Google Web Toolkit Parte 3: GWT Avanzado Manuel Carrasco Moñino Seminarios de JavaHispano (16-Abril-2010) manolo@apache.org
  2. 2. Testing y Depuración
  3. 3. 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)
  4. 4. 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 → 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 FilesInternet ExplorerIEXPLORE.EXE"
  5. 5. 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
  6. 6. El corazón de GWT: JSNI Deferred Binding Ajax
  7. 7. 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
  8. 8. 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 instance.@jschismes.client.HelloClass::helloMethod(Ljava/lang/String;) (name); }; }-*/; }
  9. 9. 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
  10. 10. 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 { <replace-with class="[...].CSSImplIE"> public void cssClearOpacity(Style style) { <when-type-is class="[...].CSSImpl"/> style.setProperty("opacity", ""); <any> } <when-property-is name="user.agent" value="ie6"/> public native void cssSetOpacity(Style style, double value) { <when-property-is name="user.agent" value="ie8"/> style.setProperty("opacity", String.ValueOf(value); </any> } </replace-with> } 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) + ')'; }-*/; }
  11. 11. 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
  12. 12. // Interfaces necesarios (Se ponen en la parte cliente) @RemoteServiceRelativePath ("greet") public interface GreetingService extends RemoteService { RPC   String greetServer(String name) throws IllegalArgumentException; } public interface GreetingServiceAsync {   void greetServer(String input, AsyncCallback<String> callback)       throws IllegalArgumentException; } // Codigo cliente 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) {     }   }); } // Codigo en el servidor 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>
  13. 13. 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
  14. 14. SEO y GWT
  15. 15. 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)
  16. 16. 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);  
  17. 17. 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
  18. 18. Preguntas Manuel Carrasco Moñino http://manolocarrasco.blogspot.com twitter.com/dodotis manolo@apache.org

×