Taller de RIA

                                                                                                          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 tre...
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



                                                                                                 ...
– Una vez el cliente est´ cargado, el servidor puede pasar a comunicar al cliente informaci´n de
                         ...
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 ...
function getXMLHttpObject(){
 1

         var xmlhttp = false;
 2

         /*@cc_on
 3

         @if (@_jscript_version >...
interface XMLHttpRequest {
 1

       // event handler
 2

           attribute EventListener onreadystatechange;
 3

 4
 ...
readonly attribute unsigned short status;
31

       readonly attribute DOMString statusText;
32

     };
33




         ...
xmlhttp.onreadystatechange = function(){
 7

                 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
 8

...
∗ 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

   • Hace dos meses, Google public´ Google Gears
                                  o

   • Goog...
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:
       getAppletContext(...
2.2.5.2.   Integrando Adobe Flash con JavaScript

   • Para llamar a JavaScript desde Flash utilizaremos:
       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 1.4
         ...
• Otras

    – DWR
    – Ruby on Rails
                      Introducci´n al cursillo
                                o
  ...
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
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

4,998 views

Published on

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • please send english Taller ria presentations to

    hellonoordin@gmail.com

    tks
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
4,998
On SlideShare
0
From Embeds
0
Number of Embeds
37
Actions
Shares
0
Downloads
196
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Taller Ria

  1. 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
  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 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
  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 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
  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 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
  5. 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
  6. 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
  7. 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
  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 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
  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 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
  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 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
  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 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
  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 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
  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 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
  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 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
  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 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
  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 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
  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 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
  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 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
  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 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
  20. 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
  21. 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
  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 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
  23. 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(quot;Msxml2.XMLHTTPquot;); 6 OpenLaszlo }catch(e){ 7 Google Web Toolkit try{ 8 Referencias xmlhttp = new ActiveXObject(quot;Microsoft.XMLHTTPquot;); 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 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. interface XMLHttpRequest { 1 // event handler 2 attribute EventListener onreadystatechange; 3 4 Introducci´n al cursillo o // state 5 Introducci´n a las RIA o const unsigned short UNSENT = 0; 6 OpenLaszlo const unsigned short OPEN = 1; 7 Google Web Toolkit const unsigned short SENT = 2; 8 Referencias const unsigned short LOADING = 3; 9 const unsigned short DONE = 4; 10 readonly attribute unsigned short readyState; P´gina www a 11 12 // request 13 P´gina de Abertura a void open(in DOMString method, in DOMString url); 14 void open(in DOMString method, in DOMString url, in boolean async); 15 void open(in DOMString method, in DOMString url, in boolean async, 16 in DOMString user); 17 void open(in DOMString method, in DOMString url, in boolean async, 18 in DOMString user, in DOMString password); 19 void setRequestHeader(in DOMString header, in DOMString value); 20 void send(); P´gina 24 de 92 a 21 void send(in DOMString data); 22 void send(in Document data); 23 Regresar void abort(); 24 25 // response Full Screen 26 DOMString getAllResponseHeaders(); 27 DOMString getResponseHeader(in DOMString header); 28 Cerrar readonly attribute DOMString responseText; 29 readonly attribute Document responseXML; 30 Abandonar
  25. 25. readonly attribute unsigned short status; 31 readonly attribute DOMString statusText; 32 }; 33 Introducci´n al cursillo o • La forma m´s com´n de utilizarlo ser´: a u a Introducci´n a las RIA o 1. Llamar a open (m´todo, direcci´n, ¿as´ e o ıncrono?) OpenLaszlo Google Web Toolkit – Pondremos as´ ıncrono a true por el tema de AJAX ;-) Referencias 2. Configuramos el evento onreadystatechange con el handler que se invocar´ cuando el ready a state cambie P´gina www a 3. Llamamos a send con la informaci´n que queremos enviar (si usamos POST, null si usamos o GET) P´gina de Abertura a 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 – Con responseXML si recibimos un XML P´gina 25 de 92 a • Ejemplo: codigo/introduccion/ajax/01/ Regresar function preguntar(){ 1 Full Screen var xmlhttp = getXMLHttpObject(); 2 if(!xmlhttp){ 3 alert(quot;No consegui el objeto XMLHttpObjectquot;); 4 Cerrar }else{ 5 xmlhttp.open(quot;GETquot;,quot;fichero.txtquot;,true); 6 Abandonar
  26. 26. xmlhttp.onreadystatechange = function(){ 7 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 8 document.getElementById(quot;textoquot;).innerHTML = xmlhttp.responseText; 9 } 10 }; 11 Introducci´n al cursillo o xmlhttp.send(null); 12 Introducci´n a las RIA o } 13 OpenLaszlo } 14 Google Web Toolkit Referencias Ejercicio P´gina www a • Primer ejercicio! P´gina de Abertura a – Necesitamos apache2 y PHP instalado: ∗ apt-get install apache2 apache2-common 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 92 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 OpenLaszlo Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 27 de 92 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 OpenLaszlo Google Web Toolkit – Existen navegadores incuso para dispositivos m´viles o Referencias ∗ Opera Mobile ∗ Nokia Open Source Brower P´gina www a ∗ Internet Explorer Mobile. . . – De esta manera, tu aplicaci´n AJAX funcionar´ en m´ltiples plataformas sin necesidad de o a u P´gina de Abertura a 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 92 a – Accesibilidad Regresar Full Screen Cerrar Abandonar
  29. 29. 2.2.3.5. Google Gears • Hace dos meses, Google public´ Google Gears o • 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 OpenLaszlo – Software libre: New BSD License Google Web Toolkit – Est´ disponible en Microsoft Internet Explorer y Mozilla Firefox a Referencias ∗ Est´n trabajando en la versi´n para Safari a o – Proporciona un API JavaScript para: P´gina www a ∗ Cach´ de elementos (im´genes, JavaScript, HTML. . . ) e a P´gina de Abertura a ∗ Uso bases de datos SQLite ∗ Soporte de threading (Worker Pool) • Ejemplo: – Tutorial – Google Reader utiliza Google Gears para soporte de la nueva funcionalidad offline P´gina 29 de 92 a 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 OpenLaszlo • Adem´s, otras empresas est´n integrando el desarrollo de RIAs en el Escritorio a a Google Web Toolkit – Google diponse de Google Gadgets Referencias – Adobe anuncia Adobe AIR (antes Adobe Apollo) P´gina www a P´gina de Abertura a P´gina 30 de 92 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 OpenLaszlo ∗ Siempre y cuando utilicemos librer´ que est´n soportadas en todos estos navegadores ıas e Google Web Toolkit – Si se necesitan caracter´ ısticas m´s avanzadas (audio, video. . . ), Adobe Flash puede ser la a Referencias soluci´n o P´gina www a – Java tambi´n puede resultar util para caracter´ e ´ ısticas muy concretas (recordemos el ejemplo de Gallery 2) 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 92 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 OpenLaszlo estuviese instalada Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 32 de 92 a Regresar Full Screen Cerrar Abandonar
  33. 33. 2.2.5.1. Integrando Java con JavaScript • Para llamar a JavaScript desde Java utilizaremos: getAppletContext().showDocument(new URL(quot;javascript:funcionJS()quot;)); 1 Introducci´n al cursillo o Introducci´n a las RIA o • Para llamar a Java desde JavaScript utilizaremos: OpenLaszlo <APPLET CODE=quot;IntegradorJS.classquot; WIDTH=quot;500quot; HEIGHT=quot;150quot; 1 Google Web Toolkit id=quot;integradorquot;> 2 Referencias </APPLET> 3 <script type=quot;text/javascriptquot;> 4 P´gina www a function funcionJS(){ 5 alert(integrador.getVariable()); 6 integrador.setVariable(quot;variable modificadaquot;); P´gina de Abertura a 7 alert(integrador.getVariable()); 8 } 9 </script> 10 • Ejemplo: codigo/introduccion/integracion/java ajax/ P´gina 33 de 92 a Regresar Full Screen Cerrar Abandonar
  34. 34. 2.2.5.2. Integrando Adobe Flash con JavaScript • Para llamar a JavaScript desde Flash utilizaremos: import flash.external.ExternalInterface; 1 Introducci´n al cursillo o var jsArgument:String = quot;hola mundoquot;; 2 var result:Object = ExternalInterface.call(quot;funcionJSquot;, jsArgument); Introducci´n a las RIA o 3 OpenLaszlo Google Web Toolkit • Para llamar a Flash desde JavaScript utilizaremos: Referencias if(navigator.appName.indexOf(quot;Microsoftquot;) != -1) { 1 flashobj = window.Example; 2 P´gina www a }else{ 3 flashobj = window.document.Example; 4 } P´gina de Abertura a 5 flashobj.metodo(parametro1, parametro2); 6 • Ejemplo: codigo/introduccion/integracion/flash ajax/ P´gina 34 de 92 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 OpenLaszlo – Antes llamado Atlas Google Web Toolkit – Incorpora un editor WYSIWYG, con Drag and Drop Referencias – Permite hacer aplicaciones Javascript desde .NET P´gina www a P´gina de Abertura a P´gina 35 de 92 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 OpenLaszlo – Previsto J2ME y SVG en un futuro. Google Web Toolkit Referencias – Hablaremos ma˜ana y pasado de OpenLaszlo m´s detenidamente. n a P´gina www a P´gina de Abertura a P´gina 36 de 92 a Regresar Full Screen Cerrar Abandonar
  37. 37. • GWT – Abstracci´n al programador de AJAX, JavaScript y HTML. o – Programaci´n en Java 1.4 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 OpenLaszlo – Componentes de la interfaz din´micos y reutilizables a Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 37 de 92 a Regresar Full Screen Cerrar Abandonar
  38. 38. • Otras – DWR – Ruby on Rails Introducci´n al cursillo o – etc... Introducci´n a las RIA o OpenLaszlo Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 38 de 92 a Regresar Full Screen Cerrar Abandonar

×