gwtsmartgwtgwtpgwt-platformgwt-places

How to create a Dynamic table in GWTP


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.


Solution

  • 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>