Taller Ria

Taller de RIA

Unai Aguilera (aka Kalgan) Introducciń al cursillo
o
Introducciń a las RIA
o
Pablo Orduã (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

1. Introducciń 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ń al cursillo
o

– Cursillos de Julio: Introducciń a las RIA
o
Google Web Toolkit
∗ Desde hace varios aõs, 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ń 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ń sea lo mejor posible.
o
– Filosof´ de los cursillos
ıa
∗ ¡Compartir conocimiento!
∗ Ayudar a dar los primeros pasos de una tecnolog´ lenguaje de programaciń, 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ń 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

1.2. Objetivos
• Pretende ser una introducciń a RIA
o

• El cursillo se divide en tres m´dulos:
o
Introducciń al cursillo
o
– Introducciń a las Rich Internet Applications (Lunes)
o Introducciń 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ń web (HTML, CSS, JavaScript, programaciń 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ń Java
o
Regresar

Full Screen

Cerrar

Abandonar

2. Introducciń a las RIA
o
2.1. Qu´ son las RIA
e
• RIA → Rich Internet Application Introducciń al cursillo
o

• Aplicaciones Web en las que: Introducciń a las RIA
o
Google Web Toolkit
– el navegador tiene l´gica de negocio (no es s´lo presentaciń)
o o o Referencias

– la aplicaciń, 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

2.1.1. Thin Clients

o
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

2.1.2. Rich Clients

o
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

∗ Tambiń puede que el navegador necesite otro plugin para poder acceder a ciertas fun-
e
cionalidades de la aplicaciń (Google Gears)
o
– Una vez el cliente est´ cargado, el servidor puede pasar a comunicar al cliente informaciń de
a o
la la l´gica de la aplicaciń (no de presentaciń)
o 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ń a las RIA
o
Google Web Toolkit
– Visualizaciń de mapas con Google Maps o Yahoo! Maps o Mapas de Live Search
o
Referencias
– Gestiń de feeds con Google Reader
o
– Gestiń de correo electrńico con Gmail
o o P´gina www
a

– Ediciń de documentos con Google Docs
o
P´gina de Abertura
a
– Buscando empleo con la versiń beta de Monster.com
o

P´gina 7 de 80
a

Regresar

Full Screen

Cerrar

Abandonar

2.1.3. Beneficios de las RIA
• Interfaz m´s rica. Permite la creaciń de aplicaciones web (visitadas a trav´s del navegador) mucho
a o e
m´s ricas haciendo m´s facil la interacciń por parte de los usuarios.
a a o

• Una mayor respuesta ante la interacciń con el usuario.
o Introducciń al cursillo
o
o
• Comunicaciń as´
o ıncrona. Al contrario que en las aplicaciones web tradicionales la comunicaciń o Google Web Toolkit
as´
ıncrona permite que la interfaz del usuario no se bloquee al realizar determinadas peticiones. Referencias

• Liberaciń 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

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ń necesaria
a o
en el dispositivo cliente.
o

• Dependencia de una plugin o tecnolog´ extra que el usuario debe instalar para poder acceder a la
ıa Introducciń a las RIA
o

aplicaciń.
o Google Web Toolkit
Referencias
• La aplicaciń RIA (script, Flash, Java, etc) debe ser descargado a la m´quina cliente. Aumenta el
o a
tiempo necesario para la ejecuciń inicial de la aplicaciń.
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

2.2. Tecnolog´ base de las RIA
ıas
• Todas estas aplicaciones necesitarń un runtime u otro que ejecute la aplicaciń
a o

• La elecciń de la tecnolog´ limitar´ aspectos importantes de la aplicaciń
o ıa a o
o
– Portabilidad: en qu´ entornos funcionar´ nuestra aplicaciń?
e a o Introducciń a las RIA
o

– Potencia: qu´ limitaciones impone la tecnolog´ sobre la aplicaciń?
e ıa o Google Web Toolkit
Referencias
– Despliegue: necesita la aplicaciń que haya un plugin instalado? Podemos dar por hecho que
o
ese plugin est´ instalado? Dńde?
a o
P´gina www
a
– Estandarizaciń. . .
o

P´gina de Abertura
a

P´gina 10 de 80
a

Regresar

Full Screen

Cerrar

Abandonar

2.2.1. Applets de Java
• Java naci´ en 1995
o

• Trajo consigo los Applets de Java, que:
o
– Son programas desarrollados en Java que estń embebidos en el navegador
a Introducciń a las RIA
o

– Estń 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ń ejecutar otros programas
a
· No podrń ejecutar c´digo nativo
a o
· ...
– Ejemplo: codigo/introduccion/java applets/01/ P´gina 11 de 80
a

Regresar

Full Screen

Cerrar

Abandonar

2.2.1.1. Ventajas y desventajas

• Como vemos, es una aplicaciń Java pura:
o

– Necesita todo el JRE (Java Runtime Environment) para ser ejecutado. Lo cual puede tener
o
inconvenientes:
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ń (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õ de la p´gina
n a
– Sin embargo, tambiń cuenta con una serie de ventajas:
e
∗ Tenemos acceso a toda la API de Java
· Aplicaciń 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ń comparado con JavaScript
o
Full Screen

Cerrar

Abandonar

2.2.1.2. Saltńdonos 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/)
o
– Al usuario se le mostrar´ un di´logo preguntando a ver si quiere ejecutar el applet fuera de la
a a Introducciń a las RIA
o
sandbox
Google Web Toolkit
– Si el usuario acepta, las restricciones de la sandbox no serń aplicadas:
a Referencias

∗ El applet pasa a ejecutarse como una aplicaciń 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

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õ nicho en aplicaciones concretas que:
n
o
∗ Necesiten acceder a disco o saltarse la sandbox Introducciń 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ćilmente 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ń. Si el proceso de reducir el tamaõ 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ń 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ń Java (librer´ dif´
o ıas ıcilmente reimplementables)
· Ejemplo

P´gina 14 de 80
a

Regresar

Full Screen

Cerrar

Abandonar

2.2.2. Adobe Flash
• Es una herramienta creada por Macromedia (despu´s adquirida por Adobe) en 1996 que permit´
e ıa
la inclusiń de animaciones vectoriales, sonido e interacciń con el usuario dentro de una p´gina
o o a
web.
o

• Inicialmente fue utilizada solamente para la realizaciń de animaciones puntuales dentro de la p´gina.
o a Introducciń a las RIA
o
Google Web Toolkit
• Sin embargo, en la actualidad, se ha convertido en una herramienta muy potente para la realizaciń
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ń de herramientas libres, sin embargo, suelen estar
o
retrasados con respecto a la versiń comercializada por Adobe, lo que suele producir ciertas incom-
o
patibilidades y fallos.

• Para la visualizaciń de las pel´
o ıculas Flash el usuario necesita tener instalado un plugin en su
navegador.

• Existe una implementaciń libre de este plugin llamada Gnash que actualmente es compatible con
o P´gina 15 de 80
a

la versiń de Flash 7 y algunas caracter´
o ısticas de Flash 8 y 9, siendo incompatible con la versiń
o
utilizada en la actualidad que es Flash 10. Regresar

• Existe una versiń limitada de Adobe Flash para dispositivos m´viles Flash Lite
o o
Full Screen

Cerrar

Abandonar

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ń de interfaces de usuario.
o
o
• Entre los controles de acceso a datos se encuentran los siguientes:
o
– Conexiń 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ń a servicios webs.
o P´gina www
a

• Para la programaciń de la l´gica de la aplicaciń se utiliza ActionScript (actualmente la versiń
o o o o
P´gina de Abertura
a
3.0) que es una estandarizaciń de la versiń 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

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ń 6 de Flash existen extensiones para ello los desarrolladores
o
no suelen tenerlo en cuenta. Introducciń al cursillo
o

• Dependencia de un plugin para su funcionamiento. Introducciń 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õs no exist´ implementaciones para
a ı, n ıan P´gina www
a
m´quinas con 64 bits en Linux, y un aõ 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

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ń al cursillo
o
o
– HTML, XHTML, CSS, DOM, JavaScript. . . Google Web Toolkit
– Todas estas tecnolog´ son estńdares 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ńdar han hecho
a
P´gina de Abertura
a
que un mismo c´digo estńdar 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ćil 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

2.2.3.2. AJAX

• Diferentes proveedores ofrec´ formas de acceder desde DHTML al servidor m´s o menos mane-
ıan a
jables
o
– Con el tiempo los diferentes proveedores fueron implementando el objeto XMLHttpRequest
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

o
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

o
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

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

1 function getXMLHttpObject(){
2 var xmlhttp = false;
3 /*@cc_on
4 @if (@_jscript_version >= 5)
5 try{ Introducciń al cursillo
o
6 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); Introducciń 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ń estamos
e o Cerrar

• Podemos ver la referencia en la W3C:
Abandonar

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

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

• La forma m´s comń de utilizarlo ser´:
a u a Introducciń al cursillo
o
o
1. Llamar a open (m´todo, direcciń, ¿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ń 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

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);
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

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

2.2.3.4. Ventajas y desventajas de AJAX

• Ventajas

– Existen muchos y diferentes navegadores para diferentes plataformas
o
– Estos navegadores generalmente ya soportan DHTML Introducciń a las RIA
o
– En el momento en que soporten XMLHttpRequest. . . la aplicaciń 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ń AJAX funcionar´ en m´ltiples plataformas sin necesidad de
o a u
instalar ningń 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

2.2.3.5. Google Gears

• Google tambiń ha publicado herramientas como Google Gears
e

• Google Gears es un plug-in que se instala en el navegador
o
– Est´ orientado a que la aplicaciń pueda ejecutarse estando desconectada del servidor
a o Introducciń 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ń
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

2.2.4. Otras tecnolog´
ıas
• Nuevas tecnolog´ de RIAs est´n apareciendo en el mercado
ıas a

– Microsoft anuncia Microsoft Silverlight
o
– Sun Microsystems anuncia JavaFX
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

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ń
e o
o
– AJAX permite desarrollar RIAs que funcionan sin ninguna necesidad de plug-ins, etc., en
o
diferentes navegadores
Google Web Toolkit
∗ Siempre y cuando utilicemos librer´ que estń 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ń
o P´gina www
a

– Java tambiń puede resultar util para caracter´
e ´ ısticas muy concretas (recordemos el ejemplo de
Facebook) P´gina de Abertura
a

• Otra opciń → 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ń → Un pequeõ 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ń funciona
o
· Si el usuario tiene Adobe Flash, adem´s cuenta con sonidos en el chat
a Abandonar

∗ 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
o
∗ Incluso si una misma funcionalidad fuera proporcionada tanto por Java como por Adobe
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

2.2.5.1. Integrando Java con JavaScript

• Para llamar a JavaScript desde Java utilizaremos:
1 getAppletContext().showDocument(new URL("javascript:funcionJS()"));
o
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

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

2.3. Tecnolog´ que generan RIA
ıas
• Existen ya tecnolog´ que generan RIA
ıas

• Eliminan una labor tediosa
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

• OpenLaszlo

– Genera Flash, DHTML, Ajax
– Open Source
o
– Programaci´n en XML y JavaScript
o
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

• GWT

– Abstracciń al programador de AJAX, JavaScript y HTML
o
– Programaciń en Java 6
o
o
– Licencia OpenSource (Apache Public License 2.0)
o
– Ayuda en la depuraciń 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

3. Google Web Toolkit
3.1. Introducciń
o
• GWT → Google Web Toolkit Introducciń al cursillo
o

• Toolkit de desarrollo en AJAX Introducciń a las RIA
o
Google Web Toolkit
– Desarrollado por Google Referencias

– Licencia Apache 2.0 (Software Libre segń la FSF y Open Source segń 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ńo 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 “ńico” que hace es facilitar (mucho) el trabajar con DHTML
u
∗ No tocas JavaScript → trabajas en tu IDE con Java
Abandonar

Taller Ria

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (8)

Kürzlich hochgeladen

Kürzlich hochgeladen (11)

Taller Ria