{"id":585,"date":"2010-05-20T15:35:35","date_gmt":"2010-05-20T21:35:35","guid":{"rendered":"http:\/\/www.mooreds.com\/wordpress\/archives\/000585"},"modified":"2010-05-20T15:35:35","modified_gmt":"2010-05-20T21:35:35","slug":"using-jsp-as-a-templating-language-for-gwt","status":"publish","type":"post","link":"https:\/\/www.mooreds.com\/wordpress\/archives\/585","title":{"rendered":"Using JSP as a templating language for GWT"},"content":{"rendered":"<p>I wanted to share a solution to a problem a client of mine had&#8211;needing the same (or very similar) content in two places&#8211;in a lightbox, managed by GWT, and in an HTML page.\u00a0 The content itself had GWT widgets inside it (that would need to be functional in both places).<\/p>\n<p>The solution was to expose the HTML content as a JSONP file for GWT consumption (and just have the HTML displayed for the HTML page).\u00a0 To do this,<\/p>\n<ul>\n<li>we build the HTML page (in this case, using JSTL and JSP, but any other HTML view technology would work).<\/li>\n<li>then we build code that retrieves the page (I used <a href=\"http:\/\/hc.apache.org\/httpclient-3.x\/\">HttpClient<\/a>)<\/li>\n<li>and encodes the entire HTML content as an attribute of a json object (I used <a href=\"http:\/\/code.google.com\/p\/json-simple\/\">json-simple<\/a>)<\/li>\n<li>and exposes it to the world via a URL<\/li>\n<\/ul>\n<p>Now that we have the content as JSON encoded HTML, we need to consume it:<\/p>\n<ul>\n<li>first, create a JSONP consumer, as <a href=\"http:\/\/code.google.com\/webtoolkit\/articles\/using_gwt_for_json_mashups.html\">outlined here<\/a><\/li>\n<li>then, when you get the content, pull it into an <a href=\"http:\/\/google-web-toolkit.googlecode.com\/svn\/javadoc\/2.0\/com\/google\/gwt\/user\/client\/ui\/HTMLPanel.html\">HTMLPanel<\/a>, not just a HTML widget<\/li>\n<li>create new instances of your GWT widgets and attach them to your known span ids using the HTMLPanel.add() method.<\/li>\n<li>if your content depends on external css files, you&#8217;ll need to add and remove them via JSNI when the lightbox is shown (if you can&#8217;t integrate the CSS into the existing site)<\/li>\n<li>if your lightbox and html content differ slightly, you can hide or show spans via your server side presentation layer to <a href=\"http:\/\/www.mooreds.com\/wordpress\/archives\/000450\">configure your in lightbox widgets<\/a><\/li>\n<\/ul>\n<p>Benefits<\/p>\n<ul>\n<li>One location for display&#8211;one place to make changes<\/li>\n<li>No layout in GWT&#8211;everything happens in HTML<\/li>\n<li>Cross domain&#8211;since the content is exposed via JSONP, it can be consumed by javascript on any domain.<\/li>\n<\/ul>\n<p>Detriments<\/p>\n<ul>\n<li>Security&#8211;you&#8217;re exposing yourself to some possible security issues, though since you control both the endpoints, they shouldn&#8217;t be too bad.\u00a0 Read <a href=\"http:\/\/code.google.com\/webtoolkit\/articles\/security_for_gwt_applications.html\">this excellent document<\/a> carefully to understand the implications.<\/li>\n<li>Complexity&#8211;lots of moving pieces<\/li>\n<li>Caching&#8211;JSONP calls are cached by the browser, and a control refresh doesn&#8217;t seem to refresh them.\u00a0 I end up clearing my cache a lot when debugging.<\/li>\n<li>Two calls to the server for every lightbox shown.<\/li>\n<li>Not sure if it would work in developer mode&#8211;possibly with an external server.\u00a0 Haven&#8217;t tried this.<\/li>\n<\/ul>\n<p>I haven&#8217;t played around with any of the GWT templating solutions, but I don&#8217;t believe they would work in this case, because of the need for a plain, crawlable HTML page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I wanted to share a solution to a problem a client of mine had&#8211;needing the same (or very similar) content in two places&#8211;in a lightbox, managed by GWT, and in [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,30],"tags":[],"class_list":["post-585","post","type-post","status-publish","format-standard","hentry","category-gwt","category-gwt-mini-patterns"],"_links":{"self":[{"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/posts\/585","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=585"}],"version-history":[{"count":0,"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/posts\/585\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/media?parent=585"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/categories?post=585"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mooreds.com\/wordpress\/wp-json\/wp\/v2\/tags?post=585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}