January 16, 2011
In the past weeks I’ve seen two articles about making clean design with GWT. That was really interesting, but something still stugling me a lot. Both authors agreed not to use layout widgets provided by GWT to build UI neither UiBinder but use instead a big ugly static String to store an HTML code/
Take a closer look at those two articles and come back later to find out a better way to improve your design based on GWT.
The purpose is to write a clean HTML with the least number of tags and have that HTML code under control with only CSS. I do agree that using the old GWT layout system is a really mess producing a lot of tables and ugly code.
However, since GWT 2.0, Google brought us a better layout system with the widgets positionned using only div and css. With this system you can normally reach a clean design without generating table tags and a lof HTML mess.
But since the web is all about simple html and css, I agree with Zack Grossbart that you need to have a perfect control of your UI with the least html tags and just css.
But with the version 2.0 GWT also introduces a wonderful feature called UiBinder. With UiBinder you can describe in a declarative way your design separated from your logic. You can especially use the HtmlPanel panel to mix up classic HTML/CSS and GWT widgets. This is exactly what they wanted to do ! Use classic HTML and CSS to describe the UI and GWT only for the control. By using UiBinder they can take advantage of a powerfull tool having a built-in feature to bind GWT widgets from the xml to the Java and many mores.
Putting your html within a static String is not really that clean and maintainable. So please, for God sake, do not do it ! Learn the API and follow the best practices.
[update] I’ve now coded a rewrite of the wordpress login page example just by using UiBinder and the HtmlPanel, see this post.