Re: GWT 2.5 Cell rendering using uiBinder + image

[Thomas Broyer]

On Monday, November 5, 2012 4:23:56 PM UTC+1, Evgeniy Bogdanov wrote:

Hi,

Is there an any example - how to add image into Cell with UiBinder?

There is great example in showcase (http://gwt.google.com/samples/Showcase/Showcase.html#!CwCellList) but without uiBinder.

UiBinder file: 

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui">

<ui:with field='contact' type='com.billmanager.client.model.ClientContact'/>

<ui:with field='res' type='com.billmanager.client.common.Resources'/>

  <g:HTMLPanel>

   <span><ui:text from='{contact.getDisplayName}'/></span>

   <span><ui:text from='{contact.getDisplayEmail}'/></span>

   <g:Image resource='{res.delete}'/>

  </g:HTMLPanel>

</ui:UiBinder> 

 

Do not displays image.

My java class is simple:

 public class ContactCell extends AbstractCell<ClientContact> {

interface MyUiRenderer extends UiRenderer {

void render(SafeHtmlBuilder sb, ClientContact contact);

}

 

private static MyUiRenderer renderer = GWT.create(MyUiRenderer.class);

@Override

public void render(com.google.gwt.cell.client.Cell.Context context, ClientContact value, SafeHtmlBuilder sb) {

renderer.render(sb, value);

}

}

What I thought is to get rendered element (empty) and add image as html, but I don't thing it is the right way. 

You cannot use a widget (<g:HTMLPanel>, <g:Image>) in a Cell. Replace those with HTML elements (<div> for instance); and for displaying an ImageResource in a Cell, use an ImageResourceRenderer to generate the SafeHtml that you can then pass as argument to the UiRenderer and use in the template with <ui:safehtml> (similar to <ui:text>).

[Evgeniy Bogdanov]

Yah, that works.

finally I was able to display image in Cell, but I don't think it is optimal way.

So the UiBinder file:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui">

<ui:with field='contact' type='com.billmanager.client.model.ClientContact' />

<div>

<span>

<ui:text from='{contact.getDisplayName}' />

</span>

<span>

<ui:text from='{contact.getDisplayEmail}' />

</span>

<span>

<ui:safehtml from='{contact.getDeleteBtn}' />

</span>

</div>

</ui:UiBinder>  

Corresponding Java file:

 public class ContactCell extends AbstractCell<ClientContact> {

private static ImageResourceRenderer imageRenderer = new ImageResourceRenderer();

interface MyUiRenderer extends UiRenderer {

void render(SafeHtmlBuilder sb, ClientContact contact);

}

 

private static MyUiRenderer renderer = GWT.create(MyUiRenderer.class);

@Override

public void render(com.google.gwt.cell.client.Cell.Context context, ClientContact value, SafeHtmlBuilder sb) {

value.setDeleteBtn(imageRenderer.render(Resources.INSTANCE.delete()));

renderer.render(sb, value);

}

}

The problme is I have to add image into ClientContact model. I didn't find other way to pass several arguments into UiRenderer. Any ideas about that?

Thank you, 

[Thomas Broyer]

Did you try defining your UiRenderer's render() method with one more argument?

interface MyUiRenderer extends UiRenderer {

  void render(SafeHtmlBuilder sb, ClientContact contact, SafeHtml imageResource);

}

And of course two <ui:with> in the template.

[Evgeniy Bogdanov]

Great!

Didn't know that there could be several arguments in render method and all of them are matching parameters with exact the same name in uiBinder file.

Actually found in documentation: https://developers.google.com/web-toolkit/doc/latest/DevGuideUiBinder#Rendering_HTML_for_Cells (UiBinder uses the names of the parameters in MyUiRenderer.render() to match the fields defined in <ui:with> tags. Use as many as needed to render your data.) 

So finally, my UiBinder file is:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui">

<ui:with field='contact' type='com.billmanager.client.model.ClientContact' />

<ui:with field='image' type='com.google.gwt.safehtml.shared.SafeHtml'/>

<div>

<span>

<ui:text from='{contact.getDisplayName}' />

</span>

<span>

<ui:text from='{contact.getDisplayEmail}' />

</span>

<span>

<ui:safehtml from='{image}' />

</span>

</div>

</ui:UiBinder>  

Java file:

public class ContactCell extends AbstractCell<ClientContact> {

private static ImageResourceRenderer imageRenderer = new ImageResourceRenderer();

interface MyUiRenderer extends UiRenderer {

void render(SafeHtmlBuilder sb, ClientContact contact, SafeHtml image);

}

 

private static MyUiRenderer renderer = GWT.create(MyUiRenderer.class);

@Override

public void render(com.google.gwt.cell.client.Cell.Context context, ClientContact value, SafeHtmlBuilder sb) {

renderer.render(sb, value, imageRenderer.render(Resources.INSTANCE.delete()));

}

}

My image safeHtml is second argument to be passed to uiBinder.

Thank you for help. Will be trying to handle events now.