Integrating with the Server-Side

In Vaadin 6, a server-side component serialized its state to the client-side using the Paintable interface and deserialized the state through the VariableOwner interface. In Vaadin 7, these are done through the ClientConnector interface.

On the client-side, a widget deserialized its state through the Paintable interface and sent state changes through the ApplicationConnection object. In Vaadin 7, these are replaced with the ServerConnector.

In addition to state synchronization, Vaadin 7 has an RPC mechanism that can be used for communicating events. They are especially useful for events that are not associated with a state change, such as a button click.

The framework ensures that the connector hierarchy and states are up-to-date when listeners are called.

16.11.1. Quick (and Dirty) Migration

Vaadin 7 has a compatibility layer that allows quick conversion of a widget.

1.Create a connector class, such as MyConnector, that extends LegacyConnector. Implement the getWidget() method.

2.Move the @ClientWidget(MyWidget.class) from the server-side component, say

MyComponent, to the MyConnector class and make it

@Connect(MyComponent.class).

3.Have the server-side component implement the LegacyComponent interface to enable compatibility handling.

4.Remove any calls to super.paintContent()

16.12.Integrating JavaScript Components and Extensions

Vaadin allows simplified integration of pure JavaScript components, as well as component and UI extensions.The JavaScript connector code is published from the server-side. As the JavaScript integration does not involve GWT programming, no widget set compilation is needed.

16.12.1. Example JavaScript Library

There are many kinds of component libraries for JavaScript. In the following, we present a simple library that provides one object-oriented JavaScript component. We use this example later to show how to integrate it with a server-side Vaadin component.

The example library includes a single MyComponent component, defined in mylibrary.js.

// Define the namespace

var mylibrary = mylibrary || {};

mylibrary.MyComponent = function (element) { this.element = element; this.element.innerHTML =

"<div class='caption'>Hello, world!</div>" + "<div class='textinput'>Enter a value: " + "<input type='text' name='value'/>" + "<input type='button' value='Click'/>" + "</div>";

378	Quick (and Dirty) Migration