如何在 GWT CellTable 中的 ImageCell 上添加 clickhandler？答案

【问题标题】：How to add clickhandler on ImageCell in GWT CellTable?如何在 GWT CellTable 中的 ImageCell 上添加 clickhandler？
【发布时间】：2023-03-23 15:36:01
【问题描述】：

我试过了，但没用

Column<ContactInfo, String> imageColumn = new Column<ContactInfo, String>(new ImageCell()) {
       @Override
       public String getValue(ContactInfo object) {
           return "contact.jpg";
          }
        };
        imageColumn.setFieldUpdater(new FieldUpdater<ContactInfo, String>() {

        @Override
        public void update(int index, ContactInfo object, String value) {
        Window.alert("You clicked " + object.firstName);
        }

    });
cellTable.addColumn(imageColumn, SafeHtmlUtils.fromSafeConstant("<br/>"));

【问题讨论】：

我确实解决了使用 ButtonCell 而不是图像单元格的问题，然后我更改了按钮的样式，但更改了背景图像。现在告诉它工作正常。

标签： gwt

【解决方案1】：

public class ButtonImageCell extends ButtonCell{

    @Override
    public void render(com.google.gwt.cell.client.Cell.Context context, 
            String value, SafeHtmlBuilder sb) {
        SafeHtml html = SafeHtmlUtils.fromTrustedString(new Image(value).toString());
        sb.append(html);
    }
}

使用中：

final Column<ReportDTOProxy, String> buttonImageCellTest = new Column<ProxyObject, String>(new ButtonImageCell()) {
    @Override
    public String getValue(ProxyObject row) {
        //url to image
        return row.getImageUrl();
    }
};

【讨论】：

这是最好的解决方案。完全被低估了。

【解决方案2】：

您可以扩展 ImageCell 类并覆盖它的 2 个方法 - getConsumedEvents 和 onBrowserEvent。示例：

    private class MyImageCell extends ImageCell{

    @Override
    public Set<String> getConsumedEvents() {
        Set<String> consumedEvents = new HashSet<String>();
        consumedEvents.add("dblclick");
        return consumedEvents;
    }

    @Override
    public void onBrowserEvent(Context context, Element parent,
            String value, NativeEvent event,
            ValueUpdater<String> valueUpdater) {
            switch (DOM.eventGetType((Event)event)) {
            case Event.ONDBLCLICK:
                // TODO
                break;

            default:
                break;
            }
    }

}

【讨论】：

这有各种各样的问题。对于初学者来说，它处理的是双击，而不是单击。它不处理盲人点击它等。通过 mutexkid 查看下面的解决方案。

【解决方案3】：

我做了类似的事情，将按钮单元格与 ImageCell 中的渲染器混合在一起......

    ButtonCell bc = new ButtonCell() {
        @Override
        public void render(Context context, SafeHtml data, SafeHtmlBuilder sb) {
            if (data != null) {
                ImageResource icon = Icons.BUNDLE.pieChart();
                SafeHtml html = SafeHtmlUtils.fromTrustedString(AbstractImagePrototype.create(icon).getHTML());
                sb.append(html);
            }
        }
    };

你明白了。唯一的问题是当你将鼠标悬停在它上面时它不会显示“手”图标......可能可以通过设置 CSS 来修复它。

【讨论】：

【解决方案4】：

您可以试试这个，而不是使用 ButtonCell 或 ImageCell。这肯定会奏效。正如我已经实现了我的要求。让我知道进展如何..

 ClickableTextCell imageCell = new ClickableTextCell() {
        @Override
        public void render(Context context, SafeHtml data, SafeHtmlBuilder sb) {
            if (data != null) {
                String imagePath = "icon.png";
                sb.append(imagePath);
            }
        }
    };

Column<ContactInfo, String> imageColumn = new Column<ContactInfo, String>(imageCell) {
       @Override
       public String getValue(ContactInfo object) {
           return "";
          }
        };
        imageColumn.setFieldUpdater(new FieldUpdater<ContactInfo, String>() {

        @Override
        public void update(int index, ContactInfo object, String value) {
        Window.alert("You clicked " + object.firstName);
        }

    });
cellTable.addColumn(imageColumn, SafeHtmlUtils.fromSafeConstant("<br/>"));

【讨论】：

【解决方案5】：

如果您使用能够处理点击的 ActionCell，则可以很好地解决此问题。它的使用有点复杂，但对我来说效果很好。

首先你需要用一个委托初始化ActionCell，在构造函数中写new ActionCell.Delegate<your class>。在此覆盖方法 execute 并在其中编写处理单击事件的代码。

您需要做的另一件事是从图像构建一个 html。 SafeHtmlUtils 类为您提供了一种非常简单的方法来做到这一点。它的 fromTrustedString 方法可以帮助您构建 html：

SafeHtmlUtils.fromTrustedString(AbstractImagePrototype.create ("Your image from a resource class").getHTML());

这样可以初始化 SafeHtml 字段，如果您将 SafeHtml 和 Delegate 提供给 ActionCell 的构造器，它将为您完成工作。

在本例中，按钮将使用其中的捆绑文件中的图像进行初始化。如果您覆盖 ActionCell 的渲染方法并将 SafeHtmlBuilder 附加到具有与上述相同的 SafeHtml 变量的方法中，则可以不使用按钮。

我的代码如下所示：

IdentityColumn<Type> imageCell = new IdentityColumn<Type>(new ActionCell<Type>("AnyString", 
                new ActionCell.Delegate<Type>() {

            @Override
            public void execute(final Type item) {
                "your code"
            }
        }) {

            @Override
            public void render(Context context, Type value, SafeHtmlBuilder sb) {
                if (value != null) {
                    SafeHtml html = SafeHtmlUtils.fromTrustedString(AbstractImagePrototype.create(resource.image).getHTML());
                    sb.append(html);
                }
            }
        });

您宁愿在另一个类中重写该方法，但我不想为这篇文章拆分它们。它对我很有效，我希望它对其他人也有帮助。

【讨论】：

【解决方案6】：

我得到了以上所有内容并将它们添加到我的应用程序中。谢谢大家。 stackoverflow 摇滚！

    ButtonCell bc = new ButtonCell() {
        @Override
        public void render(Context context, SafeHtml data, SafeHtmlBuilder sb) {
            if (data != null) {
                ImageResource icon = Connector.imageResources.minus();
                Image image = new Image(icon);
                //fix the mouse pointer
                image.getElement().getStyle().setCursor(Cursor.POINTER);
                //Do something with the DATA
                image.setTitle("Delete " + data.asString());
                SafeHtml html = SafeHtmlUtils.fromTrustedString(image.toString());
                sb.append(html);
            }
        }
    };
    Column<InstanceProperty, String> imageColumn = new Column<InstanceProperty, String>(bc) {
        @Override
        public String getValue(InstanceProperty object) {
            //return the DATA
            return object.getKey();
        }
    };
    imageColumn.setFieldUpdater(new FieldUpdater<InstanceProperty, String>() {
        @Override
        public void update(int index, InstanceProperty property,
                String value) {
            //you can also use the DATA to do something
            InstancePropertiesTable.this.dataProvider.getList().remove(index);
        }
    });
    addColumn(imageColumn, "");

【讨论】：

嘿伙计……你太棒了……非常感谢……我给了你一个赞成票。乌玛

【解决方案7】：

这对我有用：

public class ButtonImageCell extends ButtonCell{
    @Override
    public void render(com.google.gwt.cell.client.Cell.Context context, 
        String renderedHtmlStr, SafeHtmlBuilder sb) {
        sb.appendHtmlConstant(renderedHtmlStr);
    }
}

在包含CellTable table的类中：

TableResources resources = GWT.create(TableResources.class);
ImageResourceRenderer imageRenderer = new ImageResourceRenderer();

...

Column<MyRecord, String> buttonCol = new Column<MyRecord, String>(new ButtonImageCell()) {
    @Override
    public String getValue(MyRecord record) {
        if(record.isOn())
            return imageRenderer.render(resources.getOnImg()).asString();
        else
            return imageRenderer.render(resources.getOffImg()).asString();
    }
};

buttonCol.setFieldUpdater(new FieldUpdater<MyRecord, String>() {
    public void update(int index, MyRecordobject, String value) {
        if (Window.confirm("Do stuff?")) {
            //todo: stuff
        }
    }
});

...

table.addColumn(buttonCol, "");

ImageResource 的来源（resources）：

public interface TableResources extends CellTable.Resources {

    interface TableStyle extends CellTable.Style {
    }

    @Source("/images/on.png")
    ImageResource getOnImg();

    @Source("/images/off.png")
    ImageResource getOffImg();
}

【讨论】：

【解决方案8】：

您需要使用适当的位来 sinkEvents()。

参考问题Adding ClickHandler to div which contains many other widget的回答。

【讨论】：