Este documento describe Google Web Toolkit (GWT), incluyendo sus ventajas como permitir desarrollo del lado del cliente en Java y compilar a JavaScript, sus componentes como el compilador y librerías, y cómo crear un proyecto GWT con arquitectura, archivo de configuración, punto de entrada, servicios, e implementación en Eclipse.

1. Tema I
Comenzando con
GWT
Willy Hurtado Vela

2. • Comprender la razones del uso de
GWT.
• Conocer sus ventajas y desventajas.
• Adquirir la habilidad de crear
proyectos GWT en eclipse.
Objetivos

3. 1. ¿Por qué usar GWT?
1.1. ¿Por qué Java?
1.2. Algunas Desventajas Actuales
2. Componentes GWT
2.1. Compilador
2.2. Librería JRE – Emulación
2.3. Librería UI
3. Creando un proyecto GWT
3.1. Arquitectura de un proyecto
3.2. Archivo de configuración GWT
3.3. Punto de entrada
3.4. Servicios GWT
Contenido

4. 3.5. GWT Plugin para Eclipse
3.6. GWT Plugin para navegadores
3.7. Corriendo y desplegando código
Contenido

5. 1. ¿Porque usar GWT?

6. Navegador Web Servidor Web/Aplicaciones
Tecnología CSS
HTML
desde CSS Javascript
JSP
JSF
Cliente HTML Datos PHP
Javascript ASP
Servlet
Tecnología CSS
PHP
Datos Python
del HTML JMS
Cliente Javascript WebServices
RESTful
GWT, Pyjamas, Openlaszlo
1. ¿Porque usar GWT?

7. • Desarrollo del lado del cliente.
• Codificas en java y tienes un compilado en javascript
• Interfaz gráfica de usuario esta a nivel del las
aplicaciones de escritorio pero en Aplicaciones Web.
• Mínimas necesidades de interacción con el código del
servidor
• Código rápido y mejor que un humano pueda
escribir.
• Código compilado multi navegador.
1. ¿Porque usar GWT?

8. • Lenguaje de alto nivel, fácil de mapear los diseños.
• Curva de aprendizaje para GWT no es difícil.
• Evitar el uso de javascript de aprovechar las
capacidad de corrección de errores (Debugging).
• Fácil de acoplar a las metodologías agiles como XP y
Scrum. A tiempo de usar TDD y JUnit
• Aprovechar las técnicas comunes de la programación
en Escritorio, como Swing, SWT, etc.
1.1. ¿Por qué Java?
1. ¿Porque usar GWT?

9. • Las paginas web no son indexsables por los motores
de búsqueda
• Las páginas GWT no se degradan correctamente en
navegadores antiguos.
• Son mas propensos a ataques por javascript
• Desarrollo y compilación es lenta.
1. ¿Porque usar GWT?

10. Interfaz de Usuario
Emulación Librería JRE
Compilador Java - Javascript
2. Componentes GWT

11. Navegadores Soportados
Safari - Todas Chrome - Todas IE 6-8
Firefox - Todas Opera > 9.x
Optimizaciones del compilador
Propagar Copia Código Muerto Código Revestido
Plegar Constantes Internación de Cadenas
2.1. Compilador Java - Javascript
2. Componentes GWT

12. java.lang
java.lang.annotation
java.util
java.io
java.sql
https://developers.google.com/web-toolkit/doc/1.6/RefJreEmulation
2.2. Emulación Librería JRE
2. Componentes GWT

13. 2.3. Interfaz de Usuario
2. Componentes GWT

14. C:proyectosmiProyectowebAppCreator -out StockWatcher
Comando
-junit "C:eclipsepluginsorg.junit_3.8.2.v200706111738junit.jar"
webAppCreator
com.google.gwt.sample.stockwatcher.StockWatcher
GWT Plugin Proyecto GWT
para eclipse
C:proyectosmiProyectomvn archetype:generate
-DarchetypeGroupId=org.codehaus.mojo
-DarchetypeArtifactId=gwt-maven-plugin
-DarchetypeVersion=2.5.0-rc2
3. Creando un proyecto GWT

15. Código fuente cliente y servidor
Librerías Java
Librerías GWT
Contenido del web para despliegue
3.1. Arquitectura de un Proyecto
3. Creando un proyecto GWT

16. Configuración de lado cliente
Código cliente
Punto de entrada EntryPoint
Servicios RPC
Código servidor Implementación del Servicio
Librerías GWT
Contenido del web para despliegue
Conjuntos de librerías (jars) para despliegue
Configuración de lado servidor
Estilos CSS
HTML principal
3.1. Arquitectura de un Proyecto
3. Creando un proyecto GWT

17. Archivo xml
Etiqueda de un modulo GWT
Herencia de módulos
<?xml version="1.0" encoding="UTF-8"?>
<!-- <module rename-to='proyectogwt'> -->
<module>
<inherits name="com.google.gwt.user.User"/>
<inherits name="com.google.gwt.user.theme.standard.Standard"/>
<entry-point class="com.mycompany.project.client.ModuloGWT"/>
</module>
Declaracion anternativa de un módulo Clase main – Punto de entrada
3.2. Archivo de configuración GWT
3. Creando un proyecto GWT

18. <?xml version="1.0" encoding="UTF-8"?>
<module>
<inherits name="com.google.gwt.user.User"/>
<inherits name="com.google.gwt.user.theme.standard.Standard"/>
<entry-point class="com.mycompany.project.client.ModuloGWT"/>
</module>
/**
* Clase punto de entrada que define <code>onModuleLoad()</code>.
*/
public class ModuloGWT implements EntryPoint {
public void onModuleLoad() {
Window.alert("Hola mundo con GWT");
}
}
3.3. Punto de entrada
3. Creando un proyecto GWT

19. Cliente Servidor
3.4. Servicios GWT
3. Creando un proyecto GWT

20. ServicioGWTRPC.java
@RemoteServiceRelativePath("ServicioGWTRPC")
public interface ServicioGWTRPC extends RemoteService {
public BigDecimal calcularIntereses(Long idUsuario);
}
web.xml
<servlet>
<servlet-name>ServicioGWTRPC</servlet-name>
<servlet-class>com.mycompany.project.server.ServicioGWTRPCImpl</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ServicioGWTRPC</servlet-name>
<url-pattern>/com.mycompany.project.ModuloGWT/ServicioGWTRPC</url-pattern>
</servlet-mapping>
3.4. Servicios GWT
3. Creando un proyecto GWT

21. GWT Plugin
para eclipse
GWT Designer
3.5. GWT Plugin para Eclipse
3. Creando un proyecto GWT

22. 3.6. GWT Plugin para Navegadores
3. Creando un proyecto GWT

23. GWT Plugin
para eclipse
3.7. GWT Corriendo y Desplegando código
3. Creando un proyecto GWT

24. GWT Designer
3.7. GWT Corriendo y Desplegando código
3. Creando un proyecto GWT

25. • Essential GWT. Building for Web the Google Web Toolkit
2. Federico Kereki. 322p. Addison-Wesley
• Google Web Toolkit. https://developers.google.com/web-
toolkit
• Java Community Process (JSR). http://www.jcp.org
• Eclipse. http://www.eclipse.org
Bibliografía