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 ...