mgwt - 在 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

通过考虑 MyContacts bean，我发布了使用 MGWT 的 CellList 的所有步骤。我认为这对初学者有很大帮助。假设 bean MyContacts 有两个名为contactImagePath 和contactPersonName 的属性。现在我在 cellList 中显示所有 MyContacts 列表，同时显示图像图标（通常具有小尺寸，因为它应该显示在单元格中）和联系人姓名。代码将是..

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 添加到视图的主面板。