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
|
---
title: Portlet UI
order: 4
layout: page
---
[[portal.ui]]
= Portlet UI
A portlet UI is just like in a regular Vaadin application, a class that extends
[classname]#com.vaadin.ui.UI#.
----
@Theme("myportlet")
public class MyportletUI extends UI {
@Override
protected void init(VaadinRequest request) {
final VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
setContent(layout);
Button button = new Button("Click Me");
button.addClickListener(new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
layout.addComponent(
new Label("Thank you for clicking"));
}
});
layout.addComponent(button);
}
}
----
If you created the project as a Servlet 3.0 project, the generated UI stub
includes a static servlet class annotated with [classname]#@WebServlet#, as
described in
<<dummy/../../../framework/getting-started/getting-started-first-project#getting-started.first-project.exploring,"Exploring
the Project">>.
----
@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false,
ui = MyportletUI.class)
public static class Servlet extends VaadinServlet {
}
----
This enables running the portlet UI in a servlet container while developing it,
which may be easier than deploying to a portal. For Servlet 2.4 projects, a
[filename]#web.xml# is created.
The portlet theme is defined with the [classname]#@Theme# annotation as usual.
The theme for the UI must match a theme installed in the portal. You can use any
of the built-in themes in Vaadin. If you use a custom theme, you need to
compile it to CSS with the theme compiler and install it in the portal under the
[filename]#VAADIN/themes# context to be served statically.
In addition to the UI class, you need the portlet descriptor files, Vaadin
libraries, and other files as described later.
<<figure.portal.helloworld.project>> shows the complete project structure under
Eclipse.
[[figure.portal.helloworld.project]]
.Portlet Project Structure in Eclipse
image::img/liferay-project.png[]
Installed as a portlet in Liferay from the [guilabel]#Add Application# menu, the
application will show as illustrated in <<figure.portal.helloworld>>.
[[figure.portal.helloworld]]
.Hello World Portlet
image::img/liferay-helloworld.png[]
|
