reference/code-museum/src/com/google/gwt/museum/client/defaultmuseum/Issue1932.java

/*
 * Copyright 2009 Google Inc.
 * 
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 * 
 * http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */
package com.google.gwt.museum.client.defaultmuseum;

import com.google.gwt.dom.client.Element;
import com.google.gwt.dom.client.NativeEvent;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.museum.client.common.AbstractIssue;
import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.Event.NativePreviewEvent;
import com.google.gwt.user.client.Event.NativePreviewHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Grid;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.SimplePanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;

/**
 * DOM.eventGetClientX/Y incorrect with HTML margin/borders Firefox 2/Safari 3.
 */
public class Issue1932 extends AbstractIssue {
  /**
   * A set of options used to set the page margins and borders.
   */
  private class ControlPanel extends Composite {
    private final Grid grid = new Grid(2, 3);

    private final TextBox borderBox = new TextBox();

    private final TextBox marginBox = new TextBox();

    public ControlPanel() {
      initWidget(grid);

      // Add an option to set the margin
      marginBox.setText("10px");
      grid.setHTML(0, 0, "<b>Margin:</b>");
      grid.setWidget(0, 1, marginBox);
      grid.setWidget(0, 2, new Button("Set", new ClickHandler() {
        public void onClick(ClickEvent event) {
          updateMargin();
        }
      }));

      // Add an option to set the border
      borderBox.setText("5px solid #DDDDDD");
      grid.setHTML(1, 0, "<b>Border:</b>");
      grid.setWidget(1, 1, borderBox);
      grid.setWidget(1, 2, new Button("Set", new ClickHandler() {
        public void onClick(ClickEvent event) {
          updateBorder();
        }
      }));
    }

    /**
     * Update the border on the HTML element.
     */
    public void updateBorder() {
      htmlElement.getStyle().setProperty("border", borderBox.getText());
    }

    /**
     * Update the margin on the HTML element.
     */
    public void updateMargin() {
      htmlElement.getStyle().setProperty("margin", marginBox.getText());
    }
  }

  /**
   * The HTML element of the page.
   */
  private Element htmlElement = null;

  @Override
  public Widget createIssue() {
    // Setup the page size and cursor
    htmlElement = DOM.getParent(RootPanel.getBodyElement());

    // Create a crosshair to show the current position
    final SimplePanel positioner = new SimplePanel();
    positioner.setPixelSize(30, 30);
    positioner.getElement().getStyle().setProperty("borderLeft",
        "1px solid red");
    positioner.getElement().getStyle().setProperty("borderTop", "1px solid red");
    positioner.getElement().getStyle().setProperty("cursor", "crosshair");

    // Create an area to echo position information.
    final HTML echo = new HTML();

    // Create a target box to test inside
    final Label sandbox = new Label();
    sandbox.sinkEvents(Event.ONMOUSEMOVE);
    sandbox.setPixelSize(300, 300);
    sandbox.getElement().getStyle().setProperty("border", "3px solid blue");
    sandbox.getElement().getStyle().setProperty("cursor", "crosshair");

    // Keep the crosshair under the cursor
    Event.addNativePreviewHandler(new NativePreviewHandler() {
      public void onPreviewNativeEvent(NativePreviewEvent event) {
        // Ignore events outside of the sandbox
        NativeEvent nativeEvent = event.getNativeEvent();
        Element target = Element.as(nativeEvent.getEventTarget());
        if (!sandbox.getElement().isOrHasChild(target)
            && !positioner.getElement().isOrHasChild(target)) {
          positioner.removeFromParent();
          return;
        }
                
        switch (Event.as(nativeEvent).getTypeInt()) {
          case Event.ONMOUSEMOVE:
            int absX = nativeEvent.getClientX() + Window.getScrollLeft();
            int absY = nativeEvent.getClientY() + Window.getScrollTop();
            RootPanel.get().add(positioner, absX, absY);

            echo.setHTML("event.clientX: " + nativeEvent.getClientX() + "<br>"
                + "event.clientY: " + nativeEvent.getClientY() + "<br>"
                + "absolute left: " + positioner.getAbsoluteLeft() + "<br>"
                + "absolute top: " + positioner.getAbsoluteTop());
            break;
        }
      }
    });

    // Combine the control panel and return
    VerticalPanel vPanel = new VerticalPanel();
    vPanel.add(new ControlPanel());
    vPanel.add(echo);
    vPanel.add(sandbox);
    return vPanel;
  }

  @Override
  public String getInstructions() {
    return "Move the cursor inside the blue box below and verify that the "
        + "point of the red positioner lines up directly beneath the center of "
        + "the cursor (crosshair). Also confirm that event.clientX/Y == absolute "
        + "left/top. The buttons may not work on Safari 2 because Safari 2 has "
        + "issues when you attempt to modify the HTML element programatically.";
  }

  @Override
  public String getSummary() {
    return "DOM.eventGetClientX/Y incorrect with HTML margin/border in Firefox "
        + "2 and Safari 2";
  }

  @Override
  public boolean hasCSS() {
    return true;
  }
}