如何將點擊處理程序添加到Celltable ImageCell？

Question

如何添加點擊處理程序到ImageCell？ 這是我有：

ImageCell btn= new ImageCell(); 
Column<Contact,String> column = new Column<Contact,String>(btn) 
{ 
    @Override 
    public String getValue(Contact c) 
    { 
     return c.imageLocation; 
    } 
}; 
column.setFieldUpdater(new FieldUpdater<Contact,String>() 
{ 
    public void update(int index, Contact c, String value) 
    { 
     Window.alert("clicked"); 
    }   
}); 

Answer 1

也許這會有所幫助：Adding clickHandler to row in CellTable in GWT?。它不是單元格上的clickhandler，而是單元格表（或列表）上的clickhandler。這更有效率。

Answer 2

我通過創建自己的ButtonCell類來解決了這個問題。以下是我的代碼：

import com.google.gwt.cell.client.AbstractSafeHtmlCell; 
import com.google.gwt.cell.client.ValueUpdater; 
import com.google.gwt.dom.client.Element; 
import com.google.gwt.dom.client.NativeEvent; 
import com.google.gwt.safehtml.shared.SafeHtml; 
import com.google.gwt.safehtml.shared.SafeHtmlBuilder; 
import com.google.gwt.text.shared.SafeHtmlRenderer; 
import com.google.gwt.text.shared.SimpleSafeHtmlRenderer; 

/** 
* A {@link Cell} used to render a button. 
*/ 
public class ClickImage extends AbstractSafeHtmlCell<String> { 

    /** 
    * Construct a new ButtonCell that will use a {@link SimpleSafeHtmlRenderer}. 
    */ 
    private String bgImage=""; 
    public ClickImage() 
    { 
    this(SimpleSafeHtmlRenderer.getInstance()); 
    } 
    public ClickImage(String bgImage) 
    { 
    this(SimpleSafeHtmlRenderer.getInstance()); 
    this.bgImage=bgImage; 
    } 

    public String getBgImage() 
    { 
    return bgImage; 
    } 
    public void setBgImage(String bgImage) 
    { 
    this.bgImage = bgImage; 
    } 
/** 
    * Construct a new ButtonCell that will use a given {@link SafeHtmlRenderer}. 
    * 
    * @param renderer a {@link SafeHtmlRenderer SafeHtmlRenderer<String>} instance 
    */ 
    public ClickImage(SafeHtmlRenderer<String> renderer) { 
    super(renderer, "click", "keydown"); 
    } 

    @Override 
    public void onBrowserEvent(Context context, Element parent, String value, 
     NativeEvent event, ValueUpdater<String> valueUpdater) { 
    super.onBrowserEvent(context, parent, value, event, valueUpdater); 
    if ("click".equals(event.getType())) { 
     onEnterKeyDown(context, parent, value, event, valueUpdater); 
    } 
    } 

    @Override 
    public void render(Context context, SafeHtml data, SafeHtmlBuilder sb) 
    { 
    String img=getBgImage(); 
    String disableButton=""; 
    if(img.equals("transparentButton")) 
    { 
     disableButton = "disabled=\"disabled\""; 
    } 
    sb.appendHtmlConstant("<button class=\""+img+"\" type=\"button\" "+disableButton+" tabindex=\"-1\">"); 
    if (data != null) { 
     sb.append(data); 
    } 
    sb.appendHtmlConstant("</button>"); 
    } 

    @Override 
    protected void onEnterKeyDown(Context context, Element parent, String value, 
     NativeEvent event, ValueUpdater<String> valueUpdater) { 
    if (valueUpdater != null) { 
     valueUpdater.update(value); 
    } 
    } 
} 

所以我用一個按鈕來顯示圖像。我使用CSS來使按鈕的背景色變得透明，而且，當按鈕被創建時，我將鏈接作爲參數傳遞給構造函數，這樣我就可以創建不同的可點擊圖片。這對我有用！

Answer 3

這也適用。

// clickable imageresource cell 
public class LickableImageResourceCell extends AbstractCell<ImageResource> { 
    private static ImageResourceRenderer renderer; 

    public LickableImageResourceCell() { 
     super("click"); 
     if (renderer == null) { 
      renderer = new ImageResourceRenderer(); 
     } 
    } 

    @Override 
    public void onBrowserEvent(Context context, final Element parent, ImageResource value, NativeEvent event, 
      ValueUpdater<ImageResource> valueUpdater) { 
     super.onBrowserEvent(context, parent, value, event, valueUpdater); 
     if (event.getType().equals("click")) { 
      if(valueUpdater != null) { 
       valueUpdater.update(value); 
      } 
     } 
    } 

    @Override 
    public void render(com.google.gwt.cell.client.Cell.Context context, 
      ImageResource value, final SafeHtmlBuilder sb) { 
      sb.append(renderer.render(value)); 
    } 
} 

Answer 4

addButtonCell（「resources/ui/images/download.png」，「下載」，「下載」）;

私人無效addButtonCell（最後絃樂imageSrc，字符串列名，最後絃樂行動）

{ 
    ActionCell<AttachmentDTO> imageButtonCell = new ActionCell<AttachmentDTO>("", new Delegate<AttachmentDTO>() 
     { 
      @Override 
      public void execute(final AttachmentDTO object) 
      { 
       if(action.equalsIgnoreCase("download")) 
       { 
        download(object); 
       } 
       else 
       { 
        eventBus.fireEvent(new ImgButtonClickEvent(object)); 
       } 
      } 
     }) 
     { 
      @Override 
      public void render(Context context, AttachmentDTO value, SafeHtmlBuilder sb) 
      { 
       Image icon = new Image(imageSrc); 
       SafeHtmlBuilder builder = new SafeHtmlBuilder(); 
       builder.appendHtmlConstant(icon.toString()); 
       sb.append(builder.toSafeHtml()); 
      } 
     }; 
    final Column<AttachmentDTO, AttachmentDTO> column = new Column<AttachmentDTO, AttachmentDTO>(imageButtonCell) 
     { 
      @Override 
      public AttachmentDTO getValue(AttachmentDTO object) 
      { 
       return object; 
      } 
     }; 
    cellTable.addColumn(column, columnName); 
    column.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER); 
    cellTable.setColumnWidth(column, "80px"); 
}