0

I have this simple ArrayList

Image img = new Image("/Mobile 005.JPG");
Image img1 = new Image("/Mobile 006.JPG");
Image img2 = new Image("/Mobile 007.JPG");
Image img3 = new Image("/Mobile 008.JPG");
imgList.add(img);
imgList.add(img1);
imgList.add(img2);
imgList.add(img3);

HorizontPanel hpnl = new HorizontalPanel();
hpnl.add(imgList);

This list of images will be coming from db and can be of any number.

At this time this HorizontalPanel contains 4 images (it may contain 400 images in future), Now if a user comes and click on the second image lets say , how will we know which image has been clicked by the user?

where and how will I put my clickHandler?

3 Answers 3

2

You will get to know which image is clicked by using the getSource() API as -

Image img = new Image("/Mobile 005.JPG");
img.addClickHandler( getClickHandler() ); 
Image img1 = new Image("/Mobile 006.JPG");
img1.addClickHandler( getClickHandler() ); 
Image img2 = new Image("/Mobile 007.JPG");
img2.addClickHandler( getClickHandler() ); 
Image img3 = new Image("/Mobile 008.JPG");
img3.addClickHandler( getClickHandler() ); 
imgList.add(img);
imgList.add(img1);
imgList.add(img2);
imgList.add(img3);

HorizontPanel hpnl = new HorizontalPanel();
hpnl.add(imgList);

ClickHandler imageClickHandler;

private ClickHandler getClickHandler()
{ 
     if( imageClickHandler != null)
     {
          return imageClickHandler;
     }
     imageClickHandler = new ClickHandler()
     {
            public void onClick( ClickEvent event )
            {
              Image source = (Image)event.getSource();
                  // This is the source that has caused the event.
            }
     };

     return imageClickHandler;
}
3
  • As a side note for performance i would suggest usage of CellList or CellTable with SelectionModel instead of Horizontal Panel with images. gwt.googleusercontent.com/samples/Showcase/…
    – appbootup
    Mar 19, 2013 at 3:38
  • thanks , but where and on which image will put this clickHandler, as there will be unknown numbers of images coming from the DB,if you could please put this cickhandler in my code above
    – junaidp
    Mar 19, 2013 at 3:46
  • 1
    Updated the answer with more code. As @SSR commented i also strongly suggest you to use CellList Widget instead of List of Images With Horizontal panel.
    – Adarsha
    Mar 19, 2013 at 4:01
0

you can also try with following.

    HorizontalPanel hp = new HorizontalPanel();
    hp.add(getImage("/Mobile 005.JPG"));
    hp.add(getImage("/Mobile 006.JPG"));
    hp.add(getImage("/Mobile 007.JPG"));
    hp.add(getImage("/Mobile 008.JPG"));

    private Image getImage(String imagePath){
    Image image = new Image(imagePath);
    image.addClickHandler(new ClickHandler() {

     @Override
     public void onClick(ClickEvent event) {
       // write the on click code.
     }
     });

}

From the imagepath variable, you can get to know which onclick is called.

3
  • You would be redundantly creating hundreds of anonymous ClickHandlers even though only one is suffcient!!!!!
    – appbootup
    Mar 19, 2013 at 18:14
  • @SSR please go through this link stackoverflow.com/questions/3167507/… . Mar 19, 2013 at 20:16
  • @Baadshah - The link you posted in the above comment also suggests to use Single instance :) and i wonder why you suggested SSR to go through that link :)
    – Adarsha
    Mar 20, 2013 at 3:44
-3

Are looking for something like this

List<Image> images = new ArrayList<Image>();
        images.add(new Image());
        images.add(new Image());//Into this list add your DB images list
        images.add(new Image());

        for (Image image : images) {
            image.addClickHandler(
           //singleton instance of clickhandler
            });
        }
5
  • 2
    You would be redundantly creating hundreds of anonymous ClickHandlers even though only one is suffcient!!!!!
    – appbootup
    Mar 19, 2013 at 5:58
  • 1
    IMO Without registering the handler you can't get the event.And better to Instead of casting source to Gwt object each time!Well in that case @junai will may get the solution from the both answers. Mar 19, 2013 at 6:16
  • 2
    The same click handler can be registered to each Image. Reducing the number of dom event handlers is one way Cell widgets function faster and better.
    – appbootup
    Mar 19, 2013 at 6:38
  • 1
    @SSR Please go through the link stackoverflow.com/questions/3167507/… Mar 19, 2013 at 20:21
  • @SSR I hope you will come to know there is nothing harm by registering many handlers. Mar 19, 2013 at 20:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.