mirror of
https://github.com/vaadin/framework.git
synced 2024-07-27 20:20:26 +02:00
115 lines
3.9 KiB
Plaintext
115 lines
3.9 KiB
Plaintext
---
|
|
title: Using RPC From JavaScript
|
|
order: 42
|
|
layout: page
|
|
---
|
|
|
|
[[using-rpc-from-javascript]]
|
|
Using RPC from JavaScript
|
|
-------------------------
|
|
|
|
This tutorial continues where
|
|
link:IntegratingAJavaScriptComponent.asciidoc[Integrating a JavaScript
|
|
component] ended. We will now add RPC functionality to the JavaScript
|
|
Flot component. RPC can be used in the same way as with ordinary GWT
|
|
components.
|
|
|
|
We will add RPC from the client to the server when the user clicks a
|
|
data point in the graph and RPC from server to client for highlighting a
|
|
data point in the graph. For each of these, we define an RPC interface.
|
|
Each interface has one method that takes a data series index and the
|
|
index of a point in that series. As with the shared state, the GWT code
|
|
doesn't need to know about these interfaces and it's thus not required
|
|
to put them in the widgetset's client package and to recompile the
|
|
widgetset after making changes.
|
|
|
|
[source,java]
|
|
....
|
|
public interface FlotClickRpc extends ServerRpc {
|
|
public void onPlotClick(int seriesIndex, int dataIndex);
|
|
}
|
|
|
|
public interface FlotHighlightRpc extends ClientRpc {
|
|
public void highlight(int seriesIndex, int dataIndex);
|
|
}
|
|
....
|
|
|
|
The server side code for this looks the same as if the client-side
|
|
connector was implemented using GWT. An RPC implementation is registered
|
|
in the constructor.
|
|
|
|
[source,java]
|
|
....
|
|
public Flot() {
|
|
registerRpc(new FlotClickRpc() {
|
|
public void onPlotClick(int seriesIndex, int dataIndex) {
|
|
Notification.show("Clicked on [" + seriesIndex + ", "
|
|
+ dataIndex + "]");
|
|
}
|
|
});
|
|
}
|
|
....
|
|
|
|
Highlighting is implemented by getting an RPC proxy object and invoking
|
|
the method.
|
|
|
|
[source,java]
|
|
....
|
|
public void highlight(int seriesIndex, int dataIndex) {
|
|
getRpcProxy(FlotHighlightRpc.class).highlight(seriesIndex, dataIndex);
|
|
}
|
|
....
|
|
|
|
The JavaScript connector uses similar functions from the connector
|
|
wrapper: `this.getRpcProxy()` for getting an object with functions that
|
|
will call the server-side counterpart and `this.registerRpc()` for
|
|
registering an object with functions that will be called from the
|
|
server. Because of the dynamic nature of JavaScript, you don't need to
|
|
use the interface names if you don't want to - all methods from all RPC
|
|
interfaces registered for the connector on the server will be available
|
|
in the RPC proxy object and any RPC method invoked from the server will
|
|
be called if present in the RPC object you registered. If a connector
|
|
uses multiple RPC interfaces that define methods with conflicting names,
|
|
you can still use the interface names to distinguish between interfaces.
|
|
|
|
We need to make some small adjustments to the connector JavaScript to
|
|
make it work with the way Flot processes events. Because a new Flot
|
|
object is created each time the `onStateChange` function is called, we
|
|
need to store a reference to the current object that we can use for
|
|
applying the highlight. We also need to pass a third parameter to
|
|
`$.plot` to make the graph area clickable. Aside from those changes, we
|
|
just call the function on the RPC proxy in a click listener and register
|
|
an RPC implementation with a function that highlights a point.
|
|
|
|
[source,javascript]
|
|
....
|
|
window.com_example_Flot = function() {
|
|
var element = $(this.getElement());
|
|
var rpcProxy = this.getRpcProxy();
|
|
var flot;
|
|
|
|
this.onStateChange = function() {
|
|
flot = $.plot(element, this.getState().series, {grid: {clickable: true}});
|
|
}
|
|
|
|
element.bind('plotclick', function(event, point, item) {
|
|
if (item) {
|
|
rpcProxy.onPlotClick(item.seriesIndex, item.dataIndex);
|
|
}
|
|
});
|
|
|
|
this.registerRpc({
|
|
highlight: function(seriesIndex, dataIndex) {
|
|
if (flot) {
|
|
flot.highlight(seriesIndex, dataIndex);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
....
|
|
|
|
When the normal Vaadin RPC is used with JavaScript connectors, you can
|
|
use the same server-side code that you would use with a GWT connector
|
|
and the client-side code uses the same concepts as for GWT connectors,
|
|
just translated to fit into the world of JavaScript.
|