Defining GWT CellTables with UiBinder

Question

If I define my CellTable in MyView.ui.xml UiBinder file like this:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'
xmlns:c="urn:import:com.google.gwt.user.cellview.client"
ui:generateFormat='com.google.gwt.i18n.rebind.format.PropertiesFormat'
ui:generateKeys='com.google.gwt.i18n.rebind.keygen.MD5KeyGenerator'
ui:generateLocales='default' xmlns:p1="urn:import:com.google.gwt.user.cellview.client">
        ...
    <g:HTMLPanel>           
      <c:CellTable
        addStyleNames='{style.cellTable}'
        pageSize='15'
        ui:field='cellTable' width="100%">  
       </c:CellTable>           
    </g:HTMLPanel>

and then programmaticaly add the columns to the CellTable, everything works fine.

But in an attempt to reduce boilerplate code I would like to define also the table columns in my UiBinder file. I've tried this:

    ...
    <g:HTMLPanel>           
      <c:CellTable
        addStyleNames='{style.cellTable}'
        pageSize='15'
        ui:field='cellTable' width="100%">  
            <c:TextColumn 
                addStyleNames='{style.titleColumn}'
                ui:field="titleColumn"/>
       </c:CellTable>           
    </g:HTMLPanel>

But it produces the following error:

[ERROR] [dialective] - Found unexpected child element Element addStyleNames='{style.titleColumn}'ui:field='titleColumn'> (:33)

How could I define the whole CellTable using UiBinder?

Answer 1

Evidently, in the second listing you're trying to add a column as a child object. Cell table doesn't accept children directly (meaning there is no addChild(...) method).

If you have fixed number of columns and want to use UIBinder consider using mere HTML table. In that case you will have all columns in the XML file, but the table will become harder to work with - HtmlElement not Widget.

<table ui:field="table">
    <col ui:field="firstColumn" class="{style.firstColumn}">
    <col ui:field="secondColumn"  class="{style.secondColumn}">
    ...
</table>

And the code might look like the following

... 
@UiField
private TableColElement firstColumn;

@UiField
private TableColElement secondColumn;

But all other operations with the table will be via DOM. Like table.appentChild(rowElement). I think doing like this doesn't worth it.