如何在CellTable（GWT 2.4）中爲ImageResourceCell創建PanelPopup？

Question

我們的應用程序將顯示它有一個ImageResourceCell列CellTable：

Column<Alert, ImageResource> noteColumn = new Column<Alert, ImageResource>(new ImageResourceCell()) { 
     @Override 
     public ImageResource getValue(Alert alert) { 
      if (alert.getNote() != null && alert.getNote().length() > 0) { 
       return images.note(); 
      } else { 
       return images.emptyNote(); 
      } 
     } 
     }; 
    dataTable.addColumn(noteColumn, ""); 

我們想，這樣當用戶在圖像上移動鼠標了一個PopupPanel顯示修改此列。 PopupPanel的內容應該專門用於列中的每一行。達到此目的的最佳方法是什麼？

我最初的嘗試（基於答案a somewhat-similar question）看起來是這樣，但這裏的問題是，我不能夠從每個警報獲得「音符」爲PopupPanel：

private class MyImageResourceCell extends ImageResourceCell { 
    @Override 
    public Set<String> getConsumedEvents() { 
     Set<String> consumedEvents = new HashSet<String>(); 
     consumedEvents.add("mouseover"); 
     consumedEvents.add("mouseout"); 
     return consumedEvents; 
    } 

    @Override 
    public void onBrowserEvent(Context context, 
           Element parent, 
           ImageResource value, 
           NativeEvent event, 
           ValueUpdater<ImageResource> imageResourceValueUpdater) { 
     switch (DOM.eventGetType((Event) event)) { 
      case Event.ONMOUSEOVER: 
       // show panel 
       break; 
      case Event.ONMOUSEOUT: 
       // hide panel 
       break; 
      default: 
       break; 
     } 
    } 
} 

private void createAndAddNoteColumn() { 
    Column<Alert, ImageResource> noteColumn = new Column<Alert, ImageResource>(new MyImageCell()) { 
     @Override 
     public ImageResource getValue(Alert alert) { 
      if (alert.getNote() != null && alert.getNote().length() > 0) { 
       return images.note(); 
      } else { 
       return images.emptyNote(); 
      } 
     } 
    }; 
    dataTable.addColumn(noteColumn, ""); 
} 

Answer 1

相反創建PopupPanel作爲表列的一部分，我將列作爲正常的ImageResource列離開，然後添加cellPreviewHandler以捕獲有關列的mouseover事件：

final DecoratedPopupPanel simplePopup = new DecoratedPopupPanel(true); 
    dataTable.addCellPreviewHandler(new CellPreviewEvent.Handler<Alert>() { 
     @Override 
     public void onCellPreview(CellPreviewEvent<Alert> alertCellPreviewEvent) { 
      if ("mouseover".equals(alertCellPreviewEvent.getNativeEvent().getType()) 
        && alertCellPreviewEvent.getColumn() == 5 
        && alertCellPreviewEvent.getValue().getNote() != null) { 
       // using hard-coded column number isn't the most elegant solution, but it's ok for now. 
       int left = alertCellPreviewEvent.getNativeEvent().getClientX(); 
       int top = alertCellPreviewEvent.getNativeEvent().getClientY(); 
       simplePopup.setWidget(new HTML(alertCellPreviewEvent.getValue().getNote())); 
       simplePopup.setPopupPosition(left, top); 
       simplePopup.show(); 
      } else { 
       simplePopup.hide(); 
      } 
     } 
    });