cssgwtcelltableclientbundle

How to add the css properties to an image in ImageResourceCell of CellTable


I created a CellTable with image column in GWT. Image is added through `ImageResource .

private Column<DocList, ImageResource> statusColumn;
private final Resources resources = GWT.create(Resources.class);
final String STATUS_COLUMN = "Status";
statusColumn = buildStatusColumn();

private Column<DocList, ImageResource> buildStatusColumn() {
    statusColumn = new Column<DocList, ImageResource>(
            new ImageResourceCell()) {
        @Override
        public ImageResource getValue(DocList object) {
            return resources.draft();
        }
    };
    statusColumn.setDataStoreName(STATUS_COLUMN);
    return statusColumn;
}

public interface Resources extends ClientBundle {
    @Source("draft.png")
    ImageResource draft();
}

But the problem is that I want to change some css properties of the image, for example, size or cursor="pointer" for click event, but I don't know how. In Firebug there is a default size. How to add css to image done by ImageResource in GWT?


Solution

  • Column has a method called getCellStyleName().

    You can override this method and return a style that reflects the image you use

    @Override
    public String getCellStyleName()
    {
        return resources.draft().getName();
    }
    

    Then you could create a style in your sheet like this:

    .draft img {
        cursor: pointer;
        width: ...;
        height: ...;
    }