Integrating with the Server-Side

side source file. If this gets annoying, you can disable the automatic recompilation in the Vaadin category in project settings, by selecting the Suspend automatic widgetset builds option.

You can compile the widget set manually by clicking the Compile widgetset button in the Eclipse toolbar, shown in Figure 16.2, “The Compile Widgetset Button in Eclipse Toolbar”, while the project is open and selected. If the project has multiple widget set definition files, you need to select the one to compile in the Project Explorer.

Figure 16.2. The Compile Widgetset Button in Eclipse Toolbar

The compilation progress is shown in the Console panel in Eclipse, illustrated in Figure 16.3, “Compiling a Widget Set”. You should note especially the list of widget sets found in the class path.

The compilation output is written under the WebContent/VAADIN/widgetsets folder, in a widget set specific folder.

You can speed up the compilation significantly by compiling the widget set only for your browser during development. The generated .gwt.xml descriptor stub includes a disabled element that specifies the target browser. See Section 13.3.2, “Limiting Compilation Targets” for more details on setting the user-agent property.

For more information on compiling widget sets, see Section 13.4, “Compiling a Client-Side Module”. Should you compile a widget set outside Eclipse, you need to refresh the project by selecting it in Project Explorer and pressing F5.

16.3. Creating a Server-Side Component

Typical server-side Vaadin applications use server-side components that are rendered on the client-side using their counterpart widgets. A server-side component must manage state synchronization between the widget on the client-side, in addition to any server-side logic.

16.3.1. Basic Server-Side Component

The component state is usually managed by a shared state, described later in Section 16.5, “Shared State”.

public class MyComponent extends AbstractComponent { public MyComponent() {

getState().setText("This is MyComponent");

}

@Override

protected MyComponentState getState() {

return (MyComponentState) super.getState();

}

}

16.4. Integrating the Two Sides with a Connector

A client-side widget is integrated with a server-side component with a connector. A connector is a client-side class that communicates changes to the widget state and events to the server-side.

364	Creating a Server-Side Component

Integrating with the Server-Side

Figure 16.3. Compiling a Widget Set

16.4.1. A Basic Connector

The basic tasks of a connector is to hook up to the widget and handle events from user interaction and changes received from the server. A connector also has a number of routine infrastructure methods which need to be implemented.

@Connect(MyComponent.class) public class MyComponentConnector

extends AbstractComponentConnector {

@Override

public MyComponentWidget getWidget() {

return (MyComponentWidget) super.getWidget();

}

@Override

public MyComponentState getState() {

return (MyComponentState) super.getState();

}

@Override

public void onStateChanged(StateChangeEvent stateChangeEvent)

{

super.onStateChanged(stateChangeEvent);

// Do something useful

final String text = getState().getText(); getWidget().setText(text);

}

}

16.4.2. Communication with the Server-Side

The main task of a connector is to communicate user interaction with the widget to the serverside and receive state changes from the server-side and relay them to the widget.

Server-to-client communication is normally done using a shared state, as described in Section 16.5, “Shared State”. The serialization of the state data is handled completely transparently.

A Basic Connector

365