1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
---
title: Enabling Server Push
order: 10
layout: page
---
[[enabling-server-push]]
= Enabling server push
The traditional way of communication between client and server in Vaadin
has been through XHR, i.e. AJAX requests. The client does a request to
the server with information about RPC method invocations, which are
executed on the server. As a result the state of one or several
components is updated and the changes are sent back as a response to the
client. Vaadin 7.1 introduces a new way of doing communications using
server push, which enables the server to push state changes to the
client without a request initiated by the client.
To create a push enabled application you start by creating a normal
Vaadin 7 project using Eclipse or Maven. First you need to add the
vaadin-push package to your project, so open pom.xml or ivy.xml and add
a vaadin-push dependency, e.g. in Ivy
[source,xml]
....
<dependency org="com.vaadin" name="vaadin-push" rev="&vaadin.version;" conf="default->default" />
....
and in Maven
[source,xml]
....
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-push</artifactId>
<version>${vaadin.version}</version>
</dependency>
....
Open your UI class and add a @Push annotation to enable push for the ui
[source,java]
....
@Push
public class PushTestUI extends UI {
...
}
....
If you are using a servlet 3.0 compatible server, open *web.xml* and
enable asynchronous processing by adding a
`<async-supported>true</async-supported>` tag.
Your servlet definition should look something like this:
[source,xml]
....
<servlet>
<servlet-name>MyServlet</servlet-name>
<servlet-class>com.vaadin.server.VaadinServlet</servlet-class>
<init-param>
<param-name>ui</param-name>
<param-value>org.vaadin.example.MyUI</param-value>
</init-param>
<async-supported>true</async-supported>
</servlet>
....
Your application is now setup for push and will automatically push
changes to the browser when needed. You can test it out using e.g. the
following UI which only adds a Label and starts a thread which does the
real initialization:
[source,java]
....
@Push
public class PushTestUI extends UI {
private VerticalLayout mainLayout;
@Override
protected void init(VaadinRequest request) {
mainLayout = new VerticalLayout();
mainLayout.setSizeFull();
mainLayout.setMargin(true);
setContent(mainLayout);
mainLayout.setDefaultComponentAlignment(Alignment.MIDDLE_CENTER);
Label loadingText = new Label("Loading UI, please wait...");
loadingText.setSizeUndefined();
mainLayout.addComponent(loadingText);
new InitializerThread().start();
}
class InitializerThread extends Thread {
@Override
public void run() {
// Do initialization which takes some time.
// Here represented by a 1s sleep
try {
Thread.sleep(1000);
} catch (InterruptedException e) {
}
// Init done, update the UI after doing locking
access(new Runnable() {
@Override
public void run() {
// Here the UI is locked and can be updated
mainLayout.removeAllComponents();
mainLayout
.addComponent(new TextArea("This is the real UI"));
}
});
}
}
}
....
`InitializerThread` is a `Thread` which simulates some work using a
sleep and then updates the UI with the real content. The UI update takes
place inside an _access_ call, which ensures the UI (actually the
`VaadinSession`) is locked to prevent synchronizations problems.
Now deploy the application to your server and open the UI in a browser.
You will see the "Loading..." text for roughly a second and when
the initialization is complete, the Label will be replaced by a
`TextArea`.
The changes were automatically pushed to the browser when the
_access_-block was done running. If you want full control on when
changes are pushed to the client, add `@Push(PushMode.MANUAL)` instead and
call `UI.push()` to push the changes (`UI.push()` needs to be called when
the session is locked, so run that inside the _access_ block too).
You can also configure push mode for the whole application using the
`pushmode` servlet init parameter. Possible values are `automatic`, `manual`
and `disabled`.
It is also possible to switch the push mode on the fly using
`UI.getPushConfiguration().setPushMode()`.
|
