Ajax Hacks: Tips & Tools for Creating Responsive Web Sites

Hack 46. Display the Keys/Values from a Java HashMap on a Web Page

Connect to a Java object running on the server and use JavaScript to display a HashMap's contents on a web page.

This hack takes a java.util.HashMap containing the names of bike manufacturers keyed to their product codes and displays this information on a web page. The earlier hacks in this chapter introduced the reader to this web page, which Figure 5-2 shows.

A java.util.HashMap in Java is a hash table structure that contains keys pointing to values. Its JavaScript representation could look like {firstname: "Bruce", lastname:"Perry"}.

The place on the web page where we want to display these values looks like this in the HTML code:

<h3>Product codes</h3> <div ></div>

This code represents a subheading and a div element with the id prodCodes. When the web page loads, the code asks the server component for the contents of a Java HashMap. The code displays the Map keys followed by "::" then the Map values, as in "Specialized :: 0006," with a little styling added to boot. The server component and web page are set up and configured just as in "Integrate DWR into Your Java Web Application" [Hack #43]. To refresh your memory, here are the script tags that the web page uses, so that the application can use DWR and hacks5_1.js, which contains our own JavaScript:

<script type="text/javascript" src="/books/4/254/1/html/2//parkerriver/ajaxhacks/js/hacks5_1.js"></script> <script type="text/javascript" src="/books/4/254/1/html/2//parkerriver/dwr/interface/JsBikeBean.js"> </script> <script type="text/javascript" src="/books/4/254/1/html/2//parkerriver/dwr/interface/JsDate.js"></script> <script type="text/javascript" src="/books/4/254/1/html/2//parkerriver/dwr/engine.js"></script> <script type="text/javascript" src="/books/4/254/1/html/2//parkerriver/dwr/util.js"></script>

The code from hacks5_1.js calls a JsBikeBean method to display the converted HashMap's values inside the div element. Here is the Java code to which the bound JavaScript object JsBikeBean has access:

private static Map BIKE_INFO; static { BIKE_INFO = Collections.synchronizedMap(new HashMap( )); BIKE_INFO.put("Trek","0001"); BIKE_INFO.put("Orbea","0002"); BIKE_INFO.put("Guru","0003"); BIKE_INFO.put("Giant","0004"); BIKE_INFO.put("Look","0005"); BIKE_INFO.put("Specialized","0006"); BIKE_INFO.put("Cannondale","0007"); } public static Map getBikeInfo( ) { return BIKE_INFO; }

The getBikeInfo( ) method simply returns the Map with all these values.

A comprehensive real-world application might return a Map derived from an underlying database. Also, Map is the interface implemented by HashMap, so a HashMap is also a Map type in Java.

Traveling at the speed of light from the server to the browser code, here is the web page's underlying JavaScript:

//This method is called by the window.onload event handler function setupMap( ){ JsBikeBean.getBikeInfo(setProdCodes); } //"jsHashmap" is the JS object representation of a HashMap function setProdCodes(jsHashmap){ var div = document.getElementById("prodCodes"); //remove old messages div.innerHTML=""; div.style.color="purple"; div.style.fontSize="0.9em"; var tmpText; for(var prop in jsHashmap) { tmpText = prop + " :: "+ jsHashmap[prop]; div.appendChild(document.createTextNode(tmpText)); div.appendChild(document.createElement("br")); } }

getBikeInfo( ) returns the HashMap value and passes it as the parameter to the setProdCodes( ) function:

JsBean.getBikeInfo(setProdCodes); ... function setProdCodes(jsHashmap){...}

setProdCodes( ) represents the callback mechanism that DWR uses to exchange data between the server's return values and the web page's code.

The JavaScript code passes a callback function name as a parameter to the Java method. Make sure to leave out the parentheses when calling DWR-related methods in this manner. In other words, don't use:

JsBean.getBikeInfo(setProdCodes( ));

The HashMap values that originated on the server manifest as the callback function's parameter. The jsHashmap parameter in setProdCodes(jsHashmap) contains the bike-maker names as keys and the product codes as values. The code gets a reference to the div within which this information will be displayed, then specifies the font size and color of the text:

div.style.color="purple"; div.style.fontSize="0.9em";

The DWR framework does a lot of useful work for a script and an Ajax developer. The framework returns the hash table value in JSON format [Hack #7] as a JavaScript object.

The DWR framework returns a Java HashMap, for example, as:

{"Trek":"0001","Specialized":"0005",...}

As a result, the code can easily display the keys and values of the object using a for/in loop:

for(var prop in jsHashmap) { tmpText = prop + " :: "+ jsHashmap[prop]; div.appendChild(document.createTextNode(tmpText)); div.appendChild(document.createElement("br")); }

The code writes the bike-maker names and product codes by displaying the key and value followed by a line break (br) tag:

/* i.e., jsHashmap["Trek"]returns "0001" */ tmpText = prop + " :: "+ jsHashmap[prop]; div.appendChild(document.createTextNode(tmpText)); div.appendChild(document.createElement("br"));

tmpText contains the line of text that the web page displays, as in "Trek :: 0001." During each iteration of the for/in loop, the code writes out a separate line representing a different bike company and product code.

"Use DWR to Populate an Ordered List from a Java Array" [Hack #47] dynamically generates an ordered or unordered list from Java values on the server.

Related

Категории