How to setup flextable with uiBinder for GWT 2.4

Question

I'm trying to setup a flextable with uiBinder. I'm using GWT 2.4 and I know how to do a flextable, but not with uiBinder. I found this question: How can I add rows to a Google Web Toolkit flextable in the UiBinder? was asked on SO, but no examples on how to do this.

So if I declare the widget as in:

@UiBinder FlexTable flexTable;

How do I do a initialize a blank row with two columns and a header row that names the columns with @UiConstructor or (provider=true) using uiBinder?

Answer 1

When using the FlexTable widget, you can only use the ui.xml template to set it's location, formatting, and attributes. You'll still need to provide the contents (and headers) of the table pragmatically in your java code.

There are two approaches to this:

1: Rely on the template to instantiate a new, empty FlexTable for you when you call initWidget(...) . You can follow up with appropriate calls to table.setText(0,0, "Header 1"), etc. immediately afterwards to specify your content.

2: Instantiate the FlexTable yourself before you call initWidget(...) and also annotate your table member variable with provided=true. Follow up with the same calls to setText().

Example (Using approach 2)

public final class SomeWidget extends Composite {

  @UiField (provided=true) FlexTable table;

  SomeWidget() {

    // When using provide=true, the table must be instantiated
    // BEFORE calling initWidget.
    setupTable();

    initWidget(binder.createAndBindUi(this));
  }

  private void setupTable() {
    table = new FlexTable();
    table.setText(0, 0, "Header 1");
    table.setText(0, 1, "Header 2");

    // Create a temp blank row:
    table.insertRow(1);
  }

  private static final Binder binder = GWT.create(Binder.class);
  interface Binder extends UiBinder<Widget, SomeWidget> {}
}

And in your ui.xml file:

<ui:UiBinder
   xmlns:gwt="urn:import:com.google.gwt.user.client.ui"
   xmlns:ui="urn:ui:com.google.gwt.uibinder">

  <ui:style>
    .table-style {
      border: 1px solid black;
    }
  </ui:style>

  <gwt:HTMLPanel>
    Other random html
    <gwt:FlexTable ui:field="table" styleName="{style.table-style}" borderWidth="2" />
  </gwt:HTMLPanel>

</ui:UiBinder>