Over a million developers have joined DZone.

Using GWT widgets in Vaadin 7 - Part 3

DZone's Guide to

Using GWT widgets in Vaadin 7 - Part 3

· Java Zone
Free Resource

Microservices! They are everywhere, or at least, the term is. When should you use a microservice architecture? What factors should be considered when making that decision? Do the benefits outweigh the costs? Why is everyone so excited about them, anyway?  Brought to you in partnership with IBM.

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() {

    public void onClick(ClickEvent event) {

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


    // 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() {
        public void click(MouseEventDetails details) {

            fireEvent(new BootstrapClickEvent(BootstrapButton.this));

    public BootstrapButton(String caption) {


    // 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.

Discover how the Watson team is further developing SDKs in Java, Node.js, Python, iOS, and Android to access these services and make programming easy. Brought to you in partnership with IBM.


Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}