I have been playing around with the Google Web Toolkit for the past 10 weeks. And the plan that I had is to integrate Google Maps API and Google Web Toolkit, such that the information within the Google Maps could dynamically be updated from other external application such as bus GPS. I’ve been searching through the web for information, but I found no solution. I had to figure out the solution myself by reading the basic examples that is given from the Google Web Toolkit documentation.
You may have already know that there’s a way to integrate Google Web Toolkit and Google Maps API by using external library that they’re developing called GWT Google API, which I found really interesting to try out! The first tutorial that they wrote seems to be really promising! But unfortunately, the documentation is too old, and I wasn’t even able to set the project up.
After reading the GWT documentation, there’s one concept that might still be abstract for you about the Remote Procedure Calls. But if you think about it, it’s just not that complicated as we thought, we just need to implement some interface, and extend the Synchronized one to implement a Servlet class, so that we could create a JDBC connection to the database. We will get the return value through our CallBack function. Google Web Toolkit takes care of the rest on the background. There are 2 interfaces that you have to create to do RPC, Synchronized and Asynchronized, the Asynchronized interface has to have the same name with the Synchronized one but with the suffix Async. You could read more about this from the GWT documentation.
AsyncCallback callback = new AsyncCallback() {
public void onSuccess(Object result) {
// do some UI stuff to show success
}
public void onFailure(Throwable caught) {
// do some UI stuff to show failure
}
};
If it succeeds, then the return value from the Servlet will be passed onto the onSuccess method as an Object, where in this case I named it as result. Variable result then could be passed to the GWT global variable to be used and/or passed around by the other methods in the class, including the JavaScript Native Interface (JSNI). JSNI allows you to write JavaScript within the Java class directly, in this article, we will see on how could we use JSNI to pass variable to the external JavaScript written in HTML.
Once you understood on how does GWT communicates with the database using RPC, then you could read on. Otherwise, then you won’t be able to get the dynamic data at the first place, so make sure you read their documentation and go through their RPC examples. It will take a while to understand it, so you have to be patient!
You have the global variable in the GWT class, in which stores data from the Servlet through Remote Procedure Calls. Now it’s time to use the variable within the JSNI, in this example, the global variable that I use is static:
public static native void setLocationJSNI() /*-{
// Read instance field on this
var center = @net.mta.client.MTA_ETA::busLocation;
// Initialize the Google Maps
$wnd.initialize(center);
}-*/;
Depending on the variable type that you use within the Java class, there’s different way to call it using JSNI. Please refer to the JSNI documentation about Accessing Java Method and Fields from JavaScript. I wrote the JavaScript on the default module HTML that was created when starting the GWT project. In the JavaScript, I have a function called initialize that takes a variable named busLocation.
function initialize(busLocation) {
}
The value of busLocation in this JavaScript function will be the same as the value of global variable busLocation in Java, in which has been retrieved from the database. You could use this variable anywhere within the JavaScript initialize function. Of course you could always pass it around to the other function by creating a variable within JavaScript that has greater variable scope, then pass this variable.
var busLocationGlobal;
function initialize(busLocation) {
busLocationGlobal = busLocation;
}
In conclusion, you could use this concept to integrate Google Maps API and Google Web Toolkit using JSNI and RPC to develop more dynamic handwritten JavaScript application. Comments are always welcome.
Recent Comments