Learn the future of web development

This tutorial is meant to be a quick introduction to using events in GWT. For the most part if you want your web application to do anything, you need to know what events are and how to use them. With that said, we can begin by creating a new GWT project, and primarily this tutorial is going to work within the MainEntryPoint.java file.

Since you have just created a new project, GWT4NB and Netbeans has generated some simple code for you, which consists of a GWT Button and Label, and we are going to use these widgets to work with events. The example given for the Button ClickListener has been deprecated by the GWT team, and now all events come out of the package: com.google.gwt.event.dom.client. Because of this, we are going to delete the following code from the onModuleLoad method.

button.addClickListener(new ClickListener(){
            public void onClick(ClickEvent event) {
                label.setVisible(!label.isVisible());
            }
        });

The deprecated addClickListener method has been replaced with the addClickHandler method from the com.google.gwt.dom.client package. So the next step is to write out the following code.

button.addClickHandler(new ClickHandler(){
            public void onClick(ClickEvent event) {
                label.setVisible(!label.isVisible());
            }
        });

I know it doesn’t seem like a really big change, but if Google ever decides to remove the deprecated event listeners from the API then you are going to have to replace those event listeners, which can be a real pain if you have a hundred different listeners. The above is the basic structure for writing an event, and each widget within the GWT library has it’s own set of events. Also, all event handlers are abstract classes, so you must implement the abstract functions. For example, the onClick method is abstract, so you need to implement it in your ClickHandler class, as well as define what the onClick method is going to do.

Finally I want to tell you about three helper handlers that will make it easier for you to develop mouse, key, and focus event handlers. One of the things you need to keep in mind when using this technique is that if the GWT team implements new interfaces for the mouse, key, or focus handlers you will need to update your code prior to updating to the new version of GWT. So here is what I am talking about. The three abstract classes we are going to want to use are HandlesAllMouseEvents, HandlesAllKeyEvents, and HandlesAllFocusEvents. To keep from confusing you and me as well, we are going to only focus on the HandlesAllMouseEvents abstract class. As of this writing there are six mouse handlers, and the HandlesAllMouseEvents abstract class will give you a way to define all six mouse handlers very easily.

So to begin we will create a class that will extend the HandlesAllMouseEvents abstract class, and I am going to just define this class as a class within the MainEntryPoint class. Once you have defined the new class, you are going to need to implement all six mouse handlers. Here is my class definition.

private class MouseEventHandler extends HandlesAllMouseEvents{
 
        public void onMouseDown(MouseDownEvent event) {
            Window.alert(MouseDownEvent.getType().getName());
        }
 
        public void onMouseUp(MouseUpEvent event) {
            Window.alert(MouseUpEvent.getType().getName());
        }
 
        public void onMouseMove(MouseMoveEvent event) {
 
        }
 
        public void onMouseOut(MouseOutEvent event) {
 
        }
 
        public void onMouseOver(MouseOverEvent event) {
 
        }
 
        public void onMouseWheel(MouseWheelEvent event) {
 
        }
 
}

Notice I added definitions to both the onMouseDown and the onMouseUp events, but by using the HandlesAllMouseEvents abstract class we are able to define a single class that will handle all mouse events for a single widget or for multiple widgets. Now all that is left is to instantiate the new class and then add it to a widgets mouse event handler. Here is my example code.

        MouseEventHandler handler = new MouseEventHandler();
        label.addMouseDownHandler(handler);
        label.addMouseUpHandler(handler);

You will need to add the handler to each of the defined mouse event types, so for example if you define the onMouseOver event then you would need to add:

      label.addMouseOverHandler(handler);

There are a lot of different things you can do with GWT’s event structure, and I hope you have a better understanding of how to use an event in GWT after reading this post, but if you don’t, please leave a comment, and I will help answer your question.