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 List，同时显示图像图标（通常具有较小的尺寸，因为它应该显示在单元格中）和联系人姓名。代码将是......

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

在MGWT中添加文本和图像中的每个celllist单元格

2 个答案: