Juan Fernández Rodríguez uo67775@uniovi.es Ajax y el framework DWR Juan Fernández Rodríguez uo67775@uniovi.es
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
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
AJAX vs BASIC WEB APPS
Síncrono vs. Asíncrono
Aplicaciones Ajax
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
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.DWRServlet</servlet-class> </servlet> <servlet-mapping> <url-pattern>/dwr/*</url-pattern> </servlet-mapping>
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>
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)
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.
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.
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) { }
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");
Conclusiones PROS CONTRAS Interactividad 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