Using GWT widgets - Part 3

This is the final part in our articles serie 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():

1
2
3
4
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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.