Consider the case where we need to bind stuff from the Java (server side) world to the Javascript (client side) world. In particular, we want the values of a data structure on the server side used in client-side Javascript.
Let’s use assume we have a class like this:
We have a set of Map.Entry. Each member of the set is a String key with a List of Strings as the value. A possible use for such a thing would be the basis of a set of dependent drop downs. One drop down has a set of values (the keys), and when the first drop down changes, the second drop changes (the values).
For the techniques described, I am using JSPs and a servlet container. We have a bit of JavaScript to display the contents of our data structure on the client side:
Now, how do we get this into client side land?
Technique One: Duplication
This isn’t a particularly robust way doing things. The biggest issue is that we have duplication, that requires knowledge of both the data structure and the JSP if we are going to make changes.
Technique Two: Constants
Another way of getting stuff to the client side is to extract the values in the Java data structure to constants:
And then we’ll need it in some sort of wrapper:
Then, we’ll use that wrapper in the JSP:
It is important to note that I didn’t want to start mixing JSP actions with JavaScript to create the fully formed text for the JavaScript. Also, I didn’t want to have a bunch of stuff in the wrapper just for the JavaScript. So, I split the difference and use the string output when rendered on the Java (JSP) side, and a little regex on the JavaScript side. That’s what the replace(/[\]\[]/g, “”).split(“, “) is all about.
Technique Three: Constants Part 2
We can achieve the use of constants in a little cleaner fashion by using the unstandard tag library. It allows us to use constants in a more natural way. No wrapper needed.
Technique Four: JSON
What if we serialize the data structure into JSON? We would need a serializer. In this case I used Xstream:
Then, we could serialize the data structure into a string that can be eval’d:
The tricky parts here are making sure we know what the JSON version of the object is going to look like and at what level can we start accessing the properties.
Tying It All Together
To test the code, I used Jetty, Selenium, and JUnit. The test class:
Conclusion
If I had to only a simple value or two that I needed to bind, I’d probably go the the unstandard tag library path. Unfortunately, the library is no longer supported. But, it seems like it is still being used by a lot of people. For something more complex, I think I’d go with JSON serialization. And, if I had a lot of it, I’d start looking at bundling that technique with some JavaScript frameworks to get some AJAXy types of behavior.
The following links were quite helpful in getting the code operational:
Disabling Pretty Print In Xstream
http://jsfiddle.net/ is awesome
