GWT How to make a composite Cell composed of 2 kinds of cells or how to make a custom cell with image and text

Question

I want to add a column in a celltable/datagrid which contains image + text. I just do some research and found out maybe there are 3 ways to do this.

1. make an ImageResourceCell and a TextCell then combine them into a composite cell. (did not see any example or reference yet, it just comes out from my mind. maybe this will not work)

2. use IconCellDecorator. I checked the documentation. It said that "A Cell decorator that adds an icon to another Cell". Not sure if it can do what I want. Still I dont find any example about it.

3. make a custom cell. There is a example about combing the color name and color style in GWT offical website. I tired this way to combine image and string. But it is not working. Maybe there is something wrong with my codes since I dont totally understand the codes.

Could anyone provide me some examples about achieving this. You could do any ways you know. Just type some codes and show me example.

Thank you so much.

Best Regards

Answer 1

this is not exactly what you searched, but I think you will be able to modify my example. Here I used a CompositeCell to get a Cell containing 2 different images, each of it rendered in an ImageCell.

//first make a list to store the cells, you want to combine
final ArrayList<HasCell> zellen = new ArrayList<HasCell>();

//then define the cells and add them to the list    
HasCell bearbeiten = new HasCell(){
    @Override
    public Cell getCell() {
        return new ImageCell();
    }

    @Override
    public FieldUpdater getFieldUpdater() {
        return null;
    }

    @Override
    public Object getValue(Object object) {
        String bearbBild = "images/pencil3.png";
        return bearbBild;
    }
};
zellen.add(bearbeiten);


HasCell ansicht = new HasCell(){

    @Override
    public Cell getCell() {
        return new ImageCell();
    }

    @Override
    public FieldUpdater getFieldUpdater() {
        return null;
    }

    @Override
    public Object getValue(Object object) {
        String ansichtBild = "images/gnome_edit_find.png";
        return ansichtBild;
    }
};
zellen.add(ansicht);

//use your CompositeCell in another Widget or Table         
Column<Benutzergruppe, Cell> options = new Column<Benutzergruppe, Cell>(new CompositeCell(zellen)){

    @Override
    public Cell getValue(Benutzergruppe object) {
        return zellen.get(0).getCell();
    }   
};

I added the column to a DataGrid, worked fine for me.

Greets, Nicole