Google Web Toolkit, 2.0


Thoughts

Our life basically lives on the web, the web is the platform! One of the advantages of creating your web application in GWT is it is pure html/javascript/css and the user doesn’t need to install a plugin to use your app! It is easily viewed on most smart phones as well. It compiles to each browser making it more efficient than using alot of if/else statments to build code for the particular browser you are using. It standardizes the method you use to make your app, no more studying the nuances and ripping your hair out over tiny browsers quirks. GWT 2.0 which is scheduled for release this fall has some great new features that I am finding to make GWT more flexible and easy to maintain.

Get GWT Trunk
The 2.0 features talked about here are in trunk and building it yourself is fairly straight forward.

  1. If you don’t already have it, get the latest version of eclipse – Galileo, with the Google plugin.

    http://code.google.com/eclipse/

  2. Checkout the source code
    Follow the instructions on the GWT homepage, its pretty good.
    Make sure you have ant installed. It takes awhile, i think maybe 20 mins or so on my macbook.

  3. Setup the API directory in the Preferences for GWT
    In eclipse, add the new version of GWT library.

    Go to Eclipse > Preferences.
    Find the Google Web Toolkit on the left. Click add, add the path to the compile files like so:
    ~/gwt/trunk/build/lib
    I named it “trunk”

  4. Create project
    Create a new Web Application Project, select “trunk” (or whatever you named it in the previous step) as the version of GWT to use.

The most interesting things in 2.0 is the UiBinder and UiHandler.

Using UiBinder
Usually for each element on the page you need to do something like this

CheckBox box = new CheckBox("this is the label for the checkbox");
box.setFormValue = "3";

Panel verticalPanel = new VerticalPanel();
panel.add(box);

If you have alot of elements on the page, that comes out to alot of java code. And you might start wondering if you are writing a Swing app or a web app?!?

in UiBinder, we can can put it in a XML file like:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
                    xmlns:g='urn:import:com.google.gwt.user.client.ui'>
  <g:VerticalPanel>
    <g:CheckBox ui:field="rubyCheck" formValue="ruby">Ruby</g:CheckBox>
  </g:VerticalPanel>
</ui:UiBinder>

Typically any attribute you can use in the java code like setName, setFormValue, setStyleName you can add right in the xml as attribute=”"

You can reference your objects from the xml like so:

public class LanguageList extends Composite {
  interface MyUiBinder extends UiBinder<Widget, LanguageList> {}
  private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);
  @UiField CheckBox rubyCheck;
  public LanguageList() {
      // bind XML file of same name to this class
      initWidget(uiBinder.createAndBindUi(this));
      // use rubyCheck as if you had defined it already with new
      rubyCheck.setStyleName("rubyCheckStyle");
  }
}

Note you have to bind the xml to the java code with:

  interface MyUiBinder extends UiBinder<Widget, LanguageList> {}
  private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

This process is called deferred binding. This may be familar to java programmers already but My background is LAM(P|P|R) programming so I am still trying to fully understand it myself! GWT homepage explains it here: http://code.google.com/webtoolkit/doc/1.6/FAQ_Client.html#Deferred_Binding

Using UiHandler

Typically, event handlers are written as such:

// add button and handler to alert the values of checkboxes
button.addClickHandler(new ClickHandler() {
   public void onClick(ClickEvent event) {
     String output = "";
     for(CheckBox box : boxes) {
       if (box.getValue()) {
           output += box.getFormValue() + ", ";
       }
     }
     Window.alert("You checked: "+ output);
   }
});

Instead of having the click handler specified in the java method, you can attach it via an annotation:

@UiHandler("languageButton")
  void doClick(ClickEvent event) {
      String output = "";
         for(CheckBox box : boxes) {
          if (box.getValue()) {
              output += box.getFormValue() + ", ";
          }
      }
      Window.alert("You checked: "+ output);
 }
 

Sweet, huh? I think it cleans up the code nicely and gets the job done!

Go compile the Trunk version of GWT and give it a try!

If you want to see the full source for a simple gwt app before and after UI Binder, I have a write up here with links to sources on github here.

Resources for learning gwt that I found helpful:

GWT Homepage
http://code.google.com/webtoolkit/

GWT Can Help You Create Amazing Web Apps
http://www.youtube.com/watch?v=T0X9BcBd-I0

GWT Best Practices
http://code.google.com/events/io/2009/sessions/GoogleWebToolkitBestPractices.html

OnGWT – various blog posts about GWT
http://www.ongwt.com/


Leave a Reply