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

Question

我都试过，但没有奏效

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

Answer 1

你需要sinkEvents（）的相应位。

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

Answer 2

我做了类似的混合来自的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来修复它。

Answer 3

您可以扩展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; 
      } 
    } 

} 

Answer 4

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

Answer 5

你可以试试这个，而不是使用或扣式的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/>")); 

Answer 6

这个问题的一个很好的解决方案，如果你使用能够处理点击的ActionCell。它的使用有点复杂，但对我来说它工作得很好。

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

你需要做的另一件事是从图像构建一个html。 SafeHtmlUtils班给你一个很简单的方法来做到这一点。它fromTrustedString方法帮助您建立的HTML：

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

这样的SafeHtml场可initalized，如果你给ActionCell的构造器的SafeHtml和代表，它会做的工作适合你。

在这个例子中，一个按钮将被其中包文件的图像初始化。如果您重写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); 
       } 
      } 
     }); 

你宁愿覆盖的方法在另一类，但我不想给他们分裂为这个职位。它对我很好，我希望它也能帮助其他人。

Answer 7

我得到了上述所有，并将它们添加到我的应用程序中。谢谢大家。 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, ""); 

Answer 8

这为我工作：

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