Integrating with the Server-Side

16.12.3. Defining a JavaScript Connector

A JavaScript connector is a function that initializes the JavaScript component and handles communication between the server-side and the JavaScript code.

A connector is defined as a constructor function that is added to the window object. The name of the function must match the server-side class name, with the full package path. Instead of the Java dot notation for the package name, underscores need to be used as separators.

The Vaadin client-side framework adds a number of methods to the connector function. The this.getElement() method returns the HTML DOM element of the component. The this.getState() returns a shared state object with the current state as synchronized from the server-side.

window.com_vaadin_book_examples_client_js_MyComponent = function() {

//Create the component var mycomponent =

new mylibrary.MyComponent(this.getElement());

//Handle changes from the server-side this.onStateChange = function() {

mycomponent.setValue(this.getState().value);

};

//Pass user interaction to the server-side

var connector = this; mycomponent.click = function() {

connector.onClick(mycomponent.getValue());

};

};

In the above example, we pass user interaction using the JavaScript RPC mechanism, as described in the next section.

16.12.4. RPC from JavaScript to Server-Side

User interaction with the JavaScript component has to be passed to the server-side using an RPC (Remote Procedure Call) mechanism. The JavaScript RPC mechanism is almost equal to regular client-side widgets, as described in Section 16.6, “RPC Calls Between Clientand ServerSide”.

Handling RPC Calls on the Server-Side

Let us begin with the RPC function registration on the server-side. RPC calls are handled on the server-side in function handlers that implement the JavaScriptFunction interface. A serverside function handler is registered with the addFunction() method in AbstractJavaScriptComponent. The server-side registration actually defines a JavaScript method that is available in the client-side connector object.

Continuing from the server-side MyComponent example we defined earlier, we add a constructor to it that registers the function.

public MyComponent() {

addFunction("onClick", new JavaScriptFunction() { @Override

public void call(JSONArray arguments) throws JSONException {

getState().setValue(arguments.getString(0));

Defining a JavaScript Connector

381

Integrating with the Server-Side

for (ValueChangeListener listener: listeners) listener.valueChange();

}

});

}

Making an RPC Call from JavaScript

An RPC call is made simply by calling the RPC method in the connector. In the constructor function of the JavaScript connector, you could write as follows (the complete connector code was given earlier):

window.com_vaadin_book_examples_gwt_js_MyComponent = function() {

...

var connector = this; mycomponent.click = function() {

connector.onClick(mycomponent.getValue());

};

};

Here, the mycomponent.click is a function in the example JavaScript library, as described in Section 16.12.1, “Example JavaScript Library”. The onClick() is the method we defined on the server-side. We pass a simple string parameter in the call.

You can pass anything that is valid in JSON notation in the parameters.

382	RPC from JavaScript to Server-Side