Taller de RIA

                              Unai Aguilera (aka Kalgan)                                                  I...
1.      Introducci´n al cursillo
                  o
1.1.     De qu´ va este cursillo
              e
     • El cursillo e...
1.2.   Objetivos
  • Pretende ser una introducci´n a RIA
                               o

  • El cursillo se divide en tr...
2.      Introducci´n a las RIA
                  o
2.1.     Qu´ son las RIA
           e
     • RIA → Rich Internet Applic...
2.1.1.   Thin Clients



                                                                                                 ...
2.1.2.   Rich Clients



                                                                                                 ...
∗ Tambi´n puede que el navegador necesite otro plugin para poder acceder a ciertas fun-
                 e
          ciona...
2.1.3.   Beneficios de las RIA
   • Interfaz m´s rica. Permite la creaci´n de aplicaciones web (visitadas a trav´s del nave...
2.1.4.   Problemas de las tecnolog´ RIA
                                  ıas
   • Las aplicaciones RIA se ejecutan dentro...
2.2.   Tecnolog´ base de las RIA
               ıas
  • Todas estas aplicaciones necesitar´n un runtime u otro que ejecute...
2.2.1.   Applets de Java
   • Java naci´ en 1995
              o

   • Trajo consigo los Applets de Java, que:
           ...
2.2.1.1.     Ventajas y desventajas

   • Como vemos, es una aplicaci´n Java pura:
                                o

    ...
2.2.1.2.     Salt´ndonos la sandbox
                 a

   • En caso de necesitarlo, podemos saltarnos la sandbox con perm...
2.2.1.3.     Hoy en d´
                     ıa

   • Hoy en d´ est´ en general superada por el resto de tecnolog´ que vamo...
2.2.2.   Adobe Flash
   • Es una herramienta creada por Macromedia (despu´s adquirida por Adobe) en 1996 que permit´
     ...
2.2.2.1.     Desarrollo de RIAs en Flash

   • Adobe Flash proporciona un conjunto de librer´ de controles tanto gr´ficos c...
2.2.2.2.   Problemas de Flash

   • Poca accesibilidad. La mayor´ de las aplicaciones realizadas en Flash no tiene en cuen...
2.2.3.     AJAX
2.2.3.1.     DHTML

   • Dynamic HTML es un t´rmino que agrupa un conjunto de tecnolog´ utilizadas para di...
2.2.3.2.     AJAX

   • Diferentes proveedores ofrec´ formas de acceder desde DHTML al servidor m´s o menos mane-
        ...
Introducci´n al cursillo
                                    o
                          Introducci´n a las RIA
          ...
Introducci´n al cursillo
                                    o
                          Introducci´n a las RIA
          ...
2.2.3.3.   Cacharreando con AJAX

   Hola mundo

   • ¡Ya es posible interactuar con el servidor de una manera c´moda que ...
1   function getXMLHttpObject(){
 2       var xmlhttp = false;
 3       /*@cc_on
 4       @if (@_jscript_version >= 5)
 5 ...
1   interface XMLHttpRequest {
 2     // event handler
 3         attribute EventListener onreadystatechange;
 4

 5    //...
31     readonly attribute unsigned short status;
32     readonly attribute DOMString statusText;
33   };


        • La fo...
7           xmlhttp.onreadystatechange = function(){
 8               if (xmlhttp.readyState == 4 && xmlhttp.status == 200...
∗ Bien utilizando responseText (invocando sumador.php?num1=5&num2=6)
   ∗ Bien utilizando responseXML (invocando sumador.p...
2.2.3.4.     Ventajas y desventajas de AJAX

   • Ventajas

           – Existen muchos y diferentes navegadores para dife...
2.2.3.5.     Google Gears

   • Google tambi´n ha publicado herramientas como Google Gears
                 e

   • Google...
2.2.4.   Otras tecnolog´
                       ıas
   • Nuevas tecnolog´ de RIAs est´n apareciendo en el mercado
        ...
2.2.5.   Comparativa de las tecnolog´
                                    ıas
   • ¿Qu´ tecnolog´ es mejor?
        e     ...
∗ Google Maps est´ desarrollado en AJAX
                    a
    · Hace pocas semanas Google estren´ Google Street View
 ...
2.2.5.1.   Integrando Java con JavaScript

   • Para llamar a JavaScript desde Java utilizaremos:
   1   getAppletContext(...
2.2.5.2.   Integrando Adobe Flash con JavaScript

   • Para llamar a JavaScript desde Flash utilizaremos:
   1   import fl...
2.3.   Tecnolog´ que generan RIA
               ıas
  • Existen ya tecnolog´ que generan RIA
                       ıas

 ...
• OpenLaszlo

    – Genera Flash, DHTML, Ajax
    – Open Source
                                                          ...
• GWT

   – Abstracci´n al programador de AJAX, JavaScript y HTML
              o
   – Programaci´n en Java 6
            ...
3.      Google Web Toolkit
3.1.     Introducci´n
                   o
     • GWT → Google Web Toolkit                     ...
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Taller Ria
Upcoming SlideShare
Loading in …5
×

Taller Ria

2,250
-1

Published on

Transparencias utilizadas en los Cursillos de Julio de la Universidad de Deusto:

http://www.e-ghost.deusto.es/cursillosjulio/

En Julio de 2009 para el taller de RIAs con Google Web Toolkit.

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,250
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
49
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Taller Ria

  1. 1. Taller de RIA Unai Aguilera (aka Kalgan) Introducci´n al cursillo o Introducci´n a las RIA o Pablo Ordu˜a (aka NcTrun) n Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 1 de 80 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
  2. 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 – Cursillos de Julio: Introducci´n a las RIA o Google Web Toolkit ∗ Desde hace varios a˜os, alumnos y alumnas de la Facultad de Ingenier´ de la Universidad n ıa Referencias de Deusto organizan de manera voluntaria una serie de cursillos que abarcan diversas ´reas de conocimiento a P´gina www a ∗ Esta actividad es coordinada por la Delegaci´n de Alumnos o ∗ Cuenta con el apoyo de profesores y de la Facultad de Ingenier´ ıa-ESIDE, que anima e P´gina de Abertura a impulsa estas actividades facilitando el uso de aulas informatizadas y dem´s recursos para 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 P´gina 2 de 80 a tiempo posible. No es posible profundizar mucho en cada tema, pero s´ ver lo suficiente ı para que el/la alumno/a pueda seguir aprendiendo por su cuenta, una vez dados los primeros pasos. Regresar · Cursillos introductorios, no exhaustivos Full Screen – M´s informaci´n sobre los Cursillos de Julio a o • Este concretamente se da desde el grupo de software libre de la Universidad (el e-ghost). Cerrar Abandonar
  3. 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 Google Web Toolkit (Martes y Mi´rcoles) e Google Web Toolkit Referencias 1.3. Requisitos P´gina www a • Depende del m´dulo: o – Primer m´dulo: o P´gina de Abertura a ∗ 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...-). – Segundo m´dulo: o ∗ Lo explicado en el primer compartimento. ∗ Los requisitos del primer compartimento. P´gina 3 de 80 a ∗ Lenguaje de programaci´n Java o Regresar Full Screen Cerrar Abandonar
  4. 4. 2. Introducci´n a las RIA o 2.1. Qu´ son las RIA e • RIA → Rich Internet Application Introducci´n al cursillo o • Aplicaciones Web en las que: Introducci´n a las RIA o Google Web Toolkit – el navegador tiene l´gica de negocio (no es s´lo presentaci´n) o o o 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 80 a Regresar Full Screen Cerrar Abandonar
  5. 5. 2.1.1. Thin Clients Introducci´n al cursillo o Introducci´n a las RIA o Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 5 de 80 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
  6. 6. 2.1.2. Rich Clients Introducci´n al cursillo o Introducci´n a las RIA o Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 6 de 80 a • Con las Rich Internet Applications: Regresar – El servidor delega la capa de presentaci´n entera en el cliente o – El cliente estar´ compuesto por: a Full Screen ∗ El navegador (Mozilla Firefox, Microsoft Internet Explorer, Konqueror, Opera, Safari, Google Chrome. . . ) Cerrar ∗ En ocasiones necesitar´ tambi´n un plugin que ser´ quien ejecute realmente el Rich Client a e a (runtimes como Adobe Flash, Java, Microsoft Silverlight. . . ) Abandonar
  7. 7. ∗ Tambi´n puede que el navegador necesite otro plugin para poder acceder a ciertas fun- e cionalidades de la aplicaci´n (Google Gears) o – 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 Introducci´n al cursillo o • Cada d´ las RIAs tienen m´s capacidades y encontramos RIAs m´s y m´s avanzadas ıa a a a Introducci´n a las RIA o Google Web Toolkit – Visualizaci´n de mapas con Google Maps o Yahoo! Maps o Mapas de Live Search o Referencias – Gesti´n de feeds con Google Reader o – Gesti´n de correo electr´nico con Gmail o o P´gina www a – Edici´n de documentos con Google Docs o P´gina de Abertura a – Buscando empleo con la versi´n beta de Monster.com o P´gina 7 de 80 a Regresar Full Screen Cerrar Abandonar
  8. 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 • Una mayor respuesta ante la interacci´n con el usuario. o Introducci´n al cursillo o Introducci´n a las RIA o • Comunicaci´n as´ o ıncrona. Al contrario que en las aplicaciones web tradicionales la comunicaci´n o Google Web Toolkit as´ ıncrona permite que la interfaz del usuario no se bloquee al realizar determinadas peticiones. 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 P´gina de Abertura a pasar tantos mensajes al servidor. P´gina 8 de 80 a Regresar Full Screen Cerrar Abandonar
  9. 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 • Dependencia de una plugin o tecnolog´ extra que el usuario debe instalar para poder acceder a la ıa Introducci´n a las RIA o aplicaci´n. o Google Web Toolkit Referencias • La aplicaci´n RIA (script, Flash, Java, etc) debe ser descargado a la m´quina cliente. Aumenta el o a 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 P´gina de Abertura a • Poca accesibilidad. Las aplicaciones RIA son dif´ ıciles de procesar autom´ticamente por programas a que deban ser usados por personas con problemas de accesibilidad a las aplicaciones. P´gina 9 de 80 a Regresar Full Screen Cerrar Abandonar
  10. 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 – Potencia: qu´ limitaciones impone la tecnolog´ sobre la aplicaci´n? e ıa o Google Web Toolkit Referencias – Despliegue: necesita la aplicaci´n que haya un plugin instalado? Podemos dar por hecho que o ese plugin est´ instalado? D´nde? a o P´gina www a – Estandarizaci´n. . . o P´gina de Abertura a P´gina 10 de 80 a Regresar Full Screen Cerrar Abandonar
  11. 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 – Est´n soportados en la mayor´ de navegadores a ıa Google Web Toolkit Referencias – Dado que la m´quina virtual de Java est´ disponible bajo diferentes plataformas, podremos a a ejecutar el applet bajo diferentes plataformas P´gina www a – Por motivos de seguridad, se ejecutan en una sandbox ∗ El applet, por defecto, tendr´ una serie de restricciones: a P´gina de Abertura a · No podr´ acceder a disco 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 80 a Regresar Full Screen Cerrar Abandonar
  12. 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 Google Web Toolkit 15 MB) Referencias ∗ Tiene que cargar toda la JVM para ejecutar la aplicaci´n (deber´ merecer la pena) o ıa ∗ La sandbox puede suponer problemas si queremos realizar tareas como enviar un fichero P´gina www a que el usuario elija al servidor ∗ Puede tener problemas con versiones (si compilamos con nuestro compilador de Java 6 P´gina de Abertura a por defecto no le funcionar´ a alguien que tenga Java 5.0 o Java 1.4 instalado) 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 80 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
  13. 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 Google Web Toolkit – Si el usuario acepta, las restricciones de la sandbox no ser´n aplicadas: a 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 80 a Regresar Full Screen Cerrar Abandonar
  14. 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 Google Web Toolkit dor, un applet de Java que se salta la sandbox que permite f´cilmente acceder a disco, a Referencias seleccionar todas las fotos, y que el applet las vaya subiendo poco a poco · Facebook utiliza un applet de Java para subir fotos a sus servidores. Facebook alma- P´gina www a cena las fotos con poca resoluci´n. Si el proceso de reducir el tama˜o de im´genes o n a de disco lo puede hacer el cliente, el usuario se ahorra subir 15 fotos de 4 MB (60 P´gina de Abertura a MB) cuando en los servidores de Facebook se almacenar´n 15 fotos de menos de 100 a KB (menos de 1 MB). Un applet de Java que se salte la sandbox puede realizar este proceso. ∗ Necesiten por alguna raz´n Java (librer´ dif´ o ıas ıcilmente reimplementables) · Ejemplo P´gina 14 de 80 a Regresar Full Screen Cerrar Abandonar
  15. 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 • Inicialmente fue utilizada solamente para la realizaci´n de animaciones puntuales dentro de la p´gina. o a Introducci´n a las RIA o Google Web Toolkit • Sin embargo, en la actualidad, se ha convertido en una herramienta muy potente para la realizaci´n o Referencias de interfaces de usuario muy completas. • Las herramientas de autor creadas por Adobe, as´ como sus visualizadores tienen una licencia ı P´gina www a propietaria. P´gina de Abertura a • Han existido varios proyectos para la creaci´n de herramientas libres, sin embargo, suelen estar o 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 80 a la versi´n de Flash 7 y algunas caracter´ o ısticas de Flash 8 y 9, siendo incompatible con la versi´n o utilizada en la actualidad que es Flash 10. Regresar • Existe una versi´n limitada de Adobe Flash para dispositivos m´viles Flash Lite o o Full Screen Cerrar Abandonar
  16. 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 Google Web Toolkit directamente con controles visuales de la interfaz, con lo que el desarrollo de aplicaciones es Referencias muy sencillo. – Conexi´n a servicios webs. o P´gina www a • Para la programaci´n de la l´gica de la aplicaci´n se utiliza ActionScript (actualmente la versi´n o o o o P´gina de Abertura a 3.0) que es una estandarizaci´n de la versi´n anterior del lenguaje y que tiene muchas similitudes o o con Java y Javascript. P´gina 16 de 80 a Regresar Full Screen Cerrar Abandonar
  17. 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 • Dependencia de un plugin para su funcionamiento. Introducci´n a las RIA o Google Web Toolkit ´ • Unico proveedor. S´lo existe un proveedor real del runtime de Flash y que no es un proyecto o Referencias Open Source. Por tanto, cuando este proveedor no saca el player actualizado para una plataforma, esta plataforma no soportar´ Flash. As´ hace un par de a˜os no exist´ implementaciones para a ı, n ıan P´gina www a m´quinas con 64 bits en Linux, y un a˜o antes no hab´ Adobe Flash 8 ni 9 para Linux y s´ para a n ıa ı Windows. P´gina de Abertura a P´gina 17 de 80 a Regresar Full Screen Cerrar Abandonar
  18. 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 web Introducci´n al cursillo o Introducci´n a las RIA o – HTML, XHTML, CSS, DOM, JavaScript. . . Google Web Toolkit – Todas estas tecnolog´ son est´ndares definidos por la W3C u otras organizaciones ıas a Referencias – Son implementadas por cada navegador P´gina www a ∗ No es necesario un plug-in para que funcionen ∗ Cada navegador proveyendo capacidades extra a las ofrecidas por el est´ndar han hecho a P´gina de Abertura a que un mismo c´digo est´ndar se comporte de diferentes maneras en cada navegador o 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 a a ıas navegador P´gina 18 de 80 a · Ejemplo: OpenRico · Problema: puede que estas librer´ no sean realmente tan portables ıas Regresar Full Screen Cerrar Abandonar
  19. 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 Google Web Toolkit – Empezaron a surgir aplicaciones como Google Maps, Orkut, o Google Suggest, que hac´ ıan Referencias uso extensivo de estas formas • 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 P´gina de Abertura a – En el art´ ıculo explica las ventajas que ofrece AJAX frente a modelo web cl´sico a P´gina 19 de 80 a Regresar Full Screen Cerrar Abandonar
  20. 20. Introducci´n al cursillo o Introducci´n a las RIA o Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 20 de 80 a Regresar Full Screen Cerrar Copyright Adaptive Path Abandonar
  21. 21. Introducci´n al cursillo o Introducci´n a las RIA o Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 21 de 80 a Regresar Full Screen Cerrar Copyright Adaptive Path Abandonar
  22. 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 Google Web Toolkit • La clave es el objeto XMLHttpRequest (working draft) Referencias codigo/introduccion/ajax/01/creando.html P´gina www a P´gina de Abertura a P´gina 22 de 80 a Regresar Full Screen Cerrar Abandonar
  23. 23. 1 function getXMLHttpObject(){ 2 var xmlhttp = false; 3 /*@cc_on 4 @if (@_jscript_version >= 5) 5 try{ Introducci´n al cursillo o 6 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); Introducci´n a las RIA o 7 }catch(e){ Google Web Toolkit 8 try{ Referencias 9 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 10 }catch(E){ P´gina www a 11 xmlhttp = false; 12 } 13 } P´gina de Abertura a 14 @else 15 xmlhttp = false; 16 @end @*/ 17 if(!xmlhttp && typeof XMLHttpRequest != ’undefined’){ 18 try{ 19 xmlhttp = new XMLHttpRequest(); 20 }catch(e){ P´gina 23 de 80 a 21 xmlhttp = false; 22 } 23 } Regresar 24 return xmlhttp; 25 } Full Screen • Incluso para crear un objeto XMLHttpRequest necesitamos hacer comprobaciones de en qu´ nave- e gador y en qu´ versi´n estamos e o Cerrar • Podemos ver la referencia en la W3C: Abandonar
  24. 24. 1 interface XMLHttpRequest { 2 // event handler 3 attribute EventListener onreadystatechange; 4 5 // state Introducci´n al cursillo o 6 const unsigned short UNSENT = 0; Introducci´n a las RIA o 7 const unsigned short OPEN = 1; Google Web Toolkit 8 const unsigned short SENT = 2; Referencias 9 const unsigned short LOADING = 3; 10 const unsigned short DONE = 4; P´gina www a 11 readonly attribute unsigned short readyState; 12 13 // request P´gina de Abertura a 14 void open(in DOMString method, in DOMString url); 15 void open(in DOMString method, in DOMString url, in boolean async); 16 void open(in DOMString method, in DOMString url, in boolean async, 17 in DOMString user); 18 void open(in DOMString method, in DOMString url, in boolean async, 19 in DOMString user, in DOMString password); 20 void setRequestHeader(in DOMString header, in DOMString value); P´gina 24 de 80 a 21 void send(); 22 void send(in DOMString data); 23 void send(in Document data); Regresar 24 void abort(); 25 Full Screen 26 // response 27 DOMString getAllResponseHeaders(); 28 DOMString getResponseHeader(in DOMString header); Cerrar 29 readonly attribute DOMString responseText; 30 readonly attribute Document responseXML; Abandonar
  25. 25. 31 readonly attribute unsigned short status; 32 readonly attribute DOMString statusText; 33 }; • La forma m´s com´n de utilizarlo ser´: a u a Introducci´n al cursillo o Introducci´n a las RIA o 1. Llamar a open (m´todo, direcci´n, ¿as´ e o ıncrono?) Google Web Toolkit Referencias – Pondremos as´ ıncrono a true por el tema de AJAX ;-) 2. Configuramos el evento onreadystatechange con el handler que se invocar´ cuando el ready a P´gina www a state cambie 3. Llamamos a send con la informaci´n que queremos enviar (si usamos POST, null si usamos o P´gina de Abertura a GET) 4. En el evento: (a) Comprobaremos si ha terminado (si readyState es DONE) (b) Comprobaremos si el servidor ha contestado correctamente (si status es 200) (c) Pasaremos a trabajar con los resultados – Con responseText si recibimos un texto P´gina 25 de 80 a – Con responseXML si recibimos un XML • Ejemplo: codigo/introduccion/ajax/01/ Regresar 1 function preguntar(){ Full Screen 2 var xmlhttp = getXMLHttpObject(); 3 if(!xmlhttp){ 4 alert("No consegui el objeto XMLHttpObject"); Cerrar 5 }else{ 6 xmlhttp.open("GET","fichero.txt",true); Abandonar
  26. 26. 7 xmlhttp.onreadystatechange = function(){ 8 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 9 document.getElementById("texto").innerHTML = xmlhttp.responseText; 10 } 11 }; Introducci´n al cursillo o 12 xmlhttp.send(null); Introducci´n a las RIA o 13 } Google Web Toolkit 14 } Referencias Ejercicio P´gina www a • Primer ejercicio! P´gina de Abertura a – Necesitamos apache2 y PHP instalado: ∗ apt-get install apache2 libapache2-mod-php5 – Creamos un directorio /var/www/cursillo/ y nos damos permisos sobre ´l e ∗ sudo mkdir /var/www/cursillo ∗ sudo chmod 777 /var/www/cursillo P´gina 26 de 80 a – Cogemos los ejemplos de c´digo codigo/introduccion/ajax/02/ y los copiamos al direc- o torio /var/www/cursillo Regresar – Comprobamos que sumador.php funciona: ∗ Si nos metemos en http://localhost/cursillo/sumador.php?num1=5&num2=6 nos de- Full Screen ber´ salir un 11 ıa – Editamos ejercicio.html Cerrar – Objetivo: que cuando el usuario haga click sobre Calcular suma, se invoque al servidor con los valores que el usuario haya escrito, y se muestre la respuesta. Abandonar
  27. 27. ∗ Bien utilizando responseText (invocando sumador.php?num1=5&num2=6) ∗ Bien utilizando responseXML (invocando sumador.php?num1=5&num2=6&mode=xml) – Soluci´n → ejercicio-solucion.html o Introducci´n al cursillo o Introducci´n a las RIA o Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 27 de 80 a Regresar Full Screen Cerrar Abandonar
  28. 28. 2.2.3.4. Ventajas y desventajas de AJAX • Ventajas – Existen muchos y diferentes navegadores para diferentes plataformas Introducci´n al cursillo o – Estos navegadores generalmente ya soportan DHTML Introducci´n a las RIA o – En el momento en que soporten XMLHttpRequest. . . la aplicaci´n AJAX funcionar´ o a Google Web Toolkit – Existen navegadores incuso para dispositivos m´viles o Referencias ∗ Opera Mobile P´gina www a ∗ Nokia Open Source Brower ∗ Internet Explorer Mobile. . . P´gina de Abertura a – De esta manera, tu aplicaci´n AJAX funcionar´ en m´ltiples plataformas sin necesidad de o a u instalar ning´n tipo de plug-in u • Inconvenientes – Hereda todos los problemas de DHTML (dif´ que algo funcione en diferentes navegadores. . . ) ıcil – No es una plataforma tan potente como las anteriores (audio, video, conexiones. . . ) P´gina 28 de 80 a – Accesibilidad Regresar Full Screen Cerrar Abandonar
  29. 29. 2.2.3.5. Google Gears • Google tambi´n ha publicado herramientas como Google Gears e • Google Gears es un plug-in que se instala en el navegador Introducci´n al cursillo o – Est´ orientado a que la aplicaci´n pueda ejecutarse estando desconectada del servidor a o Introducci´n a las RIA o – Software libre: New BSD License Google Web Toolkit Referencias – Est´ disponible en varios navegadores (Microsoft Internet Explorer, Mozilla Firefox, Safari, a Google Chrome. . . ) P´gina www a – Proporciona un API JavaScript para: ∗ Cach´ de elementos (im´genes, JavaScript, HTML. . . ) e a P´gina de Abertura a ∗ Geolocalizaci´n o ∗ Uso bases de datos SQLite ∗ Soporte de threading (Worker Pool) • Ejemplo: – Tutorial P´gina 29 de 80 a – Google Reader utiliza Google Gears para soporte de la nueva funcionalidad offline Regresar Full Screen Cerrar Abandonar
  30. 30. 2.2.4. Otras tecnolog´ ıas • Nuevas tecnolog´ de RIAs est´n apareciendo en el mercado ıas a – Microsoft anuncia Microsoft Silverlight Introducci´n al cursillo o – Sun Microsystems anuncia JavaFX Introducci´n a las RIA o • Adem´s, otras empresas est´n integrando el desarrollo de RIAs en el Escritorio a a Google Web Toolkit Referencias – Google dispone de Google Gadgets – Adobe anuncia Adobe AIR (antes Adobe Apollo) P´gina www a P´gina de Abertura a P´gina 30 de 80 a Regresar Full Screen Cerrar Abandonar
  31. 31. 2.2.5. Comparativa de las tecnolog´ ıas • ¿Qu´ tecnolog´ es mejor? e ıa – Dada una caja de herramientas, ¿Qu´ destornillador es mejor? → depende de la situaci´n e o Introducci´n al cursillo o – AJAX permite desarrollar RIAs que funcionan sin ninguna necesidad de plug-ins, etc., en Introducci´n a las RIA o diferentes navegadores Google Web Toolkit ∗ Siempre y cuando utilicemos librer´ que est´n soportadas en todos estos navegadores ıas e Referencias – Si se necesitan caracter´ ısticas m´s avanzadas (audio, video. . . ), Adobe Flash puede ser la a soluci´n o P´gina www a – Java tambi´n puede resultar util para caracter´ e ´ ısticas muy concretas (recordemos el ejemplo de Facebook) P´gina de Abertura a • Otra opci´n → comunicar las diferentes tecnolog´ o ıas – Java puede invocar funciones JavaScript y desde JavaScript se pueden invocar m´todos de e Java – Adobe Flash puede invocar funciones JavaScript y desde JavaScript se pueden invocar m´todos e de Adobe Flash P´gina 31 de 80 a – Ejemplos: ∗ GMail est´ desarrollado en AJAX a Regresar · Pero para la funcionalidad de chatear, quieren permitir que haya sonidos · AJAX no soporta audio, ¿qu´ hacer? e Full Screen · Soluci´n → Un peque˜o applet incrustado no visible desarrollado en Adobe Flash que o n proporciona la funcionalidad de sonido y es invocado desde AJAX Cerrar · Si el usuario no tiene Adobe Flash, la aplicaci´n funciona o · Si el usuario tiene Adobe Flash, adem´s cuenta con sonidos en el chat a Abandonar
  32. 32. ∗ Google Maps est´ desarrollado en AJAX a · Hace pocas semanas Google estren´ Google Street View o Para ello, incrustan otro applet en Adobe Flash ∗ Si quisi´ramos funcionalidades que Java provee, podr´ e ıamos utilizar Java desde JavaScript Introducci´n al cursillo o ∗ Incluso si una misma funcionalidad fuera proporcionada tanto por Java como por Adobe Introducci´n a las RIA o Flash, podr´ implementarse de manera que din´micamente se utilizase la tecnolog´ que ıa a ıa Google Web Toolkit estuviese instalada Referencias P´gina www a P´gina de Abertura a P´gina 32 de 80 a Regresar Full Screen Cerrar Abandonar
  33. 33. 2.2.5.1. Integrando Java con JavaScript • Para llamar a JavaScript desde Java utilizaremos: 1 getAppletContext().showDocument(new URL("javascript:funcionJS()")); Introducci´n al cursillo o Introducci´n a las RIA o • Para llamar a Java desde JavaScript utilizaremos: Google Web Toolkit 1 <APPLET CODE="IntegradorJS.class" WIDTH="500" HEIGHT="150" Referencias 2 id="integrador"> 3 </APPLET> 4 <script type="text/javascript"> P´gina www a 5 function funcionJS(){ 6 alert(integrador.getVariable()); P´gina de Abertura a 7 integrador.setVariable("variable modificada"); 8 alert(integrador.getVariable()); 9 } 10 </script> • Ejemplo: codigo/introduccion/integracion/java ajax/ P´gina 33 de 80 a Regresar Full Screen Cerrar Abandonar
  34. 34. 2.2.5.2. Integrando Adobe Flash con JavaScript • Para llamar a JavaScript desde Flash utilizaremos: 1 import flash.external.ExternalInterface; 2 var jsArgument:String = "hola mundo"; Introducci´n al cursillo o 3 var result:Object = ExternalInterface.call("funcionJS", jsArgument); Introducci´n a las RIA o Google Web Toolkit • Para llamar a Flash desde JavaScript utilizaremos: Referencias 1 if(navigator.appName.indexOf("Microsoft") != -1) { 2 flashobj = window.Example; P´gina www a 3 }else{ 4 flashobj = window.document.Example; P´gina de Abertura a 5 } 6 flashobj.metodo(parametro1, parametro2); • Ejemplo: codigo/introduccion/integracion/flash ajax/ P´gina 34 de 80 a Regresar Full Screen Cerrar Abandonar
  35. 35. 2.3. Tecnolog´ que generan RIA ıas • Existen ya tecnolog´ que generan RIA ıas • Eliminan una labor tediosa Introducci´n al cursillo o • AJAX ASP.NET Introducci´n a las RIA o Google Web Toolkit – Antes llamado Atlas Referencias – Incorpora un editor WYSIWYG, con Drag and Drop – Permite hacer aplicaciones Javascript desde .NET P´gina www a P´gina de Abertura a P´gina 35 de 80 a Regresar Full Screen Cerrar Abandonar
  36. 36. • OpenLaszlo – Genera Flash, DHTML, Ajax – Open Source Introducci´n al cursillo o – Programaci´n en XML y JavaScript o Introducci´n a las RIA o – Adem´s permite crear animaciones, tiene integraci´n con SOAP... a o Google Web Toolkit – Previsto J2ME y SVG en un futuro. Referencias P´gina www a P´gina de Abertura a P´gina 36 de 80 a Regresar Full Screen Cerrar Abandonar
  37. 37. • GWT – Abstracci´n al programador de AJAX, JavaScript y HTML o – Programaci´n en Java 6 o Introducci´n al cursillo o – Licencia OpenSource (Apache Public License 2.0) Introducci´n a las RIA o – Ayuda en la depuraci´n del c´digo o o Google Web Toolkit – Componentes de la interfaz din´micos y reutilizables a Referencias P´gina www a P´gina de Abertura a P´gina 37 de 80 a Regresar Full Screen Cerrar Abandonar
  38. 38. 3. Google Web Toolkit 3.1. Introducci´n o • GWT → Google Web Toolkit Introducci´n al cursillo o • Toolkit de desarrollo en AJAX Introducci´n a las RIA o Google Web Toolkit – Desarrollado por Google Referencias – Licencia Apache 2.0 (Software Libre seg´n la FSF y Open Source seg´n la OSI) u u P´gina www a – Desarrollado en Java – Desplegado sobre un contenedor de Servlets P´gina de Abertura a – El cliente lo desarrollas. . . en Java! ∗ GWT te ofrece una API con widgets tradicionales como objetos Java ∗ Puedes interactuar con JavaScript mediante JSNI (JavaScript Native Interface) ∗ El compilador de GWT compilar´ el c´digo Java a JavaScript a o – Muy centrado en DHTML ∗ Se puede integrar en p´ginas web existentes a P´gina 38 de 80 a · Incluso escritas en otras plataformas como PHP ∗ No hay tantas capas de abstracci´no Regresar · M´s eficiente que otras tecnolog´ a ıas ∗ Estilos CSS Full Screen ∗ Podemos integrar el resultado con tecnolog´ Adobe Flash, Applets Java. . . ıas Cerrar – Lo “´nico” que hace es facilitar (mucho) el trabajar con DHTML u ∗ No tocas JavaScript → trabajas en tu IDE con Java Abandonar
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×