Overview

    Integration of Client-Side Widgets

    The communication between a client-side widget and a server-side component is managed with a connector that handles syncronizing the widget state and events to and from the server-side.

    The state of a server-side component is synchronized automatically to the client-side widget using a shared state object. A shared state object extends AbstractComponentState and it is used both in the server-side and the client-side component. On the client-side, a connector always has access to its state instance, as well to the state of its parent component state and the states of its children.

    The state sharing assumes that state is defined with standard Java types, such as primitive and boxed primitive types, String, arrays, and certain collections ( List, Set, and Map) of the supported types. Also the Vaadin Connector and some special internal types can be shared.

    In addition to state, both server- and client-side can make remote procedure calls (RPC) to the other side. RPC is used foremost for event notifications. For example, when a client-side connector of a button receives a click, it sends the event to the server-side using RPC.

    The basic project structure is illustrated in Basic Widget Integration Project Structure.

    gwt widget files hi

    Basic Widget Integration Project Structure

    Integrating JavaScript Components

    In addition to the GWT widget integration, Vaadin offers a simplified way to integrate pure JavaScript components. 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.