best way to externalize HTML in GWT apps?

Question

What\'s the best way to externalize large quantities of HTML in a GWT app? We have a rather complicated GWT app of about 30 \"pages\"; each page has a sort

Answer 1

I was doing similar research and, so far, I see that the best way to approach this problem is via the DeclarativeUI or UriBind. Unfortunately it still in incubator, so we need to work around the problem.

I solve it in couple of different ways:

1. Active overlay, i.e.: you create your standard HTML/CSS and inject the GET code via <script> tag. Everywhere you need to access an element from GWT code you write something like this:

   RootPanel.get("element-name").setVisible(false);
   

2. You write your code 100% GWT and then, if a big HTML chunk is needed, you bring it to the client either via IFRAME or via AJAX and then inject it via HTML panel like this:

   String html = "<div id='one' "
      + "style='border:3px dotted blue;'>"
      + "</div><div id='two' "
      + "style='border:3px dotted green;'"
      + "></div>";
   HTMLPanel panel = new HTMLPanel(html);
   panel.setSize("200px", "120px");
   panel.addStyleName("demo-panel");
   panel.add(new Button("Do Nothing"), "one");
   panel.add(new TextBox(), "two");
   RootPanel.get("demo").add(panel);
   

Answer 2

Not knowing GWT, but can't you define and anchor div tag in your app html then perform a get against the HTML files that you need, and append to the div? How different would this be from a micro-template?

UPDATE:

I just found this nice jQuery plugin in an answer to another StackOverflow question.

Answer 3

I've used ClientBundle in a similar setting. I've created a package my.resources and put my HTML document and the following class there:

package my.resources;

import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.TextResource;

public interface MyHtmlResources extends ClientBundle {
 public static final MyHtmlResources INSTANCE = GWT.create(MyHtmlResources.class);

 @Source("intro.html")
 public TextResource getIntroHtml();

}

Then I get the content of that file by calling the following from my GWT client code:

HTML htmlPanel = new HTML();
String html = MyHtmlResources.INSTANCE.getIntroHtml().getText();
htmlPanel.setHTML(html);

See http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html for further information.

Answer 4

You can use servlets with jsps for the html parts of the page and still include the javascript needed to run the gwt app on the page.

Answer 5

The GWT Portlets framework (http://code.google.com/p/gwtportlets/) includes a WebAppContentPortlet. This serves up any content from your web app (static HTML, JSPs etc.). You can put it on a page with additional functionality in other Portlets and everything is fetched with a single async call when the page loads.

Have a look at the source for WebAppContentPortlet and WebAppContentDataProvider to see how it is done or try using the framework itself. Here are the relevant bits of source:

WebAppContentPortlet (client side)

((HasHTML)getWidget()).setHTML(html == null ? "<i>Web App Content</i>" : html);

WebAppContentDataProvider (server side):

HttpServletRequest servletRequest = req.getServletRequest();
String path = f.path.startsWith("/") ? f.path : "/" + f.path;
RequestDispatcher rd = servletRequest.getRequestDispatcher(path);
BufferedResponse res = new BufferedResponse(req.getServletResponse());
try {
   rd.include(servletRequest, res);
   res.getWriter().flush();
   f.html = new String(res.toByteArray(), res.getCharacterEncoding());
} catch (Exception e) {
   log.error("Error including '" + path + "': " + e, e);
   f.html = "Error including '" + path +
        "'<br>(see server log for details)";
}

Answer 6

You can try GWT App with html templates generated and binded on run-time, no compiling-time.