Ajax y el framework DWR
16
description
Ajax y el framework DWR. Juan Fernández Rodríguez [email protected]. AJAX: Asynchronous JavaScript & XML. Técnica de desarrollo Web para crear aplicaciones Web Interactivas - PowerPoint PPT Presentation
Transcript of Ajax y el framework DWR
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><servlet-name>dwr-invoker</servlet-name><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 DWRalert("Datos recibidos: "+data);...
Llamada asíncrona: ¡OK!...data = FooRemoteClass.fooMethod(processData);...function processData(data) { alert("Datos recibidos: "+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>
Servidorpublic String getContenidoDIv() throws ServletException, IOException{return ExecutionContext.get().forwardToString("/contenidoDiv.jsp");}
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
