gwt tutorial basico

GWT
Carlos G. Gavidia
cgavidia@avantica.net

Una Introducción

En esta parte no vemos código

¿Qué es GWT?
Es una herramienta que nos permite generar código
del lado del cliente con Java.
El código Java es compilado en código JavaScript.
Las sentencias JavaScript se ejecutan en el browser
del cliente.
El código JavaScript generado ha sido optimizado y
además soporta múltiplesbrowser.

¿Porqué Java?
Hay mucha gente que conoce Java, y para esta
gente aprender GWT es sencillo.
El soporte de IDE's en Java es bastante bueno
(incluyendo a los debuggers).
Podemos usar JUnit para probar código del lado del
cliente y del servidor

Nada es perfecto
Las páginas GWT no les gustan a los motores de
búsqueda.
Necesitas un browser decente para que tu
aplicación puedaejecutarse.
Con JavaScript no tenía que compilar y desplegar.
Macho que se respeta programa en JavaScript.

Componentes GWT
Compilador
Transforma el código Java
en código JavaScript para
muchos browsers, y realiza
algunas optimizaciones.
Algunas de ellas: Dead
Code Elimination, Constant
Folding, String Interning y
Code Inlining

JRE Emulation Library
Implementación parcial
de laJRE.
Contiene 4 paquetes, y
todos están incompletos:
java.io, java.lang,
java.sql y java.util.
Para funcionalidad extra,
podemos usar los
paquetes GWT

Componentes GWT
Biblioteca UI
Conjunto de Widgets, cuyo
uso es similar a Swing.
Soporta el uso de CSS para el
manejo de estilos.
Incluye algunos objetos
compuestos como DatePicker,
SuggestBox y RichTextArea.

Primeros pasosGoogle Plugin for Eclipse

Disponible en: http://dl.google.com/eclipse/plugin/3.3

Estructura del Proyecto
El paquete client contiene código
que se ejecuta en el browser.
El paquete shared contiene código
usado tanto en el cliente como en el
servidor
El paquete server contiene código
que se ejecuta en el servidor.
Dentro de test se colocan las clases
para pruebas.
Dentro de warse colocará el código
de salida.

Definición de módulo

Con inherits podemos incluir contenido de otros módulos.
Mediante entry-point indicamos la clase que inicia la
aplicación.
Con source señalamos que carpetas serán consideradas en
la generación de código.

Página Host
El código de la aplicación se
ejecuta dentro de este
documento HTML.
Hace referencia a la hoja de
estilos dela aplicación
(Sampleproject.css) y al código
JavaScript generado por GWT.
Contiene un iFrame para el
soporte a Historial.

Modo Desarrollo

Nos permite depurar en Java utilizando un browser de
producción.
Requiere que el browser tenga instalado un plugin.

Un ejemplito
El usuario puede agregar stocks.
Por cada stock: mostrar símbolo,
precio y cambio desde la últimaactualización
El usuario puede eliminar
stocks.
El precio de los stocks se
actualiza automáticamente.
Se debe mostrar la fecha de
última actualización

Root Panel
Definimos algunos elementos
HTML estáticos.
Incluimos un elemento div
para representar nuestro
Panel Root.
El Panel Root contiene los
elementos dinámicos de la
aplicación. Puede envolver a
la tag body u otro elemento
de la páginaHost.

Algunos Widgets
FlexTable nos crea un tabla con
celdas a pedido.
Button nos crea un botón HTML.
TextBox permite el ingreso de
texto en una línea.
Label se traduce en texto
arbitrario dentro de elementos
.
Los Panels nos permiten
organizar los widgets. Pueden
incluir a su vez dentro de otros
Panels.

Eventos en el Cliente
Le asignamos una instancia de la
interfaz demanejo de eventos al
widget apropiado.
Usamos la interfaz ClickHandler
para manejar los clics al botón
“Add”.
La interfaz KeyPressHandler nos
permite almacenar el código de
Stock enviado al presionar
“Enter”

Seguimos con el cliente
Usamos ArrayList para almacenar
los códigos agregados.
Podemos agregar un botón a una
celda de FlexTable con setWidget.
Usamos Timer para actualizar...