Ajax y el framework DWR Juan Fernndez Rodrguez

  • Slides: 16
Download presentation
Ajax y el framework DWR Juan Fernández Rodríguez uo 67775@uniovi. es

Ajax y el framework DWR Juan Fernández Rodríguez uo 67775@uniovi. es

AJAX: Asynchronous Java. Script & XML n n Técnica de desarrollo Web para crear

AJAX: Asynchronous Java. Script & XML n n Técnica de desarrollo Web para crear aplicaciones Web Interactivas Las aplicaciones se ejecutan en el navegador del usuario y mantienen una comunicación asíncrona con el servidor en background

AJAX: Asynchronous Java. Script & XML n Ajax engloba varias tecnologías n n n

AJAX: Asynchronous Java. Script & XML n Ajax engloba varias tecnologías n n n XHTML y CSS para la presentación DOM para mostrar e interactuar con la información dinámica XMLHttp. Request para el intercambio de datos asíncronamente

AJAX vs BASIC WEB APPS

AJAX vs BASIC WEB APPS

Síncrono vs. Asíncrono

Síncrono vs. Asíncrono

Aplicaciones Ajax

Aplicaciones Ajax

DWR: Easy Ajax for Java n n Librería Open Source escrita en Java Compuesta

DWR: Easy Ajax for Java n n Librería Open Source escrita en Java Compuesta por dos partes n n Un Servlet en el servidor que procesa peticiones y envía respuestas Java. Script en el cliente, que envía las peticiones y actualiza dinámicamente las páginas

DWR: Esquema

DWR: Esquema

DWR: Configuración del servidor (web. xml) … <servlet> <servlet-name>dwr-invoker</servlet-name> <display-name>DWR Servlet</display-name> <servlet-class>uk. ltd. getahead.

DWR: Configuración del servidor (web. xml) … <servlet> <servlet-name>dwr-invoker</servlet-name> <display-name>DWR Servlet</display-name> <servlet-class>uk. ltd. getahead. dwr. DWRServlet</servlet-class> … </servlet> <servlet-mapping> <servlet-name>dwr-invoker</servlet-name> <url-pattern>/dwr/*</url-pattern> </servlet-mapping> …

DWR: Exportar objetos Java (dwr. xml) n Mapeo de tipos: etiqueta <convert> n Clases

DWR: Exportar objetos Java (dwr. xml) n Mapeo de tipos: etiqueta <convert> n Clases a exportar: etiqueta <create> … <dwr> <allow> <converter="bean" match="es. princast. framework. core. vo. Property. Bean"/> <create creator="session" javascript="Municipios. Controller" class="es. princast. sampleapp. web. dwr. Municipios. Controller"> </create> </allow> </dwr> …

DWR en el cliente n STUB del cliente n n Motor DWR engine. js

DWR en el cliente n STUB del cliente n n Motor DWR engine. js (facilidades de llamada a métodos remotos) Funciones agrupadas por los métodos de cada clase exportada nombreclase. js (el servlet DWRServlet los genera al vuelo utilizando la configuración de dwr. xml)

DWR en el cliente (II) n Ej: Si se exporta la clase public class

DWR en el cliente (II) n Ej: Si se exporta la clase public class Foo { public String do. Foo() { return "foo"; } } n n En el fichero “foo. js” se encontrará la función “function Foo. do. Foo()” (en el cliente), permite acceder al método do. Foo() de la clase Foo (en el servidor) Para realizar llamadas a métodos del servidor, basta con utilizar las funciones de las librerias “interface”. No es necesario invocar ninguna función del fichero engine. js.

DWR en el cliente (III) n Utilidades para actualizar DHTML: n Proporciona una biblioteca

DWR en el cliente (III) n Utilidades para actualizar DHTML: n Proporciona una biblioteca de funciones “util. js” para manipular código DHTML que permiten actualizar sus contenidos como n n add. Options / remove. Options add. Rows / remove. Rows get. Value / set. Value Etc.

DWR: Java Script Asíncrono n Llamada síncrona: ¡ERROR! … data = Foo. Remote. Class.

DWR: Java Script Asíncrono n Llamada síncrona: ¡ERROR! … data = Foo. Remote. Class. foo. Method(); //Llamada remota con DWR alert("Datos recibidos: "+data); . . . n Llamada asíncrona: ¡OK!. . . data = Foo. Remote. Class. foo. Method(process. Data); . . . function process. Data(data) { alert("Datos recibidos: "+data); }

DWR: Actualización de la Vista n Ej. : actualizar el contenido de un DIV

DWR: Actualización de la Vista n Ej. : actualizar el contenido de un DIV n Cliente: <script languaje="Java. Script">. . . Foo. Remote. Class. get. Contenido. Div(load. Div); . . . function load. Div(data){ DWRUtil. set. Value("div. Id", data); } </script> <body>. . . <div id="div. Id"></div> </body> n Servidor public String get. Contenido. DIv() throws Servlet. Exception, IOException{ return Execution. Context. get(). forward. To. String("/contenido. Div. jsp"); }

Conclusiones n PROS n n Interactividad CONTRAS n n n Usabilidad: botón atrás, marcadores/favoritos

Conclusiones n PROS n n Interactividad CONTRAS n n n Usabilidad: botón atrás, marcadores/favoritos Tiempos de respuesta: sin feedback claro y tiempos cortos de respuesta. Los usuarios pueden experimentar esperas “incomprensibles”. Recomendado el uso de feedback’s visuales Accesibilidad: usuarios con navegadores de texto, hablados, sin Java. Script etc. Los desarrolladores necesitan implementar opciones fallback para usuarios de otras plataformas