Tema I

Comenzando con

GWT

Willy Hurtado Vela

Objetivos

• Comprender la razones del uso de

GWT.

• Conocer sus ventajas y desventajas.

• Adquirir la habilidad de crear

proyectos GWT en eclipse.

Contenido

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

3.5. GWT Plugin para Eclipse

3.6. GWT Plugin para navegadores

3.7. Corriendo y desplegando código

1. ¿Porque usar GWT?

Navegador Web Servidor Web/Aplicaciones

Servlet

PHP

Python

JMS

WebServices

RESTful

CSS

HTML

Javascript

CSS

HTML

Javascript

JSP

JSF

PHP

ASP

GWT, Pyjamas, Openlaszlo

Tecnología del

Cliente

Tecnología desde

Cliente

Datos

CSS

HTML

Javascript

Datos

1. ¿Porque usar GWT?

• 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?

• 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. ¿Porque usar GWT?

1.1. ¿Por qué Java?

• 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?

2. Componentes GWT

Compilador Java - Javascript

Emulación Librería JRE

Interfaz de Usuario

2.1. Compilador Java - Javascript

Safari - Todas IE 6-8

Opera > 9.x

Chrome - Todas

Propagar Copia

Plegar Constantes

Código Muerto

Optimizaciones del compilador

Navegadores Soportados

Internación de Cadenas

Código Revestido

2. Componentes GWT

Firefox - Todas

2.2. Emulación Librería JRE

java.lang

java.lang.annotation

java.util

java.io

java.sql

https://developers.google.com/web-toolkit/doc/1.6/RefJreEmulation

2. Componentes GWT

2.3. Interfaz de Usuario

2. Componentes GWT

3. Creando un proyecto GWT

C:\proyectos\miProyecto\webAppCreator -out StockWatcher

-junit "C:\eclipse\plugins\org.junit_3.8.2.v200706111738\junit.jar"

com.google.gwt.sample.stockwatcher.StockWatcher

Comando

webAppCreator

C:\proyectos\miProyecto\mvn archetype:generate \

-DarchetypeGroupId=org.codehaus.mojo \

-DarchetypeArtifactId=gwt-maven-plugin \

-DarchetypeVersion=2.5.0-rc2

GWT Plugin

para eclipse

Proyecto GWT

3. Creando un proyecto GWT

3.1. Arquitectura de un Proyecto

Contenido del web para despliegue

Código fuente cliente y servidor

Librerías GWT

Librerías Java

3. Creando un proyecto GWT

3.1. Arquitectura de un Proyecto

Código cliente

Código servidor

Configuración de lado cliente

Conjuntos de librerías (jars) para despliegue

Punto de entrada EntryPoint

Servicios RPC

Configuración de lado servidor

Estilos CSS

Contenido del web para despliegue

HTML principal

Implementación del Servicio

Librerías GWT

3. Creando un proyecto GWT

3.2. Archivo de configuración GWT

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

Archivo xml

Etiqueda de un modulo GWT

Herencia de módulos

Clase main – Punto de entrada Declaracion anternativa de un módulo

3. Creando un proyecto GWT

3.3. Punto de entrada

<?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. Creando un proyecto GWT

3.4. Servicios GWT

Cliente Servidor

3. Creando un proyecto GWT

3.4. Servicios GWT

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

@RemoteServiceRelativePath("ServicioGWTRPC") public interface ServicioGWTRPC extends RemoteService { public BigDecimal calcularIntereses(Long idUsuario); }

ServicioGWTRPC.java

web.xml

3.5. GWT Plugin para Eclipse

3. Creando un proyecto GWT

GWT Plugin

para eclipse

GWT Designer

3.6. GWT Plugin para Navegadores

3. Creando un proyecto GWT

3. Creando un proyecto GWT

3.7. GWT Corriendo y Desplegando código

GWT Plugin

para eclipse

3. Creando un proyecto GWT

3.7. GWT Corriendo y Desplegando código

GWT Designer

Bibliografía

• 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