GWT how to add a custom cell to celltable/datagrid

2
votes

I have rendered a custom cell which combines an image and text. It looks like this: 

   class ImageTextCell extends AbstractCell<String>

My question is how to add this cell into celltable/datagrid. I have tired this.

  Column<Message, String> iconColumn = new Column<Message, String>(new ImageTextCell())
            {
        @Override
        public String getValue(Message versionStatus) {

            return ? // I dont know what to type here. How to return the ImageTextCell object           }
    };
2
gwtdatagridcellcustom-cellgwt-celltable

2 Answers

11
votes

The role of the Cell object is to turn a value into a piece of HTML. The role of the Column is to get that value from each row. For example, you have a bunch of Messages, each one on its own row - the Column should take a Message and figure out what String to pass to the Cell.

The output of getValue will be fed into the input of render. The output of render should be the HTML you want to see in your app.

Pseudo-codily, here's what GWT does for you:

for each Message in your table {
    pass the Message into Column.getValue and get out a String
    pass that String into Cell.render and get out some HTML
    add that HTML inside a <td> element in the table we're drawing
}

You just have to define Column.getValue and Cell.render so that this process makes the table you want.

0
votes

here is a way I do to display a png flag in my app:

  Column<IStationMini, ImageResource> flag = new Column<IStationMini, ImageResource>( new ImageResourceCell()) {
        @Override
        public ImageResource getValue(IStationMini station) {
            return FlagsTools.getFlag( station.getCountry());
        }
    };
this.addColumn( flag ) ;

the "FlagsTools.getFlag()" returns an imageResource