GWT Cell List Ubinder

Question

Because of requirements of my development I need create a GWT cell list with UiBinders inside them. Can anybody give me an example of how to do it?

I am looking in showcase of gwt but I do not find any case equal.

Tnaks a lot!

Answer 1

You should take a look into the official documentation: GWT Project Ui Cell widgets

When you use UiRenderer you are using UiBinder, you need to think as UiBinder as something which generates DOM from ui.xml templates, and if you use UiRenderer you are describing that DOM structure as a html directly instead of using "GWT normal stuff (like <g:Label />)".

So there are related concepts.

About your questions:

1) Yes, you can do it, but using html and your css. The way of attaching handlers are pretty easy, I'll show you an example:

public class YourTypeCell extends AbstractCell<T> {
   static interface Renderer extends UiRenderer {
     void render(SafeHtmlBuilder sb, String id, String name, String img);
     void onBrowserEvent(CommentCell o, NativeEvent e, Element p, T value);
  }

  private final Renderer renderer;

  public YourTypeCell(...) {
    super(BrowserEvents.CLICK, BrowserEvents.MOUSEOVER);
    ....
    renderer = GWT.create(Renderer.class);
  }

  @Override
  public void render(Context context, final T item, final SafeHtmlBuilder sb) {
    String id = ...;
    String img = ...;
    String name = ...;
    renderer.render(sb, id, name, img);
  }

  @Override
  public void onBrowserEvent(Context context, Element parent,
      T value, NativeEvent event, ValueUpdater<T> valueUpdater) {
    renderer.onBrowserEvent(this, event, parent, value);
  }

  @UiHandler({"field1"})
  void onMouseOver(MouseOverEvent event, Element parent, T value) {
    ...
  }

  @UiHandler({"field2"})
  void onReplyComment(ClickEvent event, Element parent, T value) {
    ...
  }
}

Also the ui.xml file looks like:

<!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:style>
    .clear{
      clear:both;
    }
    .cssOne {
      ....
    }
    .cssTwo {
      ....
    }
  </ui:style>

  <ui:with field="id" type="java.lang.String"/>
  <ui:with field="name" type="java.lang.String"/>
  <ui:with field="img" type="java.lang.String"/>

  <div ui:field='field1' class="{style.cssOne}">
    <div ui:field='field2' class="{style.cssTwo}"> 
      <ui:text from='{name}'/> 
    </div>
    <p><ui:safehtml from='{img}'/></p>
  </div>

</ui:UiBinder> 

About the CellList examples you can find it in the previous url and in the javadoc http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/cellview/client/CellList.html

You can link both classes (CellList and your custom cell) with CellList's constructor:

CellList<T> cellList = new CellList<T>(new YourTypeCell(...));