tags:

views:

431

answers:

1

In my GWT application I am using Border Layout to display a large image within a Panel that is added to the Centre location.

I would like to click and drag on the image to change the portion of the image that is displayed. This would be equivalent of using the scroll bars to move the portion of the image displayed on screen. This is similar to the way Adobe Reader allows you to navigate around a PDF.

How do I do this with GWT?

A: 

David Geary's book 'Google Web Toolkit Solutions' describes the implementation of a ViewPort panel that does what you describe. Basically, you create a subclass of AbsolutePanel that listens to mouse events. Based on those mouse events, you would do your drag calculations and update the position of the contained element (the large image in your case).

To see it in action, go to http://coolandusefulgwt.com/ and click on 'Examples' then 'Maps'. (Note that the lack of a direct link is a good example of why proper history support is important for gwt apps).

Thanks for the answer but the original question was not explicit enough in describing the exact UI scenario (it is now updated).The Panel containing the Image will be of variable size as it is in the Centre location in a Border Layout rather than a fixed size as most "Google Map" like drag and move examples are.
Keith Lyall