Ajax y el framework DWR

1
Ajax y el framework DWR

• Juan Fernández Rodríguez
• uo67775_at_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)

• ltservletgt
• ltservlet-namegtdwr-invokerlt/servlet-namegt
• ltdisplay-namegtDWR Servletlt/display-namegt
• ltservlet-classgtuk.ltd.getahead.dwr.DWRServletlt/ser
  vlet-classgt
• lt/servletgt
• ltservlet-mappinggt
• ltservlet-namegtdwr-invokerlt/servlet-namegt
• lturl-patterngt/dwr/lt/url-patterngt
• lt/servlet-mappinggt

10
DWR Exportar objetos Java (dwr.xml)

• Mapeo de tipos etiqueta ltconvertgt
• Clases a exportar etiqueta ltcreategt
• ltdwrgt
• ltallowgt
• ltconvert converter"bean"
• match"es.princast.framework.core.vo.PropertyBe
  an"/gt
• ltcreate creator"session" javascript"Municipio
  sController" class"es.princast.sample
  app.web.dwr.MunicipiosController"gt
• lt/creategt
• lt/allowgt
• lt/dwrgt

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
• ltscript languaje"JavaScript"gt
• ...
• FooRemoteClass.getContenidoDiv(loadDiv)
• ...
• function loadDiv(data)
• DWRUtil.setValue("divId", data)
• lt/scriptgt
• ltbodygt
• ...
• ltdiv id"divId"gtlt/divgt
• lt/bodygt
• Servidor
• public String getContenidoDIv() throws
  ServletException, IOException
• return ExecutionContext.get().forwardToString("/co
  ntenidoDiv.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 feedbacks visuales
• Accesibilidad usuarios con navegadores de texto,
  hablados, sin JavaScript etc. Los desarrolladores
  necesitan implementar opciones fallback para
  usuarios de otras plataformas