javacsstwitter-bootstrapgwtgwtbootstrap3

Can we change GWT Bootstrap 3 ButtonCell Icon Dynamically?


I have a GWT bootstrap 3 button as a ButtonCell created with IconType and ButtonType:

public abstract class ButtonColumn<T> extends Column<T, String> {
    public ButtonColumn(IconType iconType, ButtonType buttonType) {
        this(new ButtonCell(buttonType, iconType));
    }
}

So when I create the button, I do

new ButtonColumn<Object>(IconType.PLAY, ButtonType.SUCCESS) {
  @Override
  public void onClick(Object obj) {
    doStuff(obj);
  }
};

I want to change my button IconType onClick. Is it possible to achieve it? And can I create a custom IconType extending the GWT IconType Enum? I wanted to put an animated icon (like a loading icon).


Solution

  • Well, you can not change the button's icon in a row, especially when you create the whole column with an icon already specified. But you can redraw() a row and this could be a way to achieve what you want.

    I use AbstractCell to render a button and onBrowserEvent:

    The clicked state is best to be kept in the table's underlying data type so it is available for each row.

    Here is a complete working example code:

    final CellTable<TableType> table = new CellTable<TableType>();
    
    AbstractCell<TableType> buttonCell = new AbstractCell<ButtonCellTest.TableType>(ClickEvent.getType().getName()) {
        @Override
        public void render(Context context, TableType value, SafeHtmlBuilder sb) {
            Button button = new Button();
            button.setType(ButtonType.SUCCESS);
            button.setSize(ButtonSize.SMALL);
            button.add(new Icon(value.isClicked() ? IconType.CHECK : IconType.TIMES));
            sb.append(SafeHtmlUtils.fromTrustedString(button.toString()));
        }
    
        @Override
        public void onBrowserEvent(Context context, Element parent, TableType value, NativeEvent event, ValueUpdater<TableType> valueUpdater) {
            value.setClicked(!value.isClicked());
            // ... do stuff...
            table.redrawRow(context.getIndex());
        }
    };
    table.addColumn(new Column<TableType, TableType>(buttonCell) {
        @Override
        public TableType getValue(TableType object) {
            return object;
        }
    });
    
    ArrayList<TableType> rowData = new ArrayList<TableType>();
    rowData.add(new TableType("row 1"));
    rowData.add(new TableType("row 2"));
    ...
    table.setRowData(rowData);
    

    And example table's data type keeping the clicked state:

    public class TableType {
        String text;
        boolean clicked = false;
    
        public TableType(String text) {
            this.text = text;
        }
    
        public String getText() {
            return text;
        }
    
        public boolean isClicked() {
            return clicked;
        }
    
        public void setClicked(boolean clicked) {
            this.clicked = clicked;
        }
    }
    

    As for extending the IconType enum - no, you can not extend an enum in Java. See this question for example: Can enums be subclassed to add new elements?.

    You could try to add your own CSS class but this should be asked as another question to get precise answers.