Nicolas Frankel is an IT consultant with 10 years experience in Java / JEE environments. He likes his job so much he writes technical articles on his blog and reviews technical books in his spare time. He also tries to find other geeks like him in universities, as a part-time lecturer. Nicolas is a DZone MVB and is not an employee of DZone and has posted 226 posts at DZone. You can read more from them at their website. View Full User Profile

Using GWT widgets in Vaadin 7 - Part 3

06.18.2012
| 5293 views |
  • submit to reddit

This is the final part in our article series regarding using GWT widgets in Vaadin 7. In the first part, we looked at how to wrap GWT widgets in Vaadin components. In the second part, we detailed how to configure widgets from components. In this third and final part, we'll see how to intercept events coming from the client side in our components.

The central component is client-server communication is an interface extending ServerRpc. In our context, the widget is a button so the only method of the interface should be something like click():

public interface BootstrapButtonRpc extends ServerRpc {

    void click(MouseEventDetails mouseEventDetails);
}

Note we have a single MouseEventDetails parameter taken from Vaadin API, that should be enough to convey relevant information.

On the client side, several steps are necessary:

  • In the connector, create a proxy around the RPC interface
  • Let the connector implement GWT's ClickHandler.onClick() and call the RPC method defined in the interface
  • Add the connector as the button's click handler
public class BootstrapButtonConnector extends AbstractComponentConnector implements ClickHandler {

    private BootstrapButtonRpc rpc = RpcProxy.create(BootstrapButtonRpc.class, this);

    public BootstrapButtonConnector() {
		
        getWidget().addClickHandler(this);
    }

    public void onClick(ClickEvent event) {

        MouseEventDetails details = MouseEventDetailsBuilder.buildMouseEventDetails(
            event.getNativeEvent(), getWidget().getElement());

        rpc.click(details);
    }

    // Code from previous articles goes here
}

On the server side, we have to:

  • create a custom event type that extends com.vaadin.ui.Component.Event
  • implement the RPC interface so that calling click() fires a new instance of our custom event type
  • register a new instance of the RPC implementation
public class BootstrapButton extends AbstractComponent {

    private BootstrapButtonRpc rpc = new BootstrapButtonRpc() {
	
        @Override
        public void click(MouseEventDetails details) {

            fireEvent(new BootstrapClickEvent(BootstrapButton.this));
        }
    };

    public BootstrapButton(String caption) {

        setText(caption);
        setImmediate(true);
		
        registerRpc(rpc);
    }

    // Code from previous articles goes here
}

Now, when the user clicks on the button widget, the GWT framework calls the onClick() method. In there, the Vaadin framework bridges the call from the RPC client-side code to the RPC server-side code. On the server-side, the click() implementation fires a new event: it's just for us to listen to such events in standard Vaadin API.

In conclusion, I hope this serie convinced you wrapping GWT widgets is not hard if you follow the tips described here. You can find the whole code on Github.

Published at DZone with permission of Nicolas Frankel, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)