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
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
|
---
title: Creating and Running a Project with Eclipse
order: 5
layout: page
---
[[getting-started.first-project]]
= Creating and Running a Project with Eclipse
This section gives instructions for creating a new Eclipse project using the
Vaadin Plugin. The task will include the following steps:
. Create a new project
. Write the source code
. Configure and start Tomcat (or some other web server)
. Open a web browser to use the web application
We also show how you can debug the application in the debug mode in Eclipse.
This walkthrough assumes that you have already installed the Vaadin Plugin for
Eclipse and set up your development environment, as instructed in
<<dummy/../../../framework/getting-started/getting-started-environment#getting-started.environment,"Setting
up the Development Environment">>.
[[getting-started.first-project.creation]]
== Creating the Project
Let us create the first application project with the tools installed in the
previous section. First, launch Eclipse and follow the following steps:
. Start creating a new project by selecting from the menu "File > New > Project...".
. In the [guilabel]#New Project# window that opens, select "Vaadin > Vaadin 7
Project (Maven)" and click [guibutton]#Next#.
+
image::img/myproject-new-vaadin.png[]
. In the [guilabel]#Select a Maven archetype# step, you need to select the project type.
To create a simple test project, select the [guilabel]#Single-module Application Project#.
+
image::img/myproject-archetype-selection.png[]
. In the [guilabel]#Specify archetype parameters# step, you need to give at least the
[guilabel]#Group Id# and the [guilabel]#Artifact Id#; the default values should be good
for the other settings.
+
image::img/myproject-settings.png[]
[guilabel]#Group Id#:: Give the project a namespace that is typically used as a prefix
for your package names, for example, [packagename]#com.example#. The group ID should be a
valid java package name.
[guilabel]#Artifact Id#:: Give the project a name, for example, `myproject`. The artifact ID should
be a valid java identifier.
[guilabel]#Version#:: Give the project a Maven compatible version number, for example, `1.0-SNAPSHOT`.
The version number should typically start with two or more integers separated with dots, and
should not contain spaces.
[guilabel]#Package#:: Give the base package name for the project, for example,
[packagename]#com.example.myproject#. By default, this is generated from the group ID and
the artifact ID.
[guilabel]#Properties#:: Enter values for the archetype specific properties that control naming
of various elements in the created project, such as the UI class name.
+
You can change the version later in the [filename]#pom.xml#.
+
Finally, click [guibutton]#Finish# to create the project.
[[getting-started.first-project.exploring]]
== Exploring the Project
After the [guilabel]#New Project# wizard exits, it has done all the work for
you: a UI class skeleton has been written to the [filename]#src# directory. The
project hierarchy shown in the Project Explorer is shown in
<<figure.getting-started.first-project.exploring>>.
[[figure.getting-started.first-project.exploring]]
.A New Vaadin Project
image::img/myproject-created.png[]
The Vaadin libraries and other dependencies are managed by Maven. Notice that the
libraries are not stored under the project folder, even though they are listed
in the "Java Resources > Libraries > Maven Dependencies" virtual folder.
[[getting-started.first-project.exploring.ui]]
=== The UI Class
The UI class created by the plugin contains the following code:
[source, java]
----
package com.example.myproject;
import com.vaadin.ui.UI;
...
@Theme("mytheme")
@Widgetset("com.example.myproject.MyAppWidgetset")
public class MyUI extends UI {
@Override
protected void init(VaadinRequest vaadinRequest) {
final VerticalLayout layout = new VerticalLayout();
final TextField name = new TextField();
name.setCaption("Type your name here:");
Button button = new Button("Click Me");
button.addClickListener( e -> {
layout.addComponent(new Label("Thanks " + name.getValue()
+ ", it works!"));
});
layout.addComponents(name, button);
layout.setMargin(true);
layout.setSpacing(true);
setContent(layout);
}
@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
@VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
public static class MyUIServlet extends VaadinServlet {
}
}
----
[[getting-started.first-project.widgetset]]
== Compiling the Widget Set and Theme
Before running the project for the first time, select [guilabel]#Compile Widgetset and Theme#
from the menu shown in <<figure.getting-started.first-project.compilewidgetset>>.
[[figure.getting-started.first-project.compilewidgetset]]
.Compile Widgetset and Theme Menu
image::img/myproject-compilewidgetset.png[]
[[getting-started.first-project.coding]]
== Coding Tips for Eclipse
One of the most useful features in Eclipse is __code completion__. Pressing
kbd:[Ctrl+Space] in the editor will display a pop-up list of possible class name and
method name completions, as shown in
<<figure.getting-started.first-project.coding.codecompletion>>, depending on the
context of the cursor position.
[[figure.getting-started.first-project.coding.codecompletion]]
.Java Code Completion in Eclipse
image::img/codingtips-codecompletion.png[]
To add an [literal]#++import++# statement for a class, such as
[classname]#Button#, simply press kbd:[Ctrl+Shift+O] or click the red error indicator on
the left side of the editor window. If the class is available in multiple
packages, a list of the alternatives is displayed, as shown in
<<figure.getting-started.first-project.coding.import>>. For server-side
development, you should normally use the classes under the
[package]#com.vaadin.ui# or [package]#com.vaadin.server# packages. You can not
use client-side classes (under [package]#com.vaadin.client#) or GWT classes for
server-side development.
[[figure.getting-started.first-project.coding.import]]
.Importing Classes Automatically
image::img/codingtips-automaticimports.png[]
[[getting-started.first-project.server]]
== Setting Up and Starting the Web Server
Eclipse IDE for Java EE Developers has the Web Standard Tools package installed,
which supports control of various web servers and automatic deployment of web
content to the server when changes are made to a project.
Make sure that Tomcat was installed with user permissions. Configuration of the
web server in Eclipse will fail if the user does not have write permissions to
the configuration and deployment directories under the Tomcat installation
directory.
Follow the following steps.
. Switch to the Servers tab in the lower panel in Eclipse. List of servers should be empty after Eclipse is installed. Right-click on the empty area in the panel and select "New > Server". +
image::img/tomcat-startserver-1.png[]
. Select "Apache > Tomcat v8.0 Server" and set [guilabel]#Server's host name# as [literal]#++localhost++#, which should be the default. If you have only one Tomcat installed, [guilabel]#Server runtime# has only one choice. Click [guibutton]#Next#. +
image::img/tomcat-startserver-2.png[]
. Add your project to the server by selecting it on the left and clicking [guibutton]#Add# to add it to the configured projects on the right. Click [guibutton]#Finish#. +
image::img/tomcat-startserver-3.png[]
. The server and the project are now installed in Eclipse and are shown in the [guilabel]#Servers# tab. To start the server, right-click on the server and select Debug. To start the server in non-debug mode, select Start. +
image::img/tomcat-startserver-4.png[]
. The server starts and the WebContent directory of the project is published to the server on http://localhost:8080/myproject/. +
image::img/tomcat-startserver-5.png[]
[[getting-started.first-project.run]]
== Running and Debugging
Starting your application is as easy as selecting [guilabel]#myproject# from the
[guilabel]#Project Explorer# and then "Run > Debug As > Debug on Server".
Eclipse then opens the application in built-in web browser.
.Running a Vaadin Application
image::img/runningMyProject.png[]
You can insert break points in the Java code by double-clicking on the left
margin bar of the source code window. For example, if you insert a breakpoint in
the [methodname]#buttonClick()# method and click the [guibutton]#What is the
time?# button, Eclipse will ask to switch to the Debug perspective. Debug
perspective will show where the execution stopped at the breakpoint. You can
examine and change the state of the application. To continue execution, select
Resume from Run menu.
.Debugging a Vaadin Application
image::img/debuggingMyProject.png[]
Above, we described how to debug a server-side application. Debugging
client-side applications and widgets is described in
<<dummy/../../../framework/clientside/clientside-debugging#clientside.debugging,"Debugging
Client-Side Code">>.
|
