Creating Custom Cells with UIBinder

[joel]

If I create a UIBinder class with a "root" of HTMLPanel, can I use
the .toString() method to return HTML that can be used in the render
method of my AbstractCell<MyData> implementation?

Basically, how do I use UIBinder to build my Custom cells? What if I
have some functionality I want to keep (click on image, etc)?

Any examples?

J

[Jeff Larsen]

Basically, how do I use UIBinder to build my Custom cells? 

You can't yet. This is being worked on though. 

[joel]

It seems like at a minimum, I should be able to generate the html
using UiBinder, but .getHTML()/HasHtml doesn't seem to be available on
any interesting widgets?

[Jeff Larsen]

getHTML(), HasHtml aren't for the entire widget itself, it would be for a small portion of the widget, like with DialogBox where getHTML() returns the HTML in the header. 

[Thomas Broyer]

As Jeff said, this is being worked on (generating a SafeHtmlRenderer from a ui.xml) and should ship in 2.4 (i.e. very soon!)

A bit more details below:

On Thursday, June 23, 2011 10:16:17 PM UTC+2, joel wrote:

If I create a UIBinder class with a "root" of HTMLPanel, can I use
the .toString() method to return HTML that can be used in the render
method of my AbstractCell<MyData> implementation?

You cannot use widgets in Cells, so the only kind of ui.xml that'd work are those that don't use widgets, and have a "return type" of Element.

...but that's of no help for the moment.

What I'd recommend is to use SafeHtmlTemplates.

Basically, how do I use UIBinder to build my Custom cells? What if I
have some functionality I want to keep (click on image, etc)?

Cells generate HTML, so there's no way you could define @UiHandlers, at least not the way UiBinder is built nowadays.

You have to implement onBrowserEvent and check whether the click was on your image or not. I generally use class names to somehow "identify" the elements when there are several of the same kind in the Cell: take the event's target (cast to Element), if its tagName (lower-cased) is "img", then check whether it has the class name you defined and react accordingly. In some cases, you'd have to walk up the hierarchy until you find an element with the given tagName.

 

Any examples?

You'll find some (admittedly a bit "limited") in the built-in Cells. IIRC, CheckBoxCell checks whether you clicked on the checkbox or outside, and ButtonCell (and/or ActionCell) checks for the button in a similar way.