If you want to add a click-and-drag handler in GWT, so that (for example) if you click on an image object, you can move it around (and drag content logically associated with it), it’s fairly straight forward.

First, you need to implement a MouseDownEvent, a MosueMoveEvent and a MouseUpEvent handler, and attach them to your image. (Me, I like putting this into a single class, which contains the state associated with the dragging event.) Thus:

	Image myImage = ...
     
	EventHandler h = new EventHandler(myImage);
	myImage.addMouseDownHandler(h);
	myImage.addMouseMoveHandler(h);
	myImage.addMouseUpHandler(h);

Now the event handler needs to do some things beyond just tracking where the mouse was clicked, where it is being dragged to, and how the universe should be changed as the dragging operation takes place. We also need to trap the event so we can handle dragging outside of our object (by capturing drag events), and we also have to prevent the event from percolating upwards, so we get the dragging events rather than the browser.

This means that our event dragging class looks something like:

private class EventHandler implements MouseDownHandler, MouseMoveHandler, MouseUpHandler
{
	private boolean fIsClicked;
	private Widget fMyDragObject

	EventHandler(Widget w)
	{
		fMyDragObject = w;
	}
		
	@Override
	public void onMouseUp(MouseUpEvent event)
	{
		// Do other release operations or appropriate stuff

		// Release the capture on the focus, and clear the flag
		// indicating we're dragging
		fIsClicked = false;
		Event.releaseCapture(fMyDragObject.getElement());
	}

	@Override
	public void onMouseMove(MouseMoveEvent event)
	{
		// If mouse is not down, ignore
		if (!fIsClicked) return;

		// Do something useful here as we drag
	}

	@Override
	public void onMouseDown(MouseDownEvent event)
	{
		// Note mouse is down.
		fIsClicked = true;

		// Capture mouse and prevent event from going up
		event.preventDefault();
		Event.setCapture(fMyDragObject.getElement());

		// Initialize other state we need as we drag/drop
	}

Reverse engineering the GWT event handler code to add new events is simple. Here’s a Flex Table which also handles mouse events:

	/**
	 * Internal flex table declaration that syncs mouse down/move/up events
	 */
	private static class MouseFlexTable extends FlexTable implements HasAllMouseHandlers
	{
		@Override
		public HandlerRegistration addMouseDownHandler(MouseDownHandler handler)
		{
			return addDomHandler(handler, MouseDownEvent.getType());
		}

		@Override
		public HandlerRegistration addMouseUpHandler(MouseUpHandler handler)
		{
			return addDomHandler(handler, MouseUpEvent.getType());
		}

		@Override
		public HandlerRegistration addMouseOutHandler(MouseOutHandler handler)
		{
			return addDomHandler(handler, MouseOutEvent.getType());
		}

		@Override
		public HandlerRegistration addMouseOverHandler(MouseOverHandler handler)
		{
			return addDomHandler(handler, MouseOverEvent.getType());
		}

		@Override
		public HandlerRegistration addMouseMoveHandler(MouseMoveHandler handler)
		{
			return addDomHandler(handler, MouseMoveEvent.getType());
		}

		@Override
		public HandlerRegistration addMouseWheelHandler(MouseWheelHandler handler)
		{
			return addDomHandler(handler, MouseWheelEvent.getType());
		}
	}

Addendum:

If you want the location (the cell) in which the mouse event happened, you can extend MouseFlexTable with the additional methods:

		public static class HTMLCell
		{
			private final int row;
			private final int col;
			
			private HTMLCell(int r, int c)
			{
				row = r;
				col = c;
			}
			
			public int getRow()
			{
				return row;
			}
			
			public int getCol()
			{
				return col;
			}
		}
		
		public HTMLCell getHTMLCellForEvent(MouseEvent event) 
		{
			Element td = getEventTargetCell(Event.as(event.getNativeEvent()));
			if (td == null) {
				return null;
			}

			int row = TableRowElement.as(td.getParentElement()).getSectionRowIndex();
			int column = TableCellElement.as(td).getCellIndex();
			return new HTMLCell(row, column);
		}

As a follow-up to Things to Remember: Why cells with an inserted image are taller than the image in GWT, the answer is:

VerticalPanel panel;
...
Image image = new Image("images/mydot.png");
DOM.setStyleAttribute(image.getElement(), "display", "block");
panel.add(image);

For whatever reason, the image object has ‘inline’ formatting by default, and when GWT assembles the table cell, the cell’s height is being derived from the font height rather than from the image height. Setting the image to block seems to resolve this issue.

This article just bailed me out, with a brief explanation and an overview of what I was trying to do here. Just noting for future reference.

So here’s a mystery.

Suppose you create in GWT a vertical panel or a flex table, and you add an image which is less than 15 pixels tall:

VerticalPanel panel;

...
panel.add(new Image("images/mydot.png"));

But for whatever reason, the cell displays as 15 pixels tall.

Apparently what happens is that the way the image object is inserted into the

And that blank has vertical height.

If you write the following, you can limit the vertical spacing, allowing for tighter heights:

Image image = new Image("images/mydot.png");
panel.add(image);
DOM.setStyleAttribute(image.getParent().getElement(),"fontSize","1px");

In testing this seems to tighten things up quite a bit.

I need to investigate this further. But apparently when DOM objects are being inserted during the construction of GWT objects, unwanted extra junk (in the form of blank text spaces) is being inserted at the same time.

So I wrote the following code and wired it into the mouse up, down and move listeners so I can do drag and drop:

		@Override
		public void onMouseUp(MouseUpEvent event)
		{
			isDragging = false;
			// Do something to indicate we're done dragging
			
			DOM.releaseCapture(fClickLayer.getElement());
		}
		
		@Override
		public void onMouseMove(MouseMoveEvent event)
		{
			if (isDragging) {
				// Do something with the event to drag
			}
		}

		@Override
		public void onMouseDown(MouseDownEvent event)
		{
			DOM.setCapture(fClickLayer.getElement());
			// Note the initial state to start dragging
		}

And of course after the first three move events I stopped receiving move events, but instead the widget would be selected.

After banging my head against a brick wall for a couple of hours I realized I needed to prevent the browser from taking the default behavior on the received click and move events. And that’s done with the preventDefault() method:

		@Override
		public void onMouseUp(MouseUpEvent event)
		{
			isDragging = false;
			// Do something to indicate we're done dragging
			
			DOM.releaseCapture(fClickLayer.getElement());
		}
		
		@Override
		public void onMouseMove(MouseMoveEvent event)
		{
			if (isDragging) {
				event.preventDefault();		// ADD ME HERE
				// Do something with the event to drag
			}
		}

		@Override
		public void onMouseDown(MouseDownEvent event)
		{
			DOM.setCapture(fClickLayer.getElement());
			event.preventDefault();		// ADD ME HERE
			// Note the initial state to start dragging
		}

Duh.

As an aside, here’s a snippet of code that you can use to prevent something from being selected in HTML. You can also do this in CSS, I suppose. I encountered this snippet of code here.

	private native static void disableSelectInternal(Element e, boolean disable) 
	/*-{
    	if (disable) {
        	e.ondrag = function () { return false; };
        	e.onselectstart = function () { return false; };
        	e.style.MozUserSelect="none"
    	} else {
        	e.ondrag = null;
        	e.onselectstart = null;
        	e.style.MozUserSelect="text"
    	}
	}-*/;

I first tried hooking this up to the class receiving the mouse events, but to no avail.

Strategy for validating text input in a TextBox during input:

One way to validate that the string being entered into a text box is properly formatted is to reject key changes as the user types, if the resulting string would result in an invalid string. The strategy I’m employing is to add a key press handler and schedule a deferred command: the deferred command then reverts the contents of the text box if the contents are illegal.

Thus:

public class TestEditorBox extends TextBox
{
    public TestEditorBox()
    {
        super();
        
        /*
         * Hang handler off key press; process and revert text of it doesn't
         * look right
         */
        addKeyPressHandler(new KeyPressHandler() {
            @Override
            public void onKeyPress(KeyPressEvent event)
            {
                final String oldValue = getText();
                Scheduler.get().scheduleDeferred(new Scheduler.ScheduledCommand() {
                    @Override
                    public void execute()
                    {
                        String curVal = getText();
                        if (!validate(curVal)) setText(oldValue);
                    }
                });
            }
        });
    }

    private boolean validate(String value)
    {
         // return true if the string is valid, false if not.
    }
...
}