Ajax y el framework DWR - PowerPoint PPT Presentation

maddy
ajax y el framework dwr n.
Skip this Video
Loading SlideShow in 5 Seconds..
Ajax y el framework DWR PowerPoint Presentation
Download Presentation
Ajax y el framework DWR

play fullscreen
1 / 16
Download Presentation
Ajax y el framework DWR
95 Views
Download Presentation

Ajax y el framework DWR

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

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

  2. AJAX: Asynchronous JavaScript & XML • 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

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

  4. AJAX vs BASIC WEB APPS

  5. Síncrono vs. Asíncrono

  6. Aplicaciones Ajax

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

  8. DWR: Esquema

  9. 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> …

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

  11. DWR en el cliente • STUB del cliente • 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)

  12. DWR en el cliente (II) • Ej: Si se exporta la clase public class Foo { public String doFoo() { return "foo"; } } • En el fichero “foo.js” se encontrará la función “function Foo.doFoo()” (en el cliente), permite acceder al método doFoo() 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.

  13. DWR en el cliente (III) • Utilidades para actualizar DHTML: • Proporciona una biblioteca de funciones “util.js” para manipular código DHTML que permiten actualizar sus contenidos como • addOptions / removeOptions • addRows / removeRows • getValue / setValue • Etc.

  14. DWR: Java Script Asíncrono • Llamada síncrona: ¡ERROR! … data = FooRemoteClass.fooMethod(); //Llamada remota con DWR alert("Datos recibidos: "+data); ... • Llamada asíncrona: ¡OK! ... data = FooRemoteClass.fooMethod(processData); ... function processData(data) { alert("Datos recibidos: "+data); }

  15. DWR: Actualización de la Vista • Ej.: actualizar el contenido de un DIV • Cliente: <script languaje="JavaScript"> ... FooRemoteClass.getContenidoDiv(loadDiv); ... function loadDiv(data){ DWRUtil.setValue("divId", data); } </script> <body> ... <div id="divId"></div> </body> • Servidor public String getContenidoDIv() throws ServletException, IOException{ return ExecutionContext.get().forwardToString("/contenidoDiv.jsp"); }

  16. Conclusiones • PROS • Interactividad • CONTRAS • 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 JavaScript etc. Los desarrolladores necesitan implementar opciones fallback para usuarios de otras plataformas