如何將點擊處理程序添加到 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

這也有效。

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

    public ClickableImageResourceCell () {
        super(BrowserEvents.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 (BrowserEvents.CLICK.equals(event.getType())) {
            onEnterKeyDown(context, parent, value, event, valueUpdater);
        }
    }

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

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

Answer 2

addButtonCell("resources/ui/images/download.png", "下載", "下載");

private void addButtonCell(final String imageSrc, String columnName, final String action)

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

Answer 3

也許這有幫助： 在 GWT 的 CellTable 中添加 clickHandler 到行？ . 它不是單元格上的點擊處理程序，而是單元格表（或列表）上的。 哪個更有效率。

Answer 4

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

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 使按鈕的背景顏色透明，並且在創建按鈕時，我將圖像的鏈接作為參數傳遞給構造函數，這樣我就可以創建不同的可點擊圖像。 這對我有用！