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