123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145 |
- ---
- title: Sending Events From The Client To The Server Using RPC
- order: 37
- layout: page
- ---
-
- [[sending-events-from-the-client-to-the-server-using-RPC]]
- Sending events from the client to the server using RPC
- ------------------------------------------------------
- An RPC mechanism can be used to communicate from the client to the
- server. In effect, the client can call methods that are executed by the
- server component. The server component can then take appropriate action
- - e.g updating the shared state or calling event listeners.
-
- To set up client-server RPC we need to create one interface defining the
- RPC methods, and then make use of that interface on both the client and
- the server. Place the `MyComponentServerRpc` interface in the client
- package:
-
- [source,java]
- ....
- package com.example.mycomponent.client;
-
- import com.vaadin.terminal.gwt.client.MouseEventDetails;
- import com.vaadin.terminal.gwt.client.communication.ServerRpc;
-
- public interface MyComponentServerRpc extends ServerRpc {
- public void clicked(MouseEventDetails mouseDetails);
- }
- ....
-
- Note that the RPC methods can not have return values. In this example,
- we pass `MouseEventDetails` to get a more complete example, but you
- could pass almost any (or no) parameters.
-
- In the server side `MyComponent` we need to implement the interface, and
- register it for use:
-
- [source,java]
- ....
- package com.example.mycomponent;
-
- import com.example.mycomponent.client.MyComponentServerRpc;
- import com.example.mycomponent.client.MyComponentState;
- import com.vaadin.terminal.gwt.client.MouseEventDetails;
- import com.vaadin.ui.AbstractComponent;
-
- public class MyComponent extends AbstractComponent {
-
- private int clickCount = 0;
-
- private MyComponentServerRpc rpc = new MyComponentServerRpc() {
- public void clicked(MouseEventDetails mouseDetails) {
- clickCount++;
- setText("You have clicked " + clickCount + " times");
- }
- };
-
- public MyComponent() {
- registerRpc(rpc);
- }
-
- /* Previous code commented out for clarity:
- @Override
- public MyComponentState getState() {
- return (MyComponentState) super.getState();
- }
- public void setText(String text) {
- getState().text = text;
- }
- public String getText() {
- return getState().text;
- }
- */
- }
- ....
-
- Here we react to the RPC call by incrementing a counter. We do not make
- use of the `MouseEventDetails` (yet). Notice the *important call to
- `registerRpc()`* in the added constructor.
-
- In the client side `MyComponentConnector`, we use `RpcProxy` to get an
- implementation of the RPC interface, and call the `clicked()` method
- when the widget is clicked:
-
- [source,java]
- ....
- package com.example.mycomponent.client;
-
- // imports removed for clarity
- import com.vaadin.terminal.gwt.client.communication.RpcProxy;
-
- @Connect(MyComponent.class)
- public class MyComponentConnector extends AbstractComponentConnector {
-
- MyComponentServerRpc rpc = RpcProxy
- .create(MyComponentServerRpc.class, this);
-
- public MyComponentConnector() {
- getWidget().addClickHandler(new ClickHandler() {
- public void onClick(ClickEvent event) {
-
- final MouseEventDetails mouseDetails = MouseEventDetailsBuilder
- .buildMouseEventDetails(event.getNativeEvent(),
- getWidget().getElement());
-
- rpc.clicked(mouseDetails);
- }
- });
- }
-
- /* Previous code commented out for clarity:
- @Override
- protected Widget createWidget() {
- return GWT.create(MyComponentWidget.class);
- }
- @Override
- public MyComponentWidget getWidget() {
- return (MyComponentWidget) super.getWidget();
- }
- @Override
- public MyComponentState getState() {
- return (MyComponentState) super.getState();
- }
- @OnStateChange("text")
- void updateText() {
- getWidget().setText(getState().text);
- }
- */
- }
- ....
-
- Notice that most of the code is for attaching the click handler and
- creating the `MouseEventDetails`, the code for the actual RPC is quite
- minimal.
-
- Compile the widgetset, and the label text should be updated with the
- click count whenever you click it (remember that the counting is done on
- the server-side).
-
- Finally, note that you can use multiple RPC interfaces in one component,
- allowing for better code separation and reuse.
-
- You can do the same thing in the other direction, see the article about
- server to client RPC for details.
|