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);