Google's GWT Example: Interactive FIFA 2006 World Cup Application
Tuesday, May 30, 2006
Goto the application without reading the entry.
A couple of weeks ago google released the
Google Web Toolkit.
The toolkit lets Java developers create AJAX application, without worrying about all the JavaScript and browser compatibilities.
How does it work? Google's GWT is built along the lines of AWT or JFC, i.e., it defines components that let you build Web UIs, using Java.
The key feature of this API is that developers never code JavaScript to control the UI. Everything is coded in Java, and the provided compiler generates all the functionality in a language (HTML and JavaScript) that is understood by different web browsers.
Getting so close to the World Cup, I found it fitting to write an application that almost anyone can relate to: a list of all the teams ordered into groups with the picture of the current roster.
I have a more complex application in mind: one that connects to a backend to keep track of all the games and standings. However, I wanted to see something working right away. So, this is probably the simplest application possible that I could think of, yet still demonstrate google's GWT.
Is it really using AJAX? Well, the whole point of AJAX is the
XMLHttpRequest object. This particular application does not connect to the server to fetch any dynamic information, but I did build it using google's GWT.
Overall, I can see great value in using this API to build highly interactive applications, with minimal effort--if you know Java, you "know" AJAX.
As a company, are you looking into using google's GWT?
The application looks like:
Update: A couple of people tried the application with FireFox and it did not work. And I tried it with IE 7 and it did not work.
I took a look and these were issues:
- For IE: google released a new API version--they are up to 1.0.21; originally, I had compiled the app with 1.0.20. It now works with IE 7.
- For FireFox: I am using (similar to the KitchenSink example google provides) the tab display name as the tab identifier within the code. Apparently, FireFox's JavaScript engine does not like the "space" character for field identifiers. So, to fix (and if you run with the same issue), just do not use "spaces" for identifiers--in my case, I just replaced it with an underscore "_" and it now works with FireFox (at least my version 1.5.0.3). These quirky little things are hard to find, sometimes--or perhaps it is a bug in the API ;)
Comments:
It doesn't seem to work for me. When I click a group, nothing happens. I tried all the groups, and none seem to work. I'm using Firefox 1.5.03
Same here it doesn't work (Firefox 1.5.0.3 on Windows XP) !!
Well guys, what can I tell you.
This is what google says: "You write your front end in the Java programming language, and the GWT compiler converts your Java classes to browser-compliant JavaScript and HTML."
I guess not. We can't believe everything google says anymore ;)
BTW, I only tested it with IE 6.0--the caffeine was wearing off.
I just tried to run it with IE 7 and FireFox 1.5.0.3, and they both fail misserably.
During lunch I may try to figure out what the problem is.
works fine on firefox 1.5.0.4/debian linux