Move ViewPort Map Elements to GWT?

Question

I have a GWT application with a viewport that displays part of a map of elements. There are div elements on the element map. The user can drag and move around the viewport (and not through the elements). If the user drags and moves around the viewport, he can move the viewport in all directions. This means that another part of the element map will be displayed. The browser position in the viewport remains unchanged, only the map of elements moves along the drapery and movement of the viewport.

How do I customize the viewport and item map to drag and drop ready?

Answer 1

Place the widget using the method setWidgetPosition. To move the views in the viewport, we updated their position -

public class Viewport extends AbsolutePanel {
  private static final String DEFAULT_MOUSE_DOWN_CURSOR = "moveCursor";
  private static final String DEFAULT_MOUSE_DRAG_CURSOR = "pointerCursor";

  private final FocusPanel panel = new FocusPanel();

  private String mouseDownCursor = DEFAULT_MOUSE_DOWN_CURSOR;
  private String mouseDragCursor = DEFAULT_MOUSE_DRAG_CURSOR;

  private Widget view = null;

  private boolean dragging = false;
  private int xOffset, yOffset;

  private boolean eventPreviewAdded = false;

  private static EventPreview preventDefaultMouseEvents = new EventPreview() {
      public boolean onEventPreview(Event event) {
        switch (DOM.eventGetType(event)) {
           case Event.ONMOUSEDOWN:
           case Event.ONMOUSEMOVE:
             DOM.eventPreventDefault(event);
        }
        return true;
      }
    };

  public Viewport() {
    add(panel);

    panel.addMouseListener(new MouseListenerAdapter() {
      public void onMouseEnter() {
       DOM.addEventPreview(preventDefaultMouseEvents);
      }

      public void onMouseLeave() {
       DOM.removeEventPreview(preventDefaultMouseEvents);
      }

      public void onMouseDown(Widget widget, int x, int y) {
        dragging = true;

        xOffset = x;
        yOffset = y;

        DOM.setCapture(panel.getElement());
      }

      public void onMouseMove(Widget widget, int x, int y) {
        if (dragging) {
          removeStyleName(mouseDownCursor);
          addStyleName(mouseDragCursor);

          int newX = x + getWidgetLeft(panel) - xOffset;
          int newY = y + getWidgetTop(panel) - yOffset;

          setWidgetPosition(panel, newX, newY);
        }
      }

      public void onMouseUp(Widget widget, int x, int y) {
        if (dragging) {
          dragging = false;
          removeStyleName(mouseDownCursor);
          removeStyleName(mouseDragCursor);

          DOM.releaseCapture(panel.getElement());
        }
      }
    });
  }

  public String getMouseDownCursor() {
    return mouseDownCursor;
  }

  public void setMouseDownCursor(String mouseDownCursor) {
    this.mouseDownCursor = mouseDownCursor;
  }

  public String getMouseDragCursor() {
    return mouseDragCursor;
  }

  public void setMouseDragCursor(String mouseDragCursor) {
   this.mouseDragCursor  = mouseDragCursor;
  }

 public Widget getView() {
  return view;
 }

 public void setView(Widget view) {
   this.view = view;
   panel.setWidget(view);
 }
}

See Google Web Toolkit Solutions: More Fun and Useful Things

---

Other examples are

• Solution 4. Viewports and maps
• http://www.salvin.in/
• GWT Canvas Demo

Check out this book I recommend you. Step-by-step instructions for what you want to do.

Answer 2

Perhaps you need a widget to scroll in any direction using drag and drop events.

The mgwt library has a ScrollPanel ready for this. Take a look at their example .

[Edited] mgwt example

import com.googlecode.mgwt.ui.client.widget.LayoutPanel;
import com.googlecode.mgwt.ui.client.widget.RoundPanel;
import com.googlecode.mgwt.ui.client.widget.ScrollPanel;

public void onModuleLoad() {

  // You need to use both widgets mgwt-LayoutPanel and mgwt-ScrollPanel:
  LayoutPanel main = new LayoutPanel();
  ScrollPanel scrollPanel = new ScrollPanel();

  // This is optional, you can use any gwt-Panel instead
  RoundPanel roundPanel = new RoundPanel();

  scrollPanel.setWidget(roundPanel);
  main.add(scrollPanel);
  RootPanel.get().add(main);


  StringBuffer buffer = new StringBuffer();
  for (int i = 0; i < 500; i++) {
      buffer.append("Lorem ipsum dolor sit amet, consectetur adipiscing elit");
  }
  HTML html = new HTML(buffer.toString());

  roundPanel.add(html);

  // Set the size of your view-port and its content
  main.setSize("400px", "400px");
  html.setWidth("1000px");

}

mgwt library .gwt.xml:

<inherits name="com.googlecode.mgwt.MGWTMin"/>
<set-property name="mgwt.os" value="desktop" />
<set-property name="mobile.user.agent" value="not_mobile" />