Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Web.xml:
01.< ?xml version="1.0" encoding="UTF-8"?>
02.< !DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web
Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
03.<web_app>
04. <display_name>dwrEasy</display_name>
05. <servlet>
06.
<servlet_name>dwr-invoker</servlet_name>
07.
<display_name>DWR Servlet</display_name>
08.
<description>Direct Web Remoter Servlet</description>
09.
<servlet_class>org.directwebremoting.servlet.DwrServlet
</servlet_class>
10.
<init_param>
11.
<param_name>debug</param_name>
12.
<param_value>true</param_value>
13.
</init_param>
14. </servlet>
15. <servlet_mapping>
16.
<servlet_name>dwr-invoker</servlet_name>
17.
<url_pattern>/dwr/*</url_pattern>
18. </servlet_mapping>
19.</web_app>
10
11
12
13
Contina
.
14
15
la
tabla
que
mostrar
los
datos
16
17
18
The End
19
Collection obtenerArtistas();
Collection obtenerDiscos(String artista);
CatalogoCD.java
1:
2:package test;
3:import java.util.*;
4:
5:public class CatalogoCD
6:{
7:
private Hashtable artistas;
8:
9:
public CatalogoCD()
10:
{
11:
artistas=new Hashtable();
12:
_cargarInformacion();
13:
}
14:
20
21
Ahora vamos a:
http://localhost:8080/[YOUR-WEBAPP]/dwr/test/CatalogoCD
22
function obtenerDiscos()
{
var art = dwr.util.getValue("cbArtista");
CatalogoCD.obtenerDiscos(art,function(data)
{
dwr.util.removeAllOptions("cbDisco");
dwr.util.addOptions("cbDisco", data);
});
}
</script>
</head>
38:
39:
<body>
40:
<input type="button"
41:
value="Cargar"
42:
onclick="obtenerArtistas()"
43:
<select id="cbArtista"
44:
onChange="obtenerDiscos()"
45:
<select id="cbDisco" />
46:
</body>
47:</html>
48:
23
/>
/>
function obtenerArtistas()
{
CatalogoCD.obtenerArtistas(function(data){
dwr.util.removeAllOptions("cbArtista");
dwr.util.addOptions("cbArtista", data);
obtenerDiscos();
});
}
24
function obtenerDiscos()
{
var art = dwr.util.getValue("cbArtista");
CatalogoCD.obtenerDiscos(art,function(data)
{
dwr.util.removeAllOptions("cbDisco");
dwr.util.addOptions("cbDisco", data);
});
}
El resultado ser:
25
NetBeans 6.1
DWR
26
Clic
en
OK.
Ahora
correspondientes.
27
agregamos
los
archivos
.jar
El proyecto Web
Ahora crearemos un aplicacin web, que no usar ningn
framework. Ser una aplicacin totalmente "simple". La
llamaremos DwrSamples.
28
package logica;
public class Calculadora {
public int sumar(int a, int b) {
return a + b;
}
public int restar(int a, int b) {
return a - b;
}
}
29
package logica;
import org.directwebremoting.annotations.RemoteMethod;
import org.directwebremoting.annotations.RemoteProxy;
@RemoteProxy
public class Calculadora {
@RemoteMethod
public int sumar(int a, int b) {
return a + b;
}
public int restar(int a, int b) {
return a - b;
}
}
30
31
32
Abrimos
el
archivo
<h2>Calculadora</h2>
<form action="">
Valor 1: <input type="text" name="valor1" id="valor1"/><br/>
Valor 2: <input type="text" name="valor2" id="valor2"/><br/>
<input type="button" value="Sumar" onclick="sumar()"/><br/>
Resultado:<div id="suma"></div>
</form>
33
<script type="text/javascript"
src="<%=pageContext.getServletContext().getContextPath()
%>/dwr/interface/Calculadora.js"></script>
<script type="text/javascript"
src="<%=pageContext.getServletContext().getContextPath()
%>/dwr/engine.js"></script>
<script type="text/javascript"
src="<%=pageContext.getServletContext().getContextPath()
%>/dwr/util.js"></script>
34
function mostrarSuma(resultado){
dwr.util.setValue("suma",resultado);
}
35
36
Lo corremos y probamos:
Magia!
37
package logica;
import org.directwebremoting.annotations.RemoteProxy;
@RemoteProxy(name = "Personas")
public class PersonasService {
}
38
package beans;
import java.util.Date;
39
40
41
Clic en OK
Clic en OK
42
Clic en OK
43
La interfaz web
Ahora, para terminar, lo ms importante de una aplicacin: la
interfaz web.
Crearemos una tabla donde se colocarn los datos de los
registros obtenidos de la base de datos. Esta tabla ser as:
44
Nota
que
hay
una
fila
que
est
invisible
(style="display:none"). Esta ser nuestra plantilla llamada
"pattern". Cuando llenemos los datos de la base de datos, lo
que haremos ser duplicar esta fila por cada registro.
45
function listarPersonas(data){
limpiarCuadro();
for(var i=0;i<data.length;i++){
fila=data[i];
var $id=fila.id;
dwr.util.cloneNode("pattern",{idSuffix:$id});
dwr.util.setValue("id"+$id,fila.id);
dwr.util.setValue("nombre"+$id,fila.nombre);
dwr.util.setValue("titulo"+$id,fila.titulo);
$("pattern"+$id).style.display="";
}
}
46
...y listo.
A continuacin las funciones que borran el contenido de la
tabla:
47
Para terminar...
Revisa la documentacin de DWR, ah encontrars muchas
cosas muy interesantes.
48