0

要素マップの一部を表示するビューポートを持つ GWT アプリケーションがあります。要素マップには div 要素があります。ユーザーは、(要素ではなく) ビューポート上でドラッグして移動できます。ユーザーがビューポートをドラッグして移動すると、ビューポートをすべての方向に移動できます。これは、要素マップの別の部分が表示されることを意味します。ビューポートのブラウザーの位置は変更されず、要素マップのみがビューポートのドラッグと移動で移動します。

ビューポートと要素マップをドラッグして移動できるように設定するにはどうすればよいですか?

ここに画像の説明を入力

4

2 に答える 2

2

メソッドを使用してウィジェットを配置しますsetWidgetPosition。ビューポート内でビューを移動するには、それらの位置を更新しました -

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

Google Web Toolkit ソリューションを見る: その他のクールで便利なもの

その他の例 -

私があなたにお勧めするこの本を見てください。あなたがやりたいことのためのステップバイステップの指示があります。

ここに画像の説明を入力

于 2013-10-17T19:05:46.547 に答える
2

ドラッグまたはタップ イベントを使用して任意の方向にスクロールするウィジェットが必要な場合があります。

mgwtライブラリには、これに対応するScrollPanelが用意されています。例を参照してください。

[編集] mgwtを使用した例

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 ライブラリを含め、.gwt.xmlファイルに次の行を設定する必要があります。

<inherits name="com.googlecode.mgwt.MGWTMin"/>
<set-property name="mgwt.os" value="desktop" />
<set-property name="mobile.user.agent" value="not_mobile" />
于 2013-10-19T10:52:06.907 に答える