adding text and image each celllist cell in MGWT

Question

Can you help me on adding of both text and image to the cell list cell in mgwt I did only for text,but failing to place both text and image.waiting for your valuable response.

Answer 1

In a cell you can use whatever markup you want to use. This is no different from GWT standard cell widgets and their cells.

This is a basic example taken from the mgwt showcase and modified to include an img tag in the markup:

public abstract class BasicCell<T> implements Cell<T> {

    private static Template TEMPLATE = GWT.create(Template.class);

    public interface Template extends SafeHtmlTemplates {
        @SafeHtmlTemplates.Template("<div>{0} <img src="{1}"/></div>")
        SafeHtml content(String text, String imgUrl);

    }

    @Override
    public void render(SafeHtmlBuilder safeHtmlBuilder, final T model) {
        safeHtmlBuilder.append(TEMPLATE.content("text", "someUrl.jgp"));

    }

    public abstract String getDisplayString(T model);

    @Override
    public boolean canBeSelected(T model) {
        return false;
    }

}

Answer 2

I'm posting all the steps to work with CellList of MGWT by considering MyContacts bean. I think this will helps alot to the beginners. suppose the bean MyContacts having two properties named contactImagePath and contactPersonName. Now I'm showing all the MyContacts List in the cellList showing both image icon (generally having small dimensions, because it should be displayed in cell) and contact name. code will be..

public abstract class MyContactsCell<T> implements Cell<T> {

  private static Template TEMPLATE = GWT.create(Template.class);

  private String styleName;
  public MynaContextBasicCell() {
      styleName = "";
  }

  public interface Template extends SafeHtmlTemplates {
     @SafeHtmlTemplates.Template("<div class=\"{0}\">" +
        "<table>" +
            "<tr>" +
                 "<td ><img style='float: left;' src=\"{1}\"></img></td>   " +
                        "<td >&nbsp;</td> " +
                        "<td ><b>{2}</b></td> " +
                    "</tr>" +
                "</table>"+
                "</div>")
        SafeHtml content(String classes, String contactImagePath,String contactPersonName);

      }

  @Override
  public void render(SafeHtmlBuilder safeHtmlBuilder, final T model) {
    safeHtmlBuilder.append(TEMPLATE.content(styleName, getContactImagePath(model), getContactPersonName(model)));

  }

  public abstract String getContactImagePath(T model);
  public abstract String getContactPersonName(T model);


  @Override
  public boolean canBeSelected(T model) {
    return false;
  }

  public void setStylename(String name) {
    if (name == null) {
      name = "";
    }
    styleName = name;
  }

}

now define subclass of above

public class MyContactsCellSubType extends MyContactsCell<MyContacts> {


@Override
public String getContactImagePath(MyContacts model) {
    return model.getContactImagePath();
}
@Override
public String getContactPersonName(MyContacts model) {
    return model.getContactPersonName();
}

@Override
public boolean canBeSelected(MyContacts model) {
    return true;
}

}

in your view,

MyContactsCellSubType contactsCellSubType = new MyContactsCellSubType();
CellList<MyContacts> contactsCellList = new CellList<MyContacts>(contactsCellSubType);

lets say 'myContactList' is the list of MyContacts that is available in your view .

contactsCellList.render(myContactList);

after rendering the list to contactsCellList and it to a scroll panel

   contactsCellList.setRound(true);
    myScrollPanel.setWidget(contactsCellList);
    myScrollPanel.setScrollingEnabledX(false);;
    myScrollPanel.setSize("100%", "100%");

add myScrollPanel to your view's main panel.