如何将图像添加到 GWT 中的 cellTable 中的单元格

Posted 2023-02-26

【中文标题】如何将图像添加到 GWT 中的 cellTable 中的单元格

【英文标题】：how to add an image to a cell in cellTable in GWT

【发布时间】：2011-05-05 19:22:58

【问题描述】：

我想在 CellTable 的单元格中添加图像。看完文档，我就是这样做的，

Column<Contact, String> imageColumn = new Column<Contact, String>(new ImageCell()) 
    @Override
    public String getValue(Contact object) 
        return "contact.jpg";
    
  ;
table.addColumn(imageColumn, "");

好吧，现在表格中有一个空列，其中没有图像。我在这里做错了吗？任何建议表示赞赏。谢谢。

【问题讨论】：

我看不出这有什么问题。您是否得到一个缺少图像图标的完全空白单元格？

你在哪里有文件“contact.jpg”？它应该直接放在/war 下。否则将无法正常工作。

【参考方案1】：

使用ImageResourceCell：

interface Resources extends ClientBundle 
  @Source("image-path.png")
  ImageResource getImageResource();


Resources resources = GWT.create(Resources.class);

Column<Contact, ImageResource> imageColumn =
  new Column<Contact, ImageResource>(new ImageResourceCell()) 
    @Override
    public ImageResource getValue(Contact object) 
      return resources.getImageResource();
    
  ;

【讨论】：

同意！ ImageResourceCell 将有助于在 celltable 中实现 Image。然而，这看起来更像是一个静态的而不是动态的实现。这迫使用户将每个图像与界面（资源）中的方法相关联。然而，在大多数情况下，图像的位置是动态获得的。例如，我有一个包含 1000 张图像的项目，并希望将它们填充到一个单元格表中。我无法创建 1000 个方法，每个方法都对应一个图像。有没有通用的解决方案？

@Ashok，您始终可以创建自己的实现ImageResource 的类，然后使用该类的实例来填充单元格。像这样：gist.github.com/1124648

大家好，这种类型有一个问题：“我们无法缩放图像”。对此有不同的解决方案：1. 图像前加载器 2. FITImage 等，但是提供的一种简单解决方案 (markmail.org/message/…) 效果更好。它很简单：使用 htmlcell 代替 imagecell 并将图像链接分配给该 htmlcell。根据给定的宽度和高度，它可以完美地缩放。想和大家分享一下。

【参考方案2】：

Column<Contact, String> imageColumn = 
    new Column<Contact, String>(
        new ClickableTextCell() 
        
            public void render(Context context, 
                               SafeHtml value, 
                               SafeHtmlBuilder sb)
            
                sb.appendHtmlConstant("<img width=\"20\" src=\"images/" 
                                       + value.asString() + "\">");
            
        )
        
            @Override
            public String getValue(Contact object) 
                return "contact.jpg";
            
        ;
        table.addColumn(imageColumn, "");

【参考方案3】：

我认为 Ionuț G. Stan 的帖子中有错误

我猜是

Column<Contact, ImageResource> imageColumn =
  new Column<Contact, ImageResource>(new ImageResourceCell()) 
    @Override
    public ImageResource getValue(Contact object) 
      resources.getImageResource();
    
  ;

所以 public ImageResource getValue 而不是 public String getValue

【讨论】：

不要忘记getValue方法中的“return”关键字