2

All is in the question, how can I create a custom cell with a canvas on it by using a CellTable in GWT ?

I search a way to transform the canvas into html to append it to the SafeHtmlBuilder parameter of the render method but with no success. Here is the interesting snippet of the custom cell:

public void render(Context context, String value, SafeHtmlBuilder sb) {

    Canvas c = Canvas.createIfSupported();

    // create a text into the canvas using the value parameter
    // something like (this is not important) : 
    c.getContext2d().drawTheText(value);

    // here is the problem, what kind of transformation may I do 
    // to use the canvas in this cell ?
    SafeHtml safeValue = SafeHtmlUtils.fromString(c.?????);
    sb.append(safeValue);
}

EDIT: here is the working solution, thanks to Thomas

sb.append(SafeHtmlUtils.fromTrustedString("<img src=\"" + canvas.toDataUrl() + "\" />"));

note that a template should be used instead of using directly a piece of html code as it.

Jerome Cance
  • 8,103
  • 12
  • 53
  • 106

1 Answers1

2

I think you'll have to use toDataURL() and build an <img> element to display it.

Note that you could then reuse the same Canvas instance between invocations of render; just make sure you clear it before reuse.

Thomas Broyer
  • 64,353
  • 7
  • 91
  • 164
  • Hum, seems strange but I will give it a try. Thanks – Jerome Cance May 21 '12 at 15:55
  • 1
    If I were you, I'd measure performances though. It might be better for your user if you instead create a placeholder element (with an ID) and schedule a deferred command to fill the placeholder with a Canvas. That way, the rest of the `CellTable` rendering wouldn't be impacted by canvas performances. – Thomas Broyer May 22 '12 at 12:33
  • For the moment, performances are quite acceptables because it is really small canvas (25x10). I will think of it if I need it. Thanks for pointing me out in the right direction. – Jerome Cance May 22 '12 at 12:49