如何设置GWT单元格背景颜色

Question

i would like to change the background-color property of a gwt cell column. The problem is that this color can change at each render of the cell (background color depends on the value of the cell).

I have already tried to override the cell style names method of TextColumn as follow :

@Override
public String getCellStyleNames(final Context context, final Object data) {
if (my_condition) return "a custom style";
else return "default style"; // or null...
}

Well as you certainly know its only add a class name to the property so i can't use it to set a color "dynamically" due to the static css file definition.

Thx for ur help !

Answer 1

You can use CellFormatter, if you are using Grid. Eg grid.getCellFormatter().setStyleName(row, column, "dynamicStyleName");

For dynamic update of 'color' property I would recommend to extend TextCell (and pass it to 'TextColumn' constructor). Something like that:

public class CustomCell extends TextCell<String> {

  interface Template extends SafeHtmlTemplates {
    @Template("<div style=\"color:{0}\">{1}</div>")
    SafeHtml div(String url, String text);
  }

  private static Template template;

  public CustomCell () {
    if (template == null) {
      template = GWT.create(Template.class);
    }
  }

  @Override
  public void render(Context context, String value, SafeHtmlBuilder sb) {
    String color = "red";
    if (value != null) {
      // The template will sanitize the URI.
      sb.append(template.div(color, value));
    }
  }
}


public class CustomColumn<T> extends TextColumn<T> {

  public CustomColumn() {
    super(new CustomCell());
  }
}

Answer 2

Since you didn't give details of the component you are using, I'll give a generic suggestion for trying to find out which properties you might need to play with.

I use eclipse and suggest using the GWT Designer to help you with POC stuff. It helps me get an idea of which properties I might want to play with:

• GWT Designer Refererence: https://developers.google.com/web-toolkit/tools/download-gwtdesigner

• Example of how to use GWT Designer:
  https://developers.google.com/web-toolkit/tools/gwtdesigner/tutorials/loginmanager