GWT 2: how can I add Button to the CellTable's header?

Question

My task is to create a table with a control to add the new lines. This typical control should consist of corresponding set of TextEdits and an "add new row" Button.

I use CellTable.

I can create this "adding widget" separately just combing button and necessary fields in some panel, but I want to try to bind it to the table. I want to make it using the CellTable. For this purpose I try to utilize the header of the CellTable. I created a Header and added a EditCellText and ButtonCell. I have two problems:

• The button is not shown. Instead a value returned by getValue() method is shown.
• I dont know how to handle the click on that button.

[1] Finally, the first question is: how can you add a button into a header of CellTable and how would you process the click on that button? The button should looks like a button, not just some click area.

[2] Probably there is another way to accomplish my task. Is it possible to create CellTable where different rows hold different buttons? I.e. first row holds button "Add", and all other rows hold button "Remove". Can GWT do this?

[3] One more question. At the moment I describe the structure of my CellTable using Java code. I.e. I create and add column and header objects manually while creating the parent widget. Is it possible to express the structure of my CellTable with XML, i.e. using some mySpecialCellTable.ui.xml file?

Answer 1

for displaying a button in your table you can use a ButtonCell:

Column<MyObject, String> delete = new Column<MyObject, String>(new ButtonCell()) {

            @Override
            public String getValue(final MyObjectobject object) {
                return "delete";
            }
        };

        delete.setFieldUpdater(new FieldUpdater<MyObject, String>() {

            @Override
            public void update(final int index, final MyObjectobject object, final String value) {

                myActivity.delete(object); // to whatever should happen if button is clicked
            }
        });

This should answer the second question as well. As far as I know you have to add the columns in you java class. In your uibinder file you can only add the celltable as a whole.

<p1:CellTable ui:field="table"></p1:CellTable>

Hope this helps.

Answer 2

public static class BtnHeader extends Header<String>{

    public BtnHeader(ButtonCell cell) {
        super(cell);

    }
     @Override
       public void onBrowserEvent(Context context, Element elem, NativeEvent nativeEvent)
       {
          int eventType = Event.as(nativeEvent).getTypeInt();
          if (eventType == Event.ONCLICK)
          {
             nativeEvent.preventDefault();
            updateHeader();
          }
       }
    @Override
    public String getValue() {
        return "Click!";
    }
    protected void updateHeader() {
        // TODO to redefine in a defiant class

    }

 }

And in your code

BtnHeader header = new BtnHeader(new ButtonCell()){
                @Override
                protected   void updateHeader(){
                    // Actions when clicking button
                }

cTable.addColumn(column, header);