在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豆与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到您的视图的主面板。