Descargar la presentación
La descarga está en progreso. Por favor, espere
1
Juan Fernández Rodríguez uo67775@uniovi.es
Ajax y el framework DWR Juan Fernández Rodríguez
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> <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) { }
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 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
Presentaciones similares
