GWT - Little big things you should know

This week I rewrote Bloki from scratch. Instead of using JavaScript like before, I'm now using pure GWT and AppEngine power. That's a really, really powerful combination, but you need to invest some time in order to get used to it.

Renaming files in GWT is a dangerous task
I already faced the first big problem after renaming the sample code. I didn't have a clue how *.gwt.xml and my code were linked to each other and what that file did. Also, Eclipse seems not to recognize renaming of these files properly. ("[ERROR] Unable to find '*.gwt.xml' on your classpath; could be a typo, or maybe you forgot to include a classpath entry for source?") You need to delete the project's run configuration everytime you renamed your *.gwt.xml. Annoying, but not a big problem if you know that trick. You don't rename your *.gwt.xml every now and then anyway...

Accessing the page's body
When searching for a solution for this problem I discovered another really cool feature of GWT: native methods. JavaScript in your Java files! It looks like this: https://gist.github.com/1129229

That's a powerful tool you should keep in mind when developing with GWT.

However, today I came across a cleaner solution, without any native methods: https://gist.github.com/1129232

Yet another method to access a page's body I just came across: https://gist.github.com/1131533
Including your GWT widget in a foreign website
That's something inevitable for Bloki, since it's meant to be integrated easily into whatever website you want. So, what's the problem here? GWT blocks access from foreign websites to your compiled JavaScript. I'm not sure why, but fixing it is easy. All you need to do is to insert this line into your *.gwt.xml:

<add-linker name="xs"></add-linker>

Now you're able to link to your JavaScript from foreign websites like this: https://gist.github.com/1123625

GWT overrides my stylesheets
This immediately lead me to the next problem (ugh, sounds like working with GWT is only about solving such problems). GWT insists to override your website's CSS, no matter at which point you insert GWT's script. Working around this issue isn't that easy...

Assuming you used GWT's chrome theme before, delete the line applying the theme and insert this line instead:

<inherits name="com.google.gwt.user.theme.chrome.ChromeResources></inherits>

Now you need to include the needed GWT stylesheet yourself, before (!) you apply your own styles...

<link href="http://bloki-engine.appspot.com/submit/gwt/chrome/chrome.css" rel="stylesheet" type="text/css"></link>

Autohide DialogBox

One more tip Bartinger told me about: new DialogBox(true); and it'll hide itself when you click outside the dialog. Handy!

Finished! :D I hope to continue this kind of blog post on a regular base...