aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorMarko Gronroos <magi@vaadin.com>2016-03-15 14:14:56 +0200
committerMarko Gronroos <magi@vaadin.com>2016-03-15 14:14:56 +0200
commitca2e1a6bda8b5b67b86bdfec9225356ddd0bbada (patch)
tree2b97cbebe1d21a82107326d59de8aac67fd93f4c
parent354a04a9f32edf5dae84b2421ae1a3011357f97d (diff)
downloadvaadin-framework-ca2e1a6bda8b5b67b86bdfec9225356ddd0bbada.tar.gz
vaadin-framework-ca2e1a6bda8b5b67b86bdfec9225356ddd0bbada.zip
Restored Ivy project creation until Maven support becomes official in the plugin. Various fixes and improved the diagrams in the section as well.
Change-Id: If32f877b7bfa569d91eaf3fc9d8543e4e4599aa1
-rw-r--r--documentation/getting-started/getting-started-first-project.asciidoc271
-rw-r--r--documentation/getting-started/img/installation-steps-hi.pngbin139406 -> 65439 bytes
-rw-r--r--documentation/getting-started/img/myproject-created-annotated-hi.pngbin0 -> 160057 bytes
-rw-r--r--documentation/getting-started/img/myproject-ivy-created.pngbin0 -> 21785 bytes
-rw-r--r--documentation/getting-started/img/myproject-ivy-new-vaadin.pngbin0 -> 32682 bytes
-rw-r--r--documentation/getting-started/img/myproject-ivy-settings.pngbin0 -> 50386 bytes
-rw-r--r--documentation/getting-started/img/myproject-ivy-vaadin.pngbin0 -> 45886 bytes
-rw-r--r--documentation/getting-started/img/myproject-ivy-web.pngbin0 -> 22378 bytes
-rw-r--r--documentation/getting-started/original-drawings/Makefile13
-rw-r--r--documentation/getting-started/original-drawings/myproject-created-annotated.svg363
10 files changed, 602 insertions, 45 deletions
diff --git a/documentation/getting-started/getting-started-first-project.asciidoc b/documentation/getting-started/getting-started-first-project.asciidoc
index e7a199a54d..cc8be595e1 100644
--- a/documentation/getting-started/getting-started-first-project.asciidoc
+++ b/documentation/getting-started/getting-started-first-project.asciidoc
@@ -27,78 +27,267 @@ Eclipse and set up your development environment, as instructed in
up the Development Environment">>.
[[getting-started.first-project.creation]]
+ifdef::web[]
== Creating the Project
+endif::web[]
+ifdef::web[]
+_The following describes the creation of an Ivy project. The upcoming version of the Eclipse plug-in creates Maven projects. For that, see <<getting-started.first-project.maven>>._
+endif::web[]
+
+ifdef::web[]
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#.
+Project" and click [guibutton]#Next#.
++
+image::img/myproject-ivy-new-vaadin.png[width=70%]
+. In the [guilabel]#Vaadin Project# step, you need to set the basic web project
+settings. You need to give at least the __project name__ and the runtime; the
+default values should be good for the other settings.
+
-image::img/myproject-new-vaadin.png[]
+image::img/myproject-ivy-settings.png[width=70%]
-. 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#.
+[guilabel]#Project name#:: Give the project a name. The name should be a valid identifier usable
+cross-platform as a filename and inside a URL, so using only lower-case
+alphanumerics, underscore, and minus sign is recommended.
-+
-image::img/myproject-archetype-selection.png[]
+[guilabel]#Use default location#:: Define the directory under which the project is created. The default is under
+your workspace folder, and you should normally leave it as it is. You may need
+to set the directory, for example, if you are creating an Eclipse project on top
+of a version-controlled source tree.
+
+[guilabel]#Target runtime#:: Define the application server to use for deploying the application. The server
+that you have installed, for example Apache Tomcat, should be selected
+automatically. If not, click [guibutton]#New# to configure a new server under
+Eclipse.
-. 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.
+[guilabel]#Configuration#:: Select the configuration to use; you should normally use the default
+configuration for the application server. If you need to modify the project
+facets, click [guibutton]#Modify#. The recommended Servlet 3.0 configuration
+uses the @WebServlet deployment, while Servlet 2.4 uses the old
+[filename]#web.xml# deployment.
+
+[guilabel]#Deployment configuration#:: This setting defines the environment to which the application will be deployed,
+to generate the appropriate project directory layout and configuration files.
+The choises are:
+
+*** [guilabel]#Servlet# (default)
+*** [guilabel]#Google App Engine Servlet#
+*** [guilabel]#Generic Portlet (Portlet 2.0)#
+
-image::img/myproject-settings.png[]
+The further steps in the New Project Wizard depend on the selected deployment
+configuration; the steps listed in this section are for the default servlet
+configuration.
+ifdef::web[]
+See <<dummy/../../../framework/advanced/advanced-gae#advanced.gae,"Google App
+Engine Integration">> and <<dummy/../../../framework/portal/portal-overview.asciidoc#portal.overview,"Portal Integration">> for instructions regarding the use of Vaadin in the alternative
+environments.
+endif::web[]
+
+[guilabel]#Vaadin version#:: Select the Vaadin version to use. The drop-down list shows, by default, the
+latest available version of Vaadin. The selection includes nightly
+[literal]#++SNAPSHOT++# builds, if you want to keep up with the absolutely
+latest unstable versions.
-[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.
++
+You can change the version later in the [filename]#ivy.xml#.
-[guilabel]#Artifact Id#:: Give the project a name, for example, `myproject`. The artifact ID should
-be a valid java identifier.
+[guilabel]#Create TestBench test#:: When enabled, the application stub will include a test case for testing the UI
+with Vaadin TestBench, as described in
+<<dummy/../../../testbench/testbench-overview.asciidoc#testbench.overview,"Vaadin TestBench">>.
+Vaadin TestBench API library will be included in [filename]#ivy.xml# as a dependency.
+Vaadin version 7.3 or later is required to create the stub.
-[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.
++
+You can click [guibutton]#Finish# here to use the defaults for the rest of the
+settings, or click [guibutton]#Next#.
-[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.
+. The settings in the [guilabel]#Web Module# step define the basic web application
+(WAR) deployment settings and the structure of the web application project. All
+the settings are pre-filled, and you should normally accept them as they are.
+
++
+image::img/myproject-ivy-web.png[]
+
+[guilabel]#Context Root#:: The context root (of the application) identifies the application in the URL used
+for accessing it. For example, if the project has a [literal]#++myproject++#
+context and a single UI at the context root, the URL would be
+http://example.com/myproject. The wizard will suggest the project name given in
+the first step as the context name. You can change the context root later in the
+Eclipse project properties.
-[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.
+[guilabel]#Content Directory#:: The directory containing all the content to be included in the web application
+(WAR) that is deployed to the web server. The directory is relative to the root
+directory of the project.
+
-You can change the version later in the [filename]#pom.xml#.
+You can just accept the defaults and click [guibutton]#Next#.
+. The [guilabel]#Vaadin project# step page has various Vaadin-specific application settings.
+If you are trying out Vaadin for the first time, you should not need
+to change anything. You can set most of the settings afterwards, except the
+creation of the portlet configuration.
+
-Finally, click [guibutton]#Finish# to create the project.
+image::img/myproject-vaadin.png[]
+
+[guilabel]#Create project template#:: Make the wizard create an UI class stub.
+
+[guilabel]#Application Name#:: A name for the application UI, shown in the title bar of the browser window.
+[guilabel]#Base package name#:: The name of the Java package under which the UI class of the application is to
+be placed.
+[guilabel]#Application/UI class name#:: The name of the UI class for the application, in which the user interface is
+developed.
+
+[guilabel]#Portlet version#:: When a portlet version is selected (only Portlet 2.0 is supported), the wizard
+will create the files needed for running the application in a portal. See
+<<dummy/../../../framework/portal/portal-overview.asciidoc#portal.overview,"Portal
+Integration">> for more information on portlets.
+
++
+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
+you: an UI class skeleton has been written to [filename]#src# directory and the
+[filename]#WebContent/WEB-INF/web.xml# contains a deployment descriptor. 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[]
+image::img/myproject-ivy-created.png[]
-The Vaadin libraries and other dependencies are managed by Maven. Notice that the
+The Vaadin libraries and other dependencies are managed by Ivy. 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.
+in the "Java Resources > Libraries > ivy.xml" 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;
+...
+
+@SuppressWarnings("serial")
+@Theme("myproject")
+public class MyprojectUI extends UI {
+
+ @WebServlet(value = "/*", asyncSupported = true)
+ @VaadinServletConfiguration(
+ productionMode = false,
+ ui = MyprojectUI.class)
+ public static class Servlet extends VaadinServlet {
+ }
+
+ @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);
+ }
+}
+----
+
+In a Servlet 3.0 project, the deployment is configured with servlet class and a
+[literal]#++@WebServlet++# annotation. The stub includes the servlet class as a
+static inner class. You may want to refactor it to a separate normal class.
+
+In a Servlet 2.3 project, you would have a [filename]#web.xml# deployment
+descriptor.
+
+For a more detailed treatment of the deployment, see
+<<dummy/../../../framework/application/application-environment#application.environment.web-xml,"Using a web.xml Deployment Descriptor">>.
+endif::web[]
+
+[[getting-started.first-project.maven]]
+== Creating a Maven Project
+
+ifdef::web[]
+_The following describes project creation in the upcoming version of the Eclipse plug-in, which creates Maven rather than Ivy projects.
+To use it, you must have installed the experimental version of the plug-in._
+endif::web[]
+
+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[width=70%]
+
+. 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[width=70%]
+
+. 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[width=70%]
+
+[guilabel]#Group Id#::
+Give the project an organization-level identifier, for example, [packagename]#com.example#.
+It is used as a prefix for your Java package names, and hence must be a valid Java package name itself.
+
+[guilabel]#Artifact Id#:: Give the project a name, for example, `myproject`.
+The artifact ID must be a valid Java sub-package name.
+
+[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#.
+It is by default generated from the group ID and the artifact ID.
+
+[guilabel]#Properties#:: Enter values for 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-annotated-hi.png[width=80%]
+
+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 plug-in contains the following code:
[source, java]
----
@@ -114,20 +303,20 @@ 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()
+ layout.addComponent(new Label("Thanks " + name.getValue()
+ ", it works!"));
});
-
+
layout.addComponents(name, button);
layout.setMargin(true);
layout.setSpacing(true);
-
+
setContent(layout);
}
@@ -138,17 +327,14 @@ public class MyUI extends UI {
}
----
-
[[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>>.
+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[]
-
+image::img/myproject-compilewidgetset.png[width=50%]
[[getting-started.first-project.coding]]
== Coding Tips for Eclipse
@@ -177,7 +363,6 @@ server-side development.
.Importing Classes Automatically
image::img/codingtips-automaticimports.png[]
-
[[getting-started.first-project.server]]
== Setting Up and Starting the Web Server
@@ -190,7 +375,7 @@ 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.
+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[]
@@ -207,13 +392,9 @@ 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
@@ -222,7 +403,7 @@ Starting your application is as easy as selecting [guilabel]#myproject# from the
Eclipse then opens the application in built-in web browser.
.Running a Vaadin Application
-image::img/runningMyProject.png[]
+image::img/runningMyProject.png[width=60%]
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
diff --git a/documentation/getting-started/img/installation-steps-hi.png b/documentation/getting-started/img/installation-steps-hi.png
index 9dae72d61a..06089e1e46 100644
--- a/documentation/getting-started/img/installation-steps-hi.png
+++ b/documentation/getting-started/img/installation-steps-hi.png
Binary files differ
diff --git a/documentation/getting-started/img/myproject-created-annotated-hi.png b/documentation/getting-started/img/myproject-created-annotated-hi.png
new file mode 100644
index 0000000000..c2d9a49221
--- /dev/null
+++ b/documentation/getting-started/img/myproject-created-annotated-hi.png
Binary files differ
diff --git a/documentation/getting-started/img/myproject-ivy-created.png b/documentation/getting-started/img/myproject-ivy-created.png
new file mode 100644
index 0000000000..0cebb5f0db
--- /dev/null
+++ b/documentation/getting-started/img/myproject-ivy-created.png
Binary files differ
diff --git a/documentation/getting-started/img/myproject-ivy-new-vaadin.png b/documentation/getting-started/img/myproject-ivy-new-vaadin.png
new file mode 100644
index 0000000000..e2243d5c1a
--- /dev/null
+++ b/documentation/getting-started/img/myproject-ivy-new-vaadin.png
Binary files differ
diff --git a/documentation/getting-started/img/myproject-ivy-settings.png b/documentation/getting-started/img/myproject-ivy-settings.png
new file mode 100644
index 0000000000..20d4509317
--- /dev/null
+++ b/documentation/getting-started/img/myproject-ivy-settings.png
Binary files differ
diff --git a/documentation/getting-started/img/myproject-ivy-vaadin.png b/documentation/getting-started/img/myproject-ivy-vaadin.png
new file mode 100644
index 0000000000..fff616e6fe
--- /dev/null
+++ b/documentation/getting-started/img/myproject-ivy-vaadin.png
Binary files differ
diff --git a/documentation/getting-started/img/myproject-ivy-web.png b/documentation/getting-started/img/myproject-ivy-web.png
new file mode 100644
index 0000000000..ae47d37c0f
--- /dev/null
+++ b/documentation/getting-started/img/myproject-ivy-web.png
Binary files differ
diff --git a/documentation/getting-started/original-drawings/Makefile b/documentation/getting-started/original-drawings/Makefile
new file mode 100644
index 0000000000..6b3bab4617
--- /dev/null
+++ b/documentation/getting-started/original-drawings/Makefile
@@ -0,0 +1,13 @@
+IMAGES = installation-steps myproject-created-annotated
+
+SRCIMAGES := $(foreach file, $(IMAGES), $(file).svg)
+TRGIMAGES_HI := $(foreach file, $(IMAGES), ../img/$(file)-hi.png)
+TRGIMAGES_LO := $(foreach file, $(IMAGES), ../img/$(file)-lo.png)
+
+images: $(TRGIMAGES_HI) FORCE
+# Just do low now $(TRGIMAGES_LO)
+
+$(TRGIMAGES_HI): ../img/%-hi.png: %.svg
+ inkscape --export-png $@ --export-dpi=150 --export-area-drawing $<
+
+FORCE:
diff --git a/documentation/getting-started/original-drawings/myproject-created-annotated.svg b/documentation/getting-started/original-drawings/myproject-created-annotated.svg
new file mode 100644
index 0000000000..b639c5f160
--- /dev/null
+++ b/documentation/getting-started/original-drawings/myproject-created-annotated.svg
@@ -0,0 +1,363 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="1052.3622"
+ height="744.09448"
+ id="svg1901"
+ sodipodi:version="0.32"
+ inkscape:version="0.48.4 r9939"
+ sodipodi:docname="myproject-created-annotated.svg"
+ version="1.1">
+ <defs
+ id="defs1903">
+ <marker
+ id="marker18095"
+ orient="auto"
+ markerHeight="5.7450776"
+ markerWidth="4.6297302">
+ <g
+ id="g11064"
+ transform="matrix(0.5,0,0,0.5,-185.64298,-257.19655)">
+ <path
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="csccccccsccssssssssssssssccc"
+ id="path11050"
+ d="m 370,508.65625 c -0.86067,0.0587 -1.60944,0.6213 -1.90625,1.4375 -0.26976,0.74176 -0.0577,1.53493 0.4375,2.125 l -1.75,0 c -0.0424,-0.005 -0.0824,0.002 -0.125,0 l 0,4.375 0.125,0 1.75,0 c -0.67896,0.8597 -0.69701,2.11549 0.0937,2.90625 0.85091,0.85091 2.27409,0.85091 3.125,0 l 3.34375,-3.375 c 0.033,-0.0295 0.0643,-0.0608 0.0937,-0.0937 0.0322,-0.0193 0.0635,-0.0402 0.0937,-0.0625 3.7e-4,-3.6e-4 0.21851,-0.28079 0.21875,-0.28125 5e-5,-9e-5 -0.007,-0.0447 0,-0.0625 0.001,-0.003 0.03,0.003 0.0312,0 0.0391,-0.0521 0.051,-0.0518 0.0937,-0.125 0.13699,-0.23476 0.16684,-0.37191 0.15625,-0.34375 0.0368,-0.0915 0.0185,-0.11251 0.0312,-0.15625 0.0106,-0.0102 0.021,-0.0206 0.0312,-0.0312 0.06,-0.22398 0.0881,-0.51689 0.0625,-0.78125 -0.0136,-0.20363 -0.0589,-0.29765 -0.0625,-0.3125 1.4e-4,-0.0104 1.4e-4,-0.0208 0,-0.0312 0.026,0.097 0.0153,0.016 -0.0937,-0.25 -0.0525,-0.13039 -0.0899,-0.21936 -0.125,-0.28125 -0.0524,-0.0897 -0.13346,-0.26235 -0.34375,-0.46875 L 371.75,509.3125 c -0.45645,-0.48671 -1.08509,-0.71163 -1.75,-0.65625 z"
+ style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" />
+ <path
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cccscccsssssssscccsccc"
+ id="path11035"
+ d="m 366.65625,515.40625 4.625,0 -1.8125,1.8125 c -0.39695,0.39695 -0.39695,1.04055 0,1.4375 0.39695,0.39695 1.04055,0.39695 1.4375,0 l 3.4375,-3.46875 0.0937,-0.0625 c 0.006,-0.006 -0.006,-0.0253 0,-0.0312 0.0554,-0.0572 0.1151,-0.11699 0.15625,-0.1875 0.0286,-0.0491 0.0429,-0.10409 0.0625,-0.15625 0.0124,-0.0307 0.0221,-0.0622 0.0312,-0.0937 0.0311,-0.1161 0.0427,-0.22493 0.0312,-0.34375 -0.004,-0.0578 -0.0174,-0.0996 -0.0312,-0.15625 -0.0109,-0.0407 -0.0151,-0.0857 -0.0312,-0.125 -0.0164,-0.0408 -0.0405,-0.0862 -0.0625,-0.125 -0.0455,-0.0779 -0.0936,-0.15726 -0.15625,-0.21875 l -3.53125,-3.53125 c -0.20891,-0.22276 -0.50816,-0.33785 -0.8125,-0.3125 -0.39478,0.0269 -0.73977,0.28438 -0.875,0.65625 -0.13524,0.37187 -0.0353,0.78826 0.25,1.0625 l 1.875,1.84375 -4.6875,0"
+ style="fill:#49c2f1;fill-opacity:1;fill-rule:evenodd;stroke:none" />
+ </g>
+ </marker>
+ <marker
+ id="marker18095-5"
+ orient="auto"
+ markerHeight="5.7450776"
+ markerWidth="4.6297302">
+ <g
+ id="g11064-9"
+ transform="matrix(0.5,0,0,0.5,-185.64298,-257.19655)">
+ <path
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="csccccccsccssssssssssssssccc"
+ id="path11050-2"
+ d="m 370,508.65625 c -0.86067,0.0587 -1.60944,0.6213 -1.90625,1.4375 -0.26976,0.74176 -0.0577,1.53493 0.4375,2.125 l -1.75,0 c -0.0424,-0.005 -0.0824,0.002 -0.125,0 l 0,4.375 0.125,0 1.75,0 c -0.67896,0.8597 -0.69701,2.11549 0.0937,2.90625 0.85091,0.85091 2.27409,0.85091 3.125,0 l 3.34375,-3.375 c 0.033,-0.0295 0.0643,-0.0608 0.0937,-0.0937 0.0322,-0.0193 0.0635,-0.0402 0.0937,-0.0625 3.7e-4,-3.6e-4 0.21851,-0.28079 0.21875,-0.28125 5e-5,-9e-5 -0.007,-0.0447 0,-0.0625 0.001,-0.003 0.03,0.003 0.0312,0 0.0391,-0.0521 0.051,-0.0518 0.0937,-0.125 0.13699,-0.23476 0.16684,-0.37191 0.15625,-0.34375 0.0368,-0.0915 0.0185,-0.11251 0.0312,-0.15625 0.0106,-0.0102 0.021,-0.0206 0.0312,-0.0312 0.06,-0.22398 0.0881,-0.51689 0.0625,-0.78125 -0.0136,-0.20363 -0.0589,-0.29765 -0.0625,-0.3125 1.4e-4,-0.0104 1.4e-4,-0.0208 0,-0.0312 0.026,0.097 0.0153,0.016 -0.0937,-0.25 -0.0525,-0.13039 -0.0899,-0.21936 -0.125,-0.28125 -0.0524,-0.0897 -0.13346,-0.26235 -0.34375,-0.46875 L 371.75,509.3125 c -0.45645,-0.48671 -1.08509,-0.71163 -1.75,-0.65625 z"
+ style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" />
+ <path
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cccscccsssssssscccsccc"
+ id="path11035-6"
+ d="m 366.65625,515.40625 4.625,0 -1.8125,1.8125 c -0.39695,0.39695 -0.39695,1.04055 0,1.4375 0.39695,0.39695 1.04055,0.39695 1.4375,0 l 3.4375,-3.46875 0.0937,-0.0625 c 0.006,-0.006 -0.006,-0.0253 0,-0.0312 0.0554,-0.0572 0.1151,-0.11699 0.15625,-0.1875 0.0286,-0.0491 0.0429,-0.10409 0.0625,-0.15625 0.0124,-0.0307 0.0221,-0.0622 0.0312,-0.0937 0.0311,-0.1161 0.0427,-0.22493 0.0312,-0.34375 -0.004,-0.0578 -0.0174,-0.0996 -0.0312,-0.15625 -0.0109,-0.0407 -0.0151,-0.0857 -0.0312,-0.125 -0.0164,-0.0408 -0.0405,-0.0862 -0.0625,-0.125 -0.0455,-0.0779 -0.0936,-0.15726 -0.15625,-0.21875 l -3.53125,-3.53125 c -0.20891,-0.22276 -0.50816,-0.33785 -0.8125,-0.3125 -0.39478,0.0269 -0.73977,0.28438 -0.875,0.65625 -0.13524,0.37187 -0.0353,0.78826 0.25,1.0625 l 1.875,1.84375 -4.6875,0"
+ style="fill:#49c2f1;fill-opacity:1;fill-rule:evenodd;stroke:none" />
+ </g>
+ </marker>
+ </defs>
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="1.4"
+ inkscape:cx="236.02753"
+ inkscape:cy="570.52264"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ inkscape:window-width="1920"
+ inkscape:window-height="1060"
+ inkscape:window-x="-2"
+ inkscape:window-y="-3"
+ showgrid="true"
+ inkscape:window-maximized="1"
+ inkscape:snap-center="true"
+ inkscape:snap-grids="true"
+ inkscape:snap-bbox="true"
+ inkscape:object-paths="true"
+ inkscape:object-nodes="true"
+ inkscape:snap-object-midpoints="true"
+ showguides="true"
+ inkscape:guide-bbox="true">
+ <inkscape:grid
+ type="xygrid"
+ id="grid2982"
+ empspacing="5"
+ visible="true"
+ enabled="true"
+ snapvisiblegridlinesonly="true"
+ spacingx="5px"
+ spacingy="5px" />
+ <sodipodi:guide
+ orientation="1,0"
+ position="395,555"
+ id="guide11876" />
+ </sodipodi:namedview>
+ <metadata
+ id="metadata1906">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Taso 1"
+ inkscape:groupmode="layer"
+ id="layer1"
+ transform="translate(0,-308.2677)">
+ <rect
+ style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.50000000000000000;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+ id="rect29725"
+ width="500"
+ height="460"
+ x="95"
+ y="164.09448"
+ transform="translate(0,308.2677)"
+ ry="3.7880721" />
+ <image
+ y="475.67679"
+ x="97.162643"
+ id="image3215"
+ xlink:href="file:///home/magi/itmill/vaadin/documentation/getting-started/img/myproject-created.png"
+ height="453.37076"
+ width="305.67471" />
+ <g
+ transform="translate(204.99999,-146.51524)"
+ id="g3822-4">
+ <path
+ sodipodi:nodetypes="cc"
+ style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+ d="m 50,419.09448 125,0"
+ id="path3804-2"
+ inkscape:connector-curvature="0"
+ transform="translate(0,308.2677)" />
+ <path
+ sodipodi:type="arc"
+ style="color:#000000;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+ id="path3005-2-10"
+ sodipodi:cx="25"
+ sodipodi:cy="419.09448"
+ sodipodi:rx="9.1659365"
+ sodipodi:ry="9.1659365"
+ d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z"
+ transform="matrix(0.54549827,0,0,0.54549827,36.362543,498.74687)" />
+ <path
+ sodipodi:type="arc"
+ style="color:#000000;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+ id="path3005-2-10-5"
+ sodipodi:cx="25"
+ sodipodi:cy="419.09448"
+ sodipodi:rx="9.1659365"
+ sodipodi:ry="9.1659365"
+ d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z"
+ transform="matrix(0.54549827,0,0,0.54549827,156.36255,498.74687)" />
+ </g>
+ <text
+ xml:space="preserve"
+ style="font-size:14px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
+ x="394.74399"
+ y="584.474"
+ id="text13161"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan13163"
+ x="394.74399"
+ y="584.474">The UI class skeleton</tspan></text>
+ <g
+ transform="translate(204.99999,-66.969547)"
+ id="g3822-4-7">
+ <path
+ sodipodi:nodetypes="cc"
+ style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+ d="m 150.00001,419.09448 24.99999,0"
+ id="path3804-2-1"
+ inkscape:connector-curvature="0"
+ transform="translate(0,308.2677)" />
+ <path
+ sodipodi:type="arc"
+ style="color:#000000;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+ id="path3005-2-10-1"
+ sodipodi:cx="25"
+ sodipodi:cy="419.09448"
+ sodipodi:rx="9.1659365"
+ sodipodi:ry="9.1659365"
+ d="m 34.165936,419.09448 a 9.1659365,9.1659365 0 1 1 -18.331872,0 9.1659365,9.1659365 0 1 1 18.331872,0 z"
+ transform="matrix(0.54549827,0,0,0.54549827,136.36255,498.74687)" />
+ <path
+ sodipodi:type="arc"
+ style="color:#000000;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+ id="path3005-2-10-5-4"
+ sodipodi:cx="25"
+ sodipodi:cy="419.09448"
+ sodipodi:rx="9.1659365"
+ sodipodi:ry="9.1659365"
+ d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z"
+ transform="matrix(0.54549827,0,0,0.54549827,156.36255,498.74687)" />
+ </g>
+ <g
+ transform="translate(270,77.857138)"
+ id="g3822-4-8">
+ <path
+ sodipodi:nodetypes="cccc"
+ style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+ d="m 30,762.36218 10,-5 0,-20 10,-10"
+ id="path3804-2-3-46-9"
+ inkscape:connector-curvature="0" />
+ <path
+ sodipodi:nodetypes="cccc"
+ style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+ d="m 30,692.36218 10,5 0,20 10,10"
+ id="path3804-2-3-46"
+ inkscape:connector-curvature="0" />
+ <path
+ sodipodi:nodetypes="cc"
+ style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+ d="m 50,419.09448 55,1e-5"
+ id="path3804-2-3"
+ inkscape:connector-curvature="0"
+ transform="translate(0,308.2677)" />
+ <path
+ sodipodi:type="arc"
+ style="color:#000000;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+ id="path3005-2-10-8"
+ sodipodi:cx="25"
+ sodipodi:cy="419.09448"
+ sodipodi:rx="9.1659365"
+ sodipodi:ry="9.1659365"
+ d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z"
+ transform="matrix(0.54549827,0,0,0.54549827,36.362543,498.74687)" />
+ <path
+ sodipodi:type="arc"
+ style="color:#000000;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+ id="path3005-2-10-5-2"
+ sodipodi:cx="25"
+ sodipodi:cy="419.09448"
+ sodipodi:rx="9.1659365"
+ sodipodi:ry="9.1659365"
+ d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z"
+ transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)" />
+ </g>
+ <g
+ transform="translate(270,169.99999)"
+ id="g3822-4-8-5">
+ <path
+ sodipodi:nodetypes="cc"
+ style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+ d="m -70,419.09449 175,0"
+ id="path3804-2-3-4"
+ inkscape:connector-curvature="0"
+ transform="translate(0,308.2677)" />
+ <path
+ sodipodi:type="arc"
+ style="color:#000000;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+ id="path3005-2-10-8-2"
+ sodipodi:cx="25"
+ sodipodi:cy="419.09448"
+ sodipodi:rx="9.1659365"
+ sodipodi:ry="9.1659365"
+ d="m 34.165936,419.09448 a 9.1659365,9.1659365 0 1 1 -18.331872,0 9.1659365,9.1659365 0 1 1 18.331872,0 z"
+ transform="matrix(0.54549827,0,0,0.54549827,-83.637457,498.74688)" />
+ <path
+ sodipodi:type="arc"
+ style="color:#000000;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+ id="path3005-2-10-5-2-3"
+ sodipodi:cx="25"
+ sodipodi:cy="419.09448"
+ sodipodi:rx="9.1659365"
+ sodipodi:ry="9.1659365"
+ d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z"
+ transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)" />
+ </g>
+ <g
+ transform="translate(270,187.3214)"
+ id="g3822-4-8-5-4">
+ <path
+ sodipodi:nodetypes="cc"
+ style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
+ d="m -45,419.09448 150,1e-5"
+ id="path3804-2-3-4-5"
+ inkscape:connector-curvature="0"
+ transform="translate(0,308.2677)" />
+ <path
+ sodipodi:type="arc"
+ style="color:#000000;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+ id="path3005-2-10-8-2-3"
+ sodipodi:cx="25"
+ sodipodi:cy="419.09448"
+ sodipodi:rx="9.1659365"
+ sodipodi:ry="9.1659365"
+ d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z"
+ transform="matrix(0.54549827,0,0,0.54549827,-58.637457,498.74688)" />
+ <path
+ sodipodi:type="arc"
+ style="color:#000000;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+ id="path3005-2-10-5-2-3-8"
+ sodipodi:cx="25"
+ sodipodi:cy="419.09448"
+ sodipodi:rx="9.1659365"
+ sodipodi:ry="9.1659365"
+ d="m 34.165936,419.09448 c 0,5.06221 -4.103729,9.16594 -9.165936,9.16594 -5.062207,0 -9.165936,-4.10373 -9.165936,-9.16594 0,-5.0622 4.103729,-9.16593 9.165936,-9.16593 5.062207,0 9.165936,4.10373 9.165936,9.16593 z"
+ transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)" />
+ </g>
+ <text
+ xml:space="preserve"
+ style="font-size:14px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
+ x="394.74399"
+ y="664.25208"
+ id="text13161-0"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan13163-0"
+ x="394.74399"
+ y="664.25208">The widget set</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-size:14px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
+ x="394.74399"
+ y="808.74548"
+ id="text13161-0-4"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan13163-0-8"
+ x="394.74399"
+ y="808.74548">The theme</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-size:14px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
+ x="393.75201"
+ y="901.34863"
+ id="text13161-0-4-1"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan13163-0-8-3"
+ x="393.75201"
+ y="901.34863">Maven project configuration</tspan></text>
+ <text
+ xml:space="preserve"
+ style="font-size:14px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
+ x="393.75201"
+ y="918.85156"
+ id="text13161-0-4-4"
+ sodipodi:linespacing="125%"><tspan
+ sodipodi:role="line"
+ id="tspan13163-0-8-2"
+ x="393.75201"
+ y="918.85156">Project README skeleton</tspan></text>
+ </g>
+</svg>