Rich Internet Applications (RIA): comparativa de

frameworks en Software Libre

Beatriz Montero Fernandez

19 de noviembre de 2009

Resumen

En este artıculo se hara un recorrido por las diversas alternativas enSoftware Libre disponibles en el estado del arte actual para el desarrollode Rich Internet Applications. Se hara una exploracion en profundidaden uno de las alternativas expuestas: GWT (Google Web Toolkit),exponiendo sus principales caracterısticas mediante el desarrollo deuna pequena aplicacion. Por ultimo, haremos un breve analisis de lacomunidad que esta detras de este framework.

1

Indice

1. Introduccion 3

2. Tecnologıas RIA 42.1. Tecnologıas basas en plug-ins o sandboxes . . . . . . . . . . . 42.2. Basadas en estandares soportados nativamente por los nave-

gadores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

3. GWT 123.1. Introduccion . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123.2. Caracterısticas . . . . . . . . . . . . . . . . . . . . . . . . . . 133.3. Desarrollando una aplicacion con GWT . . . . . . . . . . . . 15

3.3.1. Instalacion de Google Web Tolkit . . . . . . . . . . . . 153.3.2. Creacion de un proyecto GWT . . . . . . . . . . . . . 173.3.3. Disenando la aplicacion . . . . . . . . . . . . . . . . . 203.3.4. Construyendo la Interfaz de Usuario . . . . . . . . . . 213.3.5. Implementando codigo en el lado del Cliente . . . . . 283.3.6. Desarrollando codigo en el lado del Servidor . . . . . . 313.3.7. Compilando una aplicacion GWT . . . . . . . . . . . . 38

3.4. Comunidad GWT . . . . . . . . . . . . . . . . . . . . . . . . 39

2

1. Introduccion

RIA, acronimo de Ritch Internet Applications (Aplicaciones de InternetEnriquecidas) fue concebido en 2002 por Jeremy Allaire [1] de Macrome-dia, ahora Adobe, es un termino que engloba a una nueva generacion deaplicaciones que aunan las propiedades de las tradicionales aplicaciones deescritorio con las propiedades de las aplicaciones Web. Esto quiere decir,una RIA combina la rica interactividad de una aplicacion de escritorio, conel amplio alcance de una aplicacion Web. Hoy en dıa se considera como unatecnologıa que forma parte de la Web 2.0.

Figura 1: Representacion visual de una aplicacion RIA, en esta repre-sentacion podemos observar como la unificacion de una aplicacion de Es-critorio (Fat client) y las tradicionales aplicaciones Web (Browser client),permiten obtener un nuevo tipo de aplicacion conocida como RIA

La descricion grafica de esta definicion es mostrada en la figura 1, dondepodemos observar la unificacion entre las aplicaciones de escritorio y lasaplicaciones web. A continuacion se citan las principales caracterısticas quedebe cumplir una aplicacion RIA:

Interfaz de usuario mas rica, haciendo mas facil la interaccion conel usuario final, incluyendo funcionalidades como arrastrar, pegar ycalculos en el lado del cliente sin la necesidad de enviar la informacional servidor.

3

Comunicacion asıncrona. No se producen recargas de pagina, ya quedesde el principio se carga la pagina completa y luego se van actu-alizando partes de la misma, y solo se produce comunicacion con elservidor cuando se necesitan datos externos como datos de una Basede Datos o de otros ficheros externos.

Reduccion de la carga del servidor, ya que parte del procesamiento setraslada al cliente.

Reduccion del trafico de red, ya que el cliente asume parte del proce-samiento y no es necesario realizar tantas peticiones al servidor.

Algunos ejemplos de apliciones RIA que nos podemos encontrar hoy endıa en la web son:

Visualizacion de mapas con Google Maps o Yahoo! Maps o Mapas deLive Search

Gestion de feeds con Google Reader

Gestion de correo con Gmail

Edicion de documentos con GoogleDocs

Etherpad, procesador de texto colaborativos

Bespin, editor de archivos de codigo de Mozilla.

2. Tecnologıas RIA

En el estado de arte actual existen multitud de tecnologıas (frameworks,librerıas, ...) que nos ayudan a desarrollar aplicaciones RIA y que podemosenglobar en dos grupos:

Basadas en plug-ins o sandboxes

Basadas en estandares soportados nativamente por los navegadores(DOM, Javascript, DHTML)

2.1. Tecnologıas basas en plug-ins o sandboxes

Este tipo de tecnologıas necesitan de un anadido instalado en el clientepara poder ofrecer la pontencialidad tıpica de las RIA.

4

Ventajas

Este tipo de tecnologıas se caracterizan por proporcionar unos efec-tos de usuario extraordinarios, especialmente cuando manejamos con-tenido multimedia

Los desarrolladores se encuentran especialmente comodos a la hora deimplementar una aplicacion con este tipo tecnologıas, ya que permitenrealizar un desarrollo rapido de aplicaciones con unos resultados muyvistosos

Son las que tienen mayor cuota de mercado

Desventajas

Obligan al cliente a instalar complementos en el navegador para podervisualizarlas

No son independientes de la plataforma, ya que los plugins dependentanto del Sistema Operativo como del propio navegador.

No son accesibles, ya que no estan integradas con HTML

A continuacion se listan algunas de estas tecnologıas:

Adobe Flex, es la solucion de Adobe para dar soporte al despliegue ydesarrollo de Aplicaciones Enriquecidas de Internet. En un desarrollomulticapa, las aplicaciones Flex se corresponden con la capa de pre-sentacion, pero permite comunicarse con el servidor (logica y modelode datos) a traves de servicios web XML y objetos remotos (tales co-mo Coldfusion CFCs, propio de Adobe pero privativo, clases Java, ycualquiera que soporte el formato de mensajes de acciones)

Licencia MPLPlug-in Adobe Flash Player

(Privativo)Version 3.0.0Lenguage Frontend MXMLLenguage Backend Java, PHP, .NET, ...Plataformas GNU/Linux, Mac, Mi-

crosoft, Solaris

Cuadro 1: Ficha Adobe Flex

5

Sun JavaFX, es la respuesta de Sun Microsystems a Adobe (AdobelFlex) y a Microsoft (Silverlight) para el desarrollo de aplicaciones RIA,con la ventaja de que permite realizar desarrollos para pcs y disposi-tivos moviles y permite ejecutar las aplicaciones fuera del navegador,sin necesidad de instalar ningun complemento a mayores.

JavaFX incluye JavaFX SDK, un compilador y herramientas entiempo de ejecucion, graficos, medios, servicios web y librerıas de textoenriquecidas, Netbeans IDE for JavaFX, un completo e integrado en-torno de desarrollo y, para los disenadores, JavaFX Production Suite,una suite con plugins y herramientas para exportar otros componentesgraficos (desde GIMP, Photoshop, ...) a las aplicaciones JavaFX.

Licencia Parte en GPLv2Plug-in JRE JavaVersion 1.2Lenguage Frontend JavaFXLenguage Backend JavaPlataformas GNU/Linux, Mac, Mi-

crosoft, Solaris

Cuadro 2: Ficha JavaFX

OpenLaszlo, es una plataforma completamente software libre para eldesarrollo de aplicaciones RIA para PC y moviles. OpenLaszlo incluyeen lenguaje de scripting LZX y el Servidor OpenLaszlo, que es unservlet Java.

A diferencia de Adobe Flex y JavaFX, permite compilar el codi-go LZX a un fichero SWF y tambien a DHTML, esta caracterısticahace que se encuentre a medias en la clasificacion de Tecnologıas RIAseguida en este documento. Sin conseguir una interfaz tan vistosa eimpresionante como las de AdobeFlex o JavaFX, la curva de apren-dizaje de OpenLaszlo es menos pendiente que los dos anteriores, yaque le codigo LZX es mucho mas legible y de alto nivel orientado aobjetos.

Novell Moonlight, es la implementacion en codigo abierto de Mi-crosoft Silverlight y esta includido dentro del proyecto Mono. Su obje-tivo es permitir que aplicaciones Silverlight corran sobre plataformasGNU/Linux y proporcionar un SDK en GNU/Linux para desarrollaraplicaciones Silverlight.

6

Mediante un acuerdo con Microsoft, Novell tiene e acceso a las es-pecificaciones, los test oficiales y permitirle el uso de los codecs queutiliza Silverlight, aunque aquellos que no quieran usar los codecs bi-narios de Microsoft, Moonlight puede ser compilado directamente porsus usuarios finales con implementaciones open source de esos codecs.

A diferencia de las anteriores, Moonlight no es una plataforma parael desarrollo de aplicaciones RIA, es un completo en codigo abiertopara ejectuar Silverlight en plataformas GNU/Linux.

2.2. Basadas en estandares soportados nativamente por losnavegadores

Este tipo de tecnologıas no necesitan instalar ningun plugin en el cliente,ya que estan basadas en en HTML, mas concretamente la base tecnologicade las mismas es Ajax.

Ventajas

No necesitan de ningun anadido en el cliente

Son multiplataforma, al estar basadas en HTML cualquier navegadorpuede visualizarlas

Licencia Common Public LicensePlug-in Adobe Flash Player

(Privativo)Version 4.0.9Lenguage Frontend LZXLenguage Backend Java, PHP, ...Plataformas GNU/Linux, Mac, Mi-

crosoft, Solaris

Cuadro 3: Ficha OpenLaszlo

Licencia LGPLv2Version 1.0.1Lenguage C++Plataformas GNU/LinuxNavegadores Firefox

Cuadro 4: Ficha Moonlight

7

Desventajas

No todos los navegadores implementan de igual forma los estandares(HTML, CSS, Javascript), con lo cual pueden surgir divergencias queobliguen a realizar distintas implementaciones segun que navegador.

No son accesibles, ya que el usuario necesita tener activado JavaScritp,de lo contrario, no se visualizaran.

Existe una gran variedad de frameworks disponibles, lo cual obliga aldesarrollador a hacer un fuerte esfuerzo inicial para explorar las dis-tintas alternativas y escoger aquella que mejor se adapte a sus necesi-dades.

Dentro de este tipo de tecnologıas podemos hacer una clasificacion, aten-diendo al ambito al que estan enfocadas, ası tenemos:

Tecnlogıas centradas en el cliente. Son aquellas tecnologıas RIAque se ejecutan completamente en el navegador, y la comunicacioncon el servidor se hace a traves de mecanismos independientes de latecnologıa RIA, por ejemplo, a traves de web services.

Tecnlogıas centradas en el servidor. Son aquellas tecnologıas queejecutandose en el navegador, incluyen codigo que es necesario ejectuaren el servidor.

En el Cuadro agrupamos varios frameworks de este tipo de tecnologıasbasadas en estandares segun la clasificacion anterior. A continuacion citare-

Centrados en Cliente Centrados en Servi-dor

jQuery GWTPrototype RichFacesExtJS IceFacesYUI ZKDojoCapuccino

Cuadro 5: Ficha jQuery

mos algunos de los frameworks mas utilizados:

jQuery, es una librerıa de Javascript que permite simplicar la manerade interactuar con los documentos HTML, manejar eventos, manipularel arbol DOM, desarrollar animaciones y agregar interaccion con latecnologıa Ajax a paginas web.

8

En la actualidad cuenta con una amplia comunidad gracias a la cualexisten un gran numero de funcionalidades o plugins ya implementadosgracias a las cuales, desarrollar una aplicacion con jQuery se convierteen un proceso muy rapido que, unido a la sencillez de la librerıa ha-cen que este framework RIA tenga una penetracion muy alta en elmercado.

Licencia MIT y GPLVersion 1.3.2Lenguage Javascript

Cuadro 6: Ficha jQuery

Prototype, es el framework Javascript mas longevo, orientado a ob-jetos, proporciona al desarrollador tecnicas Ajax listas para ser usadasen el desarrollo agil y sencillo de paginas web. Su pontencial se maxi-miza al utilizarlo con Ruby On Rails en el lado del servidor, de hechoeste ya incluye Prototype.

Licencia MITVersion 1.6Lenguage Javascript

Cuadro 7: Ficha Prototype

ExtJS, framework Javascript que permite construir aplicaciones com-plejas en Internet. Esta basado en componentes (layouts, paneles,grids, ...) de alto rendimiento, personalizados y extensibles.

Como librerıa Javascript, al igual que jQuery y Prototype, es in-dependiente de cualquier tecnologıa del lado servidor, no obstante esun framework capaz de integrarse con otros frameworks, en particularcon GWT, que veremos a continuacion, lo cual facilita la vinculacionentre la presentacion y el modelo de datos.

Licencia GPLv3Version 3.0.0Lenguage Javascript

Cuadro 8: Ficha ExtJS

9

YUI, Yahoo User Interface es una librerıa Javascript que permite de-sarrollar aplicaciones RIA utilizando DOM, Ajax y DHTML. Ademasproporciona un conjunto de recursos CSS y widgets predefinidos quepermiten realizar un desarrollo rapido de aplicaciones.

Una de las principales ventajas de YUI respecto a otros frameworkses que esta respaldada por los desarrolladores de Yahoo, que ponena nuestra disposicion la potencialidad de los recursos Yahoo ya exis-tentes, de una manera muy bien documentada.

Licencia BSDVersion 1.7Lenguage Javascript

Cuadro 9: Ficha YUI

Dojo, es un framework Javascript que contiene APIs y widgets parafacilitar el desarrollo de aplicaciones Web que utilicen tecnologıa Ajax.Permite a los desarrolladores realizar componentes de forma rapida yestandarizada, de manera que estos sean ademas reutilizables y com-patibles con todos los navegadores.

Un rasgo identificativo de Dojo es que provee de un sistema depaquetes para facilitar el desarrollo modular, ası, inicializa una seriede jerarquıas de paquetes de espacios de nombre (io, event, etc.) bajoel paquete raız dojo.

Licencia BSD y AFLVersion 1.3.1Lenguage Javascript

Cuadro 10: Ficha DOJO

Capuccino, Cappuccino esta construıdo sobre tecnologıas web estandarcomo Javascript e implementa APIs conocidas como las de los frame-works GNUstep y Apple Cocoa. Permite al desarrollador abstraerse delas complejidades asociadas tradicionalmente a la web, HTML, CSS eincluso DOM. Capuccino esta implementado usando un nuevo lengua-je de programacion llamado Object-J, basado en Object-C, que es unlenguaje interpretado que se ejecuta en el navegador.

10

Licencia LGPLVersion 0.7.1Lenguage Object-J

Cuadro 11: Ficha Capuccino

GWT, Google Web Toolkit framework desarrollado por Google paradesarrollar aplicaciones complejas basadas en Ajax, utilizando el lengua-je de programacion Java. Una vez desarrollado el frontend de la apli-cacion en Java, el compilador GWT lo traduce a HTML y Javascript,esto permite al desarrollador obtener la potencialidad de Ajax sinnecesidad de escribir codigo Javascript, ademas el compilador GWT seasegura de que el codigo HTML y Javascript generado sea compatiblecon cualquier navegador.

GWT soporta una gran cantidad de widgets que son utiles en el de-sarrollos de aplicaciones Ajax, incluyendo arboles, pestanas, barras demenu y menus de dialogo. GWT tambien soporta invocacion de meto-dos remotos (RPC) y otras caracterısticas que veremos en el siguienteapartado. Todas ellas, hacen que GWT sea un framework RIA, queapesar de su juventud, esta creciendo a un ritmo exponencial.

Licencia Apache 2.0Version 1.7Lenguage Java

Cuadro 12: Ficha GWT

JSF, es una especificacion del JCP (Java Comunity Process), identi-fcado como JSR 314 que define el desarrollo de interfaces de usuarioen aplicaciones Java EE. JSF nos ofrece un marco de trabajo que fa-cilita el desarrollo de aplicaciones, separando las diferentes capas deuna arquitectura: presentacion, reglas y entidades de negocio.

JSFs nos proporciona un conjunto de APIs para representar com-ponentes de una interfaz de usuario y administrar su estado, mane-jar eventos, validar entrada, definir un esquema de navegacion de laspaginas y dar soporte para internacionalizacion y accesibilidad y unconjunto de etiquetas para desplegar JSF en paginas JSP.

11

Entre estas implementaciones de JSFs hay dos que dan soporte aaplicaciones RIA: IceFaces y RichFaces. Todas ellas estan orientadasa componentes almacenados en servidor y siguen una programacionorientada a eventos. A diferencia de muchas de las librerıas vistas conanterioridad, los eventos generados en el cliente son gestionados por elservidor, lo que las convierte en tecnologıas centradas en el servidor.

Producto Licencia VersionRichFaces GPL 3.3.2IceFaces MPL 1.8.2

Cuadro 13: Diversas implementaciones de JSF.

ZK, es un framework escrito en Java que permite el desarrollo deapliciones RIA sin necesidad de escribir Javascript. Se caracteriza porser una tecnologıa centrada en el servidor, orientado a eventos y basadaen componentes.

En un modelo multicapa se corresponde con la capa de presentacionpara ello utiliza un lenguaje de marcado denominado ZUML.

Licencia GPL y LGPLVersion 3.6Lenguage Frontend ZUMLLenguage Backtend Java

Cuadro 14: Ficha ZK

Otros frameworks RIA basados en estandares que podemos encontrar hoyen dıa son: Pyjamas, Echo3, midori, MochiKit, MooTools, qooxdoo, RialtoToolkit, Rico, ...

3. GWT

3.1. Introduccion

En este apartado haremos una exploracion mas profunda del frameworkGWT para ayudar a los desarrolladores en su decision a la hora de escogerun framework para desarrollar una aplicacion RIA. Se ha escogido GWT endetrimento de otros, por tres razones:

1. Por ser un framework basado en estandares

12

2. Entre los basados en estandares, fue el framework escogido, por es-tar desarrollado por Google y lo ha utilizado en sus aplicaciones masconocidas: Gmail, GoogleDocs, Google Wave, ... de exito indiscutible.

3. Porque todas las herramientas necesarias para facilitar el desarrollo deuna aplicacion en GWT son tambien software libre

Esta seccion es una traduccion parcial y no oficial de Getting Started deGWT [11].

3.2. Caracterısticas

Google Web Toolkit (GWT) es un framework de desarrollo en Java decodigo abierto, que permite escapar de la amalgama de tecnologıas usadasactualmente para escribir aplicaciones Ajax, las cuales son difıciles de mane-jar y propensas a errores.

Con GWT, se puede desarrollar y depurar aplicaciones Ajax usando Ja-va en cualquier entorno de desarrollo (sistema operativo e IDEs). Una vezimplementada la aplicacion, GWT compila y traduce dicho programa aJavascript y HTML compatible con cualquier navegador web.

El ciclo de desarrollo de una aplicacion GWT es el siguiente:

1. En un entorno de desarrollo integrado (IDE) escribir y depurar unaaplicacion en Java, usando las librerıas GWT necesarias.

2. Usar el compilador de Java a Javascript de GWT para transformarla aplicacion en un conjunto de archivos Javascript y HTML que secuelgan en cualquier servidor y ejecutarlos desde un navegador web.

3. Verificar que la aplicacion se ejecuta sobre todos y cada uno de losnavegadores existentes.

Las aplicaciones GWT pueden ser ejecutadas en dos modos:

Modo hosted (hosted mode). Donde la aplicacion corre como byte-codes de Java sobre una maquina virtual. Por norma general se gas-tara mas tiempo desarrollando en modo hosted, ya que allı se cuentacon todas las ventajas que proporciona Java para depurar usando unIDE como Eclipse. Para soportar el modo hosted, GWT cuenta conun navegador especial que esta ¨enganchado¨ a la maquina virtual deJava.

Modo Web (Web mode). Donde la aplicacion corre como HTML +Javascript sobre un navegador, traducido desde tu codigo fuente Javaoriginal con el compilador de GWT.

13

Otras caracterısticas:

RPC realmente facil. Para comunicarse desde el navegador que lan-za la aplicacion con el servidor web, solamente es necesario definirclases de Java serializables para las peticiones y respuestas. En pro-duccion, GWT serializa automaticamente las peticiones del navegadory de-serializa las repuestas desde el servidor web. El mecanismo deRPC de GWT puede incluso manejar jerarquıa de polimorfismo enclases, y se pueden manejar las posibles excepciones.

Optimizacion codigo Javascript. Es una caracterıstica del compi-lador GWT que permite generar varias versiones del codigo en tiempode compilacion, pero solo una de ellas se cargara en tiempo de ejecu-cion en funcion de los perfiles de usuario del navegador concreto. Porejemplo, al desarrollar una aplicacion que soporte internacionalizacion,con el modulo de internacionalizacion de GWT, el compilador GWTcrea versiones para el Firefox en espanol, para el Firefox en Ingles,para el Opera en espanol, ... pero luego si la aplicacion se ejecuta des-de un Firefox en espanol solo cargara el codigo Javascript para dichonavegador.

Componentes de la interfaz de usuario dinamicos y reutiliz-ables. Se pueden crear widgets reutilizables por composicion de otroswidgets ya existentes. Despues se puede cooperar con la comunidad dedesarrolladores enviandolos como un jar.

Uso de otras librerıas Javascript o codigo Javascript nativo.Si las librerıas de clases de GWT no son suficientes para lo que senecesita, se puede mezclar Javascript en el codigo de la aplicacionusando JSNI (Javascript Native Interface) que permite escribir codigojavascript con Java. Incluso es posible tratar los objetos Javascript conobjetos Java, esto facilita el trabajo con JSON.

Administracion del historial del navegador En las aplicacionesAjax, cuando cambia la interfaz, no cambia la URL que se esta visitan-do en el navegador. Esto produce una incompatibilidad con la formade gestionar el historial de paginas visitadas dentro de los navegadores.GWT no es la excepcion, sin embargo, proporciona una clase para ges-tionar el historial de una aplicacion Ajax y para que el usuario puedaseguir utilizando los botones `Atras` y `Siguiente` de su navegadorsin problemas.

Soporte para internacionalizacion. Se pueden crear rapida y facil-mente aplicaciones multidioma

14

Soporte para accesibilidad. GWT da soporte a ARIA, que es unaespecificacion para hacer accesibles las aplicaciones RIA basada en elestandar DOM.

Integracion con Junit Mediante la integracion de JUnit en GWTse puede probar las aplicaciones y depurarlas en un navegador mien-tras se construyen e incluso, se puede testear llamadas asıncronas aprocedimientos remotos RPC.

Mayor productividad. Se puede usar cualquier de IDEs (Eclipse,Netbeans, ...) con lo cual se puede escoger aquel con el que se este masfamiliarizado. Por otro lado, los errores comunes en Javascript (erroresde sintaxis, por ejemplo) son facilmente detectados mientras se desar-rolla la aplicacion, y no cuando el usuario final lo este ejecutando. Ypor ultimo, los disenos en Java basados en la programacion orientadaa objetos son faciles de comunicar y entender, por lo que la base delcodigo Ajax mas comprensible con menos documentacion.

3.3. Desarrollando una aplicacion con GWT

3.3.1. Instalacion de Google Web Tolkit

Para el desarrollo de la aplicacion utilizaremos el IDE Eclipse Galileo 3.5y el plugin GWT para dicho IDE. Para ello seguiremos los siguientes pasos:

1. En el Eclipse, Help - Install new software

2. En la ventana 2 que aparece en el campo Working with introducimos:

http://dl.google.com/eclipse/plugin/3.5

Click en Add..

3. En la nueva ventana dejamos Name vacıo, ya que el nombre sera cu-bierto automaticamente, y pulsamos OK

4. En la siguiente ventana 3, en la caja central, asegurarse de que estenmarcados todos los ckecks relativos a Plugins y SDK, ası, insta-lara Google App Engine Java SDK y Google Web ToolkitSDK. Despues pulsamos Next

5. En la siguiente ventana, revisar que se van a instalar los siguienteselementos:

Google App Engine Java SDK 1.2.2

Google Plugin for Eclipse 3.5

15

Figura 2: Ventana de instalacion de GWT donde introducir el repositorio

Figura 3: Ventana de instalacion de GWT donde se comprueban que ele-mentos instalar

16

Google Web Tolkit SDK 1.7.0

6. A continuacion, acepta los terminos de las licencias.

7. Por ultimo, reinicia Eclipse.

3.3.2. Creacion de un proyecto GWT

Una de las ventajas de GWT es que podemos aprovechar las multiplesherramientas que nos proporciona un IDE como eclipse: refactoring, comple-tado de codigo, depuracion... Ademas el plugin GWT para eclipse proporcinaun wizard para la creacion de aplicaciones GWT. A continuacion, enumer-amos los pasos a seguir para crear nuestra primera aplicacion con GWT quellamaremos TarefasGWT :

1. En la barra de herramientas, pulsamos el boton 4 New Web ApplicationProject.

Figura 4: Boton wizard GWT

2. Introducimos como nombre del proyecto: TarefasGWT

3. Como paquete introducimos: org.mswl.tarefasgwt

4. Debemos asegurarnos que las opciones Use Google Web Tolkit y UseGoogle App Engine estan marcadas, esta ultima es opcional pero al-tamente recomendada.

5. Por ultimo, pulsa en Finish.

Analicemos la estructura de directorios que se ha generado en nuestracarpeta del proyecto (workspace/TarefasGWT/ ):

/src/org/mswl/tarefasgwt Contiene TarefasGWT.gwt.xml el modu-lo XML de definicion del proyecto GWT y los directorios client y servercon archivos que continen el codigo del cliente y el servidor respecti-vamente.

/war Contiene recursos estaticos que pueden ser servidos puublica-mente como CSSs, imagenes, ...

/war/WEB-INF Contiene los ficheros de configuracion de la aplicacionWeb Java.

17

Figura 5: Creacion del proyecto TarefasGWT

/war/WEB-INF/lib Contiene las librerıas necesarias para el desarrollode la aplicacion.

Analicemos ahora algunos de los ficheros generados por el wizard:

/src/org/mswl/tarefasgwt/TarefasGWT.gwt.xml Fichero de config-uracion de la aplicacion GWT

/war/WEB-INF/TarefasGWT.html Pagina HTML que cargara la apli-cacion, en adelante Host Page.

/war/WEB-INF/TarefasGWT.css Hoja de estilos que se aplicara a laaplicacion

/src/org/mswl/tarefasgwt/client/TarefasGWT.java Codigo fuentejava del lado del servidor que implementa una clase entry point.

En /src/org/mswl/tarefasgwt/client/ los ficheros GreetingService.javay GreetingServiceAsync.java, y en /src/org/mswl/tarefasgwt/server/el fichero GreetingServiceImpl.java que implementa el RPC deGWT.

18

En este contexto aparecen dos conceptos nuevos modulo y clase entrypoint. Un modulo es la unidad basica de configuracion de una aplicacionGWT donde se definen todos los datos que el compilador GWT necesitasaber para generar el codigo HTML y Javascript apartir del codigo java.En una aplicacion GWT puede contener varios modulos, incluso admiteherencia de modulos, por ejemplo, nuestro TarefasGWT.gwt.xml 6 here-da de com.google.gwt.user.User, y debe incluir una clase entry point.TarefasGWT.gwt.xml incluye por defecto el estilo estandar de GWT aunquepone a nuestra disposicion outros dos estilos Dark y Chrome.

Figura 6: Modulo TarefasGWT.gwt.xml

Por su parte una clase entry point, como nuestra TarefasGWT.java,implementan la interfaz com.google.gwt.core.client.EntryPoint y ca-da vez que se carga el modulo correspondiente esta clase es instanciadaautomaticamente y su metodo EntryPoint.onModuleLoad() es invocado.

Ejecucion del proyecto en Modo hosted

Para ello tambien utilizaremos las facilidades del plugin de Eclipse.

1. En el panel Project Explorer seleccionamos nuestro proyecto Tarefas-GWT.

2. Boton derecho, y seleccionamos Run As Web Application. A contin-uacion, deberıamos ver algo como lo que se muestra en la Figura 7.

19

Figura 7: Ejecucion del TarefasGWT en Mode Hosted

3.3.3. Disenando la aplicacion

Requisitos funcionales

Nuestra aplicacion TarefasGWT implementara las siguientes funcional-idades:

Permitira al usuario anadir tareas

Listara las todas las tareas, incluyendo nombre y fecha de creacion

Permitira eliminar tareas de la lista.

Identificacion de los elementos de la interfaz de usuario

Analizados los requisitos funcionales, necesitamos:

Una tabla para listar las tareas

Dos botones, uno para Anadir tareas y otro para Borrar tareas.

Un caja de texto para introducir una tarea.

Incluiremos ademas una serie de elementos estaticos, como un logo yla cabecera de la pagina.

20

3.3.4. Construyendo la Interfaz de Usuario

Seleccion de los widgets GWT que implementaran la interfaz

Antes de implementar ningun widgets, hechemos un vistazo a la galerıade widgets que nos proporciona GWT, aquı exponemos una pequena mues-tra:

MenuBar

RichTextArea

SuggestBox

GWT tiene un tipo despecial de widget que se llama FlexTable que per-mite crear nuevas celdas bajo demanda, lo cual se ajusta perfectamente anuestra tabla de tareas, ya que en principio desconocemos cuantas tareasquerra introducir el usuario.

21

Por otro lado, utilizaremos Button para los botones de Anadir Tarea yBorrar Tarea, TextBox para anadir el nombre de una tarea.

Seleccion de paneles para agrupar los elementos UI

Una vez seleccionados los widgets a utilizar, el siguiente paso con-siste en decidir como se van a desplegar en la pagina, para ello utilizaremoslos paneles de GWT. GWT proporciona diversos tipos de paneles paraagrupar los elementos UI, incluso un panel puede agrupar a otros pane-les. Podemos establecer una analogıa con HTML, mediante la utilizacion deelementos table o div.

Para TarefasGWT utilizaremos un Panel Vertical para listar tareas. Ennuestro codigo java, crearemos una instancia de la clase VerticalPanely la llamaremos mainPanel. Luego utilizaremos un Panel Horizontal paraintroducir una nueva tarea, y en nuestro codigo java, crearemos una instanciade la clase HorizontalPanel y la llamaremos addPanel.

Existe un panel mas que necesitamos, se llama Root Panel. Un RootPanel es el elemento que utiliza GWT para contener todos los compo-nentes dinamicos de una aplicacion. Es la raız de la jerarquıa de paneles.El RootPanel por defecto envuelve el cuerpo del documento HTML, y esobtenido invocando el metodo RootPanel.get(). Si es necesario envolverotro elemento del documento HTML con RootPanel, usaremos el metodoRootPanel.get(String).

Embebiendo los elementos en la Host Page

Ahora necesitamos introducir todos estos elementos en nuestra apli-cacion, ello lo haremos atraves de nuestra HostPage, TarefasGWT.html,que ha generado automatica mente el wizard GWT. Para empezar, nues-tra TarefasGWT.html tendra el cuerpo vacıo, esto implica que el RootPanelenvolvera a todo el cuerpo del documento HTML, en consecuencia todo lomostrado en el navegador sera generado dinamicamente por GWT.

Nosotros introduciremos dos elementos estaticos, el tıtulo y un logo, luegopara embeber la aplicacion GWT dentro de TarefasGWT.html utilizaremosun div y lo identificaremos con tarefasList. Indicaremos paso a paso, comohacerlo:

1. Abrimos nuestra host page, /war/WEB-INF/TarefasGWT.html.

2. En la cabecera, cambiamos el tıtulo por TarefasGWT, pero conserva-mos la referencia a la hoja de estilos y al fichero Javascript.

22

3. En el cuerpo, anadimos una etiqueta H1 que envuelva al texto Tare-fasGWT.

4. A continuacion, anadiremos un elemento div cuyo identificador seatarefasList

5. Conservamos el iframe para dar soporte al historico del navegador.

6. Borramos todos el codigo HTML y comentarios restantes, de tal modoque deberıa quedar unha pagina como la que se muestra en la figura8.

Figura 8: La hosted page TarefasGWT.html

Implementando los widgets y paneles

La mayorıa de los elementos UI se mostraran nada mas se cargue laTarefasGWT.java luego los implementaremos dentro de su metodo onModuleLoad.Vayamos paso a paso:

1. Instanciamos cada uno de los widgets y paneles a utilizar, utilizandosus respectivos constructores. Para ello abrimos/src/org/mswl/tarefasgwt/client/TarefasGWT.java e introduci-mos el siguiente codigo que aparece en la Figura 9.Utilizamos las utilidades de Eclipse para organizar los imports.

2. Creamos la tabla para listar las tareas. Para ello introducimos dentrodel metodo onModuleLoad el codigo de la Figura 10.

23

Figura 9: Codigo para instanciar los widgets y paneles

Figura 10: Codigo para instanciar los widgets y paneles

3. Organizar los widgets. Para ello los montaremos sobre los paneles,mas concretamente, primero montaremos el addPanel que es el panelhorizontal el cual envolvera a la caja de texto para anadir una tarea.Luego montaremos el mainPanel que envolvera a la tabla de tareasy al panel addPanel. Esto en codigo se traduce como aparece en laFigura 11.

4. Asociar mainPanel con el Root Panel. Para embeber todos los wid-gets y paneles generados en la host page, tenemos que vincularlosatraves del Root Panel. Para ello asociaremos el elemento div de lahost page TarefasGWT.html y que identicamos como tarefasList connuestro Root Panel. Esto se traduce en el codigo Java mostrado en laFigura 12.

5. Fijar el foco de la pagina en la caja de texto, para que el usuario puedaintroducir tareas nada mas se cargue la pagina.

6. Comprobamos el resultado de lo aquı implementado. Para ello, lan-zamos la aplicacion en Modo Hosted : Seleccionamos nuestro proyectoy ejecutamos Run as - Web Application. El resultado en la Figura 14.

24

Figura 11: Codigo para montar los paneles

Figura 12: Codigo para montar los paneles

Figura 13: Fijar el foco en la caja de texto

Dejamos TarefasGWT ejecutandose en Modo Hosted, ya que los suce-sivos cambios que realizaremos los probaremos en Modo Hosted pul-sando unicamente Refresh.

Manejando eventos en el cliente

1. Analizando los eventos que se pueden realizar.GWT proporciona una gran variedad manejadores de eventos. Paragestionar el evento de hacer click en los botones Add y Delete uti-lizaremos ClickHandler y para manejar el evento de presionar Enterutilizaremos KeyPressHandler.

2. Registrando los eventos de raton. Para ello pasaremos un objetoque implemente la interfaz ClickHandler que en este caso propor-cionaremos mediante una clase anonima. La interfaz ClickHandlertiene un metodo onClick el cual se invoca cuando el usuario hace un

25

Figura 14: Pagina web resultante

click sobre el widget donde hemos registrado el evento.Para ello en el metodo onModuleLoad de nuestra clase TarefasGWT.javaanadimos el codigo que registra el evento y lo asocia al boton Add yen la clase, definimos un nuevo metodo que llamaremos addTarea(),tal y como se muestra en la Figura 15.

3. Registrando los eventos de teclado. De igual modo asociaremosel evento de presionar Enter en el boton Add, pero en este caso uti-lizaremos la interfaz KeyPressHandler que tiene un metodo llamadoonKeyPress.

Accion Evento RespuestaEl usuario intro-duce un texto

Click el botonAdd o presionaenter

Verificar la entradaVerificar si la entrada ya ex-isteAnadir una nueva fila a latablaCrear el boton Delete

Cuadro 15: Requisitos funcionales y eventos asociados

26

Figura 15: Registrando el evento Click

Figura 16: Registrando el evento Enter

4. Respondiendo a los eventos. Cuando el usuario pulsa el boton Addo cuando presiona Enter, nuestra aplicacion debe responder realizandolas siguientes acciones:

Validando el texto de entrada

Comprobando que el texto introducido no se corresponde con unatarea introducida previamente.

Anadiendo una fila mas a la tabla que lista las tareas

Anadiendo un nuevo boton Delete

En este apartado codificaremos el primer punto, es decir, verifi-caremos que el texto introducido no contiene caracteres extranos. Enprimer lugar deberemos recuperar la cadena de texto introducida porel usuario en el TexBox utilizando su metodo getText(). A contin-uacion, mediante la utilizacion de expresiones regulares, comprobare-mos la no existencia de caracteres no permitidos. Si el texto no es

27

valido mostraremos un mensaje de advertencia y si es correcto dejare-mos la caja de texto vacıa para que el usuario pueda introducir unanueva tarea. Veamos el codigo Java que implementa lo aquı detalladoen la Figura 17.

Figura 17: Validando el texto de entrada

5. Comprobando lo desarrollado hasta el momento. Para ello,puesto que todavıa conservamos la ejecucion de TarefasGWT en Mo-do Hosted, pulsamos Refresh. Introducimos caracteres extranos en lacaja de texto y pulsamos Add, la Figura 18 recoge el resultado de estaoperacion.

3.3.5. Implementando codigo en el lado del Cliente

Hasta ahora hemos construıdo la interfaz utilizando widgets y paneles deGWT, hemos registrado ciertos eventos asociados a dichos widgets y hemosimplementado una validaciın de texto introducido por el usuario en respues-ta a un evento. Sin embargo, aun tenemos que implementar las siguientesfuncionalidades del lado cliente:

Comprobar que el texto introducido no se corresponde con una tareaintroducida previamente.

Anadir una fila mas a la tabla de lista las tareas

Anadir un nuevo boton Delete

En el proximo apartado anadiremos llamadas al servidor para recuperar lastareas.

28

Figura 18: Introduciendo texto incorrecto en TarefasGWT

Anadiendo y eliminando tareas de la lista

Para listar las tareas hemos empleado un widget especial llamadoFlexTable, que permite aumentar celdas de de manera dinamica sin necesi-dad de definir previamente el tamano de la tabla. Ası, pues para implementaresta funcionalidad seguiremos los siguientes pasos:

1. Crear una estructura de datos para almacenar la lista de tar-eas. Para ello utilizaremos la clase ArrayList de Java y le llamaremostareas.

2. Anadir una tarea a la lista de tareas. Despues de que el usuariohaya introducido el nombre de una tarea y halla pulsado Enter ohecho click en Add, es necesario comprobar que el nombre de la tareano existe en la lista y si no existe, anadirlo a la tabla, incluyendo sufecha de creacion que recuperaremos utilizando la clase Date de Java.Para ello, en el metodo addTarea() anadimos el codigo de la Figura20.

3. Anadir el boton Delete para borrar una tarea de lista detareas. Un usuario puede eliminar tareas de la lista de tareas, para

29

Figura 19: ArrayList para almacenar la lista de tareas

Figura 20: Anadir una tarea a la lista

ello anadiremos un boton Delete en un celda de nuestra FlexTablellamando al metodo setWidget(). Ademas es necesario registrar unevento, el de pulsar el boton Delete, para ello utilizaremos nuevamentela interfaz ClickHandler, y por ultimo eliminaremos la tarea de lalista. En la Figura 21 esta el codigo a anadir al metodo addTarea().

Figura 21: Borrado de tarea de la lista de tareas

4. Comprobando lo desarrollado hasta el momento. Para ello,puesto que todavıa conservamos la ejecucion de TarefasGWT en Modo

30

Hosted, pulsamos Refresh. Introducimos una nueva tarea y pulsamosAdd, la Figura 22 recoge el resultado de esta operacion.

Figura 22: Resultado de anadir tareas

3.3.6. Desarrollando codigo en el lado del Servidor

En este apartado, implementaremos un procedimiento GWT remoto pararealizar una peticion al servidor que nos devuelva la lista de tareas.

RPC: Invocacion remota de metodos en GWT

Como todas las aplicaciones cliente/servidor, los programas en GoogleWeb Toolkit necesitaran pedir ciertos datos al servidor para realizar deter-minadas tareas. El mecanismo para interactuar con el servidor a traves dela red es llamado RPC (Remote Procedure Call). El RPC en Google WebToolkit permite facilmente al cliente enviar y recibir objetos de Java sobreHTTP.

31

El codigo del lado del servidor que es invocado desde el cliente es fre-cuentemente llamado servicio, por lo que el llamar a procedimientos remotoses comunmente llamado como invocacion de servicios. Aunque es necesariotener claro que el termino servicio en este contexto NO no es el mismo queweb-service. En realidad, los servicios Google Web Toolkit no son lo mis-mo que SOAP (Simple Object Access Protocol) o REST (REpresentationalState Transfer).

En la Figura 23 podemos ver los tres elementos clave para entender lainvocacion remota de metodos:

El servicio que corre en el servidor

El codigo cliente que invoca al servicio

Los objetos java que se intercambian entre cliente y servidor. Tantoel cliente como el servidor, pueden serializar y de-serializar los objetostransmitidos.

Figura 23: Anatomıa de servicios en RPC de GWT

1. Definiendo la clase para intercambio de datos entre clientey servidor. Para ello vamos a crear una clase llamada Tarea quedebe ser serializable, para que pueda ser utilizada como contenedorade datos en la invocacion remota de procedimientos. Para ello en el

32

paquete org.mswl.tarefasgwt.client definimos una clase como lade la Figura 24.

Figura 24: Objeto Tarea serializado para el intercambio de datos entrecliente y servidor

2. Creando el servicio En GWT, un servicio se define mediante unainterfaz que extendiende a la interfaz RemoteService de GWT. Paraello, en el paquete org.mswl.tarefasgwt.client definiremos nuestrainterfaz GetTareasService que definira un unico metodo getTareas().La Figura 25 recoge la definicion de nuestro servicio. En la Figura 25

Figura 25: Intefaz que define el servicio RPC

la anotacion RemoteServiceRelativePath(‘‘getTareas’’) se uti-liza para indicar el path relativo a la hora de invocar el servicio. Loentederemos mejor mas adelante.

33

3. Implementando el servicio. Ahora vamos a implementar el servi-cio que se ejecutara en el servidor. Se trata de recuerar una lista detareas, que el navegador debera cargar en cuanto un usuario haga unapeticion. Se podrıan recuperar las tareas de una base de datos alma-cenada en el mismo servidor u otro, o bien, recuperarlas de fichero.En nuestro caso, recurriremos a crear en memoria varias tareas y lasalmacenaremos en un array.Para ello, crearemos en org.mswl.tarefasgwt.server una clase lla-mada GetTareasServiceImpl que extendera a la clase RemoteServiceServletde GWT e implementara la interfaz que hemos definido previamente.La Figura 26 recoge la implementacion de dicha clase.

Figura 26: Clase que implementa el servicio y que se ejecutara en el servidor

Es importante resaltar, que el compilador de GWT no traducira estecodigo a HTML ni a Javascript.

4. Incluyendo el codigo del servidor en el modulo de GWT. Eneste punto tenemos que indicarle a nuestro Contenedor de Servlets1

donde esta la implementacion del servicio. Para ello hay que asegu-rarse que el codigo del cliente esta configurado para invocar el serviciousando la URL para la cual nuestro servlet es mapeado en la configu-racion de web.xml.Para ello tenemos que incluir los elementos <serlvet> y <servlet-maping>al web.xml de nuestra aplicacion, tal y como esta en la Figura 27En la Figura 27 donde podemos entender mejor la la anotacion

1Contendor de Servlets. El contenedor es parte del Servidor Web o del Servidor deAplicaciones y se encarga realizar todo el trabajo de las conexiones. Ejemplo: Tomcat...,la Google App Engine nos proporcina el suyo propio para ejecturar la aplicacion en ModoHosted y se llama Jetty

34

Figura 27: web.xml donde se especifica el servicio, quien lo implementa ycomo se invoca

RemoteServiceRelativePath(‘‘getTareas’’) de la Figura 25. ElURL de invocacion del servicio es /tarefasgwt/getTareas/, ya quetarefasgwt es el nombre que le hemos dado a nuestro modulo en TarefasGWT.gwt.xmly, getTareas porque es el path relativo que indicamos cuando definimosel servicio.

5. Invocando el servicio en el cliente. Para ello primero, tenemos quedefinir una llamada asıncrona al servidor y despues realizar la llamadaal metodo remoto.

a) Definir llamadas asıncronas al servidor. Para poder realizaruna invocacion a un metodo remoto es necesario pasarle un ob-jeto de la clase GWT AsyncCallback. Para ello es necesariodefinir una nueva interfaz que tendra el mismo nombre que nues-tra GetTareasService pero terminada en Async.

En esta interfaz definiremos el mismo metodo getTareas(),pero en este caso le tenemos que pasar un objeto de la clase GWTAsyncCallback que sera notificado cuando la llamada asıncronaeste completada, y una vez completada, el resultado es devuelto a

35

traves del mismo objeto. Ası pues, en el paquete org.mswl.tarefasgwt.clientdefinimos una nueva interfaz tal y como definimos en la Figura28

Figura 28: Interfaz que define el metodo Asıncrono

6. Haciendo la llamada al metodo remoto. El proceso de realizarun RPC desde un cliente involucra siempre los mismos pasos:

a) Instanciar la interfaz de servicio usando GWT.create(). Para el-lo en TarefasGWT.java anadimos un nuevo atributo tal y comoaparece en la Figura 29.

Figura 29: Instanciar el proxy del cliente

b) Crear un objeto callback asıncrono para ser notificado cuando elRPC se haya completado. El objeto callback tendra dos metodos,que se llamaran en funcion de si la llamada al procedimiento seha completado o no. Esto se traduce en el codigo de la Figura 30.

c) Realizar la invocacion al metodo. Sobre el proxy invocamos almetodo remoto pasandole el objeto callback, lo podemos ver enla Figura 31.

7. Recodificando TarefasGWT para adaptarla a la invocacionremota. En este punto haremos dos cambios:

36

Figura 30: Objeto Callback

Figura 31: Llamada al metodo remoto

Cambiamos el atributo tareas, para convertirlo un ArrayListde objetos Tarea, para que almacene los datos que devuelve elservidor en la invocacion remota (Figura 32).

Figura 32: ArrayList de Tareas

Implementamos un nuevo metodo updateTable() que pintara lainterfaz con las tareas devueltas en la invocacion remota. Para el-

37

lo, copiamos todo el codigo restante del metodo onModuleLoad()a updateTable() e introducimos el codigo de la Figura 33.

Figura 33: Introduciendo la lista de tareas enviada por el servidor en la tabla

8. Comprobando lo desarrollado hasta el momento. Para ello,puesto que todavıa conservamos la ejecucion de TarefasGWT en ModoHosted, pulsamos Refresh. Veremos como autoaticamente se cargan lalista de tareas que devuelve el servidor (34).

3.3.7. Compilando una aplicacion GWT

En este punto, tenemos desarrollado nuestro TarefasGWT pero hastaahora lo habıamos ejecutado en Modo Hosted, y ahora toca ejecutarlo enModo Web, es decir, donde la aplicacion corre como HTML + Javascriptsobre un navegador, traducido desde nuestro codigo fuente Java original conel compilador de GWT.

1. Compilar nuestra aplicacion. Para ello utilizaremos la utilidad que nosofrece el plugin GWT de Eclipse GWT Compile Project (Figura 35).

El compilador GWT genera una serie de ficheros que almacena en/workspace/TarefasGWT/war/tarefasgwt/, el nombre de muchos deellos continen un GUIDs que almacena el codigo Javascript generadopor el Compilador GWT.

2. Ejecutamos la aplicacion en Modo Web. Para ello abrimos nuestronavegador e introducimos la url http://localhost:8080/TarefasGWT.html.

38

Figura 34: Lista de tareas recuperadas por RPC

Figura 35: Icono GWT Compiler Project

3. Desplegando la aplicacion en un servidor web. Basta con copiar to-dos los archivos bajo el directorio /workspace/TarefasGWT/war/ alservidor.

3.4. Comunidad GWT

En este apartado analizaremos el grado de actividad del sistema controlde versiones utilizado por la comunidad de desarrolladores que esta detrasde GWT. Para ello utilizaremos la herramienta, CVSAnaly, que se aloja enla forja Morfeo, del grupo GsyC/LibreSoft, que analiza los log del sistemacontrol de versiones (CVS, Subversion o Git) y estructura los datos en una

39

base de datos de tipo MySQL. En particular, GWT utiliza Subversion.

Num. Committers 38Num. Commits 3085

Cuadro 16: Datos generales Subversion de GWT.

Committer Num. commitsscottb@google.com 566gwt.team.scottb 443jlabanca@google.com 199... ...adamw 86fabbott@google.com 74... ...

Cuadro 17: Principales committers.

Como podemos comprobar todos los comitters de GWT son desarrolladoresde Google.

Figura 36: Numero de commits por committer

40

En la Figura 36 podemos observar que hay un grupo pequeno de desar-rolladores que hace un gran numero de aportaciones, y despues hay muchosdesarrolladores que hacen pocas contribuciones. Aunque no hay una diferen-cia muy grande entre un grupo u otro, podemos deducir que GWT se acercaal Modelo de Cebolla2 que siguen muchos proyectos de Software Libre.

El Coeficiente Gini, coeficiente que mide la desigualdad en cuanto ala contribucion de los distintos colaborades del proyecto, es de 0.6185021y esta por debajo de la media de la mayorıa de los proyectos de softwarelibre que gira entorno a los 0.7. Lo cual significa que en el caso de GWT, lacontribucion de los distintos committers es mas equitativa que la mayorıade los proyectos de software libre.

En la Figura 37 podemos observar el numero de commits ha sufrido variosaltos y bajos, despues del punto mas alto de aportaciones que coincide conel lanzamiento de la version 1.5, aparece un perıodo durante ultimo semestrede 2008 con un numero de aportaciones muy bajo. Por otro lado, en esteano 2009 el numero de commits se ha incrementado considerablemente, quemuchos vinculan con la presentacion de Google Wave 3 .

2Modelo de Cebolla. Define una estructura en capas, donde existe un nucleo departicipantes que tienen una implicacion con el proyecto verdaderamente elevada, si lamedimos en terminos de actividad que desarrollan (cantidad de cambios en el codigo,numero de mensajes enviados a listas de correo, bugs reportados y arreglados, etc). Ydespues se definen otras capas con grupos donde el numero de desarrolladores y su gradode implicacion crecen de manera inversa, esto, a mas desarrolladores por capa, menosaportaciones por committer

3Nuevo producto de Google que integra todas las herramientas de Google: gmail, googledocs, gtalk, ...

41

Figura 37: Evolucion del numero de commits en el tiempo

Referencias

[1] Macromedia Flash MX-A next-generation rich client, Jeremy Allaire,March 2002.

[2] RIA Tecnlogies overview, Javier Moran (Igalia)

[3] Exploring Ajax Runtime Offerings, Gary Horen 2006,http://www.oracle.com/technology/pub/articles/dev2arch/2006/11/exploring-ajax.html

[4] Adobe Flex, http://www.adobe.com/es/products/flex/

[5] JavaFX, http://javafx.com/

[6] OpenLaszlo, http://www.openlaszlo.org/

[7] Moonlight, http://mono-project.com/Moonlight

[8] JQuery, http://jquery.com/

[9] Prototype, http://www.prototypejs.org/

[10] ExtJS, http://www.extjs.com/

[11] GWT Google Web Toolkit, http://code.google.com/intl/gl/webtoolkit/

42

[12] Getting Started GWT, http://code.google.com/intl/gl/webtoolkit/gettingstarted.html

[13] YUI (Yahoo User Interface) http://developer.yahoo.com/yui/

[14] Dojo, http://www.dojotoolkit.org/

[15] JSF, http://java.sun.com/javaee/javaserverfaces/

[16] IceFaces, http://www.icefaces.org/

[17] RichFaces, http://www.jboss.org/richface

[18] Capuccino, http://cappuccino.org

43