Question

I am using Eclipse Juno (with latest patches), the latest GWT and java.

I am loading images into a flextable with the associated surname and firstname concatenated and displayed beneath each image in a 7 x n grid. What I want to do now is give each image a unique name and assign a click handler to it. I will then pick up a click event on an image a display the next view populated with that person’s details.

Is a flextable the correct widget to use for this or should I use a different widget to contain the image and name?

How do I give each image a unique name so I know which image was selected?

How do I pass the unique image name to the onClick listener?

This is the code I am using:

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 does not work yet. This is just here to show what I want to achieve.

Thanks for your help,

Glyn

Answer 1

I think the flex table is fine for your use case.

For the click event why dont you do it inline?

image.addClickHandler(new ClickHandler(){

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

});

This way you don’t need to deal with firing events or using an EventBus.

If you need to store any other information with the image just extend Image and add whatever you need. Although you probably won’t need this information if you implement your click handlers like above.

For example:

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;
    }

}

Then just use MyImage instead of Image.

UPDATE:
Added contructors