Here you can
test the method
greeting, but DWR also shows the scripts that we have to include in your JSP page if we want to invoke class methods
HolaMundoDWR . It also suggests to include the script
util.js it will be very useful to dynamically update contenido HTML.
9 - Ahora si, podemos programar la página JSP.
testDWR.jsp 1:
2: < html >
3: < head >
4: <!-- incluimos los scripts que nos indico -->
5: <!-- la pagina de prueba de DWR -->
6: <script
7: type = 'text /
javascript' 8: src = ' / ZDWR / dwr / interface / HolaMundoDWR . js ' >
9: \u0026lt;/ script>
10: <script type = ' text / javascript '
11: src= ' / ZDWR / dwr / engine . js ' >
12: </script>
13: <script type = ' text / javascript '
14: src= ' / ZDWR / dwr / util . js ' > </script>
15: \u0026lt; / head>
16:
17: \u0026lt; body>
18: \u0026lt;! - is very important the id ( tfNom ) - >
19: Nombre < input type = " text " id = " tfNom " >
20:
21: <!-- en el onclick del boton llamamos a la ->
22: \u0026lt;! - function greeting ( ) that this more down ->
23:
24: \u0026lt; input value = " Send "
25: type = "button "
26: onclick = "greeting ( ) " / >
27: \u0026lt; br>
28: \u0026lt; ! - Note that the spam has a id ->
29: Answer: \u0026lt; b > \u0026lt; span id = " lblNom " / > \u0026lt; / b >
30:
31: \u0026lt; / body>
32: \u0026lt; / html >
33:
34: \u0026lt;! - now develop the function greeting that ->
35: \u0026lt;! - get the name that we entered into tfNom , ->
36: \u0026lt;! - invoked to the function remote and Sets in the ->
37: \u0026lt;! - - span ( lblNom ) the result received ->
38: \u0026lt;script >
39: function greeting ( )
40: {
41: / / get the name entered by the user
42: var nom = dwr. Util . getValue( " tfNom " ) ;
43:
44: // invocamos la funcion remota pasandole nom
45: // y una funcion de callback that DWR invoked
46: / / when the information sent by the server
47: / / this available in to be used
48: HolaMundoDWR . greeting (nom , function (data )
49: {
50: / / we set the result in the span
51: dwr . useful. setValue ( " lblNom " , data ) ;
52:} ) ;
53:
} 54: \u0026lt;/ script>
55:
We can see that the library can
util.js offers easy access to the objects of the page to get the data you have loaded and setearles results.
To invoke the remote method
greeting need to use a callback function. This is because Java is synchronous but AJAX is asynchronous, therefore we pass this function to DWR's invoked when the information sent by the server is available and can be used in the browser. Here we set the result in the span
lblNom .
HTML Object Handling
As we see, DWR solves extremely simple remote method invocation between the page HTML (or JSP) and Java class that implements them. Therefore, the increased complexity is given in order to dynamically update HTML content with the information coming from the server.
For this DWR provides a library of JavaScript functions
call:
util.js . We will see some examples how to dynamically update content using this library. Combos
Dependent In this example we will see how to update the contents of a combo depending on what the user selects another combo.
For this program the next class that basically provide two methods:
- obtenerArtistas Collection ();
- obtenerDiscos Collection (String artist)
ie The first method returns a Collection of Strings with Artist names "registered in a database" and the second method, as an artist name will return all records by that artist that "we have registered."
For simplicity, the harcodearemos data in a Hashtable.
CatalogoCD.java 1:
2: package test;
3: import java.util .*;
4:
5: public CatalogoCD class
6: {
7: private Hashtable artists
8:
9: public CatalogoCD ( )
10: {
11: artists = new Hashtable ( ) ;
12: _cargarInformacion ( ) ;
13:
} 14:
15: / / returns a Collection of Strins with the
16: / / artists who have registered
17: public obtenerArtistas Collection ( )
18:
{19: Vector v = new Vector ( ) ;
20: for ( Enumeration e = artists. keys ( )
21: e. HasMoreElements ( ) ; )
22: {
23: v. add (e. nextElement ( ) ) ;
24:}
25: return v;
26:
27} :
28: / / given a artist returns a Collection of
29: / / Strings with the titles of the discs of
30: / / artist specified
31: Collection public obtenerDiscos (String artist )
32:
{33: return ( Collection ) artists. get ( artist ) ;
34:
} 35:
36: / / all harcodeado ...
37: private void _cargarInformacion ( )
38: {
39: Vector v1 = new Vector ( ) ;
40: v1. add ( " Please Please Me " ) ;
41: v1. add ( " Abbey Road " ) ;
42: v1. add ( " Magical Mystery Tour " ) ;
43: artists. put ( " The Beatles ", v1 ) ;
44:
45: Vector v2 = new Vector ( ) ;
46: v2. add ( "Too Ego " ) ;
47: v2. add ( " The Daughter of the Lagrima" ) ;
48: v2. add ( "Say No More " ) ;
49: v2. add ( " Kill Gil " ) ;
50: artists. put ( " Charly Garcia " , v2 ) ;
51:
52: / / sex Ibiza Locomia ...!
53: Vector v3 = new Vector ( ) ;
54: v3. add ( " A Ibiza with Locomia " ) ;
55: v3. add ( " Fans For Everywhere! " ) ;
56: artists. put ( " Locomia " , v3 ) ;
57:
} 58:}
59:
To register the class as a service in DWR have to add the following lines in the file
dwr.xml .
1:
2: \u0026lt; create creator = " new " javascript = " CatalogoCD " >
3: \u0026lt; param name = " class "value = " test.CatalogoCD " / >
4: < / create >
5:
Ahora vamos a:
http://localhost:8080/[
YOUR-WEBAPP ]/dwr/test/CatalogoCD
para ver los scripts que debemos incluir en la página JSP.
Y ahora veamos la página JSP:
discos.jsp
1:
2: < html >
3: < head >
4: <script
5: type = ' text / javascript '
6: src= ' / TestAjax / dwr / interface / CatalogoCD . js ' >
7: \u0026lt;/ script>
8: \u0026lt;script
9: type = ' text / javascript '
10: src = ' / test ajax / dwr / engine . js ' >
11: \u0026lt;/ script>
12: \u0026lt;script
13: type = ' text /
javascript' 14: src = ' / TestAjax / dwr / util . js ' >
15: \u0026lt;/ script>
16:
17: \u0026lt;script >
18: function obtenerArtistas ( )
19: {
20: CatalogoCD . obtenerArtistas ( function( data ) {
21: dwr . util . removeAllOptions( " cbArtista " ) ;
22: dwr . util . addOptions( " cbArtista " , data ) ;
23: obtenerDiscos( ) ;
24: } ) ;
25: }
26:
27: function obtenerDiscos ( )
28: {
29: was Art = DWR . util . getValue ( " cbArtista " ) ;
30: CatalogoCD . obtenerDiscos ( Art , function ( data )
31: {
32: dwr . util . removeAllOptions( " cbDisco " ) ;
33: dwr . util . addOptions( " cbDisco " , data ) ;
34: } ) ;
35: }
36: </script>
37: \u0026lt; / head >
38:
39: \u0026lt; body >
40: \u0026lt; input type = "button "
41: value = " Send "
42: onclick = " obtenerArtistas ( ) " / >
43: < select id = " cbArtista "
44: onChange = " obtenerDiscos ( ) " / >
45: < select id = " cbDisco " / >
46: < / body >
47: < / html >
48:
As we see, the page if you ate NZA from line 39. We have two
select (combos), one with
id = "
cbArtista " and the other with
id = "
idDisco " and a button
.
In the event of the button onclick invoke the function
obtenerArtistas , and
onChange event of the combo of artists invoke the function
obtenerDiscos .
Consider then the function
obtenerArtistas (found from line 18).
17:
18: function obtenerArtistas ( )
19: {
20: CatalogoCD . obtenerArtistas ( function ( date) {
21: dwr . util . removeAllOptions ( " cbArtista " ) ;
22: dwr . util . addOptions ( " cbArtista " , data) ;
23: obtenerDiscos ( ) ;
24: } ) ;
25:}
26:
function CatalogoCD.obtenerArtistas invoked by passing a callback function where you first remove all items of the combo and then we set the combo of artists in the collection that returns the Java method. Finally we invoke the function for cargargar
obtenerDiscos discs was selected artists.
The function code is
obtenerDiscos from line 27 and can be seen below.
26:
27: obtenerDiscos function ( )
28: {
29: art var dwr = . useful. getValue ( " cbArtista " ) ;
30: CatalogoCD . obtenerDiscos ( art, function ( data )
31: {
32: dwr . util . removeAllOptions( " cbDisco " ) ;
33: dwr . util . addOptions( " cbDisco " , data ) ;
34: } ) ;
35: }
36:
En esta función tomamos el valor que se encuentra seleccionado en el combo de artistas y lo asignamos a la variable
art . Luego invocamos a la función
CatalogoCD.obtenerDiscos pasándole
art y una función callback dentro de la cual borramos los items del combo de discos y seteamos en dicho combo la colección que retorna el método Java.
El resultado será:
. 
