Previous Page
Next Page

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 id="prodCodes"></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="/parkerriver/ajaxhacks/js/hacks5_1.js"></script>
<script type="text/javascript" src="/parkerriver/dwr/interface/JsBikeBean.js">
        </script>
<script type="text/javascript" src="/parkerriver/dwr/interface/JsDate.js"></script>
<script type="text/javascript" src="/parkerriver/dwr/engine.js"></script>
<script type="text/javascript" src="/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.


Previous Page
Next Page