Tutor: Ing. Juan E. Talavera Horn 2010 Google Web Toolkit (GWT)

Presentación del tema: "Tutor: Ing. Juan E. Talavera Horn 2010 Google Web Toolkit (GWT)"— Transcripción de la presentación:

1 Tutor: Ing. Juan E. Talavera Horn 2010 Google Web Toolkit (GWT)

2 Contenido  Introducción  Ventajas  Desventajas  Arquitectura  API GWT

3 GWT. Manifiesto  Mejorar radicalmente la experiencia de los usuarios con la web permitiendo a los desarrolladores utilizar herramientas Java existentes para construir aplicaciones AJAX de manera sencilla e independientes del navegador utilizado.

4 Introducción a GWT  Google Web Toolkit (GWT) es un framework de código abierto desarrollado por Google y lanzado en mayo del 2006 bajo la licencia Apache 2.0.  GWT permite crear aplicaciones AJAX utilizando el lenguaje de programación Java que son compiladas posteriormente por el compilador de GWT en código JavaScript optimizado para los principales navegadores.

5 Ventajas de GWT (I)  No se necesita mucho conocimiento de otros lenguajes (JavaScript) Se utiliza el lenguaje de programación Java. Esto permite tener todas las ventajas de dicho lenguaje y utilizar una gran cantidad de herramientas disponibles para el mismo.  Los errores comunes JavaScripts (typos, type mismatches) son capturados por el programador durante compilación en vez de por los usuarios durante la ejecución.  No se necesita trabajar con las incompatibilidades de los navegadores.

6 Ventajas de GWT (II)  No se necesita mucho conocimiento del DOM API. Se utiliza Java API.  Compatible con varias herramientas para desarrollar/depurar/probar las aplicaciones.  Integración con JUnit.  Internacionalización.  Depuración en tiempo real

7 Desventajas de GWT  No es un enfoque estándar de HTML y JavaScript La generación automática de HTML podría hacer más difícil el uso de herramientas estándar de HTML y CSS. No se utiliza directamente código JavaScript en el HTML.  Sólo para desarrolladores Java. Muchos entornos Ajax permiten utilizar JavaScript en el cliente y luego elegir el lenguaje en el servidor. GWT se encuentra basado enteramente en Java.  Enfoque Inusual. Lo cual hace que la evaluación y administración se más díficil.

8 Arquitectura de GWT

9 Arquitectura de GWT (II)  Compilador Java To JavaScript Convierte código Java a código JavaScript. T iene tres modos en los que puede operar, los cuales determinan cómo se verá:  Obfuscate: por defecto. Genera código inentendible y altamente optimizado.  Pretty: genera código JavaScript entendible.  Detailed: produce código al igual que el modo pretty pero agregando el nombre completo de la clase como parte del nombre de las funciones. El código JavaScript es generado en archivos para cada tipo de navegador e idioma. Al iniciar el navegador el mismo ejecuta código que permite obtener la versión correcta del archivo para la aplicación.

10 Arquitectura de GWT (III)  Java Script Native Interface (JSNI) A pesar de que se programe en Java en vez de JavaScript, en ocasiones se necesitará programar directamente en JavaScript, por ejemplo, para hacer referencia a partes del API del navegador que no esté soportado por GWT o para utilizar alguna librería JavaScript no muy común. JSNI permite ejecutar JavaScript desde Java, como también Java desde JavaScript. Esto hace posible al compilador GWT que pueda mezclar código JavaScript nativo con el código que genera.

11 Arquitectura de GWT (IV)  JRE Emulation Library Esta librería da a GWT la habilidad de utilizar clases JRE en los proyectos y ser compilados luego a JavaScript. Las clases pertenecen a un subconjunto de los paquetes java.lang y java.util, que incluyen clases para el manejo de números y fechas, operaciones matemáticas, excepciones, listas y colecciones, etc.

12 GWT API (I)  Widgets y Paneles GWT trae una gran cantidad de widgets y paneles. La diferencia entre ambos es que un widget es una especie de control utilizado por el usuario y un panel es un contenedor en el que pueden ser colocados los widgets. Las clases GWT para la interfaz de usuario son similares a Swing o SWT. A pesar de que existen más de 30 widgets y paneles, posiblemente no cubran todas las necesidades, por lo que se permite utilizar widgets y paneles de proyectos de código abierto, los que proveen calendarios, tablas ordenables, calculadoras, paneles para dibujo, etc.

13 GWT API (II)

14

15 GWT API (III)  Remote Procedure Call (RPC) El mecanismo para interactuar con el servidor, de manera a hacer actualizaciones en la interfaz de usuario, es llamado Remote Procedure Call (RPC), también conocido como llamada al servidor (server call). Los navegadores de hoy en día tienen un objeto JavaScript llamado XMLHttpRequest que permite este tipo de comunicación entre el navegador y el servidor sin que se refresque toda la página HTML. GWT provee dos herramientas que utilizan el objeto XMLHttpRequest. La primera es la clase RequestBuilder que es esencialmente una envoltura para este objeto. La segunda herramienta es llamada GWT-RPC, y es más elaborada, permitiendo que puedan ser enviados y recibidos objetos Java entre el cliente y el servidor.

16 GWT API (IV)  Historial del Navegador Cuando se reemplaza un pedazo de contenido en una página web de manera dinámica con JavaScript, el navegador no lo considera como un cambio de página, por lo que no registra en su historial. Esto causa que los botones Retroceder y Avanzar del navegador no se comporten como el usuario esperaría GWT provee un mecanismo para administrar el historial del navegador que funciona con este tipo de aplicaciones. Para acceder al mismo, es necesario escribir un manejador de eventos que implemente la interfaz HistoryListener y luego éste debe ser registrado en el objeto History : History.addHistoryListener(new MyHistoryListener()); History.newItem("overview"); History.newItem("reports");

17 GWT API (V)  Testeo Development Mode (hosted mode en GWT 1.x): Modo de depuración donde se puede interactuar y probar al aplicación GWT sin ser traducida a javascript. Al correr en este modo la JVM esta ejecutando el código de la aplicación como un archivo ByteCode compilado. Production Mode (web mode en GWT 1.x): Modo en que la aplicación es traducida a javascript, y ejecutada solamente por el explorador, sin uso de la JVM.

18 GWT API (VI)  Testeo GWT incluye la clase base GWTTestCase que hereda de la clase base TestCase de Junit y de esta forma permite la integración con el mismo. Para implementar la clase de prueba, GWT provee una herramienta llamada junitCreator que genera una clase de prueba más scripts para probar en los modos development mode y production mode. También se puede utilizar otras herramientas como Selenium o WebDriver para realizar los test de la interfaz de usuario.

19 GWT - Herramientas  Herramientas de Línea de Comandos projectCreator: Genera el esqueleto de un proyecto básico y un archivo Ant opcional y/o proyecto para Eclipse. aplicationCreator: Genera el lanzador de una aplicación. junitCreator: Genera un test Junit. i18nCreator: Genera un archivo de propiedades i18n y un script de sincronización. benchmarkViewer: Muestra resultados benchmark

20 Plataforma de desarrollo  Eclipse  Plugin de GWT para eclipse  Development Kit y Runtime de GWT  Browser (Firefox, IE, Chrome)  Plugin para browser específico

21 MemoryProxy > ciudadProxy = new MemoryProxy >(ciudades); BeanModelReader ciudadReader = new BeanModelReader(); final BaseListLoader ciudadLoader = new BaseListLoader(ciudadProxy, ciudadReader); final ListStore ciudadStore = new ListStore (ciudadLoader); final ComboBox ciudadCombo = new ComboBox (); ciudadCombo.setEmptyText(cons.comboSeleccionar()); ciudadCombo.setFieldLabel(cons.empleadoCiudad()); ciudadCombo.setDisplayField("nombre"); ciudadCombo.setStore(ciudadStore); (Ciudad)ciudadCombo.getValue().getBean()