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