mgwt - MGWT の各 celllist セルにテキストと画像を追加する

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 を操作するすべての手順を投稿しています。これは初心者にとって非常に役立つと思います。contactImagePath と contactPersonName という名前の 2 つのプロパティを持つ Bean MyContacts があるとします。これで、セルリストにすべての 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 を追加します。