GWTCarlos G. Gavidia       Una Introduccióncgavidia@avantica.net
En esta parte no vemos código
¿Qué es GWT?Es una herramienta que nos permite generar códigodel lado del cliente con Java.El código Java es compilado en ...
¿Porqué Java?Hay mucha gente que conoce Java, y para estagente aprender GWT es sencillo.El soporte de IDEs en Java es bast...
Nada es perfectoLas páginas GWT no les gustan a los motores debúsqueda.Necesitas un browser decente para que tuaplicación ...
Componentes GWT      Compilador              JRE Emulation LibraryTransforma el código Java     Implementación parcialen c...
Componentes GWT      Biblioteca UIConjunto de Widgets, cuyouso es similar a Swing.Soporta el uso de CSS para elmanejo de e...
Primeros pasos
Google Plugin for EclipseDisponible 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 cont...
Definición de móduloCon inherits podemos incluir contenido de otros módulos.Mediante entry-point indicamos la clase que in...
Página HostEl código de la aplicación seejecuta dentro de estedocumento HTML.Hace referencia a la hoja deestilos de la apl...
Modo DesarrolloNos permite depurar en Java utilizando un browser deproducción.Requiere que el browser tenga instalado un p...
Un ejemplitoEl usuario puede agregar stocks.Por cada stock: mostrar símbolo,precio y cambio desde la últimaactualizaciónEl...
Root PanelDefinimos algunos elementosHTML estáticos.Incluimos un elemento divpara representar nuestroPanel Root.El Panel R...
Algunos Widgets  FlexTable nos crea un tabla con  celdas a pedido.  Button nos crea un botón HTML.  TextBox permite el ing...
Eventos en el Cliente      Le asignamos una instancia de la      interfaz de manejo de eventos al      widget apropiado.  ...
Seguimos con el cliente         Usamos ArrayList para almacenar         los códigos agregados.         Podemos agregar un ...
Cuestión de estilo    Definimos nuestros estilos sobre-    escribiendo StockWatcher.css.    Configuramos el valor del    a...
Pase a producciónEn modo producción, la aplicación sólamente es JavaScript y norequiere plugins en el browser ni JVM.Para ...
Hablando con el servidor
Las previasCuando la aplicación que se ejecuta en el browser quierecomunicarse con el servidor, realiza una petición HTTP ...
RecetarioPrimero, definimos una interfaz para el servicioextendiendo RemoteService.Luego, definimos la clase del lado del ...
Interfaz Síncrona   Es una interfaz del lado del   cliente que extiende   RemoteService.   La implementación de esta   int...
Interfaz Asíncrona    Cada método necesita un    Callback, que será notificado    cuando se complete la invocación    asín...
El ServicioBasados en Servlets. Noimplementan la interfazasíncrona.RemoteServiceServlet se encargade la serialización de l...
Invocar al Servicio    Instanciamos la interfaz síncrona    con GWT.create(). El Proxy    generado implementa la interfaz ...
Tipos SerializablesLa serialización permite transportar la data de un objetode una aplicación a otra.Los parámetros y tipo...
Manejo de eventos
Definir eventos Almacena información asociada al evento. Debe heredar de GwtEvent, e implementar los métodos getAssociated...
Event Handler Cada evento está asociado a una interfaz que representa a los que manejarán el evento. Debe heredar de Event...
Registrar Handlers     HandlerManager     administra a los que     manejan los eventos     (handlers).     Con addHandler,...
Disparar eventosUtilizamos el método fireEvent de HandlerManager paradisparar el evento cuando sea necesario.
Nos ponemos serios
El patrón MVPModel contiene la lógica denegocio, y sólamente secomunica con Presenter.View tiene los componentes deinterac...
Otro ejemplitoCrearemos una aplicación de administración decontactos; para ver, editar y eliminar contactos de unalista al...
En dibujitos
El inicioSe invoca el métodoonModuleLoad de nuestroEntryPoint.Instanciamos el servicio RPC,nuestro HandlerManager yAppCont...
Presenters y ViewsLa interfaz Display permite el intercambio de vistas con mínimoimpacto.El método setData permite agregar...
Interfaz DisplayNuestro presenter no tiene acceso a código específico de cada Widget.Pueden hacerse mocks de la interfaz d...
Manejo de Eventos    En AppController registramos los    eventos y los Handlers que se    invocarán cuando se disparen.   ...
Un paréntesisLas aplicaciones Ajax no se integran con el Historial delBrowser. GWT incluye un mecanismo que lo soluciona.P...
Transición de Vistas     La lógica de transición de vistas     la colocamos en AppController,     por lo que debe implemen...
TestingMediante MVP, nuestros Tests nodependen del DOM ni de unmotor JavaScript.Dado que el presenter sólodepende de compo...
Lamentablemente, se acabó. ¡Gracias!
FuentesEssential GWT de Federico Kereki.Build a Sample GWT Application de Google Code:http://code.google.com/webtoolkit/do...
Upcoming SlideShare
Loading in …5
×

GWT - Una introducción

5,432 views

Published on

Presentación introductoria a GWT realizada en Avantica Technologies

Published in: Technology
4 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total views
5,432
On SlideShare
0
From Embeds
0
Number of Embeds
1,135
Actions
Shares
0
Downloads
122
Comments
4
Likes
3
Embeds 0
No embeds

No notes for slide

GWT - Una introducción

  1. 1. GWTCarlos G. Gavidia Una Introduccióncgavidia@avantica.net
  2. 2. En esta parte no vemos código
  3. 3. ¿Qué es GWT?Es una herramienta que nos permite generar códigodel lado del cliente con Java.El código Java es compilado en código JavaScript.Las sentencias JavaScript se ejecutan en el browserdel cliente.El código JavaScript generado ha sido optimizado yademás soporta múltiples browser.
  4. 4. ¿Porqué Java?Hay mucha gente que conoce Java, y para estagente aprender GWT es sencillo.El soporte de IDEs en Java es bastante bueno(incluyendo a los debuggers).Podemos usar JUnit para probar código del lado delcliente y del servidor
  5. 5. Nada es perfectoLas páginas GWT no les gustan a los motores debúsqueda.Necesitas un browser decente para que tuaplicación pueda ejecutarse.Con JavaScript no tenía que compilar y desplegar.Macho que se respeta programa en JavaScript.
  6. 6. Componentes GWT Compilador JRE Emulation LibraryTransforma el código Java Implementación parcialen código JavaScript para de la JRE.muchos browsers, y realizaalgunas optimizaciones. Contiene 4 paquetes, y todos están incompletos:Algunas de ellas: Dead java.io, java.lang,Code Elimination, Constant java.sql y java.util.Folding, String Interning yCode Inlining Para funcionalidad extra, podemos usar los paquetes GWT
  7. 7. Componentes GWT Biblioteca UIConjunto de Widgets, cuyouso es similar a Swing.Soporta el uso de CSS para elmanejo de estilos.Incluye algunos objetoscompuestos como DatePicker,SuggestBox y RichTextArea.
  8. 8. Primeros pasos
  9. 9. Google Plugin for EclipseDisponible en: http://dl.google.com/eclipse/plugin/3.3
  10. 10. 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 war se colocará el código de salida.
  11. 11. Definición de móduloCon inherits podemos incluir contenido de otros módulos.Mediante entry-point indicamos la clase que inicia laaplicación.Con source señalamos que carpetas serán consideradas enla generación de código.
  12. 12. Página HostEl código de la aplicación seejecuta dentro de estedocumento HTML.Hace referencia a la hoja deestilos de la aplicación(Sampleproject.css) y al códigoJavaScript generado por GWT.Contiene un iFrame para elsoporte a Historial.
  13. 13. Modo DesarrolloNos permite depurar en Java utilizando un browser deproducción.Requiere que el browser tenga instalado un plugin.
  14. 14. Un ejemplitoEl usuario puede agregar stocks.Por cada stock: mostrar símbolo,precio y cambio desde la últimaactualizaciónEl usuario puede eliminarstocks.El precio de los stocks seactualiza automáticamente.Se debe mostrar la fecha deúltima actualización
  15. 15. Root PanelDefinimos algunos elementosHTML estáticos.Incluimos un elemento divpara representar nuestroPanel Root.El Panel Root contiene loselementos dinámicos de laaplicación. Puede envolver ala tag body u otro elementode la página Host.
  16. 16. 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 <div>. Los Panels nos permiten organizar los widgets. Pueden incluir a su vez dentro de otros Panels.
  17. 17. Eventos en el Cliente Le asignamos una instancia de la interfaz de manejo 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”
  18. 18. 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 periódicamente los precios de los stocks. La clase StockPrice encapsula la información de precios de stocks. Usamos Random para generar los precios y NumberFormat para darle formato.
  19. 19. Cuestión de estilo Definimos nuestros estilos sobre- escribiendo StockWatcher.css. Configuramos el valor del atributo class de los elementos HTML con addStyleName. Podemos modificar ciertos atributos HTML sin necesidad de CSS, como con setCellPadding. La página host puede incluir elementos estáticos siempre que los incluyamos en el directorio público del proyecto (war).
  20. 20. Pase a producciónEn modo producción, la aplicación sólamente es JavaScript y norequiere plugins en el browser ni JVM.Para desplegar, colocamos los archivos generados en un servidorweb.Se generan implementaciones JavaScript para cada browsersoportado.
  21. 21. Hablando con el servidor
  22. 22. Las previasCuando la aplicación que se ejecuta en el browser quierecomunicarse con el servidor, realiza una petición HTTP usandouna llamada RPC.GWT incluye un mecanismo RPC basado en Servlets. Puedesutilizarlo o no.
  23. 23. RecetarioPrimero, definimos una interfaz para el servicioextendiendo RemoteService.Luego, definimos la clase del lado del servidorextendiendo RemoteServiceServlet eimplementando la interfaz de arriba.Finalmente, se define la interfaz asíncrona con laque trabajará el código en el browser.
  24. 24. Interfaz Síncrona Es una interfaz del lado del cliente que extiende RemoteService. La implementación de esta interfaz en el lado del servidor debe extender RemoteServiceServlet.
  25. 25. Interfaz Asíncrona Cada método necesita un Callback, que será notificado cuando se complete la invocación asíncrona. Por lo general los métodos retornan void. Deben seguirse ciertas convenciones de nombres para generar el código RPC.
  26. 26. El ServicioBasados en Servlets. Noimplementan la interfazasíncrona.RemoteServiceServlet se encargade la serialización de la data pornosotros.Para probar dentro delcontenedor en modo desarrollo,registrar el servlet en web.xmlutilizando el valor de la anotación RemoteServiceRelativePath en laURL.
  27. 27. Invocar al Servicio Instanciamos la interfaz síncrona con GWT.create(). El Proxy generado implementa la interfaz asíncrona. Creamos el objeto Callback, instanciando AsyncCallback. El parámetro de onSuccess es la data que devuelve el servicio. Todas las operaciones de red en GWT son asíncronas
  28. 28. Tipos SerializablesLa serialización permite transportar la data de un objetode una aplicación a otra.Los parámetros y tipos de retorno de los métodos RPCdeben ser serializables.Algunos tipos serializables: Primitivos y sus Wrappers,String, Date, arreglos de tipos serializables, etc.Una clase nuestra es serializable si es asignable aSerializable/IsSerializable, sus atributos sonserializables*, y posee un constructor sin argumentos
  29. 29. Manejo de eventos
  30. 30. Definir eventos Almacena información asociada al evento. Debe heredar de GwtEvent, e implementar los métodos getAssociatedType y dispatch. Recibe como parámetro la interfaz que implementarán los que manejen el evento.
  31. 31. Event Handler Cada evento está asociado a una interfaz que representa a los que manejarán el evento. Debe heredar de EventHandler y definir el método a invocar cuando ocurra el evento. Este método tiene como parámetro el evento.
  32. 32. Registrar Handlers HandlerManager administra a los que manejan los eventos (handlers). Con addHandler, notificamos que un Handler específico está interesado en recibir un tipo de evento.
  33. 33. Disparar eventosUtilizamos el método fireEvent de HandlerManager paradisparar el evento cuando sea necesario.
  34. 34. Nos ponemos serios
  35. 35. El patrón MVPModel contiene la lógica denegocio, y sólamente secomunica con Presenter.View tiene los componentes deinteracción de usuario, pero yano se comunica con Model.Presenter es un intermediarioentre Model y View
  36. 36. Otro ejemplitoCrearemos una aplicación de administración decontactos; para ver, editar y eliminar contactos de unalista almacenada en el servidor.En Model, tendremos Contact y ContactDetails.En View, tendremos ContactsView y EditContactsView.Nuestros Presenters se encargan de manejo de historial,transición de vistas y envío de data al servidor.Tendremos ContactsPresenter y EditContactPresenterY un AppController para lógica de nivel de aplicación.
  37. 37. En dibujitos
  38. 38. El inicioSe invoca el métodoonModuleLoad de nuestroEntryPoint.Instanciamos el servicio RPC,nuestro HandlerManager yAppController.Le pasamos a AppControllernuestra instancia de RootPanel.Ahora puede crear Presenters ysuministrarles Views.
  39. 39. Presenters y ViewsLa interfaz Display permite el intercambio de vistas con mínimoimpacto.El método setData permite agregar data del Model en el View.
  40. 40. Interfaz DisplayNuestro presenter no tiene acceso a código específico de cada Widget.Pueden hacerse mocks de la interfaz display en las pruebas unitarias
  41. 41. Manejo de Eventos En AppController registramos los eventos y los Handlers que se invocarán cuando se disparen. Al invocar HandlerManager.fireEvent(), se buscan los handlers para ese tipo de evento. Luego, se invoca al método dispatch(). En el caso de invocaciones RPC, por lo general se lanzan los eventos al obtener el retorno.
  42. 42. Un paréntesisLas aplicaciones Ajax no se integran con el Historial delBrowser. GWT incluye un mecanismo que lo soluciona.Para cada página navegable se genera un token único.Este token regresa a la aplicación cuando el usuariopresiona el botón “Atrás” o selecciona un link.Para agregar un token al historial del browser podemosusar History.newItem(token).Con History.addValueChangeHandler(), designamos alobjeto encargado de restaurar el estado de acuerdo alvalor del token.
  43. 43. Transición de Vistas La lógica de transición de vistas la colocamos en AppController, por lo que debe implementar ValueChangeHandler. Para que responda a los eventos del historial, la registramos mediante History.addValueChangeHandler() Es posible disparar una transición de vista mediante History.newItem().
  44. 44. TestingMediante MVP, nuestros Tests nodependen del DOM ni de unmotor JavaScript.Dado que el presenter sólodepende de componentes JRE, lamayoría de Casos de Prueba sepueden implementar con JUnit.Es posible crear mocks de lainterfaz DisplaySe ha desaclopado el código delos widgets de la lógica de laaplicación.
  45. 45. Lamentablemente, se acabó. ¡Gracias!
  46. 46. FuentesEssential GWT de Federico Kereki.Build a Sample GWT Application de Google Code:http://code.google.com/webtoolkit/doc/latest/tutorial/gettingstarted.htmlCommunicate with a Server de Google Code:http://code.google.com/webtoolkit/doc/latest/DevGuideServerCommunication.htmlGWT Custom Events en StackOverFlow:http://stackoverflow.com/questions/2951621/gwt-custom-eventsLarge scale application development and MVP de Chris Ramsdale:http://code.google.com/webtoolkit/articles/mvp-architecture.html

×