GWT: When to use LazyDomElement?

Question

I'm reading up on GWT in preparation of my first GWT app, and stumbled upon the LazyDomElement and find it intriguing.

It is my understanding that when you truly want to create your own Widget subclass (and not just simply extend Composite), that you need to do all sorts of extra work for interfacing that Widget with the DOM.

So I ask: what is the "extra work" that you have to do - that you get (essentially) for free from subclassing Composite - and how can you use a LazyDomElement to make this easier or boost performance?

Answer 1

From GWT documentation and source code it seems that this class is only about UIBinder functionality and none of base GWT widgets use this class. The main and the only feature of LazyDomElement is deferred access to your widget's fields. Let's say you have a widget with template:

<gwt:HTMLPanel>
  <div ui:field="lazyField" />
  <div ui:field="generalField" /> 
  <!-- Other fields -->
</gwt:HTMLPanel>

and Java class for it:

public class MyCoolWidget extends UIObject {
  interface MyUiBinder extends UiBinder<DivElement, MyCoolWidget> {}
  private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

  @UiField LazyDomElement<DivElement> lazyField;

  @UiField DivElement generalField;

  // all other fields …

  public MyCoolWidget() {
    // Initializes all your fields and also calls 'getElementById' for all
    // not lazy fields of your widgets to have a reference to them.
    // There could be hundreds of them if you are building really cool app, 
    // and also they could be hidden (e.g. other tab on UI) and not required 
    // to be accessed at all for some cases.
    setElement(uiBinder.createAndBindUi(this));
  }

  public void setLazyField(String value) { 
    // Finally we need to modify the field, ok, 
    // we access the DOM only at this moment
    // (please take a look at 'get()' method implementation for details)  
    lazyField.get().setInnerText(name); 
  }

  public void setGeneralField(String value) { 
    // Reference to element is already there, we are just going  
    // to change it's property
    generalField.setInnerText(name); 
  } 
}

So, the reason of using it depends only on particular case of your app, do you need lazy loading of your widget elements or not.

UPD. It is fare to mention that I haven't used this class in real projects yet :). I can just imagine some scenario. For example you need to build a tickets reservation panel. With a following initial requirements:

• Should support tickets reservation for up to N travellers
• Input forms for each traveller are equal and pretty heavy (rich html, a lot of input fields)

So, you need to render up to 10 equal rich forms at one time, without necessity to access their fields before the page is loaded. We could build ReservationForm widget (ReservationForm.ui.xml with mark up, and ReservationForm.java for some logic) and to use LazyDomElement for input fields to save our first loading time.