Taller Ria

Slide 1: Taller de RIA Introducci´n al cursillo o Unai Aguilera (aka Kalgan) Introducci´n a las RIA o Mar´ Legorburu (aka Legorhead) ıa OpenLaszlo Google Web Toolkit Pablo Ordu˜a (aka NcTrun) n Referencias P´gina www a P´gina de Abertura a P´gina 1 de 92 a Regresar Full Screen This work is licensed under the Creative Commons Attribution-ShareAlike License. To view a copy of this Cerrar license, visit http://creativecommons.org/licenses/by-sa/2.0/ or send a letter to Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA Abandonar

Slide 2: 1. Introducci´n al cursillo o 1.1. De qu´ va este cursillo e • El cursillo est´ entre los Cursillos de Julio de los grupos de inter´s de la Universidad de Deusto a e Introducci´n al cursillo o Introducci´n a las RIA o – Cursillos de Julio: OpenLaszlo ∗ Desde hace varios a˜os, alumnos y alumnas de la Facultad de Ingenier´ de la Universidad n ıa Google Web Toolkit de Deusto organizan de manera voluntaria una serie de cursillos que abarcan diversas Referencias ´reas de conocimiento a ∗ Esta actividad es coordinada por la Delegaci´n de Alumnos o P´gina www a ∗ Cuenta con el apoyo de profesores y de la Facultad de Ingenier´ ıa-ESIDE, que anima e impulsa estas actividades facilitando el uso de aulas informatizadas y dem´s recursos para a P´gina de Abertura a que su realizaci´n sea lo mejor posible. o – Filosof´ de los cursillos ıa ∗ ¡Compartir conocimiento! ∗ Ayudar a dar los primeros pasos de una tecnolog´ lenguaje de programaci´n, etc ıa, o · En consecuencia: En un cursillo se abarcan la m´xima cantidad de temas en el m´ a ınimo tiempo posible. No es posible profundizar mucho en cada tema, pero s´ ver lo suficiente ı P´gina 2 de 92 a para que el/la alumno/a pueda seguir aprendiendo por su cuenta, una vez dados los primeros pasos. Regresar · Cursillos introductorios, no exhaustivos – M´s informaci´n sobre los Cursillos de Julio a o Full Screen • Este concretamente se da desde el grupo de software libre de la Universidad (el e-ghost). Cerrar Abandonar

Slide 3: 1.2. Objetivos • Pretende ser una introducci´n a RIA o • El cursillo se divide en tres m´dulos: o Introducci´n al cursillo o – Introducci´n a las Rich Internet Applications (Lunes) o Introducci´n a las RIA o – Desarrollando Rich Internet Applications con OpenLaszlo (Martes y Mi´rcoles) e OpenLaszlo Google Web Toolkit – Desarrollando Rich Internet Applications con Google Web Toolkit (Jueves y Viernes) Referencias 1.3. Requisitos P´gina www a • Depende del m´dulo: o P´gina de Abertura a – Primer m´dulo: o ∗ Nociones de programaci´n web (HTML, CSS, JavaScript, programaci´n de c´digo en o o o servidor en cualquier lenguaje -PHP, Java, .NET, Perl, Python...-). Hay un cursillo de XHTML y CSS la primera semana. – Segundo m´dulo: o ∗ Lo explicado en el primer compartimento P´gina 3 de 92 a ∗ Los requisitos del primer compartimento, con especial ´nfasis en JavaScript e ∗ XML Regresar ∗ Programaci´n Orientada a Objetos o – Tercer m´dulo: o Full Screen ∗ Lo explicado en el primer compartimento. Cerrar ∗ Los requisitos del primer compartimento. ∗ Lenguaje de programaci´n Java o Abandonar

Slide 4: 2. Introducci´n a las RIA o 2.1. Qu´ son las RIA e • RIA → Rich Internet Application Introducci´n al cursillo o Introducci´n a las RIA o • Aplicaciones Web en las que: OpenLaszlo – el navegador tiene l´gica de negocio (no es s´lo presentaci´n) o o o Google Web Toolkit Referencias – la aplicaci´n, cuando lo necesita, habla con el servidor o P´gina www a P´gina de Abertura a P´gina 4 de 92 a Regresar Full Screen Cerrar Abandonar

Slide 5: 2.1.1. Thin Clients Introducci´n al cursillo o Introducci´n a las RIA o OpenLaszlo Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 5 de 92 a • En las Aplicaciones Web tradicionales: Regresar – En los servidores estaban situadas todas las capas – El cliente (navegador) se limitaba a enviar peticiones al servidor y pintar lo que el servidor Full Screen respond´ıa Cerrar Abandonar

Slide 6: 2.1.2. Rich Clients Introducci´n al cursillo o Introducci´n a las RIA o OpenLaszlo Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 6 de 92 a • Con las Rich Internet Applications: – El servidor delega la capa de presentaci´n entera en el cliente o Regresar – El cliente estar´ compuesto por: a ∗ El navegador (Mozilla Firefox, Microsoft Internet Explorer, Konqueror, Opera, Safari. . . ) Full Screen ∗ En ocasiones necesitar´ tambi´n un plugin que ser´ quien ejecute realmente el Rich Client a e a (runtimes como Adobe Flash, Java, Silverlight. . . ) Cerrar ∗ Tambi´n puede que el navegador necesite otro plugin para poder acceder a ciertas fun- e cionalidades de la aplicaci´n (Google Gears) o Abandonar

Slide 7: – Una vez el cliente est´ cargado, el servidor puede pasar a comunicar al cliente informaci´n de a o la la l´gica de la aplicaci´n (no de presentaci´n) o o o • Cada d´ las RIAs tienen m´s capacidades y encontramos RIAs m´s y m´s avanzadas ıa a a a Introducci´n al cursillo o – Visualizaci´n de mapas con Google Maps o Yahoo! Maps o Mapas de Live Search o Introducci´n a las RIA o – Gesti´n de feeds con Google Reader o OpenLaszlo – Gesti´n de correo electr´nico con Gmail o o Google Web Toolkit Referencias – Edici´n de documentos con Google Docs o – Buscando empleo con la versi´n beta de Monster.com o P´gina www a P´gina de Abertura a P´gina 7 de 92 a Regresar Full Screen Cerrar Abandonar

Slide 8: 2.1.3. Beneficios de las RIA • Interfaz m´s rica. Permite la creaci´n de aplicaciones web (visitadas a trav´s del navegador) mucho a o e m´s ricas haciendo m´s facil la interacci´n por parte de los usuarios. a a o Introducci´n al cursillo o • Una mayor respuesta ante la interacci´n con el usuario. o Introducci´n a las RIA o • Comunicaci´n as´ o ıncrona. Al contrario que en las aplicaciones web tradicionales la comunicaci´n o OpenLaszlo as´ ıncrona permite que la interfaz del usuario no se bloquee al realizar determinadas peticiones. Google Web Toolkit Referencias • Liberaci´n de recursos en el servidor debido a que parte de la carga de trabajo se desplazada hacia o el usuario. P´gina www a • Se reduce el tr´fico de red. Como la mayor parte del proceso se realiza en el cliente no es necesario a pasar tantos mensajes al servidor. P´gina de Abertura a P´gina 8 de 92 a Regresar Full Screen Cerrar Abandonar

Slide 9: 2.1.4. Problemas de las tecnolog´ RIA ıas • Las aplicaciones RIA se ejecutan dentro de sandboxes por lo que no es posible acceder a toda la funcionalidad de la m´quina. Se hace necesario conocer las limitaciones y configuraci´n necesaria a o en el dispositivo cliente. Introducci´n al cursillo o Introducci´n a las RIA o • Dependencia de una plugin o tecnolog´ extra que el usuario debe instalar para poder acceder a la ıa OpenLaszlo aplicaci´n. o Google Web Toolkit • La aplicaci´n RIA (script, Flash, Java, etc) debe ser descargado a la m´quina cliente. Aumenta el o a Referencias tiempo necesario para la ejecuci´n inicial de la aplicaci´n. o o P´gina www a • Poca visibilidad para los motores de b´squeda que no pueden navegar por estas aplicaciones. u • Poca accesibilidad. Las aplicaciones RIA son dif´ ıciles de procesar autom´ticamente por programas a P´gina de Abertura a que deban ser usados por personas con problemas de accesibilidad a las aplicaciones. P´gina 9 de 92 a Regresar Full Screen Cerrar Abandonar

Slide 10: 2.2. Tecnolog´ base de las RIA ıas • Todas estas aplicaciones necesitar´n un runtime u otro que ejecute la aplicaci´n a o • La elecci´n de la tecnolog´ limitar´ aspectos importantes de la aplicaci´n o ıa a o Introducci´n al cursillo o – Portabilidad: en qu´ entornos funcionar´ nuestra aplicaci´n? e a o Introducci´n a las RIA o OpenLaszlo – Potencia: qu´ limitaciones impone la tecnolog´ sobre la aplicaci´n? e ıa o Google Web Toolkit – Despliegue: necesita la aplicaci´n que haya un plugin instalado? Podemos dar por hecho que o Referencias ese plugin est´ instalado? D´nde? a o – Estandarizaci´n. . . o P´gina www a P´gina de Abertura a P´gina 10 de 92 a Regresar Full Screen Cerrar Abandonar

Slide 11: 2.2.1. Applets de Java • Java naci´ en 1995 o • Trajo consigo los Applets de Java, que: Introducci´n al cursillo o – Son programas desarrollados en Java que est´n embebidos en el navegador a Introducci´n a las RIA o OpenLaszlo – Est´n soportados en la mayor´ de navegadores a ıa Google Web Toolkit – Dado que la m´quina virtual de Java est´ disponible bajo diferentes plataformas, podremos a a Referencias ejecutar el applet bajo diferentes plataformas – Por motivos de seguridad, se ejecutan en una sandbox P´gina www a ∗ El applet, por defecto, tendr´ una serie de restricciones: a · No podr´ acceder a disco a P´gina de Abertura a · No podr´ establecer conexiones a otros servidores que aquel del que ha sido descargado a · No podr´n ejecutar otros programas a · No podr´n ejecutar c´digo nativo a o · ... – Ejemplo: codigo/introduccion/java applets/01/ P´gina 11 de 92 a Regresar Full Screen Cerrar Abandonar

Slide 12: 2.2.1.1. Ventajas y desventajas • Como vemos, es una aplicaci´n Java pura: o – Necesita todo el JRE (Java Runtime Environment) para ser ejecutado. Lo cual puede tener Introducci´n al cursillo o inconvenientes: Introducci´n a las RIA o ∗ Tiene que estar instalado (que hoy en d´ no podemos dar por hecho que est´, y son unos ıa e OpenLaszlo 15 MB) Google Web Toolkit ∗ Tiene que cargar toda la JVM para ejecutar la aplicaci´n (deber´ merecer la pena) o ıa Referencias ∗ La sandbox puede suponer problemas si queremos realizar tareas como enviar un fichero que el usuario elija al servidor P´gina www a ∗ Puede tener problemas con versiones (si compilamos con nuestro compilador de Java 1.6 por defecto no le funcionar´ a alguien que tenga Java 1.5 o Java 1.4 instalado) a P´gina de Abertura a ∗ Dif´ ıcilmente va a poder ser ejecutada en plataformas m´viles, etc. o ∗ No se integra con el dise˜o de la p´gina n a – Sin embargo, tambi´n cuenta con una serie de ventajas: e ∗ Tenemos acceso a toda la API de Java · Aplicaci´n Swing o P´gina 12 de 92 a · Podemos incluso trabajar con sockets contra el servidor ∗ Podemos hacer que funcione igual en diferentes plataformas (windows, linux, mac os x. . . ) Regresar ∗ Velocidad en tiempo de ejecuci´n comparado con JavaScript o Full Screen Cerrar Abandonar

Slide 13: 2.2.1.2. Salt´ndonos la sandbox a • En caso de necesitarlo, podemos saltarnos la sandbox con permiso del usuario – Firmaremos el applet con jarsigner (ver compilar.sh en codigo/introduccion/java applets/02/) Introducci´n al cursillo o – Al usuario se le mostrar´ un di´logo preguntando a ver si quiere ejecutar el applet fuera de la a a Introducci´n a las RIA o sandbox OpenLaszlo – Si el usuario acepta, las restricciones de la sandbox no ser´n aplicadas: a Google Web Toolkit Referencias ∗ El applet pasa a ejecutarse como una aplicaci´n normal, salvo porque est´ embebida en o a el navegador P´gina www a ∗ Implicaciones de seguridad P´gina de Abertura a P´gina 13 de 92 a Regresar Full Screen Cerrar Abandonar

Slide 14: 2.2.1.3. Hoy en d´ ıa • Hoy en d´ est´ en general superada por el resto de tecnolog´ que vamos a explicar ıa, a ıas – Sin embargo, sigue teniendo su peque˜o nicho en aplicaciones concretas que: n Introducci´n al cursillo o ∗ Necesiten acceder a disco o saltarse la sandbox Introducci´n a las RIA o · Gallery 2, por ejemplo, tiene, entre los diferentes modos para subir im´genes al servi- a OpenLaszlo dor, un applet de Java que se salta la sandbox que permite f´cilmente acceder a disco, a Google Web Toolkit seleccionar todas las fotos, y que el applet las vaya subiendo poco a poco Referencias ∗ Necesiten por alguna raz´n Java (librer´ dif´ o ıas ıcilmente reimplementables) · Ejemplo P´gina www a P´gina de Abertura a P´gina 14 de 92 a Regresar Full Screen Cerrar Abandonar

Slide 15: 2.2.2. Adobe Flash • Es una herramienta creada por Macromedia (despu´s adquirida por Adobe) en 1996 que permit´ e ıa la inclusi´n de animaciones vectoriales, sonido e interacci´n con el usuario dentro de una p´gina o o a web. Introducci´n al cursillo o Introducci´n a las RIA o • Inicialmente fue utilizada solamente para la realizaci´n de animaciones puntuales dentro de la p´gina. o a OpenLaszlo • Sin embargo, en la actualidad, se ha convertido en una herramienta muy potente para la realizaci´n o Google Web Toolkit de interfaces de usuario muy completas. Referencias • Las herramientas de autor creadas por Adobe, as´ como sus visualizadores tienen una licencia ı P´gina www a propietaria. • Han existido varios proyectos para la creaci´n de herramientas libres, sin embargo, suelen estar o P´gina de Abertura a retrasados con respecto a la versi´n comercializada por Adobe, lo que suele producir ciertas incom- o patibilidades y fallos. • Para la visualizaci´n de las pel´ o ıculas Flash el usuario necesita tener instalado un plugin en su navegador. • Existe una implementaci´n libre de este plugin llamada Gnash que actualmente es compatible con o P´gina 15 de 92 a la versi´n de Flash 7, siendo incompatible con la versi´n utilizada en la actualidad que es Flash 9. o o • Existe hasta una versi´n limitada de Adobe Flash para dispositivos m´viles Flash Lite o o Regresar Full Screen Cerrar Abandonar

Slide 16: 2.2.2.1. Desarrollo de RIAs en Flash • Adobe Flash proporciona un conjunto de librer´ de controles tanto gr´ficos como de acceso a ıas a datos para la construcci´n de interfaces de usuario. o Introducci´n al cursillo o • Entre los controles de acceso a datos se encuentran los siguientes: Introducci´n a las RIA o – Conexi´n a base de datos remota. Permite extraer registros de bases de datos y enlazarlos o OpenLaszlo directamente con controles visuales de la interfaz, con lo que el desarrollo de aplicaciones es Google Web Toolkit muy sencillo. Referencias – Conexi´n a servicios webs. o P´gina www a • Para la programaci´n de la l´gica de la aplicaci´n se utiliza Action Script (actualmente la versi´n o o o o 3.0) que es una estandarizaci´n de la versi´n anterior del lenguaje y que tiene muchas similitudes o o P´gina de Abertura a con Java y Javascript. P´gina 16 de 92 a Regresar Full Screen Cerrar Abandonar

Slide 17: 2.2.2.2. Problemas de Flash • Poca accesibilidad. La mayor´ de las aplicaciones realizadas en Flash no tiene en cuenta el problema ıa de la accesibilidad, aunque desde la versi´n 6 de Flash existen extensiones para ello los desarrolladores o no suelen tenerlo en cuenta. Introducci´n al cursillo o Introducci´n a las RIA o • Dependencia de un plugin para su funcionamiento. OpenLaszlo • Plataforma del plugin. El plugin de Flash no est´ portado a todas las plataformas existentes, o si a Google Web Toolkit lo est´ en algunos casos no funciona correctamente. Por ejemplo, no existe una versi´n del plugin a o Referencias de 64 bits para Linux. P´gina www a P´gina de Abertura a P´gina 17 de 92 a Regresar Full Screen Cerrar Abandonar

Slide 18: 2.2.3. AJAX 2.2.3.1. DHTML • Dynamic HTML es un t´rmino que agrupa un conjunto de tecnolog´ utilizadas para dinamizar la e ıas Introducci´n al cursillo o web Introducci´n a las RIA o – HTML, XHTML, CSS, DOM, JavaScript. . . OpenLaszlo Google Web Toolkit – Todas estas tecnolog´ son est´ndares definidos por la W3C u otras organizaciones ıas a Referencias – Son implementadas por cada navegador ∗ No es necesario un plug-in para que funcionen P´gina www a ∗ Cada navegador proveyendo capacidades extra a las ofrecidas por el est´ndar han hecho a que un mismo c´digo est´ndar se comporte de diferentes maneras en cada navegador o a P´gina de Abertura a – Limitaciones: ∗ Incapaces de interactuar con el servidor de una manera directa y sencilla ∗ Dificultad en hacer c´digo que funcione bien en todos los navegadores o · M´s f´cil trabajar con librer´ que te abstraen de las cuestiones dependientes del aa ıas navegador · Ejemplo: OpenRico P´gina 18 de 92 a · Problema: puede que estas librer´ no sean realmente tan portables ıas Regresar Full Screen Cerrar Abandonar

Slide 19: 2.2.3.2. AJAX • Diferentes proveedores ofrec´ formas de acceder desde DHTML al servidor m´s o menos mane- ıan a jables Introducci´n al cursillo o – Con el tiempo los diferentes proveedores fueron implementando el objeto XMLHttpRequest Introducci´n a las RIA o implementado por Microsoft en su navegador OpenLaszlo – Empezaron a surgir aplicaciones como Google Maps, Orkut, o Google Suggest, que hac´ ıan Google Web Toolkit uso extensivo de estas formas Referencias • En Febrero de 2005, Jesse James Garrett acu˜´ el t´rmino AJAX en un popular art´ no e ıculo P´gina www a – AJAX → Asynchronous JavaScript And XML – En el art´ ıculo explica las ventajas que ofrece AJAX frente a modelo web cl´sico a P´gina de Abertura a P´gina 19 de 92 a Regresar Full Screen Cerrar Abandonar

Slide 20: Introducci´n al cursillo o Introducci´n a las RIA o OpenLaszlo Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 20 de 92 a Regresar Full Screen Cerrar Copyright Adaptive Path Abandonar

Slide 21: Introducci´n al cursillo o Introducci´n a las RIA o OpenLaszlo Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 21 de 92 a Regresar Full Screen Cerrar Copyright Adaptive Path Abandonar

Slide 22: 2.2.3.3. Cacharreando con AJAX Hola mundo • ¡Ya es posible interactuar con el servidor de una manera c´moda que en la mayor´ de navegadores o ıa Introducci´n al cursillo o funcione! Introducci´n a las RIA o OpenLaszlo • La clave es el objeto XMLHttpRequest (working draft) Google Web Toolkit codigo/introduccion/ajax/01/creando.html Referencias P´gina www a P´gina de Abertura a P´gina 22 de 92 a Regresar Full Screen Cerrar Abandonar

Slide 23: function getXMLHttpObject(){ 1 var xmlhttp = false; 2 /*@cc_on 3 @if (@_jscript_version >= 5) 4 Introducci´n al cursillo o try{ 5 Introducci´n a las RIA o xmlhttp = new ActiveXObject(\"Msxml2.XMLHTTP\"); 6 OpenLaszlo }catch(e){ 7 Google Web Toolkit try{ 8 Referencias xmlhttp = new ActiveXObject(\"Microsoft.XMLHTTP\"); 9 }catch(E){ 10 xmlhttp = false; P´gina www a 11 } 12 } 13 P´gina de Abertura a @else 14 xmlhttp = false; 15 @end @*/ 16 if(!xmlhttp && typeof XMLHttpRequest != ’undefined’){ 17 try{ 18 xmlhttp = new XMLHttpRequest(); 19 }catch(e){ 20 xmlhttp = false; P´gina 23 de 92 a 21 } 22 } 23 Regresar return xmlhttp; 24 } 25 Full Screen • Incluso para crear un objeto XMLHttpRequest necesitamos hacer comprob