I typically do the following:
Code:
class FooView extends LayoutContainer {
// Fields that I want to reference throught the code.
private final TextField<String> fooField = createFooField();
private final TextField<String> barField = createBarField();
// Assemble the UI.
@Override protected void onRender(Element parent, int index) {
super.onRender(parent, index);
this.setLayout(...);
this.setSize(...);
this.setHeading(...):
this.add(fooField);
this.add(barField);
this.add(createBazField()); // field created for display only
}
private TextField<String> createFooField() { ... etc ... }
}
I like to put all the UI assembling code (setting layouts, sizes, headings, adding components to containers, etc) in (or called from) a render method. If a component is purely for display purposes, it is created there.
Any components that also need to be referenced outside of the UI assembly logic I put into the constructor.
Although sometimes I see strange things such as text fields overlapping each other in a dialog, which is fixed when I move the dialog or tab between fields.
I guess this points to problem with putting all the UI assembly into onRender(). It may be that the parent container can't figure out the required sizes and offsets because the child components have not been added by the time onRender() is called. Or maybe layout() needs to be called somewhere.
Where is the best place to call setLayout() and setSize(), for example?