Tuesday, October 27, 2009

GWT Formatting Best Practices

  • Do NOT use FlexTable to create input forms.
  • Use CSS to style elements 
  • Use CSS to style column width and alignment
  • Use modular code, i.e. group of radio buttons could be a separate method or a class 
  • Do NOT use indices to format, rather use logical object and methods
Example 1
Code before re-factoring:
contentTable.getFlexCellFormatter().setWidth(BULLETIN_INDEX_6_ANNOUNCEMENT, 0, "25%");
contentTable.getFlexCellFormatter().setColSpan(BULLETIN_INDEX_12_DESTINATION_MESSAGE, 1, 2);
contentTable.getFlexCellFormatter().setAlignment(BULLETIN_INDEX_0_SPORT, 0, HasHorizontalAlignment.ALIGN_RIGHT, HasVerticalAlignment.ALIGN_MIDDLE);

Code after re-factoring:
myStyles.css:
.admin_message_form_left_column {
width: 170px;
text-align: right;
padding: 5px;
background-color: yellow;
}

.admin_message_form_right_column {
padding: 5px;
background-color: blue;
}

MyClass.java:
this.left.setStyleName("admin_message_form_left_column");
this.right.setStyleName("admin_message_form_right_column");


Example 2
Code before re-factoring:
contentTable.setWidget(BULLETIN_INDEX_1_DIVISION, 0, noWrapLabel("Division:"));
contentTable.setWidget(BULLETIN_INDEX_1_DIVISION, 1, divisionList);

Code after re-factoring:
divSelector.setLeft(noWrapLabel("Division:"));
divSelector.setRight(divisionList);
divSelector.setVisible(true);