Giving GWT a try

When I decided to implement a webapp browser for littleware's node database I began a debate with myself whether to implement the project in javascript or to give GWT a try. I have a little experience with javascript - I've enjoyed working with YUI on several projects, but javascript really sucks - no strict type checking, no module system, weirdo prototype object system ...

On the other hand - I feel like if I'm going to build a browser-based application, then I should develop with web technologies - javascript, HTML, CSS, ... It's great that GWT let's me develop in java, but it's a weird technology - not javascript, not really java - it's its own thing, but GWT is open source, has a community, is used and sponsored by Google (this blogger editor uses GWT), so might as well give it a try.

Anyway, I downloaded GWT and Eclipse, and was quickly running the demo application that the GWT Eclipse plugin creates in a new project. The demo is great for demonstrating GWT's remote service infrastructure and asyncrhonous support, but the simple UI assembly does not take advantage of GWT's new declarative UIBinder infrastructure. I want to use that UIBinder mojo, so I decided a good first task would be to refactor the demo to use UIBinder. I had a few false starts and a few different parts, but one part of the code replaces this html segment:

...
    <table align="center">
      <tr>
        <td colspan="2" style="font-weight:bold;">Please enter your name:</td>        
      </tr>
      <tr>
        <td id="nameFieldContainer"></td>
        <td id="sendButtonContainer"></td>
      </tr>
      <tr>
        <td colspan="2" style="color:red;" id="errorLabelContainer"></td>
      </tr>
    </table>
    ...

, and this java code:

	public void onModuleLoad() {
		final Button sendButton = new Button("Send");
		final TextBox nameField = new TextBox();
		nameField.setText("GWT User");
		final Label errorLabel = new Label();

		// We can add style names to widgets
		sendButton.addStyleName("sendButton");

		// Add the nameField and sendButton to the RootPanel
		// Use RootPanel.get() to get the entire body element
		RootPanel.get("nameFieldContainer").add(nameField);
		RootPanel.get("sendButtonContainer").add(sendButton);
		RootPanel.get("errorLabelContainer").add(errorLabel);
                ...
         }

with this UIBinder XML:

...
	<g:HTMLPanel>
		
    <table align="center">
      <tr>
        <td colspan="2" style="font-weight:bold;">Please enter your name:</td>        
      </tr>
      <tr>
        <td> <g:TextBox ui:field="nameField" /></td>
        <td> <g:Button ui:field="sendButton" /></td>
      </tr>
      <tr>
        <td colspan="2" style="color:red;"> <g:Label ui:field="errorLabel" /></td>
      </tr>
    </table>
		
	</g:HTMLPanel>
   ...

that pairs with this code:

public class DemoPanelView extends Composite {
	private static DemoPanelViewUiBinder uiBinder = GWT
			.create(DemoPanelViewUiBinder.class);

	interface DemoPanelViewUiBinder extends UiBinder<Widget, DemoPanelView> {
	}

	@UiField
	public Label errorLabel;
	@UiField
	public Button sendButton;	
	@UiField
	public TextBox  nameField;
...

Anyway I'm having fun with GWT, so I'll try to implement the database browser in GWT until I run into something that stops me ...