Change-Id: If32f877b7bfa569d91eaf3fc9d8543e4e4599aa1

8 years ago · ca2e1a6bda
--- 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
--- a/documentation/getting-started/img/installation-steps-hi.png
+++ b/documentation/getting-started/img/installation-steps-hi.png
--- a/documentation/getting-started/img/myproject-created-annotated-hi.png
+++ b/documentation/getting-started/img/myproject-created-annotated-hi.png
--- a/documentation/getting-started/img/myproject-ivy-created.png
+++ b/documentation/getting-started/img/myproject-ivy-created.png
--- a/documentation/getting-started/img/myproject-ivy-new-vaadin.png
+++ b/documentation/getting-started/img/myproject-ivy-new-vaadin.png
--- a/documentation/getting-started/img/myproject-ivy-settings.png
+++ b/documentation/getting-started/img/myproject-ivy-settings.png
--- a/documentation/getting-started/img/myproject-ivy-vaadin.png
+++ b/documentation/getting-started/img/myproject-ivy-vaadin.png
--- a/documentation/getting-started/img/myproject-ivy-web.png
+++ b/documentation/getting-started/img/myproject-ivy-web.png
--- a/documentation/getting-started/original-drawings/Makefile
+++ 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:
--- a/documentation/getting-started/original-drawings/myproject-created-annotated.svg
+++ 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>