The JavaScript functions used to update and insert entries make use of the addMarkerForCustomers function. The createCustomer, updateCustomer, and removeCustomer functions share similar code and for the sake of brevity only the create updateCustomer Customer function is described in this article. See Listing 1 for a detailed look at the createCustomer and removeCustomer functions.

The updateCustomer function calls a utility function, DWRUtil.getValues, provided by DWR that extracts values from HTML elements that contain ids that map to name/value pairs contained in a JavaScript object. In this example the DWRUtil.getValues function is used to populate a Customers JavaScript object that is persisted using the JavaServiceFacade.mergeCustomers function. The JPA merge operation updates the corresponding record in the database. The second argument passed to the JavaServiceFacade.mergeCustomers function is an anonymous function that's called after the Customers object is merged and is used to delete the currently selected marker. The deleted marker is replaced with a new one representing the changes to the Customers entity.

The removeSelectedMarker function is responsible for removing the currently selected marker on the map. The function uses the Google Maps API to close the caption for the selected marker and remove the marker from the overlay.

// Updates the currently selected customer
function updateCustomer(){
...
   DWRUtil.getValues(customer);
   // Remotely call Java method
   // to update record
   JavaServiceFacade.mergeCustomers(
     customer,
     function(){
     // remove selected marker
     removeSelectedMarker();
     // add new marker with updates
     addMarkerForCustomer(customer);
   });
...
}

// Removes the currently selected marker
function removeSelectedMarker(){
...
   // close the caption window
   map.closeInfoWindow();
   // remove the current marker
   map.removeOverlay(currentMarker);
...
}

The updateCustomer function and similarly the createCustomer and removeCustomer functions are invoked when a user clicks a form button on a page. Attaching the createCustomer function to the onclick event fired by the button when it's clicked makes the association between the button and the updateCustomer function. Thus, a single click of an HTML form button creates a Customers JavaScript object that's converted to a JPA entity and persisted to a database.

<button id="update" onclick="updateCustomer();">
    Update
</button>

Clicking a marker on the map populates the customer form in the application (Figure 7). This use case exercises the GEvent facility in the Google Maps API, which is used to assign action listeners to objects plotted on the map. A listener that responds to a mouse click on a marker is created in the createMarker function. The assignment is made using the following code. Note that the function created to handle the event populates the customer form using the DWR utility function DWRUtil.setValues, which assigns values to elements contained in the page that map to the name/values pairs defined in a JavaScript object. The event handler also opens an information window on the map that displays the selected customer's name and address (Figure 8).

GEvent.addListener(marker, "click", function() {
   // set the selected marker
   currentMarker = marker;
   // set form field values
   DWRUtil.setValues(customer);
   ...
   // open info window with customer
   // name and address
   marker.openInfoWindowHtml(...);
  });

In summary, there are six essential steps to set up both DWR and Google Maps or any other JavaScript mashup API in a Web application:

1. Edit the web.xml file and copy the dwr.jar file to the WEB-INF/lib directory.
2. Create the Java objects that will be exposed remotely as JavaScript interfaces.
3. Enable DWR to expose objects and methods remotely by defining a dwr.xml file.
4. Acquire an activation key.
5. Import all JavaScript files into your JSP pages.
6. Finally, write a little JavaScript. Go on it's not so bad!

References

• Direct Web Remoting (DWR) framework: http://getahead.id.uk
• Google Maps API: www.google.com/apis/maps/documentation/
• Java Persistence API: http://java.sun.com/products/ejb/
• Information on Web 2.0, SOA, and Mashups: http://blogs.zdnet.com/
• JDJ Volume 11 Issue 10 article: "AJAX: The Easy Way" provides a detailed look at the DWR framework:
  http://java.sys-con.com/read/286892.htm