GWT - Una introducción

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

¿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

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.

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

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.

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

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.

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.

Modo DesarrolloNos permite depurar en Java utilizando un browser deproducción.Requiere que el browser tenga instalado un plugin.

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

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.

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.

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”

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.

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

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.

Hablando con el servidor

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.

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.

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.

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.

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.

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

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

Manejo de eventos

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.

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.

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.

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 deinteracción de usuario, pero yano se comunica con Model.Presenter es un intermediarioentre Model y View

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.

En dibujitos

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.

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.

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

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.

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.

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().

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.

Lamentablemente, se acabó. ¡Gracias!

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

http://certified-es.blogspot.com	315
http://www.jornaljava.com	130
http://www.blogsperu.com	90
http://certified-es.blogspot.com.es	11
http://feeds.feedburner.com	9
http://certified-es.blogspot.mx	8
http://certified-es.blogspot.com.ar	4

GWT - Una introducción

by Carlos Gavidia on Dec 22, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

7 Embeds 567

Statistics

GWT - Una introducción — Presentation Transcript