{"id":531,"date":"2009-06-27T00:18:29","date_gmt":"2009-06-27T06:18:29","guid":{"rendered":"http:\/\/www.mooreds.com\/wordpress\/archives\/000531"},"modified":"2009-06-29T10:20:22","modified_gmt":"2009-06-29T16:20:22","slug":"gwt-and-complex-javascript-overlays","status":"publish","type":"post","link":"https:\/\/www.mooreds.com\/wordpress\/archives\/531","title":{"rendered":"GWT and complex javascript overlays"},"content":{"rendered":"

I remember hearing about javascript overlays and the Google Web Toolkit at the 2008 Google I\/O conference, so when I had a chance to use them for a complicated JSON dataset, I thought it would be a good fit.\u00a0 I use JSON in a number of widgets around a client’s site, mostly because it is the easiest way to have a client be cross site compatible (using JSONP for server communication<\/a>), the data ranges in size from 13K to 87K.<\/p>\n

But as I looked for examples, I didn’t see a whole lot.\u00a0 There is, of course, the canonical blog post about javascript overlays<\/a>, but other than that, there’s not much out there.\u00a0 I searched the gwt google group<\/a>, but didn’t see anything about complex javascript overlays.<\/p>\n

Perhaps I should define what I mean by complex javascript overlays.\u00a0 I mean JSON objects that have embedded objects and arrays; something like this: var jsonData = [{\"id\":52,\"display\":{\"desc\":\"TV\",\"price\":125},\"store\":[1,2,3,4,5]}, {\"id\":2,\"display\":{\"desc\":\"VCR\",\"price\":25},\"store\":[1,2,5]}];<\/code><\/p>\n

The key is to realize that just as you can return a string from a native method, like the canonical blog post does: public final native String getFirstName() \/*-{ return this.FirstName; }-*\/;<\/code>, you can also return any other javascript object, including arrays (helpfully available as the JsArray class<\/a>).\u00a0 So, for the above JSON example, I have a Display class that looks like this:<\/p>\n

package com.mooreds.complexoverlay.client;\r\nimport com.google.gwt.core.client.JavaScriptObject;\r\n\r\npublic class Display extends JavaScriptObject {\r\nprotected Display() {}\r\npublic final native String getDesc()\/*-{ return this.desc;}-*\/;\r\npublic final native int getPrice()\/*-{ return this.price;}-*\/;\r\n}<\/pre>\n
Code for the array (\"store\") looks like this:<\/p>\n
<\/p>\n
package com.mooreds.complexoverlay.client;\r\n\r\nimport com.google.gwt.core.client.JsArrayInteger;\r\npublic class StoreList extends JsArrayInteger{\r\nprotected StoreList() {}\r\n\r\n}<\/pre>\n
Running code that shows you how to parse and display the entire json string is here (using GWT 1.6.4) is available in this tarball<\/a>.\u00a0 I haven't yet tried it, but I imagine that it would be pretty easy a JSONP call work in a similar manner to the HTML embedded JSON in this example.<\/p>\n
Update June 29: Note that if you want to use any overlay types in collections, that JavaScriptObject, which you must inherit from, has final hashCode<\/code> and equals<\/code> methods.\u00a0 The hashCode method \"uses a monotonically increasing counter to assign a hash code to the  underlying JavaScript object\"<\/a> and the equals method \"returns true<\/code> if the objects are JavaScript identical  (triple-equals)\"<\/a>.\u00a0 Both of these may cause issues with collections such as maps.<\/em>
\n[tags]gwt, javascript overlays, google web toolkit, is anyone still using technorati?[\/tags]<\/p>\n","protected":false},"excerpt":{"rendered":"
I remember hearing about javascript overlays and the Google Web Toolkit at the 2008 Google I\/O conference, so when I had a chance to use them for a complicated JSON […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,5,6],"tags":[],"class_list":["post-531","post","type-post","status-publish","format-standard","hentry","category-gwt","category-java","category-programming"],"_links":{"self":[{"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/posts\/531","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/comments?post=531"}],"version-history":[{"count":0,"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/posts\/531\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/media?parent=531"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/categories?post=531"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/tags?post=531"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}