Expert Spring MVC and Web Flow

Listing B-5.Hidden Tables in index.html

<div id="leftPanel" style="width:58%; float: left">

<table id="vetlist" class="initHidden">

<thead>

<tr>

<th>first name</th>

<th>last name</th>

<th>specialties</th>

</tr>

</thead>

<tbody id="vets"/>

</table>

When we click the List Vets link in the page, a JavaScript function called getVets()is called.

It’s this function, and the one it delegates to, that do the work of populating the table of vets.

Both functions are in local.jsand are shown in Listing B-6.

Listing B-6.local.js Functions for List Vets

function getVets() {

Clinic.getVets(showVets)

}

function showVets(vetData) {

document.getElementById("ownerlist").style.display = "none";

document.getElementById("ownerForm").style.display = "none";

document.getElementById("vetlist").style.display = "inline";

DWRUtil.removeAllRows("vets");

DWRUtil.addRows("vets", vetData, [ getFirstName, getLastName, getSpecialties ]);

}

Don’t worry if you can’t follow all the logic here. The key points are that the JavaScript ver-

sion of the Clinicobject is invoked with Clinic.getVets(). DWR handles the translation of

the call to the real object in the ApplicationContextand marshals the returned Collectionof

vets for us. This is passed to the showVets()function for display, based on the parameter sup-

plied to the getVets()method, where DWR utility methods are called to first clear and then

repopulate all of the table rows. The addRows()method takes three parameters:

• The idof the element to update (vets), which as we saw in Listing B-5 was the
  element.


• The collection of data to use (vetData). This was passed to the function by DWR and is
  the returned value from the Clinic.getVets()method.


• An array of method names to call on each element of the vetDatacollection. Each of the
  method names in the array will populate a column of the current table row.

APPENDIX B ■AJAX AND DWR 383

584X_Ch14_AppB_FINAL 1/30/06 12:55 PM Page 383