Добавление текста и изображения каждой ячейки списка ячеек в MGWT

Question

Можете ли вы помочь мне добавить текст и изображение в ячейку списка ячеек в mgwt, который я сделал только для текста, но не смог разместить текст и изображение, ожидая вашего ценного ответа.

Answer 1

В ячейке вы можете использовать любую разметку, которую хотите использовать. Это ничем не отличается от стандартных виджетов ячеек GWT и их ячеек.

Это базовый пример, взятый из витрины mgwt и модифицированный для включения тега img в разметку:

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

Я публикую все шаги для работы с CellList MGWT, рассматривая bean-компонент MyContacts. Я думаю, что это поможет много новичкам. предположим, что компонент MyContacts имеет два свойства с именами contactImagePath и contactPersonName. Теперь я показываю весь список MyContacts в cellList, показывая значок изображения (как правило, небольших размеров, потому что он должен отображаться в ячейке) и имя контакта. код будет..

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;
  }

}

Теперь определим подкласс выше

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;
}

}

по вашему мнению,

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

Допустим, myContactList - это список MyContacts, который доступен на ваш взгляд.

contactsCellList.render(myContactList);

после рендеринга списка в contactsCellList и его на панель прокрутки

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

добавьте myScrollPanel на главную панель вашего представления.