How to create a Dynamic table in GWTP

Question

I am a new GWTP user and I am not sure how to create a table in GWTP. I know how to make one in GWT.

// Create a CellTable.
CellTable<Contact> table = new CellTable<Contact>();
// Create name column.
TextColumn<Contact> nameColumn = new TextColumn<Contact>() {
  @Override
  public String getValue(Contact contact) {
    return contact.name;
  }
};

But This doesn't seem to work in GWTP. Can someone please help me with getting the values on a button press in a GWTP program.

Answer 1

I'm aware you asked this question over a week ago but you may still be stuck on it so here goes. You just have to make sure you put the right bits of logic in the Presenter and View respectively.

It's no different from MVP (Model-View-Presenter) without GWTP in principle:

Your Presenter has the job of getting the data to fill the CellTable, and passing it to the View:

public class TablePresenter extends Presenter<TablePresenter.MyView, TablePresenter.MyProxy>
{
    public interface MyView extends View
    {
        void addData(List<Contact> accounts); // pass data to view
    }

    // proxy and constructor omitted for brevity...

    @Override
    protected void onReveal()
    {
        super.onReveal();

        // server action to get contacts
        dispatchAsync.execute(new GetContacts(), new AsyncCallback<GetContactsResult>()
        {
            @Override
            public void onSuccess(GetContactsResult result)
            {                   
                getView().addData(result.getContacts());
            }
        });
    }
}

Your View has the job of initially setting up the CellTable and its Columns, as well as receiving the data from the Presenter. Here I show a TextColumn and a Column using a ButtonCell:

public class TableView extends View implements TablePresenter.MyView
{
    @UiField
    CellTable<Contact> table;

    // use a dataprovider to hold the data
    private ListDataProvider<Contact> dataProvider = new ListDataProvider<Contact>();

    // COLUMNS
    TextColumn<Contact> nameColumn;
    Column<Contact, String> buttonColumn;

    @Inject
    public AccountsView(Binder uiBinder)
    {
        initWidget(uiBinder.createAndBindUi(this));

        initTable();
    }

    private void initTable()
    {
        nameColumn = new TextColumn<Contact>()
        {
            @Override
            public String getValue(Contact object)
            {
                return object.name;
            }
        };
        // now add the column to the table
        table.addColumn(nameColumn, "Name");

        buttonColumn = new Column<Contact, String>(new ButtonCell())
        {
            // the text of the button
            @Override
            public String getValue(Contact object)
            {
                return "Delete " + object.name;
            }
        };

        // set the button action
        deleteColumn.setFieldUpdater(new FieldUpdater<Contact, String>()
        {
            @Override
            public void update(int index, Contact object, String value)
            {
                // whatever you want to do when you click the button
                Window.alert("You pressed " + object.name);
            }
        });
        fileTable.addColumn(deleteColumn);

        // link dataprovider to the table
        dataProvider.addDataDisplay(table);
    }

    @Override
    public void addData(List<Contact> contacts)
    {
        // clear the dataProvider's list
        dataProvider.getList().clear();

        // pass the data into the list
        dataProvider.setList(contacts);

    }

}

Then in your UiBinder:

<g:HTMLPanel>
    <b:CellTable ui:field="table" />
</g:HTMLPanel>