Embed HTML and make calls to/from.

There are a few ways to embed one HTML into another; frames, iframe, etc. Using GWT, I ran into problems with some of these and indeed 'frames' are to be deprecated in HTML5.

I found the following method successful;

<object data=embedded.html width="100%" height="600" id="embeddedFrame" name="embeddedFrame"> <embed src=embedded.html width="100%" height="600"> </embed> Error: Embedded data could not be displayed. </object>

 

embeds a page called embedded.html into the current page.

 

But how do we make calls between these two pages?

 

To make a call from the embedded page to the current one is very easy. For example, if you wanted to pass a message to the element in the main page with an id of 'example';

 

parent.document.getElementById('concepts').innerHTML = selected[0];

To make a call to the embedded page (call functionA() in the embedded page from the main page), we require the following operation;

document.getElementById('embeddedFrame').contentDocument.defaultView.functionA();

Using these two methods we can pass data back and forth between embedded objects.

Access Client-side JavaScript Functions and Elements from GWT.

One thing I found tricky in GWT was to interact with elements and aspects of HTML that were not directly controlled within the GWT code.

How to access some client-side Javascript from GWT code.

To access the javascript function, functionA(), use the following client-side GWT code;

native String functionA() /*-{

return $wnd.functionA();

}-*/;

GWT Loading Screens

One of the advantages of making asynchronous calls is to allow the interface to continue operating. I.e. it is not held up by the call. However, it is also sometimes important to communicate with the user when the call has completed (and whether it has been successful). I generally only inform users of failure and allow successes to pass transparently but we also need some way of signifying that the call is still in process.

I have done this (as others have) with a small loading panel at the top of my html with id = "loadingMessage", which I can activate and de-activate according to the nature and progress of the asynchronous call.

The first thing to do is to generate a loading screen/message. A great resource for generating animated loading can be found at http://ajaxload.info/.

I then have two GWT methods that look something like this:

public static void showLoadingBanner(String message){

DOM.setInnerHTML(RootPanel.get("loadingMessage").getElement(), message + "                   &nbsp;<img src=\"images/ajax-loader.gif\" height=15>&nbsp;");

}

public static void hideLoadingBanner(){

DOM.setInnerHTML(RootPanel.get("loadingMessage").getElement(), "<br>");

}

for showing and removing the loading banner.