GWT - Una introducción

  • View
    4.837

  • Download
    2

Embed Size (px)

DESCRIPTION

Presentacin introductoria a GWT realizada en Avantica Technologies

Transcript

  • 1. GWTCarlos G. Gavidia Una Introduccincgavidia@avantica.net
  • 2. En esta parte no vemos cdigo
  • 3. Qu es GWT?Es una herramienta que nos permite generar cdigodel lado del cliente con Java.El cdigo Java es compilado en cdigo JavaScript.Las sentencias JavaScript se ejecutan en el browserdel cliente.El cdigo JavaScript generado ha sido optimizado yadems soporta mltiples browser.
  • 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 cdigo del lado delcliente y del servidor
  • 5. Nada es perfectoLas pginas GWT no les gustan a los motores debsqueda.Necesitas un browser decente para que tuaplicacin pueda ejecutarse.Con JavaScript no tena que compilar y desplegar.Macho que se respeta programa en JavaScript.
  • 6. Componentes GWT Compilador JRE Emulation LibraryTransforma el cdigo Java Implementacin parcialen cdigo JavaScript para de la JRE.muchos browsers, y realizaalgunas optimizaciones. Contiene 4 paquetes, y todos estn 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. 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. Primeros pasos
  • 9. Google Plugin for EclipseDisponible en: http://dl.google.com/eclipse/plugin/3.3
  • 10. Estructura del Proyecto El paquete client contiene cdigo que se ejecuta en el browser. El paquete shared contiene cdigo usado tanto en el cliente como en el servidor El paquete server contiene cdigo que se ejecuta en el servidor. Dentro de test se colocan las clases para pruebas. Dentro de war se colocar el cdigo de salida.
  • 11. Definicin de mduloCon inherits podemos incluir contenido de otros mdulos.Mediante entry-point indicamos la clase que inicia laaplicacin.Con source sealamos que carpetas sern consideradas enla generacin de cdigo.
  • 12. Pgina HostEl cdigo de la aplicacin seejecuta dentro de estedocumento HTML.Hace referencia a la hoja deestilos de la aplicacin(Sampleproject.css) y al cdigoJavaScript generado por GWT.Contiene un iFrame para elsoporte a Historial.
  • 13. Modo DesarrolloNos permite depurar en Java utilizando un browser deproduccin.Requiere que el browser tenga instalado un plugin.
  • 14. Un ejemplitoEl usuario puede agregar stocks.Por cada stock: mostrar smbolo,precio y cambio desde la ltimaactualizacinEl usuario puede eliminarstocks.El precio de los stocks seactualiza automticamente.Se debe mostrar la fecha deltima actualizacin
  • 15. Root PanelDefinimos algunos elementosHTML estticos.Incluimos un elemento divpara representar nuestroPanel Root.El Panel Root contiene loselementos dinmicos de laaplicacin. Puede envolver ala tag body u otro elementode la pgina Host.
  • 16. Algunos Widgets FlexTable nos crea un tabla con celdas a pedido. Button nos crea un botn HTML. TextBox permite el ingreso de texto en una lnea. 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.
  • 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 botn Add. La interfaz KeyPressHandler nos permite almacenar el cdigo de Stock enviado al presionar Enter
  • 18. Seguimos con el cliente Usamos ArrayList para almacenar los cdigos agregados. Podemos agregar un botn a una celda de FlexTable con setWidget. Usamos Timer para actualizar peridicamente los precios de los stocks. La clase StockPrice encapsula la informacin de precios de stocks. Usamos Random para generar los precios y NumberFormat para darle formato.
  • 19. Cuestin 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 pgina host puede incluir elementos estticos siempre que los incluyamos en el directorio pblico del proyecto (war).
  • 20. Pase a produccinEn modo produccin, la aplicacin slamente 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. Hablando con el servidor
  • 22. Las previasCuando la aplicacin que se ejecuta en el browser quierecomunicarse con el servidor, realiza una peticin HTTP usandouna llamada RPC.GWT incluye un mecanismo RPC basado en Servlets. Puedesutilizarlo o no.
  • 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 asncrona con laque trabajar el cdigo en el browser.
  • 24. Interfaz Sncrona Es una interfaz del lado del cliente que extiende RemoteService. La implementacin de esta interfaz en el lado del servidor debe extender RemoteServiceServlet.
  • 25. Interfaz Asncrona Cada mtodo necesita un Callback, que ser notificado cuando se complete la invocacin asncrona. Por lo general los mtodos retornan void. Deben seguirse ciertas convenciones de nombres para generar el cdigo RPC.
  • 26. El ServicioBasados en Servlets. Noimplementan la interfazasncrona.RemoteServiceServlet se encargade la serializacin de la data pornosotros.Para probar dentro delcontenedor en modo desarrollo,registrar el servlet en web.xmlutilizando el valor de la anotacin RemoteServiceRelativePath en laURL.