如何在GWT CellTable中的ImageCell上添加clickhandler?

时间:2011-03-10 09:40:31

标签: gwt

我试过这个但是没有用

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/>"));

8 个答案:

答案 0 :(得分:18)

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();
    }
};

答案 1 :(得分:8)

您可以扩展ImageCell类并覆盖它的方法 - 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;
            }
    }

}

答案 2 :(得分:1)

我做了类似的事情,将一个Button单元与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来修复。

答案 3 :(得分:1)

您可以尝试此操作,而不是使用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/>"));

答案 4 :(得分:1)

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

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

您需要做的另一件事是从图像中构建一个html。 SafeHtmlUtils类为您提供了一种非常简单的方法。它是fromTrustedString方法帮助您构建html:

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

这样,SafeHtml字段可以被初始化,如果你给ActionCell的构造函数SafeHtml和Delegate,它将为你完成工作。

在此示例中,将使用其中的包文件中的图像初始化按钮。如果覆盖ActionCell的render方法并使用与上面相同的SafeHtml变量在方法中附加SafeHtmlBuilder,则可以不使用按钮进行创建。

我的代码如下所示:

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);
                }
            }
        });

你宁愿在另一个类中覆盖该方法,但我不想为这篇文章拆分它们。它非常适合我,我希望它也能帮助其他人。

答案 5 :(得分:1)

我得到了以上所有内容并将其添加到我的应用中。谢谢大家。 stackoverflow rocks!

    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, "");

答案 6 :(得分:0)

这对我有用:

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();
}

答案 7 :(得分:-1)

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

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