Introduction to Google Web Toolkit (GWT)

General Concepts

With GWT, you write the user interface elements in Java, which GWT compiles to cross-platform JavaScript for you. It is then "wired" to your webpage using the id attribute of your HTML. For example, if your HTML has the following tag:

       <tr><td id="newContact"/>
           <td>Rest of opentaps goes here</td>
       </tr>

Then, in GWT, you can add widgets to that part of your webpage with:

  RootPanel.get("newContact").add(vPanel);

The RootPanel of GWT is like the background of your screen. You add panels, buttons, and other widgets to it to make your screen.

Often, the GWT API is a bit low level, and you can save a lot of code by making simple extensions or helpful methods like these for your repetitive UI elements:

private TextBox getTextBox(int visibleLength, int maxLength) {
    TextBox textBox =new TextBox();
    textBox.setVisibleLength(visibleLength);
    textBox.setMaxLength(maxLength);
    return textBox;
} 

private Label getLabel(String text, String styleName) {
    Label label = new Label(text);
    label.setStyleName(styleName);
    return label;
}

private void addWidgetWithLabelToPanel(VerticalPanel panel, String labelText, String labelStyle, Widget widget) {
    panel.add(getLabel(labelText, labelStyle));
    panel.add(widget);
}