Taller Ria
Upcoming SlideShare
Loading in...5
×
 

Taller Ria

on

  • 3,391 views

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

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

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

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

Statistics

Views

Total Views
3,391
Views on SlideShare
3,367
Embed Views
24

Actions

Likes
0
Downloads
46
Comments
0

3 Embeds 24

http://gwtpaito.blogspot.com.es 13
http://gwtpaito.blogspot.com 7
http://www.slideshare.net 4

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Taller Ria Taller Ria Presentation Transcript

  • Taller de RIA Unai Aguilera (aka Kalgan) Introducci´n al cursillo o Introducci´n a las RIA o Pablo Ordu˜a (aka NcTrun) n Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 1 de 80 a Regresar Full Screen This work is licensed under the Creative Commons Attribution-ShareAlike License. To view a copy of this Cerrar license, visit http://creativecommons.org/licenses/by-sa/2.0/ or send a letter to Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA Abandonar
  • 1. Introducci´n al cursillo o 1.1. De qu´ va este cursillo e • El cursillo est´ entre los Cursillos de Julio de los grupos de inter´s de la Universidad de Deusto a e Introducci´n al cursillo o – Cursillos de Julio: Introducci´n a las RIA o Google Web Toolkit ∗ Desde hace varios a˜os, alumnos y alumnas de la Facultad de Ingenier´ de la Universidad n ıa Referencias de Deusto organizan de manera voluntaria una serie de cursillos que abarcan diversas ´reas de conocimiento a P´gina www a ∗ Esta actividad es coordinada por la Delegaci´n de Alumnos o ∗ Cuenta con el apoyo de profesores y de la Facultad de Ingenier´ ıa-ESIDE, que anima e P´gina de Abertura a impulsa estas actividades facilitando el uso de aulas informatizadas y dem´s recursos para a que su realizaci´n sea lo mejor posible. o – Filosof´ de los cursillos ıa ∗ ¡Compartir conocimiento! ∗ Ayudar a dar los primeros pasos de una tecnolog´ lenguaje de programaci´n, etc ıa, o · En consecuencia: En un cursillo se abarcan la m´xima cantidad de temas en el m´ a ınimo P´gina 2 de 80 a tiempo posible. No es posible profundizar mucho en cada tema, pero s´ ver lo suficiente ı para que el/la alumno/a pueda seguir aprendiendo por su cuenta, una vez dados los primeros pasos. Regresar · Cursillos introductorios, no exhaustivos Full Screen – M´s informaci´n sobre los Cursillos de Julio a o • Este concretamente se da desde el grupo de software libre de la Universidad (el e-ghost). Cerrar Abandonar
  • 1.2. Objetivos • Pretende ser una introducci´n a RIA o • El cursillo se divide en tres m´dulos: o Introducci´n al cursillo o – Introducci´n a las Rich Internet Applications (Lunes) o Introducci´n a las RIA o – Desarrollando Rich Internet Applications con Google Web Toolkit (Martes y Mi´rcoles) e Google Web Toolkit Referencias 1.3. Requisitos P´gina www a • Depende del m´dulo: o – Primer m´dulo: o P´gina de Abertura a ∗ Nociones de programaci´n web (HTML, CSS, JavaScript, programaci´n de c´digo en o o o servidor en cualquier lenguaje -PHP, Java, .NET, Perl, Python...-). – Segundo m´dulo: o ∗ Lo explicado en el primer compartimento. ∗ Los requisitos del primer compartimento. P´gina 3 de 80 a ∗ Lenguaje de programaci´n Java o Regresar Full Screen Cerrar Abandonar View slide
  • 2. Introducci´n a las RIA o 2.1. Qu´ son las RIA e • RIA → Rich Internet Application Introducci´n al cursillo o • Aplicaciones Web en las que: Introducci´n a las RIA o Google Web Toolkit – el navegador tiene l´gica de negocio (no es s´lo presentaci´n) o o o Referencias – la aplicaci´n, cuando lo necesita, habla con el servidor o P´gina www a P´gina de Abertura a P´gina 4 de 80 a Regresar Full Screen Cerrar Abandonar View slide
  • 2.1.1. Thin Clients Introducci´n al cursillo o Introducci´n a las RIA o Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 5 de 80 a • En las Aplicaciones Web tradicionales: Regresar – En los servidores estaban situadas todas las capas – El cliente (navegador) se limitaba a enviar peticiones al servidor y pintar lo que el servidor Full Screen respond´ıa Cerrar Abandonar
  • 2.1.2. Rich Clients Introducci´n al cursillo o Introducci´n a las RIA o Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 6 de 80 a • Con las Rich Internet Applications: Regresar – El servidor delega la capa de presentaci´n entera en el cliente o – El cliente estar´ compuesto por: a Full Screen ∗ El navegador (Mozilla Firefox, Microsoft Internet Explorer, Konqueror, Opera, Safari, Google Chrome. . . ) Cerrar ∗ En ocasiones necesitar´ tambi´n un plugin que ser´ quien ejecute realmente el Rich Client a e a (runtimes como Adobe Flash, Java, Microsoft Silverlight. . . ) Abandonar
  • ∗ Tambi´n puede que el navegador necesite otro plugin para poder acceder a ciertas fun- e cionalidades de la aplicaci´n (Google Gears) o – Una vez el cliente est´ cargado, el servidor puede pasar a comunicar al cliente informaci´n de a o la la l´gica de la aplicaci´n (no de presentaci´n) o o o Introducci´n al cursillo o • Cada d´ las RIAs tienen m´s capacidades y encontramos RIAs m´s y m´s avanzadas ıa a a a Introducci´n a las RIA o Google Web Toolkit – Visualizaci´n de mapas con Google Maps o Yahoo! Maps o Mapas de Live Search o Referencias – Gesti´n de feeds con Google Reader o – Gesti´n de correo electr´nico con Gmail o o P´gina www a – Edici´n de documentos con Google Docs o P´gina de Abertura a – Buscando empleo con la versi´n beta de Monster.com o P´gina 7 de 80 a Regresar Full Screen Cerrar Abandonar
  • 2.1.3. Beneficios de las RIA • Interfaz m´s rica. Permite la creaci´n de aplicaciones web (visitadas a trav´s del navegador) mucho a o e m´s ricas haciendo m´s facil la interacci´n por parte de los usuarios. a a o • Una mayor respuesta ante la interacci´n con el usuario. o Introducci´n al cursillo o Introducci´n a las RIA o • Comunicaci´n as´ o ıncrona. Al contrario que en las aplicaciones web tradicionales la comunicaci´n o Google Web Toolkit as´ ıncrona permite que la interfaz del usuario no se bloquee al realizar determinadas peticiones. Referencias • Liberaci´n de recursos en el servidor debido a que parte de la carga de trabajo se desplazada hacia o el usuario. P´gina www a • Se reduce el tr´fico de red. Como la mayor parte del proceso se realiza en el cliente no es necesario a P´gina de Abertura a pasar tantos mensajes al servidor. P´gina 8 de 80 a Regresar Full Screen Cerrar Abandonar
  • 2.1.4. Problemas de las tecnolog´ RIA ıas • Las aplicaciones RIA se ejecutan dentro de sandboxes por lo que no es posible acceder a toda la funcionalidad de la m´quina. Se hace necesario conocer las limitaciones y configuraci´n necesaria a o en el dispositivo cliente. Introducci´n al cursillo o • Dependencia de una plugin o tecnolog´ extra que el usuario debe instalar para poder acceder a la ıa Introducci´n a las RIA o aplicaci´n. o Google Web Toolkit Referencias • La aplicaci´n RIA (script, Flash, Java, etc) debe ser descargado a la m´quina cliente. Aumenta el o a tiempo necesario para la ejecuci´n inicial de la aplicaci´n. o o P´gina www a • Poca visibilidad para los motores de b´squeda que no pueden navegar por estas aplicaciones. u P´gina de Abertura a • Poca accesibilidad. Las aplicaciones RIA son dif´ ıciles de procesar autom´ticamente por programas a que deban ser usados por personas con problemas de accesibilidad a las aplicaciones. P´gina 9 de 80 a Regresar Full Screen Cerrar Abandonar
  • 2.2. Tecnolog´ base de las RIA ıas • Todas estas aplicaciones necesitar´n un runtime u otro que ejecute la aplicaci´n a o • La elecci´n de la tecnolog´ limitar´ aspectos importantes de la aplicaci´n o ıa a o Introducci´n al cursillo o – Portabilidad: en qu´ entornos funcionar´ nuestra aplicaci´n? e a o Introducci´n a las RIA o – Potencia: qu´ limitaciones impone la tecnolog´ sobre la aplicaci´n? e ıa o Google Web Toolkit Referencias – Despliegue: necesita la aplicaci´n que haya un plugin instalado? Podemos dar por hecho que o ese plugin est´ instalado? D´nde? a o P´gina www a – Estandarizaci´n. . . o P´gina de Abertura a P´gina 10 de 80 a Regresar Full Screen Cerrar Abandonar
  • 2.2.1. Applets de Java • Java naci´ en 1995 o • Trajo consigo los Applets de Java, que: Introducci´n al cursillo o – Son programas desarrollados en Java que est´n embebidos en el navegador a Introducci´n a las RIA o – Est´n soportados en la mayor´ de navegadores a ıa Google Web Toolkit Referencias – Dado que la m´quina virtual de Java est´ disponible bajo diferentes plataformas, podremos a a ejecutar el applet bajo diferentes plataformas P´gina www a – Por motivos de seguridad, se ejecutan en una sandbox ∗ El applet, por defecto, tendr´ una serie de restricciones: a P´gina de Abertura a · No podr´ acceder a disco a · No podr´ establecer conexiones a otros servidores que aquel del que ha sido descargado a · No podr´n ejecutar otros programas a · No podr´n ejecutar c´digo nativo a o · ... – Ejemplo: codigo/introduccion/java applets/01/ P´gina 11 de 80 a Regresar Full Screen Cerrar Abandonar
  • 2.2.1.1. Ventajas y desventajas • Como vemos, es una aplicaci´n Java pura: o – Necesita todo el JRE (Java Runtime Environment) para ser ejecutado. Lo cual puede tener Introducci´n al cursillo o inconvenientes: Introducci´n a las RIA o ∗ Tiene que estar instalado (que hoy en d´ no podemos dar por hecho que est´, y son unos ıa e Google Web Toolkit 15 MB) Referencias ∗ Tiene que cargar toda la JVM para ejecutar la aplicaci´n (deber´ merecer la pena) o ıa ∗ La sandbox puede suponer problemas si queremos realizar tareas como enviar un fichero P´gina www a que el usuario elija al servidor ∗ Puede tener problemas con versiones (si compilamos con nuestro compilador de Java 6 P´gina de Abertura a por defecto no le funcionar´ a alguien que tenga Java 5.0 o Java 1.4 instalado) a ∗ Dif´ ıcilmente va a poder ser ejecutada en plataformas m´viles, etc. o ∗ No se integra con el dise˜o de la p´gina n a – Sin embargo, tambi´n cuenta con una serie de ventajas: e ∗ Tenemos acceso a toda la API de Java · Aplicaci´n Swing o P´gina 12 de 80 a · Podemos incluso trabajar con sockets contra el servidor ∗ Podemos hacer que funcione igual en diferentes plataformas (windows, linux, mac os x. . . ) Regresar ∗ Velocidad en tiempo de ejecuci´n comparado con JavaScript o Full Screen Cerrar Abandonar
  • 2.2.1.2. Salt´ndonos la sandbox a • En caso de necesitarlo, podemos saltarnos la sandbox con permiso del usuario – Firmaremos el applet con jarsigner (ver compilar.sh en codigo/introduccion/java applets/02/) Introducci´n al cursillo o – Al usuario se le mostrar´ un di´logo preguntando a ver si quiere ejecutar el applet fuera de la a a Introducci´n a las RIA o sandbox Google Web Toolkit – Si el usuario acepta, las restricciones de la sandbox no ser´n aplicadas: a Referencias ∗ El applet pasa a ejecutarse como una aplicaci´n normal, salvo porque est´ embebida en o a el navegador P´gina www a ∗ Implicaciones de seguridad P´gina de Abertura a P´gina 13 de 80 a Regresar Full Screen Cerrar Abandonar
  • 2.2.1.3. Hoy en d´ ıa • Hoy en d´ est´ en general superada por el resto de tecnolog´ que vamos a explicar ıa, a ıas – Sin embargo, sigue teniendo su peque˜o nicho en aplicaciones concretas que: n Introducci´n al cursillo o ∗ Necesiten acceder a disco o saltarse la sandbox Introducci´n a las RIA o · Gallery 2, por ejemplo, tiene, entre los diferentes modos para subir im´genes al servi- a Google Web Toolkit dor, un applet de Java que se salta la sandbox que permite f´cilmente acceder a disco, a Referencias seleccionar todas las fotos, y que el applet las vaya subiendo poco a poco · Facebook utiliza un applet de Java para subir fotos a sus servidores. Facebook alma- P´gina www a cena las fotos con poca resoluci´n. Si el proceso de reducir el tama˜o de im´genes o n a de disco lo puede hacer el cliente, el usuario se ahorra subir 15 fotos de 4 MB (60 P´gina de Abertura a MB) cuando en los servidores de Facebook se almacenar´n 15 fotos de menos de 100 a KB (menos de 1 MB). Un applet de Java que se salte la sandbox puede realizar este proceso. ∗ Necesiten por alguna raz´n Java (librer´ dif´ o ıas ıcilmente reimplementables) · Ejemplo P´gina 14 de 80 a Regresar Full Screen Cerrar Abandonar
  • 2.2.2. Adobe Flash • Es una herramienta creada por Macromedia (despu´s adquirida por Adobe) en 1996 que permit´ e ıa la inclusi´n de animaciones vectoriales, sonido e interacci´n con el usuario dentro de una p´gina o o a web. Introducci´n al cursillo o • Inicialmente fue utilizada solamente para la realizaci´n de animaciones puntuales dentro de la p´gina. o a Introducci´n a las RIA o Google Web Toolkit • Sin embargo, en la actualidad, se ha convertido en una herramienta muy potente para la realizaci´n o Referencias de interfaces de usuario muy completas. • Las herramientas de autor creadas por Adobe, as´ como sus visualizadores tienen una licencia ı P´gina www a propietaria. P´gina de Abertura a • Han existido varios proyectos para la creaci´n de herramientas libres, sin embargo, suelen estar o retrasados con respecto a la versi´n comercializada por Adobe, lo que suele producir ciertas incom- o patibilidades y fallos. • Para la visualizaci´n de las pel´ o ıculas Flash el usuario necesita tener instalado un plugin en su navegador. • Existe una implementaci´n libre de este plugin llamada Gnash que actualmente es compatible con o P´gina 15 de 80 a la versi´n de Flash 7 y algunas caracter´ o ısticas de Flash 8 y 9, siendo incompatible con la versi´n o utilizada en la actualidad que es Flash 10. Regresar • Existe una versi´n limitada de Adobe Flash para dispositivos m´viles Flash Lite o o Full Screen Cerrar Abandonar
  • 2.2.2.1. Desarrollo de RIAs en Flash • Adobe Flash proporciona un conjunto de librer´ de controles tanto gr´ficos como de acceso a ıas a datos para la construcci´n de interfaces de usuario. o Introducci´n al cursillo o • Entre los controles de acceso a datos se encuentran los siguientes: Introducci´n a las RIA o – Conexi´n a base de datos remota. Permite extraer registros de bases de datos y enlazarlos o Google Web Toolkit directamente con controles visuales de la interfaz, con lo que el desarrollo de aplicaciones es Referencias muy sencillo. – Conexi´n a servicios webs. o P´gina www a • Para la programaci´n de la l´gica de la aplicaci´n se utiliza ActionScript (actualmente la versi´n o o o o P´gina de Abertura a 3.0) que es una estandarizaci´n de la versi´n anterior del lenguaje y que tiene muchas similitudes o o con Java y Javascript. P´gina 16 de 80 a Regresar Full Screen Cerrar Abandonar
  • 2.2.2.2. Problemas de Flash • Poca accesibilidad. La mayor´ de las aplicaciones realizadas en Flash no tiene en cuenta el problema ıa de la accesibilidad, aunque desde la versi´n 6 de Flash existen extensiones para ello los desarrolladores o no suelen tenerlo en cuenta. Introducci´n al cursillo o • Dependencia de un plugin para su funcionamiento. Introducci´n a las RIA o Google Web Toolkit ´ • Unico proveedor. S´lo existe un proveedor real del runtime de Flash y que no es un proyecto o Referencias Open Source. Por tanto, cuando este proveedor no saca el player actualizado para una plataforma, esta plataforma no soportar´ Flash. As´ hace un par de a˜os no exist´ implementaciones para a ı, n ıan P´gina www a m´quinas con 64 bits en Linux, y un a˜o antes no hab´ Adobe Flash 8 ni 9 para Linux y s´ para a n ıa ı Windows. P´gina de Abertura a P´gina 17 de 80 a Regresar Full Screen Cerrar Abandonar
  • 2.2.3. AJAX 2.2.3.1. DHTML • Dynamic HTML es un t´rmino que agrupa un conjunto de tecnolog´ utilizadas para dinamizar la e ıas web Introducci´n al cursillo o Introducci´n a las RIA o – HTML, XHTML, CSS, DOM, JavaScript. . . Google Web Toolkit – Todas estas tecnolog´ son est´ndares definidos por la W3C u otras organizaciones ıas a Referencias – Son implementadas por cada navegador P´gina www a ∗ No es necesario un plug-in para que funcionen ∗ Cada navegador proveyendo capacidades extra a las ofrecidas por el est´ndar han hecho a P´gina de Abertura a que un mismo c´digo est´ndar se comporte de diferentes maneras en cada navegador o a – Limitaciones: ∗ Incapaces de interactuar con el servidor de una manera directa y sencilla ∗ Dificultad en hacer c´digo que funcione bien en todos los navegadores o · M´s f´cil trabajar con librer´ que te abstraen de las cuestiones dependientes del a a ıas navegador P´gina 18 de 80 a · Ejemplo: OpenRico · Problema: puede que estas librer´ no sean realmente tan portables ıas Regresar Full Screen Cerrar Abandonar
  • 2.2.3.2. AJAX • Diferentes proveedores ofrec´ formas de acceder desde DHTML al servidor m´s o menos mane- ıan a jables Introducci´n al cursillo o – Con el tiempo los diferentes proveedores fueron implementando el objeto XMLHttpRequest Introducci´n a las RIA o implementado por Microsoft en su navegador Google Web Toolkit – Empezaron a surgir aplicaciones como Google Maps, Orkut, o Google Suggest, que hac´ ıan Referencias uso extensivo de estas formas • En Febrero de 2005, Jesse James Garrett acu˜´ el t´rmino AJAX en un popular art´ no e ıculo P´gina www a – AJAX → Asynchronous JavaScript And XML P´gina de Abertura a – En el art´ ıculo explica las ventajas que ofrece AJAX frente a modelo web cl´sico a P´gina 19 de 80 a Regresar Full Screen Cerrar Abandonar
  • Introducci´n al cursillo o Introducci´n a las RIA o Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 20 de 80 a Regresar Full Screen Cerrar Copyright Adaptive Path Abandonar
  • Introducci´n al cursillo o Introducci´n a las RIA o Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 21 de 80 a Regresar Full Screen Cerrar Copyright Adaptive Path Abandonar
  • 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´n al cursillo o 6 xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); Introducci´n a las RIA o 7 }catch(e){ Google Web Toolkit 8 try{ Referencias 9 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 10 }catch(E){ P´gina www a 11 xmlhttp = false; 12 } 13 } P´gina de Abertura a 14 @else 15 xmlhttp = false; 16 @end @*/ 17 if(!xmlhttp && typeof XMLHttpRequest != ’undefined’){ 18 try{ 19 xmlhttp = new XMLHttpRequest(); 20 }catch(e){ P´gina 23 de 80 a 21 xmlhttp = false; 22 } 23 } Regresar 24 return xmlhttp; 25 } Full Screen • Incluso para crear un objeto XMLHttpRequest necesitamos hacer comprobaciones de en qu´ nave- e gador y en qu´ versi´n estamos e o Cerrar • Podemos ver la referencia en la W3C: Abandonar
  • 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´n de utilizarlo ser´: a u a Introducci´n al cursillo o Introducci´n a las RIA o 1. Llamar a open (m´todo, direcci´n, ¿as´ e o ıncrono?) Google Web Toolkit Referencias – Pondremos as´ ıncrono a true por el tema de AJAX ;-) 2. Configuramos el evento onreadystatechange con el handler que se invocar´ cuando el ready a P´gina www a state cambie 3. Llamamos a send con la informaci´n que queremos enviar (si usamos POST, null si usamos o P´gina de Abertura a GET) 4. En el evento: (a) Comprobaremos si ha terminado (si readyState es DONE) (b) Comprobaremos si el servidor ha contestado correctamente (si status es 200) (c) Pasaremos a trabajar con los resultados – Con responseText si recibimos un texto P´gina 25 de 80 a – Con responseXML si recibimos un XML • Ejemplo: codigo/introduccion/ajax/01/ Regresar 1 function preguntar(){ Full Screen 2 var xmlhttp = getXMLHttpObject(); 3 if(!xmlhttp){ 4 alert("No consegui el objeto XMLHttpObject"); Cerrar 5 }else{ 6 xmlhttp.open("GET","fichero.txt",true); Abandonar
  • 7 xmlhttp.onreadystatechange = function(){ 8 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 9 document.getElementById("texto").innerHTML = xmlhttp.responseText; 10 } 11 }; Introducci´n al cursillo o 12 xmlhttp.send(null); Introducci´n a las RIA o 13 } Google Web Toolkit 14 } Referencias Ejercicio P´gina www a • Primer ejercicio! P´gina de Abertura a – Necesitamos apache2 y PHP instalado: ∗ apt-get install apache2 libapache2-mod-php5 – Creamos un directorio /var/www/cursillo/ y nos damos permisos sobre ´l e ∗ sudo mkdir /var/www/cursillo ∗ sudo chmod 777 /var/www/cursillo P´gina 26 de 80 a – Cogemos los ejemplos de c´digo codigo/introduccion/ajax/02/ y los copiamos al direc- o torio /var/www/cursillo Regresar – Comprobamos que sumador.php funciona: ∗ Si nos metemos en http://localhost/cursillo/sumador.php?num1=5&num2=6 nos de- Full Screen ber´ salir un 11 ıa – Editamos ejercicio.html Cerrar – Objetivo: que cuando el usuario haga click sobre Calcular suma, se invoque al servidor con los valores que el usuario haya escrito, y se muestre la respuesta. Abandonar
  • ∗ Bien utilizando responseText (invocando sumador.php?num1=5&num2=6) ∗ Bien utilizando responseXML (invocando sumador.php?num1=5&num2=6&mode=xml) – Soluci´n → ejercicio-solucion.html o Introducci´n al cursillo o Introducci´n a las RIA o Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 27 de 80 a Regresar Full Screen Cerrar Abandonar
  • 2.2.3.4. Ventajas y desventajas de AJAX • Ventajas – Existen muchos y diferentes navegadores para diferentes plataformas Introducci´n al cursillo o – Estos navegadores generalmente ya soportan DHTML Introducci´n a las RIA o – En el momento en que soporten XMLHttpRequest. . . la aplicaci´n AJAX funcionar´ o a Google Web Toolkit – Existen navegadores incuso para dispositivos m´viles o Referencias ∗ Opera Mobile P´gina www a ∗ Nokia Open Source Brower ∗ Internet Explorer Mobile. . . P´gina de Abertura a – De esta manera, tu aplicaci´n AJAX funcionar´ en m´ltiples plataformas sin necesidad de o a u instalar ning´n tipo de plug-in u • Inconvenientes – Hereda todos los problemas de DHTML (dif´ que algo funcione en diferentes navegadores. . . ) ıcil – No es una plataforma tan potente como las anteriores (audio, video, conexiones. . . ) P´gina 28 de 80 a – Accesibilidad Regresar Full Screen Cerrar Abandonar
  • 2.2.3.5. Google Gears • Google tambi´n ha publicado herramientas como Google Gears e • Google Gears es un plug-in que se instala en el navegador Introducci´n al cursillo o – Est´ orientado a que la aplicaci´n pueda ejecutarse estando desconectada del servidor a o Introducci´n a las RIA o – Software libre: New BSD License Google Web Toolkit Referencias – Est´ disponible en varios navegadores (Microsoft Internet Explorer, Mozilla Firefox, Safari, a Google Chrome. . . ) P´gina www a – Proporciona un API JavaScript para: ∗ Cach´ de elementos (im´genes, JavaScript, HTML. . . ) e a P´gina de Abertura a ∗ Geolocalizaci´n o ∗ Uso bases de datos SQLite ∗ Soporte de threading (Worker Pool) • Ejemplo: – Tutorial P´gina 29 de 80 a – Google Reader utiliza Google Gears para soporte de la nueva funcionalidad offline Regresar Full Screen Cerrar Abandonar
  • 2.2.4. Otras tecnolog´ ıas • Nuevas tecnolog´ de RIAs est´n apareciendo en el mercado ıas a – Microsoft anuncia Microsoft Silverlight Introducci´n al cursillo o – Sun Microsystems anuncia JavaFX Introducci´n a las RIA o • Adem´s, otras empresas est´n integrando el desarrollo de RIAs en el Escritorio a a Google Web Toolkit Referencias – Google dispone de Google Gadgets – Adobe anuncia Adobe AIR (antes Adobe Apollo) P´gina www a P´gina de Abertura a P´gina 30 de 80 a Regresar Full Screen Cerrar Abandonar
  • 2.2.5. Comparativa de las tecnolog´ ıas • ¿Qu´ tecnolog´ es mejor? e ıa – Dada una caja de herramientas, ¿Qu´ destornillador es mejor? → depende de la situaci´n e o Introducci´n al cursillo o – AJAX permite desarrollar RIAs que funcionan sin ninguna necesidad de plug-ins, etc., en Introducci´n a las RIA o diferentes navegadores Google Web Toolkit ∗ Siempre y cuando utilicemos librer´ que est´n soportadas en todos estos navegadores ıas e Referencias – Si se necesitan caracter´ ısticas m´s avanzadas (audio, video. . . ), Adobe Flash puede ser la a soluci´n o P´gina www a – Java tambi´n puede resultar util para caracter´ e ´ ısticas muy concretas (recordemos el ejemplo de Facebook) P´gina de Abertura a • Otra opci´n → comunicar las diferentes tecnolog´ o ıas – Java puede invocar funciones JavaScript y desde JavaScript se pueden invocar m´todos de e Java – Adobe Flash puede invocar funciones JavaScript y desde JavaScript se pueden invocar m´todos e de Adobe Flash P´gina 31 de 80 a – Ejemplos: ∗ GMail est´ desarrollado en AJAX a Regresar · Pero para la funcionalidad de chatear, quieren permitir que haya sonidos · AJAX no soporta audio, ¿qu´ hacer? e Full Screen · Soluci´n → Un peque˜o applet incrustado no visible desarrollado en Adobe Flash que o n proporciona la funcionalidad de sonido y es invocado desde AJAX Cerrar · Si el usuario no tiene Adobe Flash, la aplicaci´n funciona o · Si el usuario tiene Adobe Flash, adem´s cuenta con sonidos en el chat a Abandonar
  • ∗ Google Maps est´ desarrollado en AJAX a · Hace pocas semanas Google estren´ Google Street View o Para ello, incrustan otro applet en Adobe Flash ∗ Si quisi´ramos funcionalidades que Java provee, podr´ e ıamos utilizar Java desde JavaScript Introducci´n al cursillo o ∗ Incluso si una misma funcionalidad fuera proporcionada tanto por Java como por Adobe Introducci´n a las RIA o Flash, podr´ implementarse de manera que din´micamente se utilizase la tecnolog´ que ıa a ıa Google Web Toolkit estuviese instalada Referencias P´gina www a P´gina de Abertura a P´gina 32 de 80 a Regresar Full Screen Cerrar Abandonar
  • 2.2.5.1. Integrando Java con JavaScript • Para llamar a JavaScript desde Java utilizaremos: 1 getAppletContext().showDocument(new URL("javascript:funcionJS()")); Introducci´n al cursillo o Introducci´n a las RIA o • Para llamar a Java desde JavaScript utilizaremos: Google Web Toolkit 1 <APPLET CODE="IntegradorJS.class" WIDTH="500" HEIGHT="150" Referencias 2 id="integrador"> 3 </APPLET> 4 <script type="text/javascript"> P´gina www a 5 function funcionJS(){ 6 alert(integrador.getVariable()); P´gina de Abertura a 7 integrador.setVariable("variable modificada"); 8 alert(integrador.getVariable()); 9 } 10 </script> • Ejemplo: codigo/introduccion/integracion/java ajax/ P´gina 33 de 80 a Regresar Full Screen Cerrar Abandonar
  • 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 Introducci´n al cursillo o • AJAX ASP.NET Introducci´n a las RIA o Google Web Toolkit – Antes llamado Atlas Referencias – Incorpora un editor WYSIWYG, con Drag and Drop – Permite hacer aplicaciones Javascript desde .NET P´gina www a P´gina de Abertura a P´gina 35 de 80 a Regresar Full Screen Cerrar Abandonar
  • • OpenLaszlo – Genera Flash, DHTML, Ajax – Open Source Introducci´n al cursillo o – Programaci´n en XML y JavaScript o Introducci´n a las RIA o – Adem´s permite crear animaciones, tiene integraci´n con SOAP... a o Google Web Toolkit – Previsto J2ME y SVG en un futuro. Referencias P´gina www a P´gina de Abertura a P´gina 36 de 80 a Regresar Full Screen Cerrar Abandonar
  • • GWT – Abstracci´n al programador de AJAX, JavaScript y HTML o – Programaci´n en Java 6 o Introducci´n al cursillo o – Licencia OpenSource (Apache Public License 2.0) Introducci´n a las RIA o – Ayuda en la depuraci´n del c´digo o o Google Web Toolkit – Componentes de la interfaz din´micos y reutilizables a Referencias P´gina www a P´gina de Abertura a P´gina 37 de 80 a Regresar Full Screen Cerrar Abandonar
  • 3. Google Web Toolkit 3.1. Introducci´n o • GWT → Google Web Toolkit Introducci´n al cursillo o • Toolkit de desarrollo en AJAX Introducci´n a las RIA o Google Web Toolkit – Desarrollado por Google Referencias – Licencia Apache 2.0 (Software Libre seg´n la FSF y Open Source seg´n la OSI) u u P´gina www a – Desarrollado en Java – Desplegado sobre un contenedor de Servlets P´gina de Abertura a – El cliente lo desarrollas. . . en Java! ∗ GWT te ofrece una API con widgets tradicionales como objetos Java ∗ Puedes interactuar con JavaScript mediante JSNI (JavaScript Native Interface) ∗ El compilador de GWT compilar´ el c´digo Java a JavaScript a o – Muy centrado en DHTML ∗ Se puede integrar en p´ginas web existentes a P´gina 38 de 80 a · Incluso escritas en otras plataformas como PHP ∗ No hay tantas capas de abstracci´no Regresar · M´s eficiente que otras tecnolog´ a ıas ∗ Estilos CSS Full Screen ∗ Podemos integrar el resultado con tecnolog´ Adobe Flash, Applets Java. . . ıas Cerrar – Lo “´nico” que hace es facilitar (mucho) el trabajar con DHTML u ∗ No tocas JavaScript → trabajas en tu IDE con Java Abandonar
  • ∗ No te preocupas de la plataforma → el toolkit se encarga de renderizarse bien en cada navegador ∗ El propio compilador compila el proyecto para cada navegador y cada idioma (siendo cada combinaci´n de idioma/navegador una permutaci´n) o o Introducci´n al cursillo o Introducci´n a las RIA o Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 39 de 80 a Regresar Full Screen Cerrar Abandonar
  • Introducci´n al cursillo o Introducci´n a las RIA o Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 40 de 80 a Regresar Full Screen Aplicaci´n GWT ejecut´ndose en Android G1 o a Cerrar Abandonar
  • Introducci´n al cursillo o Introducci´n a las RIA o Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 41 de 80 a Regresar Aplicaci´n GWT ejecut´ndose en Opera 9.5b en Windows Mobile o a Full Screen Cerrar Abandonar
  • Introducci´n al cursillo o Introducci´n a las RIA o Google Web Toolkit Referencias P´gina www a • Una aplicaci´n t´ o ıpica con Google Web Toolkit tiene tres partes: P´gina de Abertura a – Parte cliente → Desarrollado en Java 6 ∗ El compilador de GWT lo compilar´ a JavaScript a ∗ S´lo podemos utilizar la API de GWT o · No podemos utilizar .jar externos · De la API de Java s´lo podemos utilizar un peque˜o subconjunto o n P´gina 42 de 80 a · java.util.Random → com.google.gwt.user.client.Random – Parte p´blica → Ficheros p´blicos u u Regresar ∗ Im´genes, sonidos. . . a – Parte servidor → C´digo Java del Servidor o Full Screen ∗ C´digo que se ejecuta en el servidor o Cerrar ∗ S´lo necesaria cuando va a haber interacci´n entre cliente y servidor (AJAX) o o ∗ Este c´digo s´ puede ejecutar las librer´ que queramos o ı ıas Abandonar
  • 3.2. Instalaci´n de GWT o 3.2.1. Instalaci´n del Toolkit o • Primero necesitamos descargar Google Web Toolkit: Introducci´n al cursillo o – Secci´n Download o Introducci´n a las RIA o – Versi´n actual: GWT 1.7 o Google Web Toolkit Referencias • Descomprimimos gwt-linux-1.7.0.tar.bz2 y creamos en su interior una carpeta llamada cursillo – En ella pondremos los ejemplos que utilicemos P´gina www a • Nuestro primer proyecto: P´gina de Abertura a – Primero crearemos el proyecto: – ../webAppCreator -out HolaMundo es.deusto.eghost.holamundo.Holamundo – Como vemos, se genera la estructura de directorios: ∗ src/es/deusto/eghost/holamundo (ficheros fuente) · client (c´digo Java 6 -GWT- parte cliente) o P´gina 43 de 80 a · server (c´digo Java 6 de la parte servidora -sin restricciones del runtime-) o ∗ war (Estructura cl´sica de un WAR para el despliegue del proyecto) a Regresar ∗ build.xml (Fichero Ant para compilar y ejecutar el proyecto) – Compilamos el proyecto utilizando Ant Full Screen ∗ ant build (en el directorio donde se encuentra el fichero build.xml) – Ejecutamos el proyecto en modo hosted Cerrar ∗ ant hosted (en el directorio donde se encuentra el fichero build.xml) – Esto inicia la aplicaci´n en modo Java (no se ejecuta c´digo Javascript) o o Abandonar
  • ∗ Lanza primero un contenedor de Servlets (Jetty) ∗ Despu´s lanza un navegador web (basado en mozilla) e ∗ Permite la depuraci´n de la aplicaci´n o o Introducci´n al cursillo o Introducci´n a las RIA o Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 44 de 80 a • Despliegue de la aplicaci´n o Regresar – Generar fichero WAR ∗ ant war Full Screen – El fichero .war obtenido puede ser desplegado en un contenedor de aplicaciones. – Problema: interacci´n con el servidor o Cerrar ∗ GWT ofrece adem´s un sistema de RPC sencillo de usar entre el cliente y el servidor a ∗ Este servicio s´ exigir´ el uso de un contenedor de servlets como Tomcat ı a Abandonar
  • ∗ En cualquier caso, el c´digo generado se puede desplegar en otro servidor (apache2 con o PHP, por ejemplo) 3.2.2. Instalaci´n del Toolkit y Plugin en Eclipse o Introducci´n al cursillo o • Creando proyectos desde Eclipse Introducci´n a las RIA o – Tambi´n vamos a descargar Eclipse e Google Web Toolkit Referencias ∗ Eclipse IDE for Java Developers de Eclipse Ganymede SR2 ∗ Descomprimimos eclipse-java-ganymede-SR2-linux-gtk.tar.gz P´gina www a – Ahora tenemos que instalar el plugin de GWT para Eclipse – http://code.google.com/intl/es-ES/appengine/docs/java/tools/eclipse.html P´gina de Abertura a ∗ La actualizaci´n se realiza utilizando el m´dulo de actualizaci´n de Eclipse o o o ∗ Hay que ir a Sofware Updates → Available Sofware → Add Site ∗ A˜adir como fuente: http://dl.google.com/eclipse/plugin/3.4 n ∗ Tenemos que marcar la opci´n Google Plugin for Eclipse 3.4 o ∗ Opcionalmente podemos marcar tambi´n Google Web Toolkit SDK 1.7.0 si no hemos e descargado ya el kit de desarrollo de GWT P´gina 45 de 80 a ∗ Pulsar la opci´n Install y seguir el proceso de instalaci´n aceptando las licencias. o o ∗ Si se ha optado por no instalar el kit de desarrollo porque ya lo hab´ıamos descargado es Regresar necesario configurar el plugin para que encuentre el kit. · Hay que ir Preferences→ Google → Web Toolkit y a˜adir la ruta al directorio donde n Full Screen se ha descargado el Toolkit anteriormente. – Creaci´n de un proyecto o Cerrar ∗ New → Web Application Project ∗ Indicar un nombre para el proyecto (p.e. HolaMundoEclipse) Abandonar
  • ∗ y un paquete (p.e es.deusto.ghost.holamundoeclipse) ∗ Si no hemos instalado el plugin para Google App Engine debemos desmarcar esa opci´n o – Ya podemos trabajar con nuestro proyecto como cualquier otro desarrollo de Eclipse – Para ejecutarlo hay que seleccionar Run As → Web Application Introducci´n al cursillo o Introducci´n a las RIA o Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 46 de 80 a Regresar Full Screen Cerrar Abandonar
  • • Importando proyectos creados con webAppCreator – Los proyectos de GWT creados en la l´ ınea de comandos pueden ser importados en Eclipse directamente si necesidad de utilizar el plugin para Eclipse de GWT – Para importar un proyecto ya creado hay que ir a File → Import, seleccionar la opci´n General o Introducci´n al cursillo o → Existing Projects into Workspace y posteriormente el directorio creado por webAppCreator Introducci´n a las RIA o – Sin embargo, en este caso el proyecto no ser´ gestionado por el plugin por lo que deber´ ser a a Google Web Toolkit ejecutado desde la l´ ınea de comandos. Referencias – La utilidad de poder importar un proyecto en Eclipse es poder utilizar las facilidades de edici´n o P´gina www a que proporciona. P´gina de Abertura a P´gina 47 de 80 a Regresar Full Screen Cerrar Abandonar
  • • Eliminado ficheros innecesarios webAppCreator – La applicaci´n webAppCreator crea ficheros de muestra que puede no ser necesarios para o nuestra aplicaci´n o – Si nuestra aplicaci´n no tiene parte en el servidor podemos borrar o Introducci´n al cursillo o ∗ El directorio server de nuestro proyecto. Introducci´n a las RIA o Google Web Toolkit ∗ Los ficheros GreetingServiceAsync.java y GreetingService.java del directorio client Referencias ∗ Adem´s, en el fichero web.xml del directorio WEB-INF es necesario eliminar las referencias a a P´gina www a 1 <servlet> 2 <servlet-name>greetServlet</servlet-name> P´gina de Abertura a 3 <servlet-class>es.deusto.eghost.server.GreetingServiceImpl</servlet-class> 4 </servlet> 5 6 <servlet-mapping> 7 <servlet-name>greetServlet</servlet-name> 8 <url-pattern>/i18example/greet</url-pattern> 9 </servlet-mapping> P´gina 48 de 80 a Regresar Full Screen Cerrar Abandonar
  • 3.2.3. Integraci´n de los Widgets en HTML o • GWT facilita el desarrollo de aplicaciones visuales RIA gracias a la introducci´n de una librer´ o ıa gr´fica que proporciona widgets y gesti´n de eventos. a o • Esta librer´ es muy similar a otras que existen en lenguajes de programaci´n, por ejemplo, SWING ıa o Introducci´n al cursillo o en Java. Introducci´n a las RIA o Google Web Toolkit • GWT se ha dise˜ado para permitir la inclusi´n de los widgets en cualquier p´gina HTML n o a Referencias • A la hora de desarrollar una aplicaci´n con GWT hay que tener en cuenta la separaci´n que se o o P´gina www a realiza entre: – La p´gina web anfitri´n (host page) que est´ desarrollada en HTML y donde ser´n incluidos a o a a P´gina de Abertura a mediante Javascript los componentes visuales de la aplicaci´n o – El c´digo Java correspondiente a la aplicaci´n visual, que ser´ compilado y convertido a o o a Javascript para ser incluido en una p´gina web anfitri´n a o • Durante la ejecuci´n del c´digo Javascript en el navegador del cliente se realiza un procesamiento o o de los elementos HTML de la p´gina web anfitri´n para incluir los elementos visuales GWT. a o • El proceso de substituci´n se realiza de la siguiente manera o P´gina 49 de 80 a – En la p´gina anfitri´n se establen identificadores para aquellos elementos donde se van a incluir a o Regresar los widgets 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 2 <html> Full Screen 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> Cerrar 5 <link type="text/css" rel="stylesheet" href="HolaMundo.css"> 6 <title>Web Application Starter Project</title> Abandonar
  • 7 <script type="text/javascript" language="javascript" src="holamundo/ holamundo.nocache.js"></script> 8 </head> 9 <body> 10 <h1>Primer Proyecto con Google Web Toolkit</h1> Introducci´n al cursillo o 11 <table align="center"> Introducci´n a las RIA o 12 <tr> Google Web Toolkit 13 <td id="slot1"></td> 14 <td id="slot2"></td> Referencias 15 </tr> 16 </table> P´gina www a 17 </body> 18 </html> P´gina de Abertura a – En el c´digo Java se indicar´ que widget gr´fico se incluir´ en un elemento HTML concreto o a a a 1 final Button button = new Button("Click me"); 2 final Label label = new Label(); 3 4 ... 5 P´gina 50 de 80 a 6 RootPanel.get("slot1").add(button); 7 RootPanel.get("slot2").add(label); Regresar Full Screen Cerrar Abandonar
  • 3.2.4. Desarrollo de Interfaces de Usuario • La construcci´n de interfaces gr´ficas con GWT se realiza de manera muy similar a SWT o Swing. o a • Como estos componentes visuales son posteriormente convertidos a Javascript, las particularidades de cada plataforma quedan ocultas al desarrollador Introducci´n al cursillo o Introducci´n a las RIA o • Los aspectos principales para la construcci´n de interfaces gr´ficas con GWT son los siguientes: o a Google Web Toolkit Referencias – Widget: son los elementos visuales de la interfaz. Proporcionan la visualizaci´n de los datos y o la interacci´n mediante la inclusi´n de manejadores de eventos. GWT proporciona una librer´ o o ıa de elementos visuales m´s comunes a P´gina www a – Eventos: permiten capturar la interacci´n del usuario para realizar su posterior tratamiento. o Existe el concepto de manejador de evento EventHandler que permite el registro de funciones P´gina de Abertura a para la gesti´n de los eventos producidos. o – Panel: similar al concepto de Layout en Java. Permiten controlar la distribuci´n de los widgets o en pantalla. – Estilo visual: se consigue mediante la aplicaci´n de hojas de estilo CSS. o • Una galer´ de los elementos gr´ficos disponibles puede consultarse aqu´ ıa a ı P´gina 51 de 80 a • Por otro lado, la referencia Java contiene toda la informaci´n disponible sobre los elementos gr´ficos o a existentes. Regresar Full Screen Cerrar Abandonar
  • 3.2.5. Widgets • Los pasos para a˜adir un componente visual a nuestra aplicaci´n son los siguientes: n o 1. Crear una instancia del componente que queremos a˜adir n Introducci´n al cursillo o 1 Button button = new Button("Click me"); Introducci´n a las RIA o Google Web Toolkit 2. A˜adir la gesti´n de eventos para el componente. En este caso, al tratarse de un bot´n n o o podemos capturar el evento que se produce cuando el usuario hace click encima Referencias 1 . . . P´gina www a 2 button.addClickHandler(new ClickHandler() { 3 public void onClick(ClickEvent event) { 4 // Realizar el tratamiento que corresponda P´gina de Abertura a 5 } 6 }); 3. En el ejemplo anterior se a˜ade un manejador de evento para el bot´n mediante la funci´n n o o addClickHandler. En este caso se est´ utilizando una implementaci´n an´nima de la interfaz. a o o Sin embargo, como en Java, tambi´n es posible hacerlo de la siguiente manera, mediante la e implementaci´n de la interfaz ClickHandler o P´gina 52 de 80 a 1 . . . 2 public class HolaMundo implements EntryPoint, ClickHandler { Regresar 3 . . . 4 public void onClick(ClickEvent event) { Full Screen 5 // Realizar el tratamiento que corresponda 6 } 7 Cerrar 8 button.addClickHandler(this); Abandonar
  • 3.2.6. Paneles • Los paneles permiten controlar la distribuci´n de los elementos en la pantalla. Existen diferentes o implementaciones de paneles en la librer´ gr´fica. Cada uno de ellos distribuyen los elementos de ıa a una manera concreta. Introducci´n al cursillo o • Por ejemplo, DockPanel permite a˜adir varios elementos gr´ficos en los bordes de un panel. n a Introducci´n a las RIA o Google Web Toolkit Referencias P´gina www a P´gina de Abertura a • Los paneles son contenedores por lo que es posible a˜adir cualquier otro elementos gr´ficos (incluso n a otros paneles) dentro de ellos. P´gina 53 de 80 a 1 Panel dockPanel = new DockPanel(); 2 Button button = new Button("Click me!"); Regresar 3 Label label = new Label("Hello!"); 4 5 panel.add(label, DockPanel.NORTH); Full Screen 6 panel.add(button, DockPanel.EAST); Cerrar Abandonar
  • 3.2.7. Aplicando CSS • El control del aspecto visual de la aplicaci´n se realiza mediante la aplicaci´n de hojas de estilo o o CSS (Cascade Style Sheet) • Los componentes visuales tienen asociado una serie de nombres de estilo que permiten aplicarle las Introducci´n al cursillo o hojas CSS. El conjunto de estilos soportados por un elemento visual est´ recogido en la referencia a Introducci´n a las RIA o de cada componente visual. Por ejemplo, todos los botones tienen un estilo para indicar el tama˜o n Google Web Toolkit de la fuente llamado font-size. Referencias 1 .gwt-Button { font-size: 150%; } P´gina www a • Si queremos cambiar el estilo de un unico bot´n primero debemos asignarle un identificador unico ´ o ´ P´gina de Abertura a dentro del DOM de HTML. • Para hacer esto desde Java existe un m´todo que poseen todos los componentes visuales que permite e especificar un identificador. • En este caso, estamos dando el identificador miBoton a un bot´n de la aplicaci´n. o o 1 Button b = new Button(); 2 DOM.setElementAttribute(b.getElement(), "id", "miBoton") P´gina 54 de 80 a • Una vez que un elemento gr´fico tiene un identificador podemos modificar unicamente su estilo, a Regresar incluyendo en la hoja CSS a aplicar la instrucci´n o 1 #miBoton { font-size: 100%; } Full Screen • Para que la p´gina CSS se aplique en la p´gina anfitri´n es necesario incluir una referencia. Durante a a o Cerrar la creaci´n de un proyecto con el webAppCreator se genera tambi´n una hoja de estilo b´sica que o e a se puede utilizar como partida. Abandonar
  • 1 <link type="text/css" rel="stylesheet" href="HolaMundo.css"> • Para aprender CSS http://www.w3.org/Style/CSS/ y http://www.w3schools.com/css/ Introducci´n al cursillo o Introducci´n a las RIA o Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 55 de 80 a Regresar Full Screen Cerrar Abandonar
  • 3.3. Ejercicios 3.3.1. Ejercicio 1 • El ejercicio 1 consiste en el hola mundo ya explicado. Introducci´n al cursillo o • El c´digo est´ disponible en codigo/gwt/ejemplos/01 holamundo o a Introducci´n a las RIA o Google Web Toolkit 3.3.2. Ejercicio 2 Referencias • Widgets y Eventos de Google Web Toolkit. P´gina www a • La creaci´n de interfaces es muy sencilla, la programaci´n de la interfaz se realiza de forma similar o o a Java, pero utilizando las librer´ propias de GWT. ıas P´gina de Abertura a • Estas clases se encuentra en el paquete: com.google.gwt.user.client.ui • Dentro de la librer´ gr´fica de GWT existen muchos objetos visuales que podemos utilizar a la hora ıa a de construir nuestras aplicaciones. – Para situar los objetos en pantalla es necesario utilizar los Panels que permiten distribuir los elementos. P´gina 56 de 80 a – Su utilizaci´n es igual a los panels de Swing o AWT en Java. o – Los eventos en GWT se programan igual que en Java. Regresar – Por ejemplo, si queremos responder a un evento de click sobre un Button deberemos crear una clase que implemente la interfaz ClickListener y a˜adir el escuchador al evento del bot´n n o Full Screen utilizando el metodo addClickListener(...); • Referencia widgets GWT UI Library Reference Cerrar • M´s informaci´n sobre Eventos y Listeners Events and Listeners a o Abandonar
  • 3.4. Internacionalizaci´n - I18N o • Google Web Toolkit proporciona una serie de utilidades para la internacionalizaci´n de las aplica- o ciones. • La idea principal de la internacionalizaci´n es separar la aplicaci´n de los strings que utiliza de forma o o Introducci´n al cursillo o que pueda servirse en varios idiomas sin realizar cambios en el c´digo o Introducci´n a las RIA o Google Web Toolkit • Existen varios m´todos para llevar esto a cabo: e Referencias – Internacionalizaci´n est´tica. (Constants y Messages). Es el m´todo m´s sencillo y es utilizado o a e a normalmente en aquellas aplicaciones que se comienzan desde cero con Google Web Toolkit. P´gina www a ∗ Constants se utiliza para internacionalizar strings est´ticos. ”Could not read file.”; a P´gina de Abertura a ∗ Messages permite pasar par´metros a la hora de realizar la internacionalizaci´n. ”Could a o not read file {0}” ∗ Las ventajas de este m´todo es que los strings pueden ser substituidos en tiempo de e compilaci´n y adem´s es posible hace comprobaciones de los par´metros. o a a – Internacionalizaci´n din´mica basada en un objeto Diccionario. Sirve para integrar GWT con o a un sistema de internacionalizaci´n proporcionado por la p´gina host donde se encuentra la o a aplicaci´n GWT. o P´gina 57 de 80 a Regresar Full Screen Cerrar Abandonar
  • 3.4.1. Internacionalizaci´n est´tica o a • Para utilizar el sistema basado en strings est´ticos hay que realizar los siguientes pasos: a – Crear una interfaz Java que extienda la interfaz Messages o Constants de GWT dependiendo de si queremos utilizar mensajes con par´metros o no. a Introducci´n al cursillo o Introducci´n a las RIA o – Esta interfaz deber´ definir aquellos m´todos que ser´n llamados para proporcionar los strings a e a Google Web Toolkit internacionalizados a la aplicaci´n. o Referencias 1 package es.deusto.eghost.client; 2 P´gina www a 3 import com.google.gwt.i18n.client.Messages; 4 5 public interface MyMessages extends Messages { P´gina de Abertura a 6 7 public String helloWorld(String from); 8 } – Crear uno o varios ficheros de propiedades que contengan el texto a mostrar para los idiomas correspondientes. Los ficheros deben llamarse igual que la interfaz creada anteriormente y terminados con un gui´n bajo y el identificador del idioma al que corresponden. o P´gina 58 de 80 a – La propiedad Java tiene que llamarse igual que el m´todo con el que se corresponda en la e interfaz Java creada. Regresar – Version en ingl´s MyMessages.properties : e Full Screen 1 helloWorld = Hello World from {0}! – Version en espa˜ol MyMessages es.properties : n Cerrar 1 helloWorld = !Hola Mundo desde {0}! Abandonar
  • – NOTA IMPORTANTE: Los ficheros de propiedades de internacionalizaci´n deben ser guarda- o dos en UTF-8 para que puedan ser cargados correctamente por las clases de Google Web Toolkit. – Para acceder a las propiedades internacionalizadas desde el c´digo Java hay que realizar las o Introducci´n al cursillo o siguientes modificaciones: Introducci´n a las RIA o 1 import com.google.gwt.core.client.GWT; Google Web Toolkit Referencias 1 final MyMessages myMessages = (MyMessages) GWT.create(MyMessages.class); 2 label.setText(myMessages.helloWorld("ESIDE")); P´gina www a 1 <module> 2 . . . P´gina de Abertura a 3 <!-- other inherited modules, such as 4 com.google.gwt.user.User --> 5 6 <inherits name="com.google.gwt.i18n.I18N"/> 7 <!-- additional module settings --> 8 <extend-property name="locale" values="es"/> 9 </module> P´gina 59 de 80 a – En ejecuci´n, para acceder a la p´gina localizada en espa˜ol hay que a˜adir al final el par´metro o a n n a Regresar ?locale=es Full Screen Cerrar Abandonar
  • 3.4.2. I18N mediante Constantes con b´squeda u • El m´todo anterior s´lo sirve si los mensajes que se van a monstrar en la interfaz son est´ticos. Si e o a queremos utilizar en un punto de la aplicaci´n un mensaje internacionalizado que depende de alg´n o u resultado tenemos que utilizar otro m´todo. e Introducci´n al cursillo o • Existe una variante de la localizaci´n utilizando Constants que permite obtener las propiedades por o Introducci´n a las RIA o medio de su nombre. Google Web Toolkit Referencias • Se utiliza de forma parecida al ejemplo anterior, pero en este caso la interfaz Java debe extender la interfaz de import com.google.gwt.i18n.client.ConstantsWithLookup. P´gina www a • La interfaz as´ construida hereda una serie de m´todos que permiten obtener las propiedades de ı e forma din´mica mediante su nombre. a P´gina de Abertura a 1 final MyConstantsWithLookup myConstants = 2 (MyConstantsWithLookup) GWT.create(MyConstantsWithLookup.class); 3 label.setText(myConstants.getString("helloWorld"); • Este m´todo es util si se quiere acceder a un String internacionalizado en funci´n de valores calcu- e ´ o lados en tiempo de ejecuci´n de la aplicaci´n. Por ejemplo, si se realiza en funci´n de las entradas o o o P´gina 60 de 80 a del usuario. Regresar Full Screen Cerrar Abandonar
  • 3.4.3. Gesti´n autom´tica de I18N o a • Las ultimas versiones de GWT incluyen una herramienta que ayuda en la gesti´n de la interna- ´ o cionalizaci´n est´tica. o a • Permite la gesti´n internacionalizaci´n est´tica mediante el uso de Constants, Messages y Con- o o a Introducci´n al cursillo o stantsWithLookup Introducci´n a las RIA o Google Web Toolkit • Los pasos para utilizar esta herramienta son los sigueientes: Referencias – Crear un proyecto normalmente utilizando la herramienta webAppCreator P´gina www a – Utilizar la herramienta i18nCreator para crear el script, las interfaces y los ficheros de propiedades. – Por ejemplo, si el proyecto se ha creado en la carpeta TestI18N dentro del paquete es.deusto.eghost.TestI18N P´gina de Abertura a se puede ejecutar la siguiente instrucci´n para crear los ficheros o ∗ ../i18NCreator -out TestI18N es.deusto.eghost.TestI18N – Por defecto crea internacionalizaci´n de tipo Constants aunque existen opciones durante la o llamada a la herramienta para generar los otros tipos – Como resultado se crean las interfaces java correspondientes junto con los ficheros de propiedades correspondientes adem´s de un script para regenerar las interfaces Java . As´ cuando se realiza a ı, P´gina 61 de 80 a un cambio en el fichero de propiedades se puede regenerar las interfaces ejecutando el script Regresar Full Screen Cerrar Abandonar
  • 3.4.4. I18N mediante diccionarios • La utilizaci´n de diccionarios permite obtener la internacionalizaci´n (o cualquier otro conjunto de o o datos) de un objeto JavaScript situado en la p´gina anfitriona donde se encuentra Google Web a Toolkit. Puede usarse para pasar datos entre la p´gina anfitriona y la aplicaci´n desarrollada con a o Introducci´n al cursillo o GWT. Introducci´n a las RIA o • Por ejemplo, en la p´gina host puede incluirse dentro del c´digo Javascript un diccionario de a o Google Web Toolkit acr´nimos. o Referencias 1 var Acronimos = { 2 GWT: "Google Web Toolkit", P´gina www a 3 ESIDE: "Escuela Superior de Ingenieria de Deusto" 4 EGHOST: "ESIDE’s GNU Hi-tech and Open Source Team" P´gina de Abertura a 5 }; • Desde nuestra aplicaci´n GWT podr´ o ıamos acceder a las parejas atributo-valor a trav´s del uso de e un diccionario. 1 Dictionary acronyms = Dictionary.getDictionary("Acronimos"); 2 P´gina 62 de 80 a 3 String eghost = theme.get("EGHOST"); 4 String gwt = theme.get("GWT"); 5 String eside = theme.get("ESIDE"); Regresar 6 } Full Screen Cerrar Abandonar
  • 3.5. Comunicaci´n con el servidor o • GWT ofrece de serie una API para hacer uso sencillo de comunicaci´n con el servidor a trav´s de o e sus mecanismos de RPC – El protocolo de comunicaci´n no es ning´n protocolo est´ndar (SOAP. . . ) o u a Introducci´n al cursillo o Introducci´n a las RIA o ∗ Protocolo propio optimizado Google Web Toolkit – Comunica el cliente generado con su servlet Java Referencias ∗ Paso de par´metros complejos (objetos Java) sin problemas a – Muy sencillo de usar desde Java P´gina www a – Para funcionar, necesita tener un contenedor de servlets ejecut´ndose a P´gina de Abertura a • GWT adem´s ofrece de serie una API para utilizar JSON a – Permite utilizar aplicaciones que ofrezcan JSON ∗ Tienen que estar en el mismo servidor – Desacopla GWT de contenedores de servlets ∗ Posible desplegar una aplicaci´n GWT que interact´a con el servidor en otras plataformas o u P´gina 63 de 80 a – Desventaja → m´s complicado que trabajar con el RPC de GWT a Regresar • GWT adem´s ofrece una API para utilizar XMLHttpRequests a – Tambi´n desacopla GWT de contenedores de servlets e Full Screen – El formato queda por tanto a elecci´n del desarrollador o – Desventaja → m´s complicado que trabajar con el RPC de GWT y con JSON a Cerrar • Como dijimos ayer, GWT ofrece adem´s la posibilidad de desarrollar tus propios controles a Abandonar
  • – Podr´ implementar tu propia comunicaci´n con el servidor ıas o ∗ Incluso puedes interactuar con Java o Flash para utilizar sockets ∗ Encarg´ndote t´ de comprobar que funcione en todos los navegadores. . . a u Introducci´n al cursillo o Introducci´n a las RIA o Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 64 de 80 a Regresar Full Screen Cerrar Abandonar
  • 3.5.1. RPC de GWT Introducci´n al cursillo o Introducci´n a las RIA o Google Web Toolkit Referencias P´gina www a P´gina de Abertura a P´gina 65 de 80 a Regresar Copyright Google Inc. Full Screen • Hagamos nuestro primer servicio RPC Cerrar codigo/gwt/ejemplos/04 RPC 1. Creamos el interfaz del servicio: Abandonar
  • – El interfaz del servicio contiene los m´todos que vamos a poder pedir al servidor e – Es un interfaz Java que pondremos en el lado del cliente – Debe ser interfaz hijo de RemoteService – es.deusto.eghost.gwt.rpc.client.ServicioCalculadora Introducci´n al cursillo o 2. Implementamos ese interfaz del servicio en el lado del servidor: Introducci´n a las RIA o – Esta implementaci´n es la que el cliente va a invocar cuando pida el servicio o Google Web Toolkit Referencias – Esta implementaci´n estar´ en el lado del servidor (por ejemplo, paquete server) o a ∗ A diferencia del paquete client, el paquete server no tiene por qu´ llamarse as´ e ı P´gina www a – Debe ser clase hija de RemoteServiceServlet e implementar el interfaz anterior ∗ La clase RemoteServiceServlet de hecho desciende de HttpServlet P´gina de Abertura a – es.deusto.eghost.gwt.rpc.server.ServicioCalculadoraImpl 3. Creamos un interfaz parecido: – AJAX es intr´ınsecamente As´ ıncrono (AJAX) – Al ser as´ ıncrono, las funciones no devolver´n un resultado a – A la funci´n le pasaremos un par´metro m´s, un AsyncCallback o a a ∗ Implementaremos dos funciones, una cuando llegue el resultado y otra cuando haya P´gina 66 de 80 a alg´n error u – Por tanto, el nuevo interfaz, tendr´ los mismos m´todos que el interfaz del servicio, pero a e devolviendo void, y con un par´metro m´s al final, AsyncCallback a a Regresar – Implementado en el cliente, no hereda de ning´n otro interfaz u – es.deusto.eghost.gwt.rpc.client.ServicioCalculadoraAsync Full Screen 4. A˜adimos el servicio implementado al war/WEB-INF/web.xml: n – A˜adiendo : n Cerrar 1 <servlet> Abandonar
  • 2 <servlet-name>calculadora</servlet-name> 3 <servlet-class>es.deusto.eghost.gwt.rpc.server.ServicioCalculadoraImpl< /servlet-class> 4 </servlet> 5 Introducci´n al cursillo o 6 <servlet-mapping> Introducci´n a las RIA o 7 <servlet-name>calculadora</servlet-name> Google Web Toolkit 8 <url-pattern>/calculadora</url-pattern> Referencias 9 </servlet-mapping> – Donde path ser´ la ruta donde estar´ el servicio (http://localhost:8888/calculadora) a a P´gina www a y servlet-class la clase que implementa el servicio. – src/es/deusto/eghost/gwt/rpc/EjemploRPC.gwt.xml P´gina de Abertura a 5. Por ultimo, consumimos el servicio: ´ – Pedimos a GWT una instancia del interfaz del servicio, y nos devuelve 1 Object o = GWT.create(ServicioCalculadora.class); 2 ServicioCalculadoraAsync calculadora = (ServicioCalculadoraAsync)o; – La instancia devuelta implementa adem´s ServiceDefTarget. Hacemos casta para uti- a P´gina 67 de 80 a lizar este interfaz para establecer a qui´n llamamos: e 1 ServiceDefTarget endpoint = (ServiceDefTarget) calculadora; Regresar 2 endpoint.setServiceEntryPoint( 3 "calculadora" 4 ); Full Screen ∗ El nombre calculadora es el que hemos definido en la configuraci´n del m´dulo (en o o Cerrar el xml) – Por ultimo, llamamos a los m´todos de calculadora: ´ e Abandonar
  • 1 calculadora.suma(5, 4, new AsyncCallback() { 2 public void onSuccess(Object result) { 3 label.setText(result.toString()); 4 } Introducci´n al cursillo o 5 6 public void onFailure(Throwable caught) { Introducci´n a las RIA o 7 label.setText(caught.getMessage()); Google Web Toolkit 8 } Referencias 9 } 10 ); P´gina www a – es.deusto.eghost.gwt.rpc.client.EjemploRPC P´gina de Abertura a 6. Y ya est´, tenemos RPC para toda la familia :-) a • Consideraciones: – Hemos trabajado con datos primitivos (int) ∗ Podemos trabajar con objetos Java ∗ Deben implementar IsSerializable P´gina 68 de 80 a ∗ Deben tener un constructor sin par´metros a – Gesti´n de excepciones o Regresar ∗ Las excepciones deben tambi´n implementar IsSerializable e ∗ onFailure recibe un Throwable Full Screen – Documentaci´n o Cerrar Abandonar
  • 3.5.2. JSON con GWT • Como hemos visto, la API de RPC de GWT es bastante sencilla de utilizar – Trabajas a alto nivel con objetos Java Introducci´n al cursillo o – Control de excepciones Introducci´n a las RIA o – Los detalles de comunicaci´n son opacos para el desarrollador o Google Web Toolkit – Para definir la interfaz s´lo hace falta definir un interfaz de Java o Referencias • Estas ventajas con un arma de doble filo → para funcionar es necesario tener un contenedor de P´gina www a Servlets – Puede ser un problema si estamos trabajando con otra plataforma P´gina de Abertura a • Para evitarlo, tenemos tambi´n JSON e – Compilamos el c´digo a HTML / JavaScript, sin tener ning´n servlet o u – El Servicio que ofrece JSON puede estar implementado en otra plataforma – A nivel de JavaScript, GWT podr´ optimizar el parseo de GWT dependiendo del navegador. a P´gina 69 de 80 a ∗ Tanto Internet Explorer 8 como Firefox 3.5, como otros navegadores en futuro pr´ximo o cuentan con parseo nativo de JSON. ∗ Todav´ no lo hacen, pero podr´ venir implementado en pr´ximas versiones ıa ıa o Regresar – Desventaja → va a ser m´s complicado y trabajaremos a un nivel m´s bajo a a Full Screen Cerrar Abandonar
  • • Ver ejemplo 05 GWTJSON – Copiar ejemplojson.php a /var/www/cursillo/ ∗ sudo ejemplojson.php /var/www/cursillo/ Introducci´n al cursillo o – Compilar el ejemplo Introducci´n a las RIA o ∗ ant gwtc Google Web Toolkit – Copiar el ejemplo a la carpeta cursillo: Referencias ∗ cp war/* /var/www/cursillo/ -R P´gina www a P´gina de Abertura a P´gina 70 de 80 a Regresar Full Screen Cerrar Abandonar
  • 3.6. Gestionando el historial de p´ginas a • En las aplicaciones AJAX, cuando cambia la interfaz, no cambia la URL que se est´ visitando en a el navegador. Esto produce una incompatibilidad con la forma de gestionar el historial de p´ginas a visitadas dentro de los navegadores. Introducci´n al cursillo o • Google Web Toolkit proporciona una clase para gestionar el historial en nuestra aplicaci´n AJAX o Introducci´n a las RIA o y que el usuario puede seguir utilizando los botones Go back y Go fordward de su navegador sin Google Web Toolkit problemas. Referencias • Un ejemplo de esto es la aplicaci´n de ejemplo Showcase contenida en Examples. o P´gina www a • El programador de la aplicaci´n debe llevar el control del historial determinando que hacer cuando o el usuario pulsa los botones Go back y Go fordward P´gina de Abertura a • Ejemplo de utilizaci´n o • La p´gina anfitri´n HTML debe contener el siguiente c´digo (que ya est´ incluido en el c´digo a o o a o generado por webAppCreator ) 1 <iframe src="javascript:’’" id="__gwt_historyFrame" tabIndex=’-1’ style=" position:absolute;width:0;height:0;border:0"></iframe> P´gina 71 de 80 a • Por ejemplo, queremos que el usuario pueda hacer y deshacer sus selecciones en una lista Regresar – Creamos una lista y le a˜adimos un Handler para la selecci´n de elementos n o 1 listBox = new ListBox(); Full Screen 2 3 for (int i = 0; i < 10; i++) Cerrar 4 listBox.addItem("Elemento " + i); 5 6 listBox.addChangeHandler(this); Abandonar
  • – Todo el control del historial se realiza a trav´s de la clase History e – Guardamos el estado inicial a˜adiendo un token al historial n 1 History.newItem("index" + listBox.getSelectedIndex()); Introducci´n al cursillo o – Y cada vez que selecciona un nuevo elemento de la lista introducimos otro token en el historial Introducci´n a las RIA o 1 public void onChange(ChangeEvent event) { Google Web Toolkit 2 History.newItem("index" + listBox.getSelectedIndex()); Referencias 3 } P´gina www a – A˜adimos un Handler para enterarnos de cuando el usuario maneja el historial y reestable- n cemos el estado correspondiente de la aplicaci´n parseando el token guardado. En este caso o P´gina de Abertura a restauramos el estado del objeto que estaba seleccionado en la lista 1 History.addValueChangeHandler(new ValueChangeHandler<String>() { 2 public void onValueChange(ValueChangeEvent<String> event) { 3 String historyToken = event.getValue(); 4 try { 5 int index = Integer.parseInt(historyToken.substring(5,6)); 6 listBox.setSelectedIndex(index); P´gina 72 de 80 a 7 } catch (IndexOutOfBoundsException e) { 8 listBox.setSelectedIndex(0); 9 } Regresar 10 } 11 }); Full Screen • El token del historial podr´ guardar toda aquella informaci´n que necesitemos para restaurar un a o Cerrar estado de la aplicaci´n o Abandonar
  • 3.7. Llamando a c´digo JavaScript con JSNI o • JSNI → JavaScript Native Interface • Podemos interactuar con JavaScript de manera sencilla Introducci´n al cursillo o – Podemos interactuar con un applet flash o con un applet de Java desde c´digo GWT o Introducci´n a las RIA o – Podemos interactuar con librer´ hechas en JavaScript ıas Google Web Toolkit Referencias – Podemos exportar m´todos de GWT a JavaScript, de manera que este pueda llamarles e – ... P´gina www a • Da manera completa: P´gina de Abertura a – Excepciones – Paso de objetos Java a JavaScript y viceversa • ¿C´mo? o – Utilizamos native como si fuera JNI para incluir c´digo JavaScript. o – Hay una serie de objetos que est´n pasados: a P´gina 73 de 80 a ∗ window → $wnd ∗ document → $doc Regresar 1 public static native void funcion(String msg) /*-{ Full Screen 2 $wnd.alert(msg); 3 }-*/; Cerrar • Identificaremos a los m´todos de Java con la misma nomenclatura que en JNI: e Abandonar
  • 1 [instance-expr.]@class-name::method-name(param-signature)(arguments) • Ejemplo: 06 JSNI Introducci´n al cursillo o – Imaginemos que tenemos una funcionalidad en jQuery que no tenemos en GWT, que es el Introducci´n a las RIA o tipo Slider. Google Web Toolkit – Podemos ver el comportamiento de este Slider en http://docs.jquery.com/UI/Slider. Referencias – La idea es utilizarlo desde GWT P´gina www a • M´s informaci´n a o P´gina de Abertura a P´gina 74 de 80 a Regresar Full Screen Cerrar Abandonar
  • 3.8. Desplegando el c´digo en tomcat o • Hasta ahora hemos trabajado con los scripts que GWT genera autom´ticamente a – Es interesante en tiempo de desarrollo Introducci´n al cursillo o – Debugging, velocidad de desarrollo. . . Introducci´n a las RIA o • Cuando hemos terminado la aplicaci´n, tendremos que desplegarla en un servidor real o Google Web Toolkit Referencias – Si no hacemos uso de RPC la carpeta war es suficiente. Los ficheros contenidos ah´ pueden ı ser copiados en un servidor web P´gina www a – Si hacemos uso de RPC, necesitaremos un contenedor de servlets ∗ Aqu´ vamos a hacerlo con Apache Tomcat 6 bajo Ubuntu GNU/Linux 9.04 ı P´gina de Abertura a ∗ Apache Tomcat 6 puede ser instalado en Ubuntu mediante el Gestor de Paquetes Synaptic ∗ Debemos instalar los siguientes paquetes: · tomcat6 (Paquete principal del servidor Apache Tomcat) · tomcat6-admin (Herramienta de gesti´n para facilitar el despliegue de aplicaciones en o Tomcat) ∗ Para instalar los paquetes correctamente debemos reiniciar el servidor P´gina 75 de 80 a · sudo /etc/init.d/tomcat6 restart Regresar Full Screen Cerrar Abandonar
  • • Desplegando nuestro EjemploRPC – El fichero build.xml contiene una opci´n para generar un archivo de despliegue war. Para o generarlo tenemos que ejecutar ∗ ant war Introducci´n al cursillo o – El archivo asi resultante puede ser subido y desplegado directamente a trav´s de la herramienta e Introducci´n a las RIA o de despliegue de Apache Tomcat Google Web Toolkit Referencias – A partir de este momento la aplicaci´n ya puede ser accedida en Tomcat a traves de su URL. o En este caso: P´gina www a ∗ http://localhost:8080/EjemploRPC/ – A disfrutar ...! P´gina de Abertura a P´gina 76 de 80 a Regresar Full Screen Cerrar Abandonar
  • 3.9. Testing con JUnit • GWT permite testear la aplicaci´n con JUnit o • No vamos a realizar una introducci´n a TDD, etc. por cuesti´n de tiempo e inter´s o o e Introducci´n al cursillo o – Dentro de actividades del e-ghost, ya se hizo una en Marzo del a˜o pasado en el marco de la n Introducci´n a las RIA o Semana ESIDE y est´ disponible aqu´ a ı. Google Web Toolkit Referencias • Para hacer los tests, GWT utiliza tres modos distintos: 1. Hosted → el c´digo no es compilado a JavaScript y por tanto se pueden utilizar librer´ Java o ıas P´gina www a – T´cnicamente, podremos utilizar EasyMock/JMock e – El problema de utilizarlo es que luego no podr´ ıamos usar ninguno de los dos modos P´gina de Abertura a siguientes ´ – Util para testear la l´gica de lo que hemos programado o 2. Web → el c´digo es compilado y ejecutado en el propio navegador de modo autom´tico o a 3. Manual → el c´digo es compilado y se despliega un servidor para que se pueda utilizar otro o navegador como motor de las pruebas P´gina 77 de 80 a • Desde eclipse, podremos utilizar f´cilmente cualquiera de los dos primeros modos a – El tercero lo utilizaremos desde el build.xml en el ejemplo Regresar • Utilizaremos por debajo JUnit 3, pero a trav´s de GWT: e Full Screen – No heredaremos de TestCase, sino de GWTTestCase – No implementaremos setUp/tearDown, sino gwtSetUp y gwtTearDown Cerrar – La idea es que GWT mete su c´digo ah´ para poder levantar el servidor y todos los servicios o ı antes de lanzar los tests Abandonar
  • • La manera de testear es igual que en JUnit 3 – assertEquals,fail. . . – Sin embargo, como en GWT las llamadas son as´ ıncronas, para testearlas tenemos un API adicional Introducci´n al cursillo o ∗ Ver ejemplo 08 JUnit Introducci´n a las RIA o Google Web Toolkit ∗ Con delayTestFinish(500); diremos “si en 500 milisegundos no se ha llamado ning´n u Referencias callback, algo ha fallado” ∗ Con finishTest(); diremos “ya ha terminado y todo correcto, puedes pasar al siguiente P´gina www a test” P´gina de Abertura a P´gina 78 de 80 a Regresar Full Screen Cerrar Abandonar
  • 4. Referencias 4.1. Introducci´n a RIA o • Applets de Java Introducci´n al cursillo o • Seguridad en Applets de Java Introducci´n a las RIA o Google Web Toolkit • Adobe Flash Referencias • Flash Lite P´gina www a • Referencia JavaScript P´gina de Abertura a • Google Gears • Microsoft Silverlight • Sun JavaFX • Adobe AIR P´gina 79 de 80 a 4.2. Google Web Toolkit • P´gina oficial a Regresar • Libro de Junio 2007 Full Screen • Jorge Garc´ Ochoa de Aspuru hizo un ejemplo despu´s del cursillo ıa e Cerrar Abandonar
  • Este documento est´ escrito por Unai Aguilera y Pablo Ordu˜a para el cursillo de “Desarrollo de RIAs a n con Google Web Toolkit” del grupo de software libre de la Universidad de Deusto, el e-ghost. Puede A encontrarse junto con los ejemplos y las fuentes LTEXen la misma web. Introducci´n al cursillo o Para cualquier correcci´n, sugerencia, o comentario en general, no dudes en ponerte en contacto con o Introducci´n a las RIA o nosotros en: Google Web Toolkit Referencias Unai → gkalgan @ gmail . com Pablo → pablo @ ordunya . com P´gina www a P´gina de Abertura a P´gina 80 de 80 a Regresar Full Screen Cerrar Abandonar