ajax y el framework dwr juan fernández rodríguez [email protected]
TRANSCRIPT
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