The Web That is Instantly On, and Always On

Kaazing Journal

Subscribe to Kaazing Journal: eMailAlertsEmail Alerts newslettersWeekly Newsletters
Get Kaazing Journal: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


Kaazing Authors: Jason Bloomberg, Kaazing Blog, Jnan Dash, Jeremy Geelan, Stacy Gorkoff

Related Topics: RIA Developer's Journal, Enterprise Mashups, Kaazing Journal, SOA & WOA Magazine, AJAX World RIA Conference

RIA & Ajax: Article

SOA World Expo: Enterprise Mashup Services

Part 1: Real-World SOA or Web 2.0 Novelties?

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!

Conclusion
In this article you learned how to integrate Java services with mashup APIs implemented in JavaScript. The DWR framework enabled this simple integration by providing remote access to server-side Java objects via JavaScript. The value of this example is that it illustrates the simplicity of incorporating services implemented in either Java or JavaScript in the context of an enterprise-ready application. Thus, we now have one of the tools necessary to build an enterprise mashup. Next time, we'll look at how to consolidate the JavaScript code that comprises your mashup application into components that can be reused in a variety of development environments. For more information on the technologies referenced in this article please refer to the references provided.

References

More Stories By Ric Smith

Ric Smith is director, business and product strategy at Kaazing. provides Kaazing Corporation with a wealth of experience in product management and consulting for enterprise products and services. Prior to joining Kaazing, Ric was a principal product manager for Oracle's Fusion Middleware at Oracle's Headquarters in Redwood Shores, CA. In his role as a Principal Product Manager he was responsible for the evangelism and product direction of Oracle's AJAX and Java EE Web Tier offerings. Before joining the Fusion Middleware team, Ric worked for Oracle's consulting business as a principal consultant where he led development of mission-critical applications for prominent organizations within the defense/intelligence industry. In addition, Ric won consecutive awards for technical achievement for each year of his tenure as a consultant. Ric is a frequent speaker at international events and has written articles featured in leading industry publications such as Java Developer's Journal and AJAXWorld Magazine. He is also a representative to the OpenAjax Alliance and an honors graduate of the University of Arizona.

Comments (3) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
EdwinVDS 10/31/08 06:25:43 AM EDT

I have started a poll on the subject of Enterprise Mashups here : http://www.micropoll.com/akira/TakeSurvey?id=1086551

S&S Media 02/01/07 06:11:27 AM EST

Webinale 07 - A Conference For the Next Generation Web
The Web is in motion! It's about conversations, interpersonal networking, personalization, and individualism. The need for immediacy, interactivity, and community, combined with new and light-weight technologies are changing the social structure of the Web. The Next Generation Web is about getting associated with openness, trust, authenticity and collaboration. Interactivity, new possibilities to connect, social software, usability, and community networking are fast catching up with users. This new buzz is generating fresh and exciting projects. The latest buzzword is Web 2.0, and the event for anyone seeking to stay on top of this buzz is Webinale 2.0!
More info at www.webinale.com

SOA News Desk 01/22/07 03:24:59 PM EST

Since Web 2.0 kicked off scarcely a day goes by without a headline targeting mashups and their enablers, AJAX and Web Services, as the next hot Web technologies. Mashups are Web sites that integrate a variety of services (e.g., news feeds, weather reports, maps, and traffic conditions) in new and interesting ways. Just take a look at Zillow.com, which provides instant home valuations plotted as thumbtacks on a map (Figure 1), or HousingMaps.com, which marks listings from craigslist.org as captions on a map, and you'll get a clear picture of the power behind converging data sources.