The server-side component should extend and provide the API that the developer uses to interact with the component. The class should also have a @JavaScript annotation that defines the required JavaScript libraries in the order they should be loaded. This example uses the Flot graph library from . Float requires jQuery which is loaded using Google Libraries API.

Java

The shared state class will not be used by any GWT code so you don’t have to put it in the widgetset’s client package. The state class should extend JavaScriptComponentState but is otherwise similar to the shared state of a normal GWT component.

The only remaining code is the client-side JavaScript connector in flot_connector.js. The connector defines a global initializer function named based on the fully qualified name of the server-side Component class with dots replaced with underscores. In this example the server-side is com.example.Flot which means that the function name should be com_example_Flot.

This initializer function should initialize the JavaScript part of the component. It is called by the framework with this pointing to a connector wrapper providing integration to the framework. For full information about the services provided by the connector wrapper, please read the Javadoc for the AbstractJavaScriptComponent class.

In this example, the initializer first initializes the variable with a jQuery object for the DOM element of the component. Next, a state change listener is defined by assigning a function to the onStateChange field of the connector wrapper. This function will be called whenever the shared state is changed from the server-side code. In the state change listener, the Flot API is used to initialize a graph with the data series from the shared state into the DOM element.

JavaScript

By implementing a server-side Java class extending and a client-side JavaScript connector initialization function, existing JavaScript component libraries can easily be integrated to Vaadin. The server-side code is almost similar to the code required for a component based on GWT and the client-side code is quite similar to a ComponentConnector implemented using GWT.