在动态加载的图像上捕获点击事件的最佳方式

Question

我正在使用Eclipse Juno（具有最新的修补程序），最新的GWT和Java。

我将图像加载到一个可伸缩的相关姓氏和名字连接并显示在每个图像下7 x n网格。我现在想要做的是给每个图像一个独特的名称，并为其分配一个点击处理程序。然后，我会在图像上选取一个点击事件，并在下一个视图中显示该人的详细信息。

是一个可以灵活使用的正确的小部件或者我应该使用不同的小部件来包含图像和名称？

如何给每个图像一个唯一的名称，以便我知道哪个图像被选中？

如何将唯一图像名称传递给onClick监听器？

这是我使用的代码：

public void renderYouthMemberTable(List<YouthMember> youthMemberList) { 
    if (youthMemberList != null) { 
     int row = 0; 
     int col = 0; 
     flexTable.clear(); 
     for (YouthMember youthMember : youthMemberList) { 
      String imageDataString = youthMember.getPhotograph(); 

      //Display each image with the name under it. 
      Image image = new Image(imageDataString); 
      flexTable.setWidget(row, col, image); 
      flexTable.setWidget(row + 1, col, new Label(youthMember.getSurname() + ", " + youthMember.getFirstname())); 

      //Add click handler 
      image.addClickHandler((ClickHandler) this); 

      //Go to next column and if the end of the columns 
      //drop two rows and go to the first column 
      col = col + 1; 
      if (col > 7) { 
       row = row + 2; 
       col = 0; 
      } 
     } 
    } 

} 


public void onClick(ClickEvent event) { 
    // note that in general, events can have sources that are not Widgets. 
    Widget sender = (Widget) event.getSource(); 

    if (sender == image) { 
     // handle image1 being clicked 
     } 
    else if (sender == image2) { 
     // handle image2 being clicked 
    } 
} 

的onClick尚不能工作。这只是为了展示我想要达到的目标。

感谢您的帮助，

格林

Answer 1

我认为柔性表是好的为您的使用情况。

对于点击事件，为什么不做内联？

image.addClickHandler(new ClickHandler(){ 

    @Override 
    public void onClick(ClickEvent event){ 
     // Do something 
    } 

}); 

这种方式你不需要处理射击事件或使用EventBus。

如果您需要存储任何其他信息与图像只是扩展Image并添加任何你需要的。尽管如果你实现了像上面这样的点击处理程序，你可能不需要这些信息。

例如：

public class MyImage extends Image{ 

    private String id; 

    public MyImage(String url){ 
     super(url); 
    } 

    public MyImage(String url, String id){ 
     super(url); 
     this.id = id; 
    } 

    public void setId(String id){ 
     this.id = id; 
    } 

    public String getId(){ 
     return id; 
    } 

} 

就用MyImage代替Image。

UPDATE： 新增contructors