SlideShare una empresa de Scribd logo
www.i2e.com.es




                 Jose Luis Ramirez Terry
                    Emilio Bravo Garcia
www.i2e.com.es




                                                    Introducción
                    En esta presentación se va a
                     realizar una introducción a    Componentes de GWT
                     Google Web Toolkit (en         Construyendo la Interfaz
                     adelante GWT). GWT es una
                     tecnología desarrollada por    Comunicación con el Servidor
                     Google para acelerar el        Depuración y Test
                     desarrollo de Aplicaciones
                                                    Compilación
                     Ricas de Internet (RIA) y
                     mejorar la experiencia del     Despliegue
                     usuario.
                                                    ¿Problemas de GWT?

                                                    Aplicaciones de Ejemplo
www.i2e.com.es




                 La web 2.0 y Google Web Toolkit
www.i2e.com.es




                    WEB 2.0 (http://es.wikipedia.org/wiki/Web_2.0)

                    El término Web 2.0 es asociado usualmente con Tim
                     O'Reilly debido a la referencia hecha en la conferencia
                     O'Reilly Media Web 2.0 en 2004. El término fue utilizado
                     para referirse a una segunda generación en la historia
                     del desarrollo de la tecnología Web basada en
                     comunidades de usuarios y una gama especial de
                     servicios, como las redes sociales, los blogs, los wikis o
                     las folcsonomías, que fomentan la colaboración y el
                     intercambio ágil y eficaz de información entre los
                     usuarios. La Web 2.0 es también llamada web social.
www.i2e.com.es




                    WEB 2.0
                     ◦ Componente Social. Los sitios web 2.0 permiten a los
                       usuario interactuar con la aplicacion aportando
                       información y enriquecer el sitio con su uso. Estas webs
                       suelen tener una "Arquitectura de Participación" que
                       anima a los usuario a añadir valor conforme usan la
                       aplicacion.

                     ◦ Componente Tecnológico. La tecnologia normalmente
                       usada en el desarrollo de aplicaciones web 2.0 esta basada
                       en AJAX. Ajax permite intercambiar datos con el servidor
                       web de forma asincrona y actualizar sin tener que realizar
                       una recarga completa de la pagina.
www.i2e.com.es




                    En esta presentación nos vamos a centrar en la
                     parte tecnológica de la Web 2.0. Veremos como
                     Google Web Toolkit nos facilita el desarrollo de la
                     interfaz de usuario.
www.i2e.com.es




                    AJAX (http://es.wikipedia.org/wiki/AJAX)

                    AJAX, acrónimo de Asynchronous JavaScript And XML, es
                     una técnica de desarrollo web para crear aplicaciones
                     interactivas o RIA (Rich Internet Applications). Estas
                     aplicaciones se ejecutan en el navegador de los usuarios
                     mientras se mantiene la comunicación asíncrona con el
                     servidor en segundo plano. De esta forma es posible
                     realizar cambios sobre las páginas sin necesidad de
                     recargarlas, lo que significa aumentar la interactividad,
                     velocidad y usabilidad en las aplicaciones.
www.i2e.com.es




                    AJAX no constituye una
                     tecnología en sí, sino que
                     es un término que engloba
                     a un grupo de éstas que
                     trabajan conjuntamente,
                     XTML, CSS, JavaScript,
                     XMLHttpRequest, XML o
                     JSON para la transferencia
                     de datos con el servidor.
www.i2e.com.es




                    RIA (http://en.wikipedia.org/wiki/Rich_internet_applications)
                    La aplicaciones RIA son aplicaciones web con muchas de
                     las características de las aplicaciones de escritorio,
                     normalmente entregadas ya sea por medio de webs
                     basadas en los estándares de los navegadores, vía
                     plugins del navegador, o independientemente vía
                     sandboxes o maquinas virtuales.
www.i2e.com.es




                    El navegador web como maquina virtual universal.
                    El navegador web se esta posicionando como el
                     entorno preferente para el acceso a los servicios que
                     ofrece la web. La industria esta apostando por los
                     estandares y por las plataformas abiertas.

                    El lenguaje para desarrollar aplicaciones en los
                     navegadores es JavaScript.
www.i2e.com.es




                    Desarrollar aplicaciones RIA utilizando JavaScript tiene
                     una serie de inconvenientes:
                     ◦ Conseguir que nuestro código JavaScript sea cross-browser
                       (funcione sin problemas en la mayoría de navegadores).
                     ◦ Modularizacion del código cuando las aplicaciones crecen.
                     ◦ Falta de herramientas avanzadas para el desarrollo con
                       JavaScript.
                     ◦ Necesidad de tener un conocimiento avanzado en
                       JavaScript para obtener aplicaciones optimizadas.
www.i2e.com.es




                    Una primera solución a los problemas anteriores son los
                     Frameworks JavaScript.
www.i2e.com.es




                    Aunque los frameworks JavaScript solucionan alguno de
                     los problemas anteriores y pueden ser una buena solución
                     en muchos casos, no solucionan todos los problemas.
                    En Google decidieron realizar una nueva caja de
                     herramientas (toolkit) para acelerar el desarrollado de
                     aplicaciones RIA basadas en AJAX mejorando la
                     experiencia del usuario.
www.i2e.com.es




                    Manifiesto GWT

                         La misión de GWT es mejorar radicalmente
                         la experiencia de los usuarios con la web
                         permitiendo a los desarrolladores utilizar
                         las herramientas Java existentes para
                         construir        aplicaciones         Ajax
                         independientes del navegador.
www.i2e.com.es




                    Google Web Toolkit (GWT) permite crear
                     aplicaciones AJAX en el lenguaje de programación
                     Java que son compiladas en código JavaScript
                     optimizado para los principales navegadores.
                    GWT no es un framework, es un toolkit para el
                     desarrollo de aplicaciones 2.0.
                    Código disponible bajo la licencia Apache 2.0
www.i2e.com.es




                    Programas en Java
                    Depuras en Java
                    Pruebas en Java
                    GWT compila de Java a JavaScript
                    Despliegas JavaScript en el nvegador
                     y Java(Servlet) en el servidor
www.i2e.com.es




                    Porque Java?
                          Google eligió Java por las herramientas existentes
                           (refactoring, asistencia a la escritura de codigo,
                           test …), por las librerías, libros, artículos y la amplia
                           comunidad de desarrolladores.

                          También necesitaban un lenguaje
                           con una sintaxis similar a javascript
                           y fuertemente tipado para facilitar
                           la fase de compilación y java
                           cumplía con este requerimiento.
www.i2e.com.es




                    Mejora la experiencia de usuario. Al ejecutarse la
                     interfaz de usuario complemtamente en el navegador, la
                     interacción del usuario con la aplicación es mas fluida. Al
                     no ser necesario llamar al servidor para renderizar las
                     paginas ya no tendremos el efecto de pagina en blanco.
www.i2e.com.es




                    Obtenemos un mayor rendimiento y una mejor
                     escalabilidad que con las aplicaciones web
                     tradicionales.
www.i2e.com.es




                  GWT no hace posible nada que no fuera posible hacer de otra
                   manera, pero sí hace que la acción sea mucho mas productiva.
                  GWT no intenta ensalzar las virtudes de Java, sino reconocer el
                   pragmatismo de las herramientas existentes, IDEs, entornos de
                   prueba, tipos, etc.
                  GWT no quiere hacernos olvidar DOM, CSS, navegador, etc,
                   sino permitir escribir abstracciones de todo ello y hacernos
                   mas productivos que escribiendo código JS a mano.
                  Posiblemente, algún día GWT será capaz de compilar otros
                   lenguages, o incluso procesar JS con anotaciones de tipos.
                  GWT hace productivo y posible el desarrollo de sitios webs de
                   gran escala y abre la posibilidad de crear aplicaciones de nueva
                   generación de manera fiable.
                 By Ray Cromwell (via Manuel Carrasco, twitter.com/dodotis)
www.i2e.com.es




                 Google Web Toolkit
www.i2e.com.es




                    La familia GWT




                 GWT SDK       Google Plugin   Speed Tracer   GWT
                               For Eclipse                    Designer
www.i2e.com.es




                    GWT SDK tiene cuatro componentes principales
                     http://code.google.com/intl/es-ES/webtoolkit/learnmore-sdk.html


                     ◦   Java-to-JavaScript Compiler (+ Optimizer y Linker).
                     ◦   Development Mode.
                     ◦   JRE Emulation Library.
                     ◦   GWT Web UI Class Library
www.i2e.com.es




                    GWT Java-to-JavaScript Compiler: la función del
                     componente es traducir el código desarrollado en
                     Java al codigo JavaScript optimizado y compatible
                     con los principale navegadores.
www.i2e.com.es




                    Development Mode : Permite ejecuta la aplicación
                     en la JVM y en el navegador a traves de un plugin.
                     Utiliza Jetty como servidor embebido.
www.i2e.com.es




                    JRE Emulation Library: contiene las bibliotecas más
                     importantes de las clases de Java. GWT emula parte
                     de la API de Java.
                    http://code.google.com/intl/es-
                     ES/webtoolkit/doc/latest/RefJreEmulation.html
                     ◦ java.lang
                     ◦ java.lang.annotation
                     ◦ java.util
                     ◦ java.io
                     ◦ java.sql
www.i2e.com.es




                    GWT Web UI Class Library: contiene un conjunto de
                     elementos de interfaz de usuario que permite la
                     creación de objetos tales como textos, cajas de
                     texto, imágenes , botones y otros widgets.
                    http://code.google.com/intl/es-
                     ES/webtoolkit/doc/latest/RefWidgetGallery.html
www.i2e.com.es
www.i2e.com.es




                    Proceso de desarrollo

                 Diseño/
                 Desarrollo
                                                            Depuración




                                             Optimización
www.i2e.com.es




                 Google Web Toolkit
www.i2e.com.es




                    Las clases de GWT para la interfaz de usuario son
                     similares a Swing o SWT.
                    Componentes, contendores y eventos.
                    Con Uibinder podemos definir la interfaz en XML.
                    Podemos dar estilo a los widgets utilizando CSS.
www.i2e.com.es




                    Al desarrollar en Java, podemos utilizar los entornos
                     de desarrollo mas populares para Java
                     (Eclipse,NetBeans, IntelliJ).
                    Podemos realizar abstracciones y utilizar patrones de
                     diseño orientados a objetos (OO) basados en Java.
                    Empaquetando las clases en archivos jar podemos
                     crear módulos reutilizables fáciles de importar en
                     otros proyectos.
www.i2e.com.es




                    Patrón MVP en vez de MVC
www.i2e.com.es




 
Patrón MVC
www.i2e.com.es




 
Patrón MVP
www.i2e.com.es




                    Ficheros de configuración para una aplicación GWT

                     ◦ Fichero gwt.xml donde definimos la aplicación y sus
                       dependencias.
                     ◦ Fichero Html desde el que iniciamos el código
                       JavaScript
                     ◦ Fichero CSS con los estilos.
                     ◦ Clase Java que implementa el EntryPoint (el main para
                       GWT).
www.i2e.com.es




                    Modulo EspecialistaJee.gwt.xml

                 <module >
                        <inherits name="com.google.gwt.user.User"/>
                        <inherits name="com.google.gwt.xml.XML"/>
                        <inherits name="com.google.gwt.json.JSON"/>
                        <inherits name='com.google.gwt.gears.Gears'/>
                        <inherits name="com.google.gwt.i18n.I18N"/>

                          <entry-point class="es.i2e.especialistajee.web.client.
                 EspecialistaJee"/>
                 </module>
www.i2e.com.es




                     Html de inicio (EspecialistaJee.html)
                 <html>
                   <head>
                     <title>Wrapper HTML for EspecialistaJee</title>
                     <meta name='gwt:module' content='es.i2e.especialistajee.web.
                 EspecialistaJee'/>

                      <link type="text/css" rel='stylesheet' href='EspecialistaJee.css'/>

                     <script type="text/javascript" language="javascript"
                 src="especialistaJee/EspecialistaJee.nocache.js"></script>
                   </head>
                   <body>
                     <!-- OPTIONAL: include this if you want history support -->
                     <iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
                   </body>
                 </html>
www.i2e.com.es




                    EspecialistaJee.css
                     .gwt-Label {
                             font-size: 12px;
                             font-family: Verdana, Arial, sans-serif;
                     }
                     .gwt-RadioButton{
                             font-size: 12px;
                             font-family: Verdana, Arial, sans-serif;
                     }
                     .gwt-PasswordTextBox{
                             font-family: Verdana, Arial, sans-serif;
                             font-size: 12px;
                             color: #FFFFFF;
                             background-color: #C89191;
                             border: #990000 1px solid;
                     }
www.i2e.com.es




                    EntryPoint (EspecialistaJeejava)
                 package es.i2e.especialistajee.web.client;
                 import com.google.gwt.core.client.EntryPoint;
                 import com.google.gwt.core.client.GWT;

                 public class EspecialistaJee implements EntryPoint, HistoryListener {
                           public void onModuleLoad() {
                                      //controlamos la navegacion por la aplicacion
                                      History.addHistoryListener(this);
                                      final RootPanel rootPanel = RootPanel.get();
                                      rootPanel.setSize("100%", "100%");
                                      private DockPanel panel = new DockPanel();
                                      panel.setSize("100%", "100%");
                                      rootPanel.add(panel);
                           }
                           public void onHistoryChanged(String historyToken) {
                           }
                 }
www.i2e.com.es




                    RootLayoutPanel
                    LayoutPanel
                    DockLayoutPanel
                    SplitLayoutPanel
                    StackLayoutPanel
                    TabLayoutPanel

                    http://code.google.com/intl/es-
                     ES/webtoolkit/doc/latest/DevGuideUiPanels.html#LayoutPan
                     els
www.i2e.com.es




                    UIBinder
                    Permite definir la interfaz mediante XML, lo que hace
                     mas sencillo definir la estructura de la interfaz de
                     usuario.
                    http://code.google.com/p/google-web-toolkit-
                     incubator/wiki/UiBinder
                      <ui:UiBinder xmlns:ui='urn:ui.com.google.gwt.uibinder'>
                              <div>
                                     Hello, <span ui:field='nameSpan'/>.
                              </div>
                      </ui:UiBinder>
www.i2e.com.es




                    La CSS no se interpreta igual en todos los navegadores.
                    GWT Abstrae de la implementacion de JavaScript para los
                     diferentes navegadores pero no de la CSS.
                    Podemos utilizar StyleInjector + CssResource.
                    Diferentes Css para diferentes navegadores.
                    Modularización de Css, solo se descarga cuando se necesita.
                    http://code.google.com/p/google-web-
                     toolkit/wiki/CssResource

                                      @if user.agent safari {
                                      -webkit-border-radius: 5px;
                                      }
www.i2e.com.es




                    ImageBundle y ClientBundle

                     public interface BarCampValenciaImageBundle extends ImageBundle {

                         @Resource("es/i2e/barcampvalencia/icons/btn_cancel_icon.png")
                         public AbstractImagePrototype cancelButtonIcon();
                     }
www.i2e.com.es




                    GWT.runAsync() señala un punto de corte al compilador
                     de GWT.
                    Descarga lo que necesites, cuando lo necesites, lo
                     recursos (CSS, imágenes, msgs) vienen con el código que
                     los utilice.
                    Automáticamente manejado por el compilador de GWT
                    http://code.google.com/p/google-web-
                     toolkit/wiki/CodeSplitting
                                     public void onNewWaveClicked() {
                                        GWT.runAsync(new RunAsyncCallback() {
                                           public void onSuccess() {
                                             WaveCreator.createNewWave();
                                           }
                                       });
                                     }
www.i2e.com.es




                    Editors
                    http://code.google.com/intl/es-
                     ES/webtoolkit/doc/latest/DevGuideUiEditors.html

                    GWT Editor framework permite mapear un grafo de
                     objetos en un grafo de editores. El escenario mas
                     comun es mapear objectos devueltos por un servicio
                     RPC en la UI (databinding).
www.i2e.com.es




                    Data Presentation Widgets
                    http://code.google.com/intl/es-
                     ES/webtoolkit/doc/latest/DevGuideUiCellWidgets.html
                    Estos widgets han sido diseñados para manejar y
                     mostrar grandes colecciones de datos rapidamente.
                    Un cell widget puede aceptar datos de cualquier
                     fuente de datos. El modelo de datos maneja la
                     actualizaciones asincronas. Cuando cambias lo
                     datos, la vista se actualiza automaticamente.
www.i2e.com.es




                    GWT
                    Smart GWT
                    Ext GWT
                    IT Mill Toolkit
                    GWT mosaic
www.i2e.com.es




                    Integración sencilla con las apis de Google
                    http://code.google.com/p/gwt-google-apis/
www.i2e.com.es




                    Si la biblioteca de clases de GWT no satisface tus
                     necesidades,       puedes      mezclar    JavaScript
                     manualmente en el código fuente Java mediante la
                     interfaz JSNI o JSO.
                    Si ya tienes código JavaScript puedes envolverlo
                     usando JSNI y crear un paquete jar para que el resto
                     del equipo pueda reutilizarlo fácilmente.
                     var first_name = “Frank”;
                     public native String getFirstName()/*-{
                     return $wnd.first_name;
                     }-*/;
www.i2e.com.es




                    JSO
                     ◦ Nos permite utilizar código externo JavaScript como si
                       fueran tipos de java.

                 public class Customer extends JavaScriptObject {
                   public final native String getFirstName() /*-{ return this.first_name; }-*/;

                     public final native String getLastName() /*-{ return this.last_name; }-*/;

                     public final native int computeAge() /*-{ return this.getComputedAge(); }-*/;

                     final native String getArea();
                 }
www.i2e.com.es




                    Puedes crear fácilmente bibliotecas y aplicaciones
                     internacionalizadas con las potentes técnicas de
                     vinculación aplazada de GWT.

                    ARIA es la especificación del W3C para hacer las
                     aplicaciones RIA accesibles a través de propiedades
                     estándar del DOM.
www.i2e.com.es




                 Google Web Toolkit
www.i2e.com.es




                    GWT puede comunicarse con cualquier tecnología de
                     servidor, realizando llamadas AJAX desde el cliente y
                     transportando la información utilizando JSON o XML.
www.i2e.com.es




                    GWT proporciona por defecto el mecanismo GWT RPC el
                     cual nos permite realizar llamadas remotas a Servlets,
                     GWT se encarga de la serializacion entre Java <-> JSON
                     para realizar las llamada. Es un mecanismo similar a RMI
                     en Java.
                    En la parte cliente implementamos las siguiente clases:
                     ◦ EspecialistaJeeService.java
                     ◦ EspecialistaJeeServiceAsyn.java
                    En la parte servidor implementamos:
                     ◦ EspecialistaJeeServiceImpl.java
www.i2e.com.es




                    Código en el cliente para realizar una llamada
                     asíncrona a un servicio GWT RPC.
                 AsyncCallback asyncCallback = new AsyncCallback()
                          public void onFailure (Throwable caught) {
                                   System.err.println("Fallo en la carga de la configuracion");
                          }
                          public void onSuccess (Object result) {
                                   System.out.println("Cargada la configuracion");
                          }
                 };
                 EspecialistaJeeService.Util.getInstance().obtenerAlumnos(asyncCallback);
www.i2e.com.es




                    Código en el servidor que recibe las llamas del
                     cliente JavaScript.
                 package es.i2e.especialistajee.web.server.servicios.inicio;
                 import com.google.gwt.user.server.rpc.RemoteServiceServlet;
                 import es.i2e. especialistajee.web.client.servicios.inicio. EspecialistaJee;
                 import es.i2e. especialistajee.web.client.util.GwtServiceException;

                 public class EspecialistaJeeImpl extends RemoteServiceServlet implements
                 EspecialistaJeeService {
                           public void obtenerAlumnos() throws GwtServiceException{

                           }
                 }
www.i2e.com.es




                    Podemos realizar llamadas remotas a servicios en cualquier
                     tecnología de servidor, en este caso deberemos manejar
                     directamente en XML o JSON los datos enviados entre cliente
                     y servidor.
www.i2e.com.es




                    RequestFactory Facilita implementar una capa de acceso a
                     datos tanto en el cliente como en el servidor.
                    Permite estructurar el servidor de una manera orientada a los
                     datos en vez de al servicio, proporciona un nivel de
                     abstracción mayor que GWT-RPC.
                    Implemena su propio protocolo para el intercambio de datos
                     entre el cliente y el servidor.

                    http://code.google.com/intl/es-
                     ES/webtoolkit/doc/latest/DevGuideRequestFactory.html
www.i2e.com.es




                 Google Web Toolkit
www.i2e.com.es




                    Instalando un plugin podemos ejecutar la aplicación
                     desde el navegador de nuestra elección y utilizar
                     herramientas como firebug mientras depuramos el
                     codigo Java desde Eclipse.
www.i2e.com.es




                    Durante el desarrollo de una aplicación, se pueden
                     ver inmediatamente los cambios realizados en el
                     código refrescando el navegador. No es necesario
                     compilar el código en JavaScript.
                    El código se ejecutará en la maquina virtual de Java
                     como bytecode. Todo lo que pueda hacer el
                     depurador de Java se aplicará también al código
                     GWT.
www.i2e.com.es




                    La comprobación de tipo estático en lenguaje Java
                     permite detectar una clase de errores (errores
                     ortográficos, tipos no coincidentes) en el momento
                     de la creación del código, no durante la ejecución del
                     programa, lo que aumenta la productividad y reduce
                     los errores respecto a programar el codigo
                     directamente en JavaScript.
www.i2e.com.es




                    Para ejecutar los test utiliza HtmlUnit, librería de
                     Java que emula un navegador web.
                    Al estar HtmlUnit escrito enteramente en Java,
                     podemos ejecutar y depurar directamente desde
                     eclipse.
                    Si seguimos una arquitectura MVP podemos testear
                     los Presenters directamente en java si necesidad de
                     emular el navegador.
                    Podemos utilizar herramientas como selenium para
                     realizar pruebas de usuarios sobre la aplicación
                     desplegada.
www.i2e.com.es




                 Google Web Toolkit
www.i2e.com.es




                    GWT compila el código Java en
                     archivos JavaScript
                     independientes que estarán
                     disponibles a través de
                     cualquier servidor web. Las
                     aplicaciones GWT admiten
                     automáticamente los
                     navegadores IE, Firefox,
                     Mozilla, Safari y Opera. Escribe
                     el código una vez y GWT lo
                     convertirá al formato
                     JavaScript más adecuado para
                     el navegador de cada usuario.
www.i2e.com.es
www.i2e.com.es
www.i2e.com.es




                    Los desarrolladores de gwt creen firmemente que
                     GWT genera codigo javaScript mas eficiente que el
                     que    podemos        obtener     desarrollandolo
                     manualmente.

                    El compilador tambien realiza una optimizacion del
                     tamaño de los archivos GWT para que el envio al
                     cliente sea lo mas rapido posible.
www.i2e.com.es




                 Google Web Toolkit
www.i2e.com.es




                    Las aplicaciones de GWT se empaquetan en un war y
                     se pueden desplegar en cualquier contenedor de
                     Servlets estándar.
                    Si no hemos utilizado Java para los servicios remotos
                     podemos desplegar en cualquier servidor web http
                     como Apache.
                    Se puede utilizar ant o maven para automatizar el
                     proceso de compilación, empaquetamiento y
                     despliegue.
www.i2e.com.es




                    Proceso de desarrollo y despliegue




                         Refrescar   Funciona?    Si      Compilar

                                        No



                               Desarrollar                Desplegar
www.i2e.com.es




                    GWT genera un archivo
                     optimizado    para    cada
                     navegador soportado por el
                     compilador .
                    Cuando un navegador se
                     conecta a GWT el archivo
                     nocache.js   detecta     el
                     navegador del cliente y le
                     envía el código JavaScript
                     generado     para      ese
                     navegador.
www.i2e.com.es




                 Google Web Toolkit
www.i2e.com.es




                    Tiempo de compilación
                    El proceso de compilación de Java a JavaScript es lento en
                     comparación con el proceso de complicación de java a
                     bytecode, pero hay que recordar que la compilzación se
                     realiza al final para obtener el desplegable. Ademas el
                     compilador de gwt aprovecha los nuevos procesadores multi-
                     core para utilizar varios hilos durante el proceso de
                     compilación.
www.i2e.com.es




                    Logica de presentación expuesta en el navegador.
                    Al ejecutarse el codigo de presentación enteramente
                     en el navegador, el codigo queda expuesto.
                    El compilador de gwt ofusca el codigo javascript.
                    La parte mas sensible de la aplicación que es la
                     logica de negocio y los datos siguen estando en el
                     servidor.
www.i2e.com.es




                     Pocos widgets en el SDK estandar.
                    El equipo de GWT esta haciendo un esfuerzo por
                     ampliar el numero widgets estandar disponible.
                    Si se necesitan widgets que no están disponibles en
                     GWT, podemos usar librerías de terceros o
                     construirnos nuestros propios widgets extendiendo
                     los widgets estandars o realizando nuevos widgets
                     desde cero.
www.i2e.com.es




                    SEO
                    El SEO es un problema común a todas las
                     aplicaciones AJAX (no es exclusivo de GWT).
                    En el 2010 Google publico una propuesta para hacer
                     las       aplicaciones       ajax      descargables
                     http://code.google.com/intl/es-ES/web/ajaxcrawling/
                    Twitter     parece      que     lo    esta     utilizando.
                     http://twitter.com/#!/i2e_es
www.i2e.com.es




                 Google Web Toolkit
www.i2e.com.es
www.i2e.com.es
www.i2e.com.es
www.i2e.com.es
www.i2e.com.es
www.i2e.com.es
www.i2e.com.es
www.i2e.com.es
www.i2e.com.es
www.i2e.com.es
www.i2e.com.es
www.i2e.com.es
www.i2e.com.es
www.i2e.com.es




                    Chris Ramsdale
                    http://www.slideshare.net/cramsdale/gdd-2010-
                     preso2
                    http://www.slideshare.net/cramsdale/how-to-build-
                     rich-web-apps-with-gwt
                    Manuel Carrasco
                    http://www.slideshare.net/dodotis/gwt-
                     1entendiendo-gwt
                    http://www.slideshare.net/dodotis/gwt-
                     2trabajando-congwt
www.i2e.com.es




                    Documentación
                    http://code.google.com/intl/en/webtoolkit/overview.html
                    Grupo
                    http://groups.google.com/group/Google-Web-Toolkit
                    Blog
                    http://googlewebtoolkit.blogspot.com/
                    Twitter
                    @googledevtools
                    Google I/O 2010
                    http://www.google.com/events/io/2010/sessions.html#GWT
                    Galería de aplicaciones
                    http://gwtgallery.appspot.com/
www.i2e.com.es
www.i2e.com.es




                    http://www.i2e.com.es
                    Twitter: i2e_es
                    joseluis@i2e.com.es
                    emilio@i2e.com.es
                    i2e@i2e.com.es

Más contenido relacionado

PDF
Desarrollo de aplicaciones web con Google Web Toolkit
Ingenieria Informatica Empresarial
 
PPT
Desarrollo de aplicaciones AJAX con GWT
Ingenieria Informatica Empresarial
 
PDF
Comenzando con GWT
Willy Hurtado Vela
 
PPTX
Google Web Toolkit
Ingenieria Informatica Empresarial
 
PDF
Presentacion Google Web Toolkit
Ingenieria Informatica Empresarial
 
PPTX
Desarrollo de Aplicaciones Web 2.0 con GWT
Ingenieria Informatica Empresarial
 
PDF
GWT y SmartGWT - Introducción
VLASLOV
 
PDF
Aprendiendo GWT
Manuel Carrasco Moñino
 
Desarrollo de aplicaciones web con Google Web Toolkit
Ingenieria Informatica Empresarial
 
Desarrollo de aplicaciones AJAX con GWT
Ingenieria Informatica Empresarial
 
Comenzando con GWT
Willy Hurtado Vela
 
Presentacion Google Web Toolkit
Ingenieria Informatica Empresarial
 
Desarrollo de Aplicaciones Web 2.0 con GWT
Ingenieria Informatica Empresarial
 
GWT y SmartGWT - Introducción
VLASLOV
 
Aprendiendo GWT
Manuel Carrasco Moñino
 

La actualidad más candente (17)

PPTX
Exposicion GWT
Jose Luis Dorao
 
PDF
Gwt seminario java_hispano_manolocarrasco
Manuel Carrasco Moñino
 
PDF
GWT: Why GWT, GQuery, and RequestFactory
Manuel Carrasco Moñino
 
PDF
Gwt I - entendiendo gwt
Manuel Carrasco Moñino
 
PDF
Manual jquery
Luis Giovani
 
PDF
Desarrollo en Android: Conceptos Básicos
Gabriel Huecas
 
PDF
Manual de jquery en pdf desarrollowebcom
jo_ram
 
PDF
J query el framework de la web luc van lancker-1504
Vanessa Carlos
 
PPTX
Java completo y agragado
Maria
 
PDF
Programacion de una tienda virtual en Grails
Gabriel Bermudez
 
PDF
Google Web Toolkit (GWT) en entornos empresariales
Tecsisa
 
PDF
[ES] Introducción a las Aplicaciones Web con Java
Eudris Cabrera
 
PDF
OpenVidu Commitconf 2018
Micael Gallego
 
PDF
Gwt II - trabajando con gwt
Manuel Carrasco Moñino
 
PDF
WebRTC en tu web con OpenVidu
Micael Gallego
 
Exposicion GWT
Jose Luis Dorao
 
Gwt seminario java_hispano_manolocarrasco
Manuel Carrasco Moñino
 
GWT: Why GWT, GQuery, and RequestFactory
Manuel Carrasco Moñino
 
Gwt I - entendiendo gwt
Manuel Carrasco Moñino
 
Manual jquery
Luis Giovani
 
Desarrollo en Android: Conceptos Básicos
Gabriel Huecas
 
Manual de jquery en pdf desarrollowebcom
jo_ram
 
J query el framework de la web luc van lancker-1504
Vanessa Carlos
 
Java completo y agragado
Maria
 
Programacion de una tienda virtual en Grails
Gabriel Bermudez
 
Google Web Toolkit (GWT) en entornos empresariales
Tecsisa
 
[ES] Introducción a las Aplicaciones Web con Java
Eudris Cabrera
 
OpenVidu Commitconf 2018
Micael Gallego
 
Gwt II - trabajando con gwt
Manuel Carrasco Moñino
 
WebRTC en tu web con OpenVidu
Micael Gallego
 
Publicidad

Similar a Desarrollo de aplicaciones Web 2.0 Google Web Toolkit (20)

PDF
Charla 1er betabeers Córdoba
Luis Muñoz Hueso
 
PDF
Desarrollo multiplataforma de apps con GWT y PhoneGap
betabeers
 
PPT
Temas Relacionados Web 2
Juan Raul Vergara
 
PDF
Tutor Java Web
Angel Titirico
 
PDF
Jc Web2.0 Java Ee5 Net Beans
vicosw
 
PDF
Comparación Web 1.0 y Web 2.0_eproanio2009
Edison Proaño
 
PPTX
Evolucion web
Jairo Quiroz Cabanillas
 
PDF
Aplicaciones RIA: Rich Internet Application Technologies
Jesus Caceres Tello
 
PPT
Web20
UJAP
 
DOCX
Ria
Luiis Ortiz
 
PPT
Web20
Richard mendia
 
PDF
Aplicaciones web 2.0
JenniferBarriga20
 
PDF
I introduccion a_las_aplicaciones_web_co
fanny casadiego
 
PDF
Universidad tecnológica de estado de zacatecas
Gustavo Aguilar
 
PPTX
Las apps
miguel gomes
 
DOCX
Aplicaciones web
JenniferBarriga20
 
PPT
Jc Web20 Open Source Why Floss2007
guest976d083
 
DOCX
Aplicaciones web 2.0
JenniferBarriga20
 
DOCX
TEMA Nº 1: INTRODUCCIÓN A J2EE
Anyeni Garay
 
DOCX
TEMA Nº 1: INTRODUCCIÓN A J2EE
anyeni
 
Charla 1er betabeers Córdoba
Luis Muñoz Hueso
 
Desarrollo multiplataforma de apps con GWT y PhoneGap
betabeers
 
Temas Relacionados Web 2
Juan Raul Vergara
 
Tutor Java Web
Angel Titirico
 
Jc Web2.0 Java Ee5 Net Beans
vicosw
 
Comparación Web 1.0 y Web 2.0_eproanio2009
Edison Proaño
 
Aplicaciones RIA: Rich Internet Application Technologies
Jesus Caceres Tello
 
Web20
UJAP
 
Aplicaciones web 2.0
JenniferBarriga20
 
I introduccion a_las_aplicaciones_web_co
fanny casadiego
 
Universidad tecnológica de estado de zacatecas
Gustavo Aguilar
 
Las apps
miguel gomes
 
Aplicaciones web
JenniferBarriga20
 
Jc Web20 Open Source Why Floss2007
guest976d083
 
Aplicaciones web 2.0
JenniferBarriga20
 
TEMA Nº 1: INTRODUCCIÓN A J2EE
Anyeni Garay
 
TEMA Nº 1: INTRODUCCIÓN A J2EE
anyeni
 
Publicidad

Más de Ingenieria Informatica Empresarial (7)

PPTX
Presentacion practicas externas I2E
Ingenieria Informatica Empresarial
 
PDF
Nuestra experiencia Emprendiendo
Ingenieria Informatica Empresarial
 
PDF
Scrum y ecosistema software en i2e
Ingenieria Informatica Empresarial
 
PPT
Proceso MDA y Scrum v2
Ingenieria Informatica Empresarial
 
PPT
Proceso MDA y Scrum
Ingenieria Informatica Empresarial
 
PDF
Presentación Tecnológica del ERP-I2E
Ingenieria Informatica Empresarial
 
PPS
Web 2.0 y Redes Sociales
Ingenieria Informatica Empresarial
 
Presentacion practicas externas I2E
Ingenieria Informatica Empresarial
 
Nuestra experiencia Emprendiendo
Ingenieria Informatica Empresarial
 
Scrum y ecosistema software en i2e
Ingenieria Informatica Empresarial
 
Proceso MDA y Scrum v2
Ingenieria Informatica Empresarial
 
Presentación Tecnológica del ERP-I2E
Ingenieria Informatica Empresarial
 
Web 2.0 y Redes Sociales
Ingenieria Informatica Empresarial
 

Último (20)

PDF
Liceo departamental MICRO BIT (1).pdfslksjshshwuwjwjjdjdjshshs
edepanaobando
 
PPTX
Actividad integradora 6 Crear un archivo multimedia
susana0271
 
PPTX
Telecomunicaciones proyeccion de ventas 2025.pptx
miguelolivarren2
 
PPTX
CamposFlores_Fernando_M1S3AI6-PrepaLineaSEP
231464482
 
PDF
Problema de pareto resuelto iandanielpdf
IanDanielGiraldoRami
 
DOCX
tecnologia actividad segundo periodo.docx
samuelcuaran
 
DOCX
Informe de Tecnologia Diagrama de Pareto Juan Martinez, Alexandra Delgado, L...
edepisabellanaranjo
 
PDF
Distribución de frecuencias y Diagrama de Pareto en Exce (2).pdf
samuelcuaran
 
PDF
Tecnología 2.0 (1).pdf, diagrama de pareto
paulavallejo21
 
PDF
Trabajo grupal segundo periodo Tecnología .pdf
edepemanuelflechas
 
PDF
DIAGRAMA DE PARETO M Camila Duque Loaiza
MariacamilaDuqueloai
 
DOCX
#USOLASTICPARA Proyecto integrador M1S4PI JuarezGonzalez _Maria_M1S4PI.doc...
MariaSusanaJuarezGon
 
PDF
DIAGRAMA DE PARETO M. Camila Duque Loaiz
MariacamilaDuqueloai
 
PDF
Tecnología. Programación pseint 10-7 Sol Riaño Támara
edepsolriano
 
PDF
0621 LOS MATERIALES Y SUS USOS .2º CICLO_compressed.pdf
AndreaAlegre18
 
PDF
excel.pdf valentinamueses111 trabajo tecnologia
4zz5vkthyk
 
PPTX
Normas de la sala de informática Segundo
SilviaFernandaCesped
 
PDF
El candado imposible de abrir | Seguridad máxima explicada - Revista Técnica ...
Cerrajero 365 Valencia
 
PDF
Excel avanzado trabajo grupal tecnologia
mapaulahiguita
 
PDF
2do grado medios de transportes.pdf para el primario
AndreaAlegre18
 
Liceo departamental MICRO BIT (1).pdfslksjshshwuwjwjjdjdjshshs
edepanaobando
 
Actividad integradora 6 Crear un archivo multimedia
susana0271
 
Telecomunicaciones proyeccion de ventas 2025.pptx
miguelolivarren2
 
CamposFlores_Fernando_M1S3AI6-PrepaLineaSEP
231464482
 
Problema de pareto resuelto iandanielpdf
IanDanielGiraldoRami
 
tecnologia actividad segundo periodo.docx
samuelcuaran
 
Informe de Tecnologia Diagrama de Pareto Juan Martinez, Alexandra Delgado, L...
edepisabellanaranjo
 
Distribución de frecuencias y Diagrama de Pareto en Exce (2).pdf
samuelcuaran
 
Tecnología 2.0 (1).pdf, diagrama de pareto
paulavallejo21
 
Trabajo grupal segundo periodo Tecnología .pdf
edepemanuelflechas
 
DIAGRAMA DE PARETO M Camila Duque Loaiza
MariacamilaDuqueloai
 
#USOLASTICPARA Proyecto integrador M1S4PI JuarezGonzalez _Maria_M1S4PI.doc...
MariaSusanaJuarezGon
 
DIAGRAMA DE PARETO M. Camila Duque Loaiz
MariacamilaDuqueloai
 
Tecnología. Programación pseint 10-7 Sol Riaño Támara
edepsolriano
 
0621 LOS MATERIALES Y SUS USOS .2º CICLO_compressed.pdf
AndreaAlegre18
 
excel.pdf valentinamueses111 trabajo tecnologia
4zz5vkthyk
 
Normas de la sala de informática Segundo
SilviaFernandaCesped
 
El candado imposible de abrir | Seguridad máxima explicada - Revista Técnica ...
Cerrajero 365 Valencia
 
Excel avanzado trabajo grupal tecnologia
mapaulahiguita
 
2do grado medios de transportes.pdf para el primario
AndreaAlegre18
 

Desarrollo de aplicaciones Web 2.0 Google Web Toolkit

  • 1. www.i2e.com.es Jose Luis Ramirez Terry Emilio Bravo Garcia
  • 2. www.i2e.com.es Introducción  En esta presentación se va a realizar una introducción a Componentes de GWT Google Web Toolkit (en Construyendo la Interfaz adelante GWT). GWT es una tecnología desarrollada por Comunicación con el Servidor Google para acelerar el Depuración y Test desarrollo de Aplicaciones Compilación Ricas de Internet (RIA) y mejorar la experiencia del Despliegue usuario. ¿Problemas de GWT? Aplicaciones de Ejemplo
  • 3. www.i2e.com.es La web 2.0 y Google Web Toolkit
  • 4. www.i2e.com.es  WEB 2.0 (http://es.wikipedia.org/wiki/Web_2.0)  El término Web 2.0 es asociado usualmente con Tim O'Reilly debido a la referencia hecha en la conferencia O'Reilly Media Web 2.0 en 2004. El término fue utilizado para referirse a una segunda generación en la historia del desarrollo de la tecnología Web basada en comunidades de usuarios y una gama especial de servicios, como las redes sociales, los blogs, los wikis o las folcsonomías, que fomentan la colaboración y el intercambio ágil y eficaz de información entre los usuarios. La Web 2.0 es también llamada web social.
  • 5. www.i2e.com.es  WEB 2.0 ◦ Componente Social. Los sitios web 2.0 permiten a los usuario interactuar con la aplicacion aportando información y enriquecer el sitio con su uso. Estas webs suelen tener una "Arquitectura de Participación" que anima a los usuario a añadir valor conforme usan la aplicacion. ◦ Componente Tecnológico. La tecnologia normalmente usada en el desarrollo de aplicaciones web 2.0 esta basada en AJAX. Ajax permite intercambiar datos con el servidor web de forma asincrona y actualizar sin tener que realizar una recarga completa de la pagina.
  • 6. www.i2e.com.es  En esta presentación nos vamos a centrar en la parte tecnológica de la Web 2.0. Veremos como Google Web Toolkit nos facilita el desarrollo de la interfaz de usuario.
  • 7. www.i2e.com.es  AJAX (http://es.wikipedia.org/wiki/AJAX)  AJAX, acrónimo de Asynchronous JavaScript And XML, es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad y usabilidad en las aplicaciones.
  • 8. www.i2e.com.es  AJAX no constituye una tecnología en sí, sino que es un término que engloba a un grupo de éstas que trabajan conjuntamente, XTML, CSS, JavaScript, XMLHttpRequest, XML o JSON para la transferencia de datos con el servidor.
  • 9. www.i2e.com.es  RIA (http://en.wikipedia.org/wiki/Rich_internet_applications)  La aplicaciones RIA son aplicaciones web con muchas de las características de las aplicaciones de escritorio, normalmente entregadas ya sea por medio de webs basadas en los estándares de los navegadores, vía plugins del navegador, o independientemente vía sandboxes o maquinas virtuales.
  • 10. www.i2e.com.es  El navegador web como maquina virtual universal.  El navegador web se esta posicionando como el entorno preferente para el acceso a los servicios que ofrece la web. La industria esta apostando por los estandares y por las plataformas abiertas.  El lenguaje para desarrollar aplicaciones en los navegadores es JavaScript.
  • 11. www.i2e.com.es  Desarrollar aplicaciones RIA utilizando JavaScript tiene una serie de inconvenientes: ◦ Conseguir que nuestro código JavaScript sea cross-browser (funcione sin problemas en la mayoría de navegadores). ◦ Modularizacion del código cuando las aplicaciones crecen. ◦ Falta de herramientas avanzadas para el desarrollo con JavaScript. ◦ Necesidad de tener un conocimiento avanzado en JavaScript para obtener aplicaciones optimizadas.
  • 12. www.i2e.com.es  Una primera solución a los problemas anteriores son los Frameworks JavaScript.
  • 13. www.i2e.com.es  Aunque los frameworks JavaScript solucionan alguno de los problemas anteriores y pueden ser una buena solución en muchos casos, no solucionan todos los problemas.  En Google decidieron realizar una nueva caja de herramientas (toolkit) para acelerar el desarrollado de aplicaciones RIA basadas en AJAX mejorando la experiencia del usuario.
  • 14. www.i2e.com.es  Manifiesto GWT La misión de GWT es mejorar radicalmente la experiencia de los usuarios con la web permitiendo a los desarrolladores utilizar las herramientas Java existentes para construir aplicaciones Ajax independientes del navegador.
  • 15. www.i2e.com.es  Google Web Toolkit (GWT) permite crear aplicaciones AJAX en el lenguaje de programación Java que son compiladas en código JavaScript optimizado para los principales navegadores.  GWT no es un framework, es un toolkit para el desarrollo de aplicaciones 2.0.  Código disponible bajo la licencia Apache 2.0
  • 16. www.i2e.com.es  Programas en Java  Depuras en Java  Pruebas en Java  GWT compila de Java a JavaScript  Despliegas JavaScript en el nvegador y Java(Servlet) en el servidor
  • 17. www.i2e.com.es  Porque Java?  Google eligió Java por las herramientas existentes (refactoring, asistencia a la escritura de codigo, test …), por las librerías, libros, artículos y la amplia comunidad de desarrolladores.  También necesitaban un lenguaje con una sintaxis similar a javascript y fuertemente tipado para facilitar la fase de compilación y java cumplía con este requerimiento.
  • 18. www.i2e.com.es  Mejora la experiencia de usuario. Al ejecutarse la interfaz de usuario complemtamente en el navegador, la interacción del usuario con la aplicación es mas fluida. Al no ser necesario llamar al servidor para renderizar las paginas ya no tendremos el efecto de pagina en blanco.
  • 19. www.i2e.com.es  Obtenemos un mayor rendimiento y una mejor escalabilidad que con las aplicaciones web tradicionales.
  • 20. www.i2e.com.es  GWT no hace posible nada que no fuera posible hacer de otra manera, pero sí hace que la acción sea mucho mas productiva.  GWT no intenta ensalzar las virtudes de Java, sino reconocer el pragmatismo de las herramientas existentes, IDEs, entornos de prueba, tipos, etc.  GWT no quiere hacernos olvidar DOM, CSS, navegador, etc, sino permitir escribir abstracciones de todo ello y hacernos mas productivos que escribiendo código JS a mano.  Posiblemente, algún día GWT será capaz de compilar otros lenguages, o incluso procesar JS con anotaciones de tipos.  GWT hace productivo y posible el desarrollo de sitios webs de gran escala y abre la posibilidad de crear aplicaciones de nueva generación de manera fiable. By Ray Cromwell (via Manuel Carrasco, twitter.com/dodotis)
  • 21. www.i2e.com.es Google Web Toolkit
  • 22. www.i2e.com.es  La familia GWT GWT SDK Google Plugin Speed Tracer GWT For Eclipse Designer
  • 23. www.i2e.com.es  GWT SDK tiene cuatro componentes principales http://code.google.com/intl/es-ES/webtoolkit/learnmore-sdk.html ◦ Java-to-JavaScript Compiler (+ Optimizer y Linker). ◦ Development Mode. ◦ JRE Emulation Library. ◦ GWT Web UI Class Library
  • 24. www.i2e.com.es  GWT Java-to-JavaScript Compiler: la función del componente es traducir el código desarrollado en Java al codigo JavaScript optimizado y compatible con los principale navegadores.
  • 25. www.i2e.com.es  Development Mode : Permite ejecuta la aplicación en la JVM y en el navegador a traves de un plugin. Utiliza Jetty como servidor embebido.
  • 26. www.i2e.com.es  JRE Emulation Library: contiene las bibliotecas más importantes de las clases de Java. GWT emula parte de la API de Java.  http://code.google.com/intl/es- ES/webtoolkit/doc/latest/RefJreEmulation.html ◦ java.lang ◦ java.lang.annotation ◦ java.util ◦ java.io ◦ java.sql
  • 27. www.i2e.com.es  GWT Web UI Class Library: contiene un conjunto de elementos de interfaz de usuario que permite la creación de objetos tales como textos, cajas de texto, imágenes , botones y otros widgets.  http://code.google.com/intl/es- ES/webtoolkit/doc/latest/RefWidgetGallery.html
  • 29. www.i2e.com.es  Proceso de desarrollo Diseño/ Desarrollo Depuración Optimización
  • 30. www.i2e.com.es Google Web Toolkit
  • 31. www.i2e.com.es  Las clases de GWT para la interfaz de usuario son similares a Swing o SWT.  Componentes, contendores y eventos.  Con Uibinder podemos definir la interfaz en XML.  Podemos dar estilo a los widgets utilizando CSS.
  • 32. www.i2e.com.es  Al desarrollar en Java, podemos utilizar los entornos de desarrollo mas populares para Java (Eclipse,NetBeans, IntelliJ).  Podemos realizar abstracciones y utilizar patrones de diseño orientados a objetos (OO) basados en Java.  Empaquetando las clases en archivos jar podemos crear módulos reutilizables fáciles de importar en otros proyectos.
  • 33. www.i2e.com.es  Patrón MVP en vez de MVC
  • 36. www.i2e.com.es  Ficheros de configuración para una aplicación GWT ◦ Fichero gwt.xml donde definimos la aplicación y sus dependencias. ◦ Fichero Html desde el que iniciamos el código JavaScript ◦ Fichero CSS con los estilos. ◦ Clase Java que implementa el EntryPoint (el main para GWT).
  • 37. www.i2e.com.es  Modulo EspecialistaJee.gwt.xml <module > <inherits name="com.google.gwt.user.User"/> <inherits name="com.google.gwt.xml.XML"/> <inherits name="com.google.gwt.json.JSON"/> <inherits name='com.google.gwt.gears.Gears'/> <inherits name="com.google.gwt.i18n.I18N"/> <entry-point class="es.i2e.especialistajee.web.client. EspecialistaJee"/> </module>
  • 38. www.i2e.com.es  Html de inicio (EspecialistaJee.html) <html> <head> <title>Wrapper HTML for EspecialistaJee</title> <meta name='gwt:module' content='es.i2e.especialistajee.web. EspecialistaJee'/> <link type="text/css" rel='stylesheet' href='EspecialistaJee.css'/> <script type="text/javascript" language="javascript" src="especialistaJee/EspecialistaJee.nocache.js"></script> </head> <body> <!-- OPTIONAL: include this if you want history support --> <iframe id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe> </body> </html>
  • 39. www.i2e.com.es  EspecialistaJee.css .gwt-Label { font-size: 12px; font-family: Verdana, Arial, sans-serif; } .gwt-RadioButton{ font-size: 12px; font-family: Verdana, Arial, sans-serif; } .gwt-PasswordTextBox{ font-family: Verdana, Arial, sans-serif; font-size: 12px; color: #FFFFFF; background-color: #C89191; border: #990000 1px solid; }
  • 40. www.i2e.com.es  EntryPoint (EspecialistaJeejava) package es.i2e.especialistajee.web.client; import com.google.gwt.core.client.EntryPoint; import com.google.gwt.core.client.GWT; public class EspecialistaJee implements EntryPoint, HistoryListener { public void onModuleLoad() { //controlamos la navegacion por la aplicacion History.addHistoryListener(this); final RootPanel rootPanel = RootPanel.get(); rootPanel.setSize("100%", "100%"); private DockPanel panel = new DockPanel(); panel.setSize("100%", "100%"); rootPanel.add(panel); } public void onHistoryChanged(String historyToken) { } }
  • 41. www.i2e.com.es  RootLayoutPanel  LayoutPanel  DockLayoutPanel  SplitLayoutPanel  StackLayoutPanel  TabLayoutPanel  http://code.google.com/intl/es- ES/webtoolkit/doc/latest/DevGuideUiPanels.html#LayoutPan els
  • 42. www.i2e.com.es  UIBinder  Permite definir la interfaz mediante XML, lo que hace mas sencillo definir la estructura de la interfaz de usuario.  http://code.google.com/p/google-web-toolkit- incubator/wiki/UiBinder <ui:UiBinder xmlns:ui='urn:ui.com.google.gwt.uibinder'> <div> Hello, <span ui:field='nameSpan'/>. </div> </ui:UiBinder>
  • 43. www.i2e.com.es  La CSS no se interpreta igual en todos los navegadores.  GWT Abstrae de la implementacion de JavaScript para los diferentes navegadores pero no de la CSS.  Podemos utilizar StyleInjector + CssResource.  Diferentes Css para diferentes navegadores.  Modularización de Css, solo se descarga cuando se necesita.  http://code.google.com/p/google-web- toolkit/wiki/CssResource @if user.agent safari { -webkit-border-radius: 5px; }
  • 44. www.i2e.com.es  ImageBundle y ClientBundle public interface BarCampValenciaImageBundle extends ImageBundle { @Resource("es/i2e/barcampvalencia/icons/btn_cancel_icon.png") public AbstractImagePrototype cancelButtonIcon(); }
  • 45. www.i2e.com.es  GWT.runAsync() señala un punto de corte al compilador de GWT.  Descarga lo que necesites, cuando lo necesites, lo recursos (CSS, imágenes, msgs) vienen con el código que los utilice.  Automáticamente manejado por el compilador de GWT  http://code.google.com/p/google-web- toolkit/wiki/CodeSplitting public void onNewWaveClicked() { GWT.runAsync(new RunAsyncCallback() { public void onSuccess() { WaveCreator.createNewWave(); } }); }
  • 46. www.i2e.com.es  Editors  http://code.google.com/intl/es- ES/webtoolkit/doc/latest/DevGuideUiEditors.html  GWT Editor framework permite mapear un grafo de objetos en un grafo de editores. El escenario mas comun es mapear objectos devueltos por un servicio RPC en la UI (databinding).
  • 47. www.i2e.com.es  Data Presentation Widgets  http://code.google.com/intl/es- ES/webtoolkit/doc/latest/DevGuideUiCellWidgets.html  Estos widgets han sido diseñados para manejar y mostrar grandes colecciones de datos rapidamente.  Un cell widget puede aceptar datos de cualquier fuente de datos. El modelo de datos maneja la actualizaciones asincronas. Cuando cambias lo datos, la vista se actualiza automaticamente.
  • 48. www.i2e.com.es  GWT  Smart GWT  Ext GWT  IT Mill Toolkit  GWT mosaic
  • 49. www.i2e.com.es  Integración sencilla con las apis de Google  http://code.google.com/p/gwt-google-apis/
  • 50. www.i2e.com.es  Si la biblioteca de clases de GWT no satisface tus necesidades, puedes mezclar JavaScript manualmente en el código fuente Java mediante la interfaz JSNI o JSO.  Si ya tienes código JavaScript puedes envolverlo usando JSNI y crear un paquete jar para que el resto del equipo pueda reutilizarlo fácilmente. var first_name = “Frank”; public native String getFirstName()/*-{ return $wnd.first_name; }-*/;
  • 51. www.i2e.com.es  JSO ◦ Nos permite utilizar código externo JavaScript como si fueran tipos de java. public class Customer extends JavaScriptObject { public final native String getFirstName() /*-{ return this.first_name; }-*/; public final native String getLastName() /*-{ return this.last_name; }-*/; public final native int computeAge() /*-{ return this.getComputedAge(); }-*/; final native String getArea(); }
  • 52. www.i2e.com.es  Puedes crear fácilmente bibliotecas y aplicaciones internacionalizadas con las potentes técnicas de vinculación aplazada de GWT.  ARIA es la especificación del W3C para hacer las aplicaciones RIA accesibles a través de propiedades estándar del DOM.
  • 53. www.i2e.com.es Google Web Toolkit
  • 54. www.i2e.com.es  GWT puede comunicarse con cualquier tecnología de servidor, realizando llamadas AJAX desde el cliente y transportando la información utilizando JSON o XML.
  • 55. www.i2e.com.es  GWT proporciona por defecto el mecanismo GWT RPC el cual nos permite realizar llamadas remotas a Servlets, GWT se encarga de la serializacion entre Java <-> JSON para realizar las llamada. Es un mecanismo similar a RMI en Java.  En la parte cliente implementamos las siguiente clases: ◦ EspecialistaJeeService.java ◦ EspecialistaJeeServiceAsyn.java  En la parte servidor implementamos: ◦ EspecialistaJeeServiceImpl.java
  • 56. www.i2e.com.es  Código en el cliente para realizar una llamada asíncrona a un servicio GWT RPC. AsyncCallback asyncCallback = new AsyncCallback() public void onFailure (Throwable caught) { System.err.println("Fallo en la carga de la configuracion"); } public void onSuccess (Object result) { System.out.println("Cargada la configuracion"); } }; EspecialistaJeeService.Util.getInstance().obtenerAlumnos(asyncCallback);
  • 57. www.i2e.com.es  Código en el servidor que recibe las llamas del cliente JavaScript. package es.i2e.especialistajee.web.server.servicios.inicio; import com.google.gwt.user.server.rpc.RemoteServiceServlet; import es.i2e. especialistajee.web.client.servicios.inicio. EspecialistaJee; import es.i2e. especialistajee.web.client.util.GwtServiceException; public class EspecialistaJeeImpl extends RemoteServiceServlet implements EspecialistaJeeService { public void obtenerAlumnos() throws GwtServiceException{ } }
  • 58. www.i2e.com.es  Podemos realizar llamadas remotas a servicios en cualquier tecnología de servidor, en este caso deberemos manejar directamente en XML o JSON los datos enviados entre cliente y servidor.
  • 59. www.i2e.com.es  RequestFactory Facilita implementar una capa de acceso a datos tanto en el cliente como en el servidor.  Permite estructurar el servidor de una manera orientada a los datos en vez de al servicio, proporciona un nivel de abstracción mayor que GWT-RPC.  Implemena su propio protocolo para el intercambio de datos entre el cliente y el servidor.  http://code.google.com/intl/es- ES/webtoolkit/doc/latest/DevGuideRequestFactory.html
  • 60. www.i2e.com.es Google Web Toolkit
  • 61. www.i2e.com.es  Instalando un plugin podemos ejecutar la aplicación desde el navegador de nuestra elección y utilizar herramientas como firebug mientras depuramos el codigo Java desde Eclipse.
  • 62. www.i2e.com.es  Durante el desarrollo de una aplicación, se pueden ver inmediatamente los cambios realizados en el código refrescando el navegador. No es necesario compilar el código en JavaScript.  El código se ejecutará en la maquina virtual de Java como bytecode. Todo lo que pueda hacer el depurador de Java se aplicará también al código GWT.
  • 63. www.i2e.com.es  La comprobación de tipo estático en lenguaje Java permite detectar una clase de errores (errores ortográficos, tipos no coincidentes) en el momento de la creación del código, no durante la ejecución del programa, lo que aumenta la productividad y reduce los errores respecto a programar el codigo directamente en JavaScript.
  • 64. www.i2e.com.es  Para ejecutar los test utiliza HtmlUnit, librería de Java que emula un navegador web.  Al estar HtmlUnit escrito enteramente en Java, podemos ejecutar y depurar directamente desde eclipse.  Si seguimos una arquitectura MVP podemos testear los Presenters directamente en java si necesidad de emular el navegador.  Podemos utilizar herramientas como selenium para realizar pruebas de usuarios sobre la aplicación desplegada.
  • 65. www.i2e.com.es Google Web Toolkit
  • 66. www.i2e.com.es  GWT compila el código Java en archivos JavaScript independientes que estarán disponibles a través de cualquier servidor web. Las aplicaciones GWT admiten automáticamente los navegadores IE, Firefox, Mozilla, Safari y Opera. Escribe el código una vez y GWT lo convertirá al formato JavaScript más adecuado para el navegador de cada usuario.
  • 69. www.i2e.com.es  Los desarrolladores de gwt creen firmemente que GWT genera codigo javaScript mas eficiente que el que podemos obtener desarrollandolo manualmente.  El compilador tambien realiza una optimizacion del tamaño de los archivos GWT para que el envio al cliente sea lo mas rapido posible.
  • 70. www.i2e.com.es Google Web Toolkit
  • 71. www.i2e.com.es  Las aplicaciones de GWT se empaquetan en un war y se pueden desplegar en cualquier contenedor de Servlets estándar.  Si no hemos utilizado Java para los servicios remotos podemos desplegar en cualquier servidor web http como Apache.  Se puede utilizar ant o maven para automatizar el proceso de compilación, empaquetamiento y despliegue.
  • 72. www.i2e.com.es  Proceso de desarrollo y despliegue Refrescar Funciona? Si Compilar No Desarrollar Desplegar
  • 73. www.i2e.com.es  GWT genera un archivo optimizado para cada navegador soportado por el compilador .  Cuando un navegador se conecta a GWT el archivo nocache.js detecta el navegador del cliente y le envía el código JavaScript generado para ese navegador.
  • 74. www.i2e.com.es Google Web Toolkit
  • 75. www.i2e.com.es  Tiempo de compilación  El proceso de compilación de Java a JavaScript es lento en comparación con el proceso de complicación de java a bytecode, pero hay que recordar que la compilzación se realiza al final para obtener el desplegable. Ademas el compilador de gwt aprovecha los nuevos procesadores multi- core para utilizar varios hilos durante el proceso de compilación.
  • 76. www.i2e.com.es  Logica de presentación expuesta en el navegador.  Al ejecutarse el codigo de presentación enteramente en el navegador, el codigo queda expuesto.  El compilador de gwt ofusca el codigo javascript.  La parte mas sensible de la aplicación que es la logica de negocio y los datos siguen estando en el servidor.
  • 77. www.i2e.com.es  Pocos widgets en el SDK estandar.  El equipo de GWT esta haciendo un esfuerzo por ampliar el numero widgets estandar disponible.  Si se necesitan widgets que no están disponibles en GWT, podemos usar librerías de terceros o construirnos nuestros propios widgets extendiendo los widgets estandars o realizando nuevos widgets desde cero.
  • 78. www.i2e.com.es  SEO  El SEO es un problema común a todas las aplicaciones AJAX (no es exclusivo de GWT).  En el 2010 Google publico una propuesta para hacer las aplicaciones ajax descargables http://code.google.com/intl/es-ES/web/ajaxcrawling/  Twitter parece que lo esta utilizando. http://twitter.com/#!/i2e_es
  • 79. www.i2e.com.es Google Web Toolkit
  • 93. www.i2e.com.es  Chris Ramsdale  http://www.slideshare.net/cramsdale/gdd-2010- preso2  http://www.slideshare.net/cramsdale/how-to-build- rich-web-apps-with-gwt  Manuel Carrasco  http://www.slideshare.net/dodotis/gwt- 1entendiendo-gwt  http://www.slideshare.net/dodotis/gwt- 2trabajando-congwt
  • 94. www.i2e.com.es  Documentación  http://code.google.com/intl/en/webtoolkit/overview.html  Grupo  http://groups.google.com/group/Google-Web-Toolkit  Blog  http://googlewebtoolkit.blogspot.com/  Twitter  @googledevtools  Google I/O 2010  http://www.google.com/events/io/2010/sessions.html#GWT  Galería de aplicaciones  http://gwtgallery.appspot.com/
  • 96. www.i2e.com.es  http://www.i2e.com.es  Twitter: i2e_es  [email protected][email protected][email protected]