1
Download Presentacion Ajax-DWR
Document related concepts
no text concepts found
Transcript
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>
<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 DWR
alert("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>
Servidor
public 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
