Change-Id: Iaea8b5267c7ccb2a6bc667cc89078bd3c4bf2435

8 years ago · 7ac2089afb
--- a/documentation/addons/addons-cval.asciidoc
+++ b/documentation/addons/addons-cval.asciidoc
@@ -18,20 +18,16 @@ them when deploying the application.
 You can purchase add-ons or obtain a free trial key from the Vaadin website. You
 need to register in the website to obtain a key.

 You can get license keys from
 link:https://vaadin.com/pro/licenses[vaadin.com/pro/licenses], where you can
 navigate by selecting in the Vaadin website "My Account > Licenses" or directly
 [menuchoice]#Licenses# if you are a Pro Tools subscriber.

 [[figure.addons.cval.obtaining]]
 .Obtaining CVAL License
 image::img/cval-pro-licenses-3.png[]
 You can get license keys from link:https://vaadin.com/pro/licenses[vaadin.com/pro/licenses].

 Click on a license key to obtain the purchased or trial key.
 . Select in the Vaadin website "My Account > Licenses" or directly
 [menuchoice]#Licenses# if you are a Pro Tools subscriber.
 +
 image::img/cval-pro-licenses-3.png[width=80%, scaledwidth=100%]

 [[figure.addons.cval.obtaining]]
 .Obtaining CVAL License Key
 image::img/cval-pro-licenses-code.png[]
 . Click on a license key to obtain the purchased or trial key.
 +
 image::img/cval-pro-licenses-code.png[width=80%, scaledwidth=100%]


 [[addons.cval.installing]]
@@ -63,8 +59,11 @@ usually with a [literal]#++-D++# option. For example, on the command-line:

 [subs="normal"]
 ----
 [prompt]#$# [command]#java# -D[parameter]#vaadin.[replaceable]+++#+++&lt;product&gt;+++#+++.developer.license#=[replaceable]#L1cen5e-c0de# ...
 [prompt]#$# [command]#java# -Dvaadin.[replaceable]##<product>##.developer.license=[replaceable]#L1cen5e-c0de# ...
 ----

 where the [literal]`<product>` is the product ID, such as `charts`, `spreadsheet`, `designer`, or `testbench`.

 ifdef::web[]
 See link:https://vaadin.com/directory/help/installing-cval-license[the CVAL
 license key installation instructions] for more details.
@@ -82,10 +81,7 @@ navigate to the "Java > Installed JREs" section. Select the JRE version that you
 use for the application and click [guibutton]#Edit#. In the [guilabel]#Default
 VM arguments#, give the [parameter]#-D# expression as shown above.

 Apache Ant:: If compiling the project with Apache Ant, you could set the key in the Ant
 script as follows:


 Apache Ant:: If compiling the project with Apache Ant, you could set the key in the Ant script as follows:
 +
 [subs="normal"]
 ----
@@ -97,8 +93,6 @@ However, you should never store license keys in a source repository, so if the
 Ant script is stored in a source repository, you should pass the license key to
 Ant as a property that you then use in the script for the value argument of the
 [literal]#++<sysproperty>++# as follows:


 +
 [subs="normal"]
 ----
@@ -109,23 +103,16 @@ Ant as a property that you then use in the script for the value argument of the
 When invoking Ant from the command-line, you can pass the property with a
 [parameter]#-D# parameter to Ant.

 Apache Maven:: If building the project with Apache Maven, you can pass the license key with a
 [literal]#++-D++# parameter to Maven:


 Apache Maven:: If building the project with Apache Maven, you can pass the license key with a [literal]#++-D++# parameter to Maven:
 +
 [subs="normal"]
 ----
 [prompt]#$# [command]#mvn# -D[parameter]#vaadin.[replaceable]+++#+++&lt;product&gt;+++#+++.developer.license#=[replaceable]#L1cen5e-c0de# package
 [prompt]#$# [command]#mvn# -Dvaadin.[replaceable]##&lt;product&gt;##.developer.license=[replaceable]##L1cen5e-c0de## package
 ----
 +
 where the [literal]`<product>` is the product ID, such as `charts`, `spreadsheet`, `designer`, or `testbench`.

 Continuous Integration Systems:: In CIS systems, you can pass the license key to build runners as a system
 property in the build configuration. However, this only passes it to a runner.
 As described above, Ant does not pass it to sub-processes implicitly, so you
 need to forward it explicitly as described earlier.







--- a/documentation/addons/addons-downloading.asciidoc
+++ b/documentation/addons/addons-downloading.asciidoc
@@ -1,6 +1,6 @@
 ---
 title: Downloading Add-ons from Vaadin Directory
 order: 2
 order: 4
 layout: page
 ---

@@ -33,8 +33,7 @@ components, that is, a __widget set__. This is the case for majority of add-ons,
 except for pure server-side, theme, or data binding add-ons. Compiling the
 widget set depends on the build environment. See <<addons.downloading.ant>>, or
 later in this chapter for instructions for compiling the widget set with Eclipse
 and
 Maven.+
 and Maven.
 ////
 See &lt;xref linkend="addons.compiling"/&gt; for
 instructions.
@@ -55,7 +54,3 @@ it by running Ant in the directory.
 If you are using an IDE such as Eclipse, __always__ remember to refresh the
 project to synchronize it with the filesystem after compiling the widget set
 outside the IDE.




--- a/documentation/addons/addons-eclipse.asciidoc
+++ b/documentation/addons/addons-eclipse.asciidoc
@@ -4,13 +4,13 @@ order: 3
 layout: page
 ---

 // This section is excluded from the print edition

 [[addons.eclipse]]
 = Installing Add-ons in Eclipse with Ivy

 The Vaadin Plugin for Eclipse uses Apache Ivy to resolve dependencies. The
 dependencies should be listed in the [filename]#ivy.xml# file in the project
 root. The Vaadin Directory allows dowloading add-ons from a Maven repository,
 which can be accessed also by Ivy.
 If you have a project that uses Apache Ivy to resolve dependencies, they should be listed in the [filename]#ivy.xml# file in the project root.
 Vaadin Directory allows downloading add-ons from a Maven repository, which can also be accessed by Ivy.

 You can also use Ivy to resolve dependencies in an Ant script.

@@ -84,24 +84,14 @@ dependencies correctly.
 +
 IvyIDE immediately resolves the dependencies when you save the file.

 . Compile the add-on widget set
 ////
 , as described in &lt;xref
 linkend="addons.compiling.eclipse"/&gt;.
 ////
 by clicking the [guilabel]#Compile Vaadin widgets# button in the toolbar.

 . Compile the add-on widget set by clicking the [guilabel]#Compile Vaadin Widgetset# button in the toolbar.
 +
 [[figure.addons.eclipse.toolbar]]
 .Compiling Widget Set in Eclipse
 image::img/widgetset-compiling-toolbar-hi.png[]

 image::img/widgetset-compiling-toolbar.png[width=50%, scaledwidth=60%]

 If you experience problems with Ivy, first check all the dependency parameters.
 IvyDE can sometimes cause unexpected problems. You can clear the Ivy dependency
 cache by right-clicking the project and selecting "Ivy > Clean all caches". To
 refresh Ivy configuration, select "Ivy > Refresh". To try resolving again Ivy,
 select "Ivy > Resolve".



--- a/documentation/addons/addons-maven.asciidoc
+++ b/documentation/addons/addons-maven.asciidoc
@@ -1,6 +1,6 @@
 ---
 title: Using Add-ons in a Maven Project
 order: 4
 order: 2
 layout: page
 ---

@@ -9,14 +9,15 @@ layout: page

 ((("Maven", "using add-ons", id="term.addons.maven", range="startofrange")))

 To use add-ons in a Maven project, you simply have to add them as dependencies in the project POM.

 To use add-ons in a Maven project, you simply have to add them as dependencies
 in the project POM. Most add-ons include a widget set, which are compiled to the
 project widget set.
 Most add-ons include client-side widgets, counterparts of the server-side components.
 The add-on widgets will be included and compiled into the _application widget set_.
 Compiling the widget set is handled by the Vaadin Maven Plugin.
 It is enabled in Maven projects created from the Vaadin archetypes, as described in <<DUMMY/../../getting-started/getting-started-overview#getting-started.overview, "Getting Started">>.

 Creating, compiling, and packaging a Vaadin project with Maven was described in
 <<dummy/../../../framework/getting-started/getting-started-maven#getting-started.maven,"Using
 Vaadin with Maven">>.
 The plugin will attempt to automatically detect if you need to compile the application widget set.
 It will generate a [filename]#target/generated-sources/gwt/AppWidgetset.gwt.xml# widget set descriptor, update it when necessary, and use it for compiling the widget set.

 [[addons.maven.dependency]]
 == Adding a Dependency
@@ -26,61 +27,106 @@ Directory.

 . Open the add-on page in Vaadin Directory.

 . Select the version. The latest is shown by default, but you can choose another
 the version from the dropdown menu in the header of the add-on details page.
 . Choose the version on the _left-side menu bar_.
 +
 image::img/directory-version.png[width=60%, scaledwidth=80%]
 +
 The latest version is selected by default, but you can choose another version from the drop-down menu.

 . Click the [guilabel]#Maven/Ivy# to display the Maven dependency declaration, as
 illustrated in Figure <<figure.addons.maven.pombutton>>. If the add-on is
 available with multiple licenses, you will be prompted to select a license for
 the dependency.
 . Click [guilabel]#Install# to display the dependency declarations.
 +
 image::img/directory-install.png[width=50%, scaledwidth=70%]
 +
 If the add-on is available with multiple licenses, you will be prompted to select a license for the dependency.

 . Select the [guilabel]#Maven# tab.
 +
 [[figure.addons.maven.pombutton]]
 .Maven POM Definitions
 image::img/directory-maven-pom.png[]
 image::img/directory-maven-pom.png[width=50%, scaledwidth=70%]

 . Copy the [literal]#++dependency++# declaration to the [filename]#pom.xml# file
 in your project, under the [literal]#++dependencies++# element.
 . Open the [filename]#pom.xml# file.
 In single-module projects, you only have one, located in the root folder of the project.
 In multi-module projects, open the one in your Vaadin application module.

 *Eclipse IDE*:: Right-click on the [filename]#pom.xml# file and select "Open With > XML Editor".
 You can also left-click it, which opens the Maven POM editor, but directly editing the XML code is usually easier.
 You can also use the XML editor tab of the POM editor.

 . Copy and paste the [literal]#dependency# declaration to under the [literal]#++dependencies++# element.
 +
 [subs="normal"]
 [source, xml, subs="normal"]
 ----
  ...
  &lt;dependencies&gt;
  <dependencies>
    ...
    &lt;dependency&gt;
      &lt;groupId&gt;**com.vaadin.addon**&lt;/groupId&gt;
      &lt;artifactId&gt;**vaadin-charts**&lt;/artifactId&gt;
      &lt;version&gt;**1.0.0**&lt;/version&gt;
    &lt;/dependency&gt;
  &lt;/dependencies&gt;
    <dependency>
      <groupId>[replaceable]#com.vaadin.addon#</groupId>
      <artifactId>[replaceable]#vaadin-charts#</artifactId>
      <version>[replaceable]#1.0.0#</version>
    </dependency>
  </dependencies>
 ----
 +
 You can use an exact version number, as is done in the example above, or
 [literal]#++LATEST++# to always use the latest version of the add-on.
 You can use an exact version number, as is done in the example above, or [literal]#++LATEST++# to always use the latest version of the add-on.
 +
 The POM excerpt given in Directory includes also a `repository` definition, but if you have used the Vaadin archetypes to create your project, it already includes the definition.

 . _For commercial add-ons_, you need a license key.
 +
 Click [guilabel]#Activate# to buy a license, obtain a trial license key, or get the key from your Pro Tools subscription.
 +
 image::img/directory-activate.png[width=50%, scaledwidth=70%]
 +
 The POM excerpt given in Directory includes also a repository definition, but if
 you have used the [literal]#++vaadin-archetype-application++# to create your
 project, it already includes the definition.
 For official Vaadin add-ons, see <<addons-cval#addons.cval, "Installing Commercial Vaadin Add-on Licence">> for more information.

 . Compile the widget set as described in the following section.
 . _In Vaadin 7.6 and older_: You need to compile the widget set as described in <<addons.maven.compiling>>.

 [[addons.maven.compiling]]
 == Compiling the Application Widget Set

 [NOTE]
 ====
 The widget set is automatically compiled in Vaadin 7.7 and later.
 The plugin will attempt to detect any add-ons that need the widget set to be compiled.

 [[addons.maven.compiling]]
 == Compiling the Project Widget Set
 Just note that it can take a bit time to compile.

 To speed up, instead of compiling it locally, you can also use a public cloud service to compile it for you, and use it directly from a CDN service.
 See <<addons.maven.modes>> for instructions.
 ====

 In projects that use Vaadin 7.6 or older, you need to manually compile the widget set as follows.

 [[addons.maven.widgetset]]
 === Enabling Widget Set Compilation

 Compiling the widget set in Maven projects requires the Vaadin Maven plugin.
 It is included in Maven projects created with a current Vaadin archetype.

 If all is well, you are set to go.

 If you have used the [literal]#++vaadin-archetype-application++# to create the
 project, the [filename]#pom.xml# includes all necessary declarations to compile
 the widget set. The widget set compilation occurs in standard Maven build phase,
 such as with [parameter]#package# or [parameter]#install# goal.
 If you have used the Vaadin archetypes to create the project, the POM should include all necessary declarations to compile the widget set.

 However, if your Maven project has been created otherwise, you may need to enable widget set compilation manually.
 The simplest way to do that is to copy the definitions from a POM created with the archetype.
 Specifically, you need to copy the `vaadin-maven-plugin` definition in the `plugin` section, as well as the Vaadin dependencies and any relevant settings.

 === Compiling the Widget Set

 The widget set compilation occurs in standard Maven build phase, such as with [parameter]#package# or [parameter]#install# goal.

 *Eclipse IDE*::
 Click the *Compile Vaadin Widgetset* button in the Eclipse toolbar.
 +
 image::img/widgetset-compiling-toolbar.png[width=50%, scaledwidth=60%]

 *Command-line*::
 Simply run the `package` goal.
 +
 [subs="normal"]
 ----
 [prompt]#$# [command]#mvn# [parameter]#package#
 [prompt]#$# [command]#mvn# package
 ----
 +
 Then, just deploy the WAR to your application server.

 [[addons.maven.compiling.recompiling]]
@@ -92,14 +138,22 @@ Running the [literal]#++clean++# goal usually helps, but causes a full
 recompilation. You can compile the widget set manually by running the
 [parameter]#vaadin:compile# goal.

 *Eclipse IDE*::
 Click the *Compile Vaadin Widgetset* button in the Eclipse toolbar.

 *Command-line*::
 Run the `vaadin:compile` goal.
 +
 [subs="normal"]
 ----
 [prompt]#$# [command]#mvn# [parameter]#vaadin:compile#
 [prompt]#$# [command]#mvn# vaadin:compile
 ----
 Note that this does not update the project widget set by searching new widget
 sets from the class path. It must be updated if you add or remove add-ons, for
 example. You can do that by running the [literal]#++vaadin:update-widgetset++#
 goal in the project directory.

 === Updating the Widget Set

 Note that the `vaadin:compile` goal does not update the project widget set by searching new widget sets from the class path.
 It must be updated when you, for example, add or remove add-ons.
 You can do that by running the [literal]#vaadin:update-widgetset# goal in the project directory.

 [subs="normal"]
 ----
@@ -118,53 +172,138 @@ for Maven.
 After running the update, you need to run the [literal]#++vaadin:compile++# goal
 to actually compile the widget set.

 [[addons.maven.modes]]
 == Widget Set Modes

 The application widget set is by default compiled locally.
 You can also have it compiled in a public cloud service provided by Vaadin, and either use it directly from a CDN service or download it to serve it from your development server.

 [[addons.maven.widgetset]]
 == Enabling Widget Set Compilation
 .Widget set modes
 image::img/widgetset-modes.png[width=80%, scaledwidth=100%]

 The widget set mode, defined in the project POM, determines how the widget set is compiled.

 `local` (default)::
 The widget set is compiled locally in your development workstation.

 `cdn`::
 Compilation is done in the public cloud service.
 It is served directly from the CDN (Content Delivery Network) service.
 +
 Using CDN is recommended for development.

 If you are not using a POM created with the proper Vaadin archetype, you may
 need to enable widget set compilation manually. The simplest way to do that is
 to copy the definitions from a POM created with the archetype. Specifically, you
 need to copy the [literal]#++plugin++# definitions. You also need the Vaadin
 dependencies.
 `fetch`::
 Compilation is done in the public cloud service.
 The widget set is then downloaded and deployed with the rest of the application to the application server.

 You need to create an empty widget set definition file, which the widget set
 compilation will populate with widget sets found from the class path. Create a
 [filename]#src/main/java/com/example/AppWidgetSet.gwt.xml# file (in the project
 package) with an empty [literal]#++<module>++# element as follows:
 The mode is set with a `vaadin.widgetset.mode` property in the [elementname]#properties# section at the beginning of the project POM.

 [[addons.maven.modes.local]]
 === Local Widget Set Compilation

 If add-ons are detected, an [filename]#AppWidgetset.gwt.xml# descriptor file is generated into the [filename]#generated-resources# folder, and later updated automatically.
 The compiler uses the descriptor to compile the widget set, which is included in the web application archive.

 .Local widget set compilation
 image::img/widgetset-mode-local.png[width=80%, scaledwidth=60%]

 Local compilation is needed in projects that have custom widgets or widget sets that are not available from the Maven central repository or from the Vaadin add-ons or pre-releases repositories.
 Local compilation is necessary for completely offline work.

 Local compilation is currently the default mode.
 It is therefore not necessary to set it explicitly, unless you have made global Maven settings and want to override them in a particular project.
 You can set the `local` parameter in the [elementname]#properties# section of your [filename]#pom.xml#:

 [source, xml]
 ----
 <module>
 </module>
 <properties>
    ...
    <vaadin.widgetset.mode>local</vaadin.widgetset.mode>
 </properties>
 ...
 ----

 [[addons.maven.widgetset.web]]
 === Enabling the Widget Set in the UI

 If you have previously used the default widget set in the project, you need to
 enable the project widget set in the [filename]#web.xml# deployment descriptor.
 Edit the [filename]#src/main/webapp/WEB-INF/web.xml# file and add or modify the
 [literal]#++widgetset++# parameter for the servlet as follows.
 [[addons.maven.modes.cdn]]
 === Online Widget Set Compilation and CDN

 [subs="normal"]
 The online compilation service makes it easier to use add-on components in Vaadin applications, by avoiding compilation of widget sets locally.
 It caches the widget sets, so often one is available immediately.
 A widget set can combine widgets from multiple add-ons and if a particular combination does not already exist, the service automatically compiles it.

 .Online widget set compilation and CDN
 image::img/widgetset-mode-cdn.png[width=80%, scaledwidth=100%]

 The CDN (Content Delivery Network) is a global network of web servers that serve the cached widget sets directly when you load your application in your browser.
 Avoiding local compilation can speed up development significantly.
 In development teams, all can use the shared widget sets immediately.

 [TIP]
 ====
 While this gives benefits, the application will not work without online connnectivity.
 When you need to avoid the demo effect, either use the `local` or `fetch` mode.
 ====

 The cloud service compiles a widget set with a given Vaadin version and a list of add-ons installed in your project.
 The Maven plug-in receives a public URL where the widget set is available and generates an [filename]#AppWidgetset.java# file that configures your application to use the online version.
 The file is generated to the default Java package.

 [NOTE]
 ====
 Online compilation and CDN can only be used with publicly available add-ons.
 This means that the add-on dependencies must be available in the Maven central repository or in the Vaadin add-ons or pre-releases repositories.
 If you have custom widget implementations or non-public add-ons in your sources, you cannot use the online compilation and CDN service.
 ====

 ==== Enabling Compilation

 To enable online compilation and delivery from the CDN, set the widget set mode to `cdn` in the [elementname]#properties# section of your [filename]#pom.xml#:

 [source, xml]
 ----
 &lt;servlet&gt;
  ...
  &lt;init-param&gt;
    &lt;description&gt;Widget Set to Use&lt;/description&gt;
    &lt;param-name&gt;widgetset&lt;/param-name&gt;
    &lt;param-value&gt;**com.example.AppWidgetSet**&lt;/param-value&gt;
  &lt;/init-param&gt;
 &lt;/servlet&gt;
 <properties>
    ...
    <vaadin.widgetset.mode>cdn</vaadin.widgetset.mode>
 </properties>
 ...
 ----
 The parameter is the class name of the widget set, that is, without the
 [filename]#.gwt.xml# extension and with the Java dot notation for class names
 that include the package name.

 When using the online compilation service, a [interfacename]#WidgetsetInfo# implementation is generated for your project; this makes it possible for your application to find the widget set from the correct location.

 [NOTE]
 ====
 *The CDN is not meant to be used in production.*

 (((range="endofrange", startref="term.addons.maven")))
 It is are meant for speeding up development for yourself and your team.
 It is also useful if you maintain your source code in GitHub or a similar service, so that your globally working development team can immediately use the widget sets without need to compile them.

 For production, especially in intranet applications, you should normally use the `local` or `fetch` modes.
 This ensures that separating the availability of the Vaadin CDN service from availability of the application server does not add an extra point of failure.

 _They can be be used for production_ if your application is intended as globally available, you want to gain the global delivery benefit of the Vaadin CDN, and the availability tradeoff is not significant.
 ====

 === Serving Remotely Compiled Widget Set Locally

 If you want to use online compilation, but still serve the files as part of your application, you can use the `fetch` mode.

 .Fetching online widget set compilation
 image::img/widgetset-mode-fetch.png[width=80%, scaledwidth=100%]

 The Maven plugin downloads the compiled widget set into the project as it was compiled locally.
 It generates an [classname]#AppWidgetset# class and used to provide a correct URL to the locally stored widget set.

 To enable the fetch mode, in the [elementname]#properties# section of your [filename]#pom.xml#:

 [source, xml]
 ----
 <properties>
    ...
    <vaadin.widgetset.mode>fetch</vaadin.widgetset.mode>
 </properties>
 ...
 ----

 // TODO This is recommended during development, as it avoids slow local compilation and typically.

 (((range="endofrange", startref="term.addons.maven")))
--- a/documentation/addons/addons-overview.asciidoc
+++ b/documentation/addons/addons-overview.asciidoc
@@ -13,15 +13,24 @@ link:http://vaadin.com/directory/[Vaadin Directory] provides a rich collection
 of add-ons for Vaadin, and you may find others from independent sources. Add-ons
 are also one way to share your own components between projects.

 Installation of add-ons from Vaadin Directory is simple, just adding an Ivy or
 Maven dependency, or downloading the JAR package and and dropping it in the web
 library folder of the project. Most add-ons include a widget set, which you need
 to compile, but it's usually just a click of a button or a single command.
 == Installing

 After trying out an add-on, you can give some feedback to the author of the
 add-on by rating the add-on with one to five stars and optionally leaving a
 comment. Most add-ons also have a discussion forum thread for user feedback and
 questions.
 Installing add-ons from Vaadin Directory is simple, just adding a Maven or an Ivy dependency, or downloading the JAR package and and dropping it in the web library folder of the project.

 [[figure.addons.maven.widgetset]]
 .Role of the widget set
 image::img/addon-architecture.png[width=75%, scaledwidth=80%]

 Most add-ons include _widgets_, client-side counterparts of the server-side components used in the Vaadin Java API, as illustrated in <<figure.addons.maven.widgetset>>.
 The _widget set_ needs to be compiled into the application widget set.

 Adding the dependency in Maven projects and compiling the widget set is described in <<addons-maven#addons.maven, "Using Add-ons in a Maven Project">>.
 The section also describes how to use the online compilation and CDN services during development.

 For Eclipse projects that use Ivy for dependency management, see <<addons-eclipse#addons.eclipse, "Installing Add-ons in Eclipse with Ivy">>.
 You can also download and install add-ons from a ZIP-package, as described in <<addons-downloading#addons.downloading, "Downloading Add-ons from Vaadin Directory">>.

 == Add-on Licenses

 Add-ons available from Vaadin Directory are distributed under different
 licenses, of which some are commercial. While the add-ons can be downloaded
@@ -30,8 +39,11 @@ offered under a dual licensing agreement so that they can be used in open source
 projects for free, and many have a trial period for closed-source development.
 Commercial Vaadin add-ons distributed under the CVAL license require installing
 a license key as instructed in
 <<dummy/../../../framework/addons/addons-cval#addons.cval,"Installing Commercial
 Vaadin Add-on Licence">>.

 <<dummy/../../../framework/addons/addons-cval#addons.cval, "Installing Commercial Vaadin Add-on Licence">>.

 == Feedback and Support

 After trying out an add-on, you can give some feedback to the author of the
 add-on by rating the add-on with one to five stars and optionally leaving a
 comment. Most add-ons also have a discussion forum thread for user feedback and
 questions.
--- a/documentation/addons/chapter-addons.asciidoc
+++ b/documentation/addons/chapter-addons.asciidoc
@@ -5,15 +5,16 @@ This chapter describes the installation of add-on components, themes,
 containers, and other tools from the Vaadin Directory and the use of commercial
 add-ons offered by Vaadin.


 include::addons-overview.asciidoc[leveloffset=+2]

 include::addons-downloading.asciidoc[leveloffset=+2]

 include::addons-eclipse.asciidoc[leveloffset=+2]

 include::addons-maven.asciidoc[leveloffset=+2]

 include::addons-cval.asciidoc[leveloffset=+2]

 // Outdated for the print edition
 // include::addons-eclipse.asciidoc[leveloffset=+2]

 // Irrelevant for the print edition
 // include::addons-downloading.asciidoc[leveloffset=+2]

 include::addons-troubleshooting.asciidoc[leveloffset=+2]
--- a/documentation/addons/img/addon-architecture.png
+++ b/documentation/addons/img/addon-architecture.png
--- a/documentation/addons/img/directory-activate.png
+++ b/documentation/addons/img/directory-activate.png
--- a/documentation/addons/img/directory-install.png
+++ b/documentation/addons/img/directory-install.png
--- a/documentation/addons/img/directory-maven-pom.png
+++ b/documentation/addons/img/directory-maven-pom.png
--- a/documentation/addons/img/directory-version.png
+++ b/documentation/addons/img/directory-version.png
--- a/documentation/addons/img/online-compilation-cdn.png
+++ b/documentation/addons/img/online-compilation-cdn.png
--- a/documentation/addons/img/widgetset-compiling-toolbar-hi.png
+++ b/documentation/addons/img/widgetset-compiling-toolbar-hi.png
--- a/documentation/addons/img/widgetset-compiling-toolbar-lo.png
+++ b/documentation/addons/img/widgetset-compiling-toolbar-lo.png
--- a/documentation/addons/img/widgetset-compiling-toolbar.png
+++ b/documentation/addons/img/widgetset-compiling-toolbar.png
--- a/documentation/addons/img/widgetset-mode-cdn.png
+++ b/documentation/addons/img/widgetset-mode-cdn.png
--- a/documentation/addons/img/widgetset-mode-fetch.png
+++ b/documentation/addons/img/widgetset-mode-fetch.png
--- a/documentation/addons/img/widgetset-mode-local.png
+++ b/documentation/addons/img/widgetset-mode-local.png
--- a/documentation/addons/img/widgetset-modes.png
+++ b/documentation/addons/img/widgetset-modes.png
--- a/documentation/addons/original-drawings/Makefile
+++ b/documentation/addons/original-drawings/Makefile
@@ -0,0 +1,13 @@
 IMAGES = widgetset-modes widgetset-mode-cdn widgetset-mode-local \
 widgetset-mode-fetch addon-architecture

 SRCIMAGES := $(foreach file, $(IMAGES), $(file).svg)
 TRGIMAGES := $(foreach file, $(IMAGES), ../img/$(file).png)

 images: $(TRGIMAGES) FORCE
 # Just do low now $(TRGIMAGES_LO)

 $(TRGIMAGES): ../img/%.png: %.svg
 	inkscape --export-png $@ --export-dpi=300 --export-area-page $<

 FORCE:
--- a/documentation/addons/original-drawings/addon-architecture.svg
+++ b/documentation/addons/original-drawings/addon-architecture.svg
@@ -0,0 +1,513 @@
 <?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="260"
   height="130"
   id="svg1901"
   sodipodi:version="0.32"
   inkscape:version="0.91 r"
   sodipodi:docname="addon-architecture.svg"
   inkscape:output_extension="org.inkscape.output.svg.inkscape"
   inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/original-drawings/intro/architecture.png"
   inkscape:export-xdpi="300"
   inkscape:export-ydpi="300"
   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
           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;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1"
           inkscape:connector-curvature="0" />
        <path
           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;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
           inkscape:connector-curvature="0" />
      </g>
    </marker>
    <inkscape:perspective
       sodipodi:type="inkscape:persp3d"
       inkscape:vp_x="0 : 526.18109 : 1"
       inkscape:vp_y="0 : 1000 : 0"
       inkscape:vp_z="744.09448 : 526.18109 : 1"
       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
       id="perspective110" />
    <marker
       inkscape:stockid="TriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="TriangleOutL"
       style="overflow:visible">
      <path
         id="path3520"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;marker-start:none"
         transform="scale(0.8,0.8)"
         inkscape:connector-curvature="0" />
    </marker>
    <linearGradient
       id="linearGradient3503">
      <stop
         style="stop-color:#37ff40;stop-opacity:0.53608245;"
         offset="0"
         id="stop3505" />
      <stop
         style="stop-color:#ffe0e0;stop-opacity:1;"
         offset="1"
         id="stop3507" />
    </linearGradient>
    <marker
       inkscape:stockid="Arrow2Lstart"
       orient="auto"
       refY="0"
       refX="0"
       id="Arrow2Lstart"
       style="overflow:visible">
      <path
         id="path6743"
         style="font-size:12px;fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round"
         d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
         transform="matrix(1.1,0,0,1.1,1.1,0)"
         inkscape:connector-curvature="0" />
    </marker>
    <linearGradient
       id="linearGradient19816">
      <stop
         id="stop19818"
         offset="0"
         style="stop-color:#ffffff;stop-opacity:1;" />
      <stop
         id="stop19820"
         offset="1"
         style="stop-color:#e7e790;stop-opacity:1;" />
    </linearGradient>
    <linearGradient
       id="linearGradient11516">
      <stop
         id="stop11518"
         offset="0"
         style="stop-color:#ffffff;stop-opacity:1" />
      <stop
         id="stop11520"
         offset="1"
         style="stop-color:#a090e7;stop-opacity:1" />
    </linearGradient>
    <linearGradient
       id="linearGradient11508">
      <stop
         id="stop11510"
         offset="0"
         style="stop-color:#ffffff;stop-opacity:1;" />
      <stop
         id="stop11512"
         offset="1"
         style="stop-color:#e27979;stop-opacity:1" />
    </linearGradient>
    <linearGradient
       id="linearGradient3286">
      <stop
         style="stop-color:#ffffff;stop-opacity:1;"
         offset="0"
         id="stop3288" />
      <stop
         style="stop-color:#79e291;stop-opacity:1;"
         offset="1"
         id="stop3290" />
    </linearGradient>
    <marker
       inkscape:stockid="Arrow2Lend"
       orient="auto"
       refY="0"
       refX="0"
       id="Arrow2Lend"
       style="overflow:visible">
      <path
         id="path16811"
         style="font-size:12px;fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round"
         d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
         transform="matrix(-1.1,0,0,-1.1,-1.1,0)"
         inkscape:connector-curvature="0" />
    </marker>
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="1"
     inkscape:pageshadow="2"
     inkscape:zoom="2.8"
     inkscape:cx="164.39568"
     inkscape:cy="59.7456"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     gridtolerance="10000"
     inkscape:window-width="1672"
     inkscape:window-height="1019"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:showpageshadow="false"
     borderlayer="false"
     showgrid="true"
     inkscape:window-maximized="0"
     showguides="true"
     inkscape:guide-bbox="true"
     inkscape:snap-bbox="true"
     inkscape:object-nodes="true"
     inkscape:object-paths="true"
     units="pt">
    <inkscape:grid
       type="xygrid"
       id="grid6362"
       visible="true"
       enabled="true"
       empspacing="5"
       snapvisiblegridlinesonly="true"
       spacingx="1px" />
    <sodipodi:guide
       orientation="0,1"
       position="-50,130"
       id="guide3154" />
  </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></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Taso 1"
     inkscape:groupmode="layer"
     id="layer1"
     style="opacity:1"
     transform="translate(0,-922.36211)">
    <rect
       style="display:inline;overflow:visible;visibility:visible;fill:#666666;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-opacity:1;marker:none;enable-background:accumulate"
       id="rect6815"
       width="85"
       height="119.99995"
       x="110"
       y="927.36212"
       ry="3.7880721" />
    <rect
       style="display:inline;overflow:visible;visibility:visible;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;enable-background:accumulate"
       id="rect3810"
       width="75"
       height="119.99995"
       x="30"
       y="927.36212"
       ry="3.7880721" />
    <rect
       style="display:inline;overflow:visible;visibility:visible;fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;enable-background:accumulate"
       id="rect6791"
       width="55"
       height="119.99995"
       x="200"
       y="927.36212"
       ry="3.7880721" />
    <flowRoot
       transform="translate(317.36739,662.01687)"
       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none"
       id="flowRoot9963-2-3-6"
       xml:space="preserve"><flowRegion
         id="flowRegion9965-2-7-7"><rect
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1"
           y="271.51425"
           x="-113.13708"
           height="51.315746"
           width="68.012077"
           id="rect9967-3-5-6" /></flowRegion><flowPara
         id="flowPara10992">UI Logic</flowPara></flowRoot>    <g
       id="g6827-8"
       transform="matrix(0.06329721,0,0,0.06329721,199.30626,995.21824)">
      <g
         transform="matrix(29.999985,-0.03019888,0.03019888,29.999985,-11004.945,-15375.022)"
         id="g6829-7">
        <g
           id="g6831-7"
           transform="matrix(0.71644053,0,0,0.71644053,103.9698,144.62879)"
           style="fill:#ffffff;fill-opacity:1">
          <path
             id="path6833-7"
             d="M 142.5625,-6.4375 40.6875,-6.34375 C 29.868538,-6.48507 19.811533,-0.790227 14.367338,8.560208 8.9231424,17.910644 8.9351814,29.468085 14.398845,38.807157 19.862509,48.14623 29.931356,53.820109 40.75,53.65625 L 142.625,53.5625 c 10.81896,0.14132 20.87597,-5.553523 26.32016,-14.903958 5.4442,-9.350436 5.43216,-20.907877 -0.0315,-30.246949 C 163.44999,-0.92748 153.38114,-6.601359 142.5625,-6.4375 l 0,0 z"
             style="display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
             transform="matrix(0.03333332,3.3554312e-5,-3.3554312e-5,0.03333332,366.53421,512.86995)"
             inkscape:connector-curvature="0" />
          <path
             sodipodi:nodetypes="cccscccsssssssscccsccc"
             id="path6835-3"
             d="m 366.65701,514.67289 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:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
             inkscape:connector-curvature="0" />
        </g>
      </g>
    </g>
    <rect
       style="display:inline;overflow:visible;visibility:visible;opacity:1;fill:#a0a0a0;fill-opacity:0.75384617;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;enable-background:accumulate"
       id="rect4680-4-4-7-0"
       width="175"
       height="35.000011"
       x="5"
       y="977.36212"
       ry="3.7880721" />
    <flowRoot
       transform="translate(227.87246,661.85916)"
       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8.75px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none"
       id="flowRoot9963-2-3"
       xml:space="preserve"><flowRegion
         id="flowRegion9965-2-7"><rect
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8.75px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1"
           y="271.51425"
           x="-113.13708"
           height="37.315746"
           width="95.012077"
           id="rect9967-3-5" /></flowRegion><flowPara
         id="flowPara4438">Server-side API</flowPara></flowRoot>    <rect
       ry="3.7880721"
       y="942.36218"
       x="120"
       height="95.000008"
       width="70"
       id="rect4680-4-4-7-0-9"
       style="display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;enable-background:accumulate" />
    <g
       transform="translate(93.189487,766.92955)"
       id="g28403-3-5-6-2">
      <rect
         style="display:inline;overflow:visible;visibility:visible;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none;enable-background:accumulate"
         id="rect4680-7-10-5-0"
         width="60"
         height="25"
         x="21.810513"
         y="180.43254"
         ry="3.7880721" />
      <flowRoot
         xml:space="preserve"
         id="flowRoot11361-6-1-8-1-4"
         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1"
         transform="translate(-787.43047,-878.23713)"
         inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/img/intro/toolchain.png"
         inkscape:export-xdpi="90"
         inkscape:export-ydpi="90"><flowRegion
           id="flowRegion11363-2-0-7-7-9"><rect
             id="rect11365-5-4-6-4-2"
             width="138.69197"
             height="47.876488"
             x="813.87988"
             y="1064.3831"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1" /></flowRegion><flowPara
           id="flowPara4198-9-0">Built-in</flowPara><flowPara
           id="flowPara4300-0">Components</flowPara></flowRoot>    </g>
    <g
       transform="translate(93.189487,801.92955)"
       id="g28403-3-5-6-6-7">
      <rect
         style="display:inline;overflow:visible;visibility:visible;fill:#4fb047;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none;enable-background:accumulate"
         id="rect4680-7-10-5-5-8"
         width="60"
         height="25"
         x="21.810513"
         y="180.43254"
         ry="3.7880721" />
      <flowRoot
         xml:space="preserve"
         id="flowRoot11361-6-1-8-1-1-6"
         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1"
         transform="translate(-787.52461,-878.4214)"
         inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/img/intro/toolchain.png"
         inkscape:export-xdpi="90"
         inkscape:export-ydpi="90"><flowRegion
           id="flowRegion11363-2-0-7-7-5-3"><rect
             id="rect11365-5-4-6-4-5-9"
             width="138.69197"
             height="47.876488"
             x="813.87988"
             y="1064.3831"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1" /></flowRegion><flowPara
           id="flowPara4198-9-9-4">Add-on</flowPara><flowPara
           id="flowPara4338-2">Components</flowPara></flowRoot>    </g>
    <g
       transform="translate(93.189487,836.92955)"
       id="g28403-3-5-6-6-6-5">
      <rect
         style="display:inline;overflow:visible;visibility:visible;fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:1.5, 1.5;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         id="rect4680-7-10-5-5-9-2"
         width="60"
         height="25"
         x="21.810513"
         y="180.43254"
         ry="3.7880721" />
      <flowRoot
         xml:space="preserve"
         id="flowRoot11361-6-1-8-1-1-4-4"
         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1"
         transform="translate(-787.52461,-878.4214)"
         inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/img/intro/toolchain.png"
         inkscape:export-xdpi="90"
         inkscape:export-ydpi="90"><flowRegion
           id="flowRegion11363-2-0-7-7-5-8-5"><rect
             id="rect11365-5-4-6-4-5-7-3"
             width="138.69197"
             height="47.876488"
             x="813.87988"
             y="1064.3831"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1" /></flowRegion><flowPara
           id="flowPara4198-9-9-0-2">Custom</flowPara><flowPara
           id="flowPara4338-0-3">Components</flowPara></flowRoot>    </g>
    <g
       transform="matrix(-1.8989154,-0.0019115,-0.0019115,1.8989154,892.26083,22.007358)"
       id="g6829-2-5">
      <g
         id="g6831-2-7"
         transform="matrix(0.71644053,0,0,0.71644053,103.9698,144.62879)"
         style="fill:#ffffff;fill-opacity:1">
        <path
           id="path6833-1-5"
           d="M 142.5625,-6.4375 40.6875,-6.34375 C 29.868538,-6.48507 19.811533,-0.790227 14.367338,8.560208 8.9231424,17.910644 8.9351814,29.468085 14.398845,38.807157 19.862509,48.14623 29.931356,53.820109 40.75,53.65625 L 142.625,53.5625 c 10.81896,0.14132 20.87597,-5.553523 26.32016,-14.903958 5.4442,-9.350436 5.43216,-20.907877 -0.0315,-30.246949 C 163.44999,-0.92748 153.38114,-6.601359 142.5625,-6.4375 l 0,0 z"
           style="display:inline;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
           transform="matrix(0.03333332,3.3554312e-5,-3.3554312e-5,0.03333332,366.53421,512.86995)"
           inkscape:connector-curvature="0" />
        <path
           sodipodi:nodetypes="cccscccsssssssscccsccc"
           id="path6835-0-9"
           d="m 366.65701,514.67289 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:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
           inkscape:connector-curvature="0" />
      </g>
    </g>
    <g
       transform="translate(28.189484,766.92954)"
       id="g28403-3-5-6">
      <rect
         style="display:inline;overflow:visible;visibility:visible;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none;enable-background:accumulate"
         id="rect4680-7-10-5"
         width="50"
         height="25"
         x="21.810513"
         y="180.43254"
         ry="3.7880721" />
      <flowRoot
         xml:space="preserve"
         id="flowRoot11361-6-1-8-1"
         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1"
         transform="translate(-787.43047,-878.23713)"
         inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/img/intro/toolchain.png"
         inkscape:export-xdpi="90"
         inkscape:export-ydpi="90"><flowRegion
           id="flowRegion11363-2-0-7-7"><rect
             id="rect11365-5-4-6-4"
             width="138.69197"
             height="47.876488"
             x="813.87988"
             y="1064.3831"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1" /></flowRegion><flowPara
           id="flowPara4198-9">Built-in</flowPara><flowPara
           id="flowPara4300">Widgets</flowPara></flowRoot>    </g>
    <g
       transform="translate(29.189484,836.92954)"
       id="g28403-3-5-6-6-6">
      <rect
         style="display:inline;overflow:visible;visibility:visible;fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:1.5, 1.5;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         id="rect4680-7-10-5-5-9"
         width="49"
         height="24"
         x="21.810513"
         y="180.43254"
         ry="3.7880721" />
      <flowRoot
         xml:space="preserve"
         id="flowRoot11361-6-1-8-1-1-4"
         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1"
         transform="translate(-787.52461,-878.4214)"
         inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/img/intro/toolchain.png"
         inkscape:export-xdpi="90"
         inkscape:export-ydpi="90"><flowRegion
           id="flowRegion11363-2-0-7-7-5-8"><rect
             id="rect11365-5-4-6-4-5-7"
             width="138.69197"
             height="47.876488"
             x="813.87988"
             y="1064.3831"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1" /></flowRegion><flowPara
           id="flowPara4198-9-9-0">Custom</flowPara><flowPara
           id="flowPara4338-0">Widgets</flowPara></flowRoot>    </g>
    <flowRoot
       transform="translate(148.55364,661.85916)"
       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8.75px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none"
       id="flowRoot9963-2-3-6-8-6-1"
       xml:space="preserve"><flowRegion
         id="flowRegion9965-2-7-7-1-9-6"><rect
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8.75px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1"
           y="271.51425"
           x="-113.13708"
           height="53.315746"
           width="70.012077"
           id="rect9967-3-5-6-4-7-9" /></flowRegion><flowPara
         id="flowPara11082-4">Widget Set</flowPara></flowRoot>    <g
       transform="translate(28.189487,801.92955)"
       id="g28403-3-5-6-6">
      <rect
         style="display:inline;overflow:visible;visibility:visible;fill:#4fb047;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.5;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker:none;enable-background:accumulate"
         id="rect4680-7-10-5-5"
         width="49"
         height="24"
         x="21.810513"
         y="180.43254"
         ry="3.7880721" />
      <flowRoot
         xml:space="preserve"
         id="flowRoot11361-6-1-8-1-1"
         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1"
         transform="translate(-787.52461,-878.4214)"
         inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/img/intro/toolchain.png"
         inkscape:export-xdpi="90"
         inkscape:export-ydpi="90"><flowRegion
           id="flowRegion11363-2-0-7-7-5"><rect
             id="rect11365-5-4-6-4-5"
             width="138.69197"
             height="47.876488"
             x="813.87988"
             y="1064.3831"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1" /></flowRegion><flowPara
           id="flowPara4198-9-9">Add-on</flowPara><flowPara
           id="flowPara4338">Widgets</flowPara></flowRoot>    </g>
    <flowRoot
       transform="translate(123.27856,712.26946)"
       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8.75px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;opacity:1;fill:#000000;fill-opacity:1;stroke:none"
       id="flowRoot9963-2-3-1"
       xml:space="preserve"><flowRegion
         id="flowRegion9965-2-7-8"><rect
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8.75px;line-height:100%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1"
           y="271.51425"
           x="-113.13708"
           height="37.315746"
           width="95.012077"
           id="rect9967-3-5-9" /></flowRegion><flowPara
         id="flowPara10160-3">Add-on</flowPara></flowRoot>  </g>
 </svg>
--- a/documentation/addons/original-drawings/widgetset-compiling-toolbar.svg
+++ b/documentation/addons/original-drawings/widgetset-compiling-toolbar.svg
@@ -1,176 +0,0 @@
 <?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="210mm"
   height="297mm"
   id="svg1901"
   sodipodi:version="0.32"
   inkscape:version="0.46"
   sodipodi:docname="widgetset-compiling-toolbar.svg"
   sodipodi:docbase="/home/tsoots/ohj/translations/po"
   inkscape:output_extension="org.inkscape.output.svg.inkscape">
  <defs
     id="defs1903">
    <inkscape:perspective
       sodipodi:type="inkscape:persp3d"
       inkscape:vp_x="0 : 526.18109 : 1"
       inkscape:vp_y="0 : 1000 : 0"
       inkscape:vp_z="744.09448 : 526.18109 : 1"
       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
       id="perspective7" />
    <inkscape:perspective
       id="perspective2499"
       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
       inkscape:vp_z="744.09448 : 526.18109 : 1"
       inkscape:vp_y="0 : 1000 : 0"
       inkscape:vp_x="0 : 526.18109 : 1"
       sodipodi:type="inkscape:persp3d" />
    <linearGradient
       y2="471.38400"
       y1="45.132561"
       xlink:href="#linearGradient7601"
       x2="1370.5586"
       x1="-526.86133"
       spreadMethod="reflect"
       inkscape:collect="always"
       id="linearGradient10877"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(8.892150e-2,0.000000,0.000000,0.155616,635.7169,9.380527)" />
    <linearGradient
       y2="471.38400"
       y1="45.132561"
       xlink:href="#linearGradient7601"
       x2="1370.5586"
       x1="-526.86133"
       spreadMethod="reflect"
       inkscape:collect="always"
       id="linearGradient10869"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(0.323979,0.000000,0.000000,0.566975,399.6324,14.15086)" />
    <linearGradient
       y2="471.38400"
       y1="45.132561"
       xlink:href="#linearGradient7601"
       x2="1370.5586"
       x1="-526.86133"
       spreadMethod="reflect"
       inkscape:collect="always"
       id="linearGradient7607"
       gradientUnits="userSpaceOnUse"
       gradientTransform="matrix(0.755921,0,0,1.32289,-36,0)" />
    <linearGradient
       inkscape:collect="always"
       id="linearGradient7601">
      <stop
         style="stop-color:#000000;stop-opacity:1;"
         offset="0"
         id="stop7603" />
      <stop
         style="stop-color:#000000;stop-opacity:0;"
         offset="1"
         id="stop7605" />
    </linearGradient>
    <inkscape:perspective
       id="perspective13602"
       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
       inkscape:vp_z="744.09448 : 526.18109 : 1"
       inkscape:vp_y="0 : 1000 : 0"
       inkscape:vp_x="0 : 526.18109 : 1"
       sodipodi:type="inkscape:persp3d" />
    <inkscape:perspective
       id="perspective2529"
       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
       inkscape:vp_z="744.09448 : 526.18109 : 1"
       inkscape:vp_y="0 : 1000 : 0"
       inkscape:vp_x="0 : 526.18109 : 1"
       sodipodi:type="inkscape:persp3d" />
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="2.8"
     inkscape:cx="295.42901"
     inkscape:cy="873.26277"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     gridtolerance="10000"
     inkscape:window-width="1333"
     inkscape:window-height="739"
     inkscape:window-x="1493"
     inkscape:window-y="131"
     showgrid="false" />
  <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" />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Taso 1"
     inkscape:groupmode="layer"
     id="layer1"
     style="opacity:1">
    <image
       y="116.93364"
       x="125.21431"
       id="image2501"
       height="48"
       width="281"
       sodipodi:absref="/home/magi/itmill/book-7/manual/img/addons/widgetset-compiling-toolbar.png"
       xlink:href="/home/magi/itmill/book-7/manual/img/addons/widgetset-compiling-toolbar.png" />
    <rect
       style="opacity:1;fill:#eeeff2;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.0999999;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:1.29999998;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
       id="rect2535"
       width="24.496172"
       height="16.667501"
       x="204.80843"
       y="122.51678" />
    <image
       y="122.34544"
       x="208.74406"
       id="image2531"
       height="17.262691"
       width="17.262691"
       sodipodi:absref="//home/magi/itmill/book-7/manual/img/addons/compile-widgetset-16.png"
       xlink:href="/home/magi/itmill/book-7/manual/img/addons/compile-widgetset-16.png"
       style="fill:#eeeff2;fill-opacity:1" />
    <g
       style="display:inline"
       inkscape:label="Layer 1"
       id="g13611"
       transform="matrix(2.4577007e-2,0,0,2.4577007e-2,218.45402,137.72183)">
      <g
         id="g1317">
        <path
           style="fill:url(#linearGradient7607);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;display:inline"
           id="path6080"
           d="M 70.29035,24.82601 L 70.29035,627.16976 L 105.72785,627.16976 L 105.72785,591.73226 L 141.16535,591.73226 L 141.16535,556.32601 L 176.5716,556.32601 L 176.5716,520.88851 L 212.0091,520.88851 L 247.4466,520.88851 L 247.4466,591.73226 L 282.8841,591.73226 L 282.8841,662.60726 L 318.3216,662.60726 L 318.3216,733.48226 L 353.7591,733.48226 L 353.7591,768.91976 L 424.60285,768.91976 L 424.60285,733.48226 L 460.04035,733.48226 L 460.04035,662.60726 L 424.60285,662.60726 L 424.60285,591.73226 L 389.1966,591.73226 L 389.1966,520.88851 L 353.7591,520.88851 L 353.7591,450.01351 L 495.47785,450.01351 L 495.47785,414.57601 L 460.04035,414.57601 L 460.04035,379.13851 L 424.60285,379.13851 L 424.60285,343.70101 L 389.1966,343.70101 L 389.1966,308.29476 L 353.7591,308.29476 L 353.7591,272.85726 L 318.3216,272.85726 L 318.3216,237.41976 L 282.8841,237.41976 L 282.8841,201.98226 L 247.4466,201.98226 L 247.4466,166.54476 L 212.0091,166.54476 L 212.0091,131.10726 L 176.5716,131.10726 L 176.5716,95.669761 L 141.16535,95.669761 L 141.16535,60.26351 L 105.72785,60.26351 L 105.72785,24.82601 L 70.29035,24.82601 z" />
        <path
           style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
           id="rect1430"
           d="M 35.4375,24.8125 L 35.4375,627.15625 L 70.875,627.15625 L 70.875,591.71875 L 106.3125,591.71875 L 106.3125,556.3125 L 70.875,556.3125 L 70.875,95.65625 L 106.3125,95.65625 L 106.3125,60.25 L 70.875,60.25 L 70.875,24.8125 L 35.4375,24.8125 z M 106.3125,95.65625 L 106.3125,131.09375 L 141.71875,131.09375 L 141.71875,95.65625 L 106.3125,95.65625 z M 141.71875,131.09375 L 141.71875,166.53125 L 177.15625,166.53125 L 177.15625,131.09375 L 141.71875,131.09375 z M 177.15625,166.53125 L 177.15625,201.96875 L 212.59375,201.96875 L 212.59375,166.53125 L 177.15625,166.53125 z M 212.59375,201.96875 L 212.59375,237.40625 L 248.03125,237.40625 L 248.03125,201.96875 L 212.59375,201.96875 z M 248.03125,237.40625 L 248.03125,272.84375 L 283.46875,272.84375 L 283.46875,237.40625 L 248.03125,237.40625 z M 283.46875,272.84375 L 283.46875,308.28125 L 318.90625,308.28125 L 318.90625,272.84375 L 283.46875,272.84375 z M 318.90625,308.28125 L 318.90625,343.6875 L 354.34375,343.6875 L 354.34375,308.28125 L 318.90625,308.28125 z M 354.34375,343.6875 L 354.34375,379.125 L 389.75,379.125 L 389.75,343.6875 L 354.34375,343.6875 z M 389.75,379.125 L 389.75,414.5625 L 283.46875,414.5625 L 283.46875,450 L 283.46875,520.875 L 318.90625,520.875 L 318.90625,450 L 460.625,450 L 460.625,414.5625 L 425.1875,414.5625 L 425.1875,379.125 L 389.75,379.125 z M 318.90625,520.875 L 318.90625,591.71875 L 354.34375,591.71875 L 354.34375,520.875 L 318.90625,520.875 z M 354.34375,591.71875 L 354.34375,662.59375 L 389.75,662.59375 L 389.75,591.71875 L 354.34375,591.71875 z M 389.75,662.59375 L 389.75,733.46875 L 425.1875,733.46875 L 425.1875,662.59375 L 389.75,662.59375 z M 389.75,733.46875 L 318.90625,733.46875 L 318.90625,768.90625 L 389.75,768.90625 L 389.75,733.46875 z M 318.90625,733.46875 L 318.90625,662.59375 L 283.46875,662.59375 L 283.46875,733.46875 L 318.90625,733.46875 z M 283.46875,662.59375 L 283.46875,591.71875 L 248.03125,591.71875 L 248.03125,662.59375 L 283.46875,662.59375 z M 248.03125,591.71875 L 248.03125,520.875 L 212.59375,520.875 L 212.59375,591.71875 L 248.03125,591.71875 z M 212.59375,520.875 L 212.59375,450 L 177.15625,450 L 177.15625,485.4375 L 141.71875,485.4375 L 141.71875,520.875 L 177.15625,520.875 L 212.59375,520.875 z M 141.71875,520.875 L 106.3125,520.875 L 106.3125,556.3125 L 141.71875,556.3125 L 141.71875,520.875 z" />
        <path
           style="fill:#ffffff;fill-opacity:1;stroke:none"
           id="rect3779"
           d="M 70.875,95.65625 L 70.875,556.3125 L 106.3125,556.3125 L 106.3125,520.875 L 141.71875,520.875 L 141.71875,485.4375 L 177.15625,485.4375 L 177.15625,450 L 212.59375,450 L 212.59375,520.875 L 248.03125,520.875 L 248.03125,591.71875 L 283.46875,591.71875 L 283.46875,662.59375 L 318.90625,662.59375 L 318.90625,733.46875 L 354.34375,733.46875 L 389.75,733.46875 L 389.75,662.59375 L 354.34375,662.59375 L 354.34375,591.71875 L 318.90625,591.71875 L 318.90625,520.875 L 283.46875,520.875 L 283.46875,414.5625 L 318.90625,414.5625 L 354.34375,414.5625 L 389.75,414.5625 L 389.75,379.125 L 354.34375,379.125 L 354.34375,343.6875 L 318.90625,343.6875 L 318.90625,308.28125 L 283.46875,308.28125 L 283.46875,272.84375 L 248.03125,272.84375 L 248.03125,237.40625 L 212.59375,237.40625 L 212.59375,201.96875 L 177.15625,201.96875 L 177.15625,166.53125 L 141.71875,166.53125 L 141.71875,131.09375 L 106.3125,131.09375 L 106.3125,95.65625 L 70.875,95.65625 z" />
      </g>
    </g>
  </g>
 </svg>
--- a/documentation/addons/original-drawings/widgetset-mode-cdn.svg
+++ b/documentation/addons/original-drawings/widgetset-mode-cdn.svg
@@ -0,0 +1,434 @@
 <?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="82mm"
   height="38mm"
   id="svg1901"
   sodipodi:version="0.32"
   inkscape:version="0.91 r"
   sodipodi:docname="widgetset-mode-cdn.svg"
   version="1.1">
  <defs
     id="defs1903">
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         id="path4560"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)"
         inkscape:connector-curvature="0" />
    </marker>
    <font
       horiz-adv-x="1024"
       id="font3118"
       inkscape:label="fontti 1"
       horiz-origin-x="0"
       horiz-origin-y="0"
       vert-origin-x="45"
       vert-origin-y="90"
       vert-adv-y="90">
      <font-face
         units-per-em="1024"
         id="font-face3120"
         font-family="SVGFont 1" />
      <missing-glyph
         d="M0,0h1000v1024h-1000z"
         id="missing-glyph3122" />
    </font>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8-8"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2-6"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8-8-6"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2-6-1"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8-9"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2-5"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8-8-9"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2-6-0"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8-8-0"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2-6-03"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8-8-0-1"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2-6-03-0"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="3.959798"
     inkscape:cx="151.15665"
     inkscape:cy="80.517444"
     inkscape:document-units="mm"
     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"
     fit-margin-top="5"
     fit-margin-left="5"
     fit-margin-right="5"
     fit-margin-bottom="5"
     units="mm">
    <inkscape:grid
       type="xygrid"
       id="grid2982"
       empspacing="5"
       visible="true"
       enabled="true"
       snapvisiblegridlinesonly="true"
       spacingx="5px"
       spacingy="5px"
       originx="-124.5px"
       originy="-294.50073px" />
    <sodipodi:guide
       orientation="1,0"
       position="102.82143,174.42784"
       id="guide3116" />
    <sodipodi:guide
       orientation="1,0"
       position="203.53571,173.53498"
       id="guide3120" />
  </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(-124.5,-623.21581)">
    <g
       transform="translate(99.811386,-32.853903)"
       id="g3868">
      <rect
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         id="rect3806"
         width="110"
         height="124.99994"
         x="30.188614"
         y="660.21613"
         ry="3.0304618"
         rx="3.0304618" />
      <flowRoot
         xml:space="preserve"
         id="flowRoot3808"
         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
         transform="translate(17.799604,303.91022)"><flowRegion
           id="flowRegion3810"><rect
             id="rect3812"
             width="85.278"
             height="32.083519"
             x="16.541248"
             y="363.14072"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
           id="flowPara3820"
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start">Development workstation</flowPara></flowRoot>      <g
         transform="translate(5.0000001,17.499998)"
         id="g3868-81-40">
        <rect
           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
           id="rect3806-2-3"
           width="85"
           height="19.999989"
           x="30.188614"
           y="672.71613"
           ry="3.0304618"
           rx="3.0304618" />
        <flowRoot
           xml:space="preserve"
           id="flowRoot3808-6-2"
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
           transform="translate(18.467279,316.68226)"><flowRegion
             id="flowRegion3810-0-2"><rect
               id="rect3812-4-3"
               width="85.278"
               height="32.083519"
               x="16.541248"
               y="363.14072"
               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
             id="flowPara4337-1">Vaadin Project</flowPara></flowRoot>      </g>
      <g
         transform="translate(5.0000001,52.499998)"
         id="g3868-81-40-5">
        <rect
           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
           id="rect3806-2-3-6"
           width="85"
           height="19.999989"
           x="30.188614"
           y="672.71613"
           ry="3.0304618"
           rx="3.0304618" />
        <flowRoot
           xml:space="preserve"
           id="flowRoot3808-6-2-1"
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
           transform="translate(18.467279,316.68226)"><flowRegion
             id="flowRegion3810-0-2-1"><rect
               id="rect3812-4-3-5"
               width="85.278"
               height="32.083519"
               x="16.541248"
               y="363.14072"
               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
             id="flowPara4337-1-4">Application Server</flowPara></flowRoot>      </g>
      <g
         transform="translate(5.0000001,87.5)"
         id="g3868-81-40-5-8">
        <rect
           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
           id="rect3806-2-3-6-3"
           width="85"
           height="19.999987"
           x="30.188614"
           y="672.71613"
           ry="3.0304618"
           rx="3.0304618" />
        <flowRoot
           xml:space="preserve"
           id="flowRoot3808-6-2-1-1"
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
           transform="translate(18.467279,316.68226)"><flowRegion
             id="flowRegion3810-0-2-1-0"><rect
               id="rect3812-4-3-5-3"
               width="85.278"
               height="32.083519"
               x="16.541248"
               y="363.14072"
               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
             id="flowPara4337-1-4-0">Browser</flowPara></flowRoot>      </g>
    </g>
    <g
       transform="translate(269.81139,-27.853905)"
       id="g3868-81">
      <rect
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         id="rect3806-2"
         width="80"
         height="35"
         x="30.188614"
         y="675.21613"
         ry="3.0304618"
         rx="3.0304618" />
      <flowRoot
         xml:space="preserve"
         id="flowRoot3808-6"
         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
         transform="translate(18.369364,319.99189)"><flowRegion
           id="flowRegion3810-0"><rect
             id="rect3812-4"
             width="85.278"
             height="32.083519"
             x="16.541248"
             y="363.14072"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
           id="flowPara3820-5"
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start">Compilation</flowPara><flowPara
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
           id="flowPara4337">Service</flowPara></flowRoot>    </g>
    <g
       transform="translate(269.81139,22.146095)"
       id="g3868-81-4">
      <rect
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         id="rect3806-2-6"
         width="80"
         height="35"
         x="30.188614"
         y="675.21613"
         ry="3.0304618"
         rx="3.0304618" />
      <flowRoot
         xml:space="preserve"
         id="flowRoot3808-6-9"
         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
         transform="translate(18.369364,319.99189)"><flowRegion
           id="flowRegion3810-0-0"><rect
             id="rect3812-4-7"
             width="85.278"
             height="32.083519"
             x="16.541248"
             y="363.14072"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
           id="flowPara4337-6">CDN</flowPara></flowRoot>    </g>
    <path
       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
       d="m 385.20177,732.76568 c -5.33249,10.013 -20.30329,4.74747 -20.30329,4.74747 0,0 -0.38727,5.44989 -9.89848,7.0203 -9.51121,1.57042 -15,-5 -15,-5 0,0 -10,5 -20,5 -10,0 -15,-5 -15,-5 0,0 -15,0 -20,-10 -5,-9.99999 0,-20 0,-20 0,0 -9.85188,-7.87601 -10,-20 -0.14811,-12.12399 10,-20 10,-20 0,0 -5.58058,-7.42386 -0.58058,-17.42386 5,-10 20.58058,-7.57614 20.58058,-7.57614 0,0 4.7343,-9.51543 15,-10 10.2657,-0.48456 16.01015,8.03046 16.01015,8.03046 0,0 4.15094,-7.78741 18.98985,-8.03046 14.83891,-0.24305 17.94497,9.99264 17.94497,9.99264 0,0 12.05503,-4.99263 17.05503,5.00736 5,10 -5,20 -5,20 0,0 8.22164,8.29922 8.283,20.25254 0.0614,11.95333 -8.283,19.74746 -8.283,19.74746 0,0 5.53426,13.21924 0.20177,23.23223 z"
       id="path4376"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="zczczczczczczczczczcz" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL)"
       d="m 340,682.36222 0,15"
       id="path4394"
       inkscape:connector-curvature="0" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8)"
       d="m 300,717.36219 -80,15.00002"
       id="path4394-3"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8-8)"
       d="m 220,667.36221 80,-2e-5"
       id="path4394-3-2"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <flowRoot
       xml:space="preserve"
       id="flowRoot3808-6-9-5-9"
       style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
       transform="translate(238.22879,363.06658)"><flowRegion
         id="flowRegion3810-0-0-3-4"><rect
           id="rect3812-4-7-8-5"
           width="85.278"
           height="32.083519"
           x="16.541248"
           y="363.14072"
           style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
         style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;writing-mode:lr-tb;text-anchor:start"
         id="flowPara4337-6-6-7">cdn</flowPara></flowRoot>    <path
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8-8-0)"
       d="m 170,677.36222 0,15"
       id="path4394-3-2-6"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8-8-0-1)"
       d="m 170,712.36222 0,15"
       id="path4394-3-2-6-2"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
  </g>
 </svg>
--- a/documentation/addons/original-drawings/widgetset-mode-fetch.svg
+++ b/documentation/addons/original-drawings/widgetset-mode-fetch.svg
@@ -0,0 +1,403 @@
 <?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="82mm"
   height="38mm"
   id="svg1901"
   sodipodi:version="0.32"
   inkscape:version="0.91 r"
   sodipodi:docname="widgetset-mode-fetch.svg"
   version="1.1">
  <defs
     id="defs1903">
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         id="path4560"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)"
         inkscape:connector-curvature="0" />
    </marker>
    <font
       horiz-adv-x="1024"
       id="font3118"
       inkscape:label="fontti 1"
       horiz-origin-x="0"
       horiz-origin-y="0"
       vert-origin-x="45"
       vert-origin-y="90"
       vert-adv-y="90">
      <font-face
         units-per-em="1024"
         id="font-face3120"
         font-family="SVGFont 1" />
      <missing-glyph
         d="M0,0h1000v1024h-1000z"
         id="missing-glyph3122" />
    </font>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8-8"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2-6"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8-8-6"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2-6-1"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8-9"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2-5"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8-8-9"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2-6-0"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8-8-0"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2-6-03"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8-8-0-1"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2-6-03-0"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="3.959798"
     inkscape:cx="170.09701"
     inkscape:cy="58.04155"
     inkscape:document-units="mm"
     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"
     fit-margin-top="5"
     fit-margin-left="5"
     fit-margin-right="5"
     fit-margin-bottom="5"
     units="mm">
    <inkscape:grid
       type="xygrid"
       id="grid2982"
       empspacing="5"
       visible="true"
       enabled="true"
       snapvisiblegridlinesonly="true"
       spacingx="5px"
       spacingy="5px"
       originx="-124.5px"
       originy="-294.50073px" />
    <sodipodi:guide
       orientation="1,0"
       position="102.82143,174.42784"
       id="guide3116" />
    <sodipodi:guide
       orientation="1,0"
       position="203.53571,173.53498"
       id="guide3120" />
  </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(-124.5,-623.21581)">
    <g
       transform="translate(99.811386,-32.853903)"
       id="g3868">
      <rect
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         id="rect3806"
         width="110"
         height="124.99994"
         x="30.188614"
         y="660.21613"
         ry="3.0304618"
         rx="3.0304618" />
      <flowRoot
         xml:space="preserve"
         id="flowRoot3808"
         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
         transform="translate(17.799604,303.91022)"><flowRegion
           id="flowRegion3810"><rect
             id="rect3812"
             width="85.278"
             height="32.083519"
             x="16.541248"
             y="363.14072"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
           id="flowPara3820"
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start">Development workstation</flowPara></flowRoot>      <g
         transform="translate(5.0000001,17.499998)"
         id="g3868-81-40">
        <rect
           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
           id="rect3806-2-3"
           width="85"
           height="19.999989"
           x="30.188614"
           y="672.71613"
           ry="3.0304618"
           rx="3.0304618" />
        <flowRoot
           xml:space="preserve"
           id="flowRoot3808-6-2"
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
           transform="translate(18.467279,316.68226)"><flowRegion
             id="flowRegion3810-0-2"><rect
               id="rect3812-4-3"
               width="85.278"
               height="32.083519"
               x="16.541248"
               y="363.14072"
               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
             id="flowPara4337-1">Vaadin Project</flowPara></flowRoot>      </g>
      <g
         transform="translate(5.0000001,52.499998)"
         id="g3868-81-40-5">
        <rect
           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
           id="rect3806-2-3-6"
           width="85"
           height="19.999989"
           x="30.188614"
           y="672.71613"
           ry="3.0304618"
           rx="3.0304618" />
        <flowRoot
           xml:space="preserve"
           id="flowRoot3808-6-2-1"
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
           transform="translate(18.467279,316.68226)"><flowRegion
             id="flowRegion3810-0-2-1"><rect
               id="rect3812-4-3-5"
               width="85.278"
               height="32.083519"
               x="16.541248"
               y="363.14072"
               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
             id="flowPara4337-1-4">Application Server</flowPara></flowRoot>      </g>
      <g
         transform="translate(5.0000001,87.5)"
         id="g3868-81-40-5-8">
        <rect
           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
           id="rect3806-2-3-6-3"
           width="85"
           height="19.999987"
           x="30.188614"
           y="672.71613"
           ry="3.0304618"
           rx="3.0304618" />
        <flowRoot
           xml:space="preserve"
           id="flowRoot3808-6-2-1-1"
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
           transform="translate(18.467279,316.68226)"><flowRegion
             id="flowRegion3810-0-2-1-0"><rect
               id="rect3812-4-3-5-3"
               width="85.278"
               height="32.083519"
               x="16.541248"
               y="363.14072"
               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
             id="flowPara4337-1-4-0">Browser</flowPara></flowRoot>      </g>
    </g>
    <g
       transform="translate(269.81139,-27.853905)"
       id="g3868-81">
      <rect
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         id="rect3806-2"
         width="80"
         height="35"
         x="30.188614"
         y="675.21613"
         ry="3.0304618"
         rx="3.0304618" />
      <flowRoot
         xml:space="preserve"
         id="flowRoot3808-6"
         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
         transform="translate(18.369364,319.99189)"><flowRegion
           id="flowRegion3810-0"><rect
             id="rect3812-4"
             width="85.278"
             height="32.083519"
             x="16.541248"
             y="363.14072"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
           id="flowPara3820-5"
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start">Compilation</flowPara><flowPara
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
           id="flowPara4337">Service</flowPara></flowRoot>    </g>
    <path
       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
       d="m 385.20177,732.76568 c -5.33249,10.013 -20.30329,4.74747 -20.30329,4.74747 0,0 -0.38727,5.44989 -9.89848,7.0203 -9.51121,1.57042 -15,-5 -15,-5 0,0 -10,5 -20,5 -10,0 -15,-5 -15,-5 0,0 -15,0 -20,-10 -5,-9.99999 0,-20 0,-20 0,0 -9.85188,-7.87601 -10,-20 -0.14811,-12.12399 10,-20 10,-20 0,0 -5.58058,-7.42386 -0.58058,-17.42386 5,-10 20.58058,-7.57614 20.58058,-7.57614 0,0 4.7343,-9.51543 15,-10 10.2657,-0.48456 16.01015,8.03046 16.01015,8.03046 0,0 4.15094,-7.78741 18.98985,-8.03046 14.83891,-0.24305 17.94497,9.99264 17.94497,9.99264 0,0 12.05503,-4.99263 17.05503,5.00736 5,10 -5,20 -5,20 0,0 8.22164,8.29922 8.283,20.25254 0.0614,11.95333 -8.283,19.74746 -8.283,19.74746 0,0 5.53426,13.21924 0.20177,23.23223 z"
       id="path4376"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="zczczczczczczczczczcz" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8-8)"
       d="m 220,667.36221 80,-2e-5"
       id="path4394-3-2"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8-8-9)"
       d="m 300,677.36222 -80,19.99999"
       id="path4394-3-2-0"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <flowRoot
       xml:space="preserve"
       id="flowRoot3808-6-9-5-9-9"
       style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
       transform="translate(232.16455,328.36412)"><flowRegion
         id="flowRegion3810-0-0-3-4-9"><rect
           id="rect3812-4-7-8-5-1"
           width="85.278"
           height="32.083519"
           x="16.541248"
           y="363.14072"
           style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
         style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;writing-mode:lr-tb;text-anchor:start"
         id="flowPara4337-6-6-7-4">fetch</flowPara></flowRoot>    <path
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8-8-0)"
       d="m 170,677.36222 0,15"
       id="path4394-3-2-6"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8-8-0-1)"
       d="m 170,712.36222 0,15"
       id="path4394-3-2-6-2"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
  </g>
 </svg>
--- a/documentation/addons/original-drawings/widgetset-mode-local.svg
+++ b/documentation/addons/original-drawings/widgetset-mode-local.svg
@@ -0,0 +1,357 @@
 <?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="82mm"
   height="38mm"
   id="svg1901"
   sodipodi:version="0.32"
   inkscape:version="0.91 r"
   sodipodi:docname="widgetset-mode-local.svg"
   version="1.1">
  <defs
     id="defs1903">
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         id="path4560"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)"
         inkscape:connector-curvature="0" />
    </marker>
    <font
       horiz-adv-x="1024"
       id="font3118"
       inkscape:label="fontti 1"
       horiz-origin-x="0"
       horiz-origin-y="0"
       vert-origin-x="45"
       vert-origin-y="90"
       vert-adv-y="90">
      <font-face
         units-per-em="1024"
         id="font-face3120"
         font-family="SVGFont 1" />
      <missing-glyph
         d="M0,0h1000v1024h-1000z"
         id="missing-glyph3122" />
    </font>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8-8"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2-6"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8-8-6"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2-6-1"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8-9"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2-5"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8-8-9"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2-6-0"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8-8-0"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2-6-03"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8-8-0-1"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2-6-03-0"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="2.8"
     inkscape:cx="1.0961127"
     inkscape:cy="76.167833"
     inkscape:document-units="mm"
     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"
     fit-margin-top="5"
     fit-margin-left="5"
     fit-margin-right="5"
     fit-margin-bottom="5"
     units="mm">
    <inkscape:grid
       type="xygrid"
       id="grid2982"
       empspacing="5"
       visible="true"
       enabled="true"
       snapvisiblegridlinesonly="true"
       spacingx="5px"
       spacingy="5px"
       originx="-124.5px"
       originy="-294.50073px" />
    <sodipodi:guide
       orientation="1,0"
       position="102.82143,174.42784"
       id="guide3116" />
    <sodipodi:guide
       orientation="1,0"
       position="203.53571,173.53498"
       id="guide3120" />
  </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(-124.5,-623.21581)">
    <g
       transform="translate(99.811386,-32.853916)"
       id="g3868">
      <rect
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         id="rect3806"
         width="110"
         height="124.99994"
         x="30.188614"
         y="660.21613"
         ry="3.0304618"
         rx="3.0304618" />
      <flowRoot
         xml:space="preserve"
         id="flowRoot3808"
         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
         transform="translate(17.799604,303.91022)"><flowRegion
           id="flowRegion3810"><rect
             id="rect3812"
             width="85.278"
             height="32.083519"
             x="16.541248"
             y="363.14072"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
           id="flowPara3820"
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start">Development workstation</flowPara></flowRoot>      <g
         transform="translate(5.0000001,17.499998)"
         id="g3868-81-40">
        <rect
           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
           id="rect3806-2-3"
           width="85"
           height="19.999989"
           x="30.188614"
           y="672.71613"
           ry="3.0304618"
           rx="3.0304618" />
        <flowRoot
           xml:space="preserve"
           id="flowRoot3808-6-2"
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
           transform="translate(18.467279,316.68226)"><flowRegion
             id="flowRegion3810-0-2"><rect
               id="rect3812-4-3"
               width="85.278"
               height="32.083519"
               x="16.541248"
               y="363.14072"
               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
             id="flowPara4337-1">Vaadin Project</flowPara></flowRoot>      </g>
      <g
         transform="translate(5.0000001,52.499998)"
         id="g3868-81-40-5">
        <rect
           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
           id="rect3806-2-3-6"
           width="85"
           height="19.999989"
           x="30.188614"
           y="672.71613"
           ry="3.0304618"
           rx="3.0304618" />
        <flowRoot
           xml:space="preserve"
           id="flowRoot3808-6-2-1"
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
           transform="translate(18.467279,316.68226)"><flowRegion
             id="flowRegion3810-0-2-1"><rect
               id="rect3812-4-3-5"
               width="85.278"
               height="32.083519"
               x="16.541248"
               y="363.14072"
               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
             id="flowPara4337-1-4">Application Server</flowPara></flowRoot>      </g>
      <g
         transform="translate(5.0000001,87.5)"
         id="g3868-81-40-5-8">
        <rect
           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
           id="rect3806-2-3-6-3"
           width="85"
           height="19.999987"
           x="30.188614"
           y="672.71613"
           ry="3.0304618"
           rx="3.0304618" />
        <flowRoot
           xml:space="preserve"
           id="flowRoot3808-6-2-1-1"
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
           transform="translate(18.467279,316.68226)"><flowRegion
             id="flowRegion3810-0-2-1-0"><rect
               id="rect3812-4-3-5-3"
               width="85.278"
               height="32.083519"
               x="16.541248"
               y="363.14072"
               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
             id="flowPara4337-1-4-0">Browser</flowPara></flowRoot>      </g>
    </g>
    <flowRoot
       xml:space="preserve"
       id="flowRoot3808-6-9-5"
       style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
       transform="translate(126.40097,318.57165)"><flowRegion
         id="flowRegion3810-0-0-3"><rect
           id="rect3812-4-7-8"
           width="85.278"
           height="32.083519"
           x="16.541248"
           y="363.14072"
           style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
         style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;writing-mode:lr-tb;text-anchor:start"
         id="flowPara4337-6-6">local</flowPara></flowRoot>    <path
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8-8-0)"
       d="m 170,677.36221 0,15"
       id="path4394-3-2-6"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8-8-0-1)"
       d="m 170,712.36221 0,15"
       id="path4394-3-2-6-2"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
  </g>
 </svg>
--- a/documentation/addons/original-drawings/widgetset-modes.svg
+++ b/documentation/addons/original-drawings/widgetset-modes.svg
@@ -0,0 +1,466 @@
 <?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:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="82mm"
   height="38mm"
   id="svg1901"
   sodipodi:version="0.32"
   inkscape:version="0.91 r"
   sodipodi:docname="widgetset-modes.svg"
   version="1.1">
  <defs
     id="defs1903">
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         id="path4560"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)"
         inkscape:connector-curvature="0" />
    </marker>
    <font
       horiz-adv-x="1024"
       id="font3118"
       inkscape:label="fontti 1"
       horiz-origin-x="0"
       horiz-origin-y="0"
       vert-origin-x="45"
       vert-origin-y="90"
       vert-adv-y="90">
      <font-face
         units-per-em="1024"
         id="font-face3120"
         font-family="SVGFont 1" />
      <missing-glyph
         d="M0,0h1000v1024h-1000z"
         id="missing-glyph3122" />
    </font>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8-8"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2-6"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8-8-6"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2-6-1"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8-9"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2-5"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8-8-9"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2-6-0"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8-8-0"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2-6-03"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
    <marker
       inkscape:stockid="EmptyTriangleOutL"
       orient="auto"
       refY="0"
       refX="0"
       id="EmptyTriangleOutL-8-8-0-1"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4560-2-6-03-0"
         d="m 5.77,0 -8.65,5 0,-10 8.65,5 z"
         style="fill:#ffffff;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(0.8,0,0,0.8,-4.8,0)" />
    </marker>
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="3.959798"
     inkscape:cx="101.78544"
     inkscape:cy="80.264906"
     inkscape:document-units="mm"
     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"
     fit-margin-top="5"
     fit-margin-left="5"
     fit-margin-right="5"
     fit-margin-bottom="5"
     units="mm">
    <inkscape:grid
       type="xygrid"
       id="grid2982"
       empspacing="5"
       visible="true"
       enabled="true"
       snapvisiblegridlinesonly="true"
       spacingx="5px"
       spacingy="5px"
       originx="-124.5px"
       originy="-294.50073px" />
    <sodipodi:guide
       orientation="1,0"
       position="102.82143,174.42784"
       id="guide3116" />
    <sodipodi:guide
       orientation="1,0"
       position="203.53571,173.53498"
       id="guide3120" />
  </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(-124.5,-623.21581)">
    <g
       transform="translate(99.811386,-32.853903)"
       id="g3868">
      <rect
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         id="rect3806"
         width="110"
         height="124.99994"
         x="30.188614"
         y="660.21613"
         ry="3.0304618"
         rx="3.0304618" />
      <flowRoot
         xml:space="preserve"
         id="flowRoot3808"
         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
         transform="translate(17.799604,303.91022)"><flowRegion
           id="flowRegion3810"><rect
             id="rect3812"
             width="85.278"
             height="32.083519"
             x="16.541248"
             y="363.14072"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
           id="flowPara3820"
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start">Development workstation</flowPara></flowRoot>      <g
         transform="translate(5.0000001,17.499998)"
         id="g3868-81-40">
        <rect
           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
           id="rect3806-2-3"
           width="85"
           height="19.999989"
           x="30.188614"
           y="672.71613"
           ry="3.0304618"
           rx="3.0304618" />
        <flowRoot
           xml:space="preserve"
           id="flowRoot3808-6-2"
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
           transform="translate(18.467279,316.68226)"><flowRegion
             id="flowRegion3810-0-2"><rect
               id="rect3812-4-3"
               width="85.278"
               height="32.083519"
               x="16.541248"
               y="363.14072"
               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
             id="flowPara4337-1">Vaadin Project</flowPara></flowRoot>      </g>
      <g
         transform="translate(5.0000001,52.499998)"
         id="g3868-81-40-5">
        <rect
           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
           id="rect3806-2-3-6"
           width="85"
           height="19.999989"
           x="30.188614"
           y="672.71613"
           ry="3.0304618"
           rx="3.0304618" />
        <flowRoot
           xml:space="preserve"
           id="flowRoot3808-6-2-1"
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
           transform="translate(18.467279,316.68226)"><flowRegion
             id="flowRegion3810-0-2-1"><rect
               id="rect3812-4-3-5"
               width="85.278"
               height="32.083519"
               x="16.541248"
               y="363.14072"
               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
             id="flowPara4337-1-4">Application Server</flowPara></flowRoot>      </g>
      <g
         transform="translate(5.0000001,87.5)"
         id="g3868-81-40-5-8">
        <rect
           style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
           id="rect3806-2-3-6-3"
           width="85"
           height="19.999987"
           x="30.188614"
           y="672.71613"
           ry="3.0304618"
           rx="3.0304618" />
        <flowRoot
           xml:space="preserve"
           id="flowRoot3808-6-2-1-1"
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
           transform="translate(18.467279,316.68226)"><flowRegion
             id="flowRegion3810-0-2-1-0"><rect
               id="rect3812-4-3-5-3"
               width="85.278"
               height="32.083519"
               x="16.541248"
               y="363.14072"
               style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
             id="flowPara4337-1-4-0">Browser</flowPara></flowRoot>      </g>
    </g>
    <g
       transform="translate(269.81139,-27.853905)"
       id="g3868-81">
      <rect
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         id="rect3806-2"
         width="80"
         height="35"
         x="30.188614"
         y="675.21613"
         ry="3.0304618"
         rx="3.0304618" />
      <flowRoot
         xml:space="preserve"
         id="flowRoot3808-6"
         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
         transform="translate(18.369364,319.99189)"><flowRegion
           id="flowRegion3810-0"><rect
             id="rect3812-4"
             width="85.278"
             height="32.083519"
             x="16.541248"
             y="363.14072"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
           id="flowPara3820-5"
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start">Compilation</flowPara><flowPara
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
           id="flowPara4337">Service</flowPara></flowRoot>    </g>
    <g
       transform="translate(269.81139,22.146095)"
       id="g3868-81-4">
      <rect
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         id="rect3806-2-6"
         width="80"
         height="35"
         x="30.188614"
         y="675.21613"
         ry="3.0304618"
         rx="3.0304618" />
      <flowRoot
         xml:space="preserve"
         id="flowRoot3808-6-9"
         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
         transform="translate(18.369364,319.99189)"><flowRegion
           id="flowRegion3810-0-0"><rect
             id="rect3812-4-7"
             width="85.278"
             height="32.083519"
             x="16.541248"
             y="363.14072"
             style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:10px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start"
           id="flowPara4337-6">CDN</flowPara></flowRoot>    </g>
    <path
       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
       d="m 385.20177,732.76568 c -5.33249,10.013 -20.30329,4.74747 -20.30329,4.74747 0,0 -0.38727,5.44989 -9.89848,7.0203 -9.51121,1.57042 -15,-5 -15,-5 0,0 -10,5 -20,5 -10,0 -15,-5 -15,-5 0,0 -15,0 -20,-10 -5,-9.99999 0,-20 0,-20 0,0 -9.85188,-7.87601 -10,-20 -0.14811,-12.12399 10,-20 10,-20 0,0 -5.58058,-7.42386 -0.58058,-17.42386 5,-10 20.58058,-7.57614 20.58058,-7.57614 0,0 4.7343,-9.51543 15,-10 10.2657,-0.48456 16.01015,8.03046 16.01015,8.03046 0,0 4.15094,-7.78741 18.98985,-8.03046 14.83891,-0.24305 17.94497,9.99264 17.94497,9.99264 0,0 12.05503,-4.99263 17.05503,5.00736 5,10 -5,20 -5,20 0,0 8.22164,8.29922 8.283,20.25254 0.0614,11.95333 -8.283,19.74746 -8.283,19.74746 0,0 5.53426,13.21924 0.20177,23.23223 z"
       id="path4376"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="zczczczczczczczczczcz" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL)"
       d="m 340,682.36222 0,15"
       id="path4394"
       inkscape:connector-curvature="0" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8)"
       d="m 300,717.36219 -80,15.00002"
       id="path4394-3"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8-8)"
       d="m 220,667.36221 80,-2e-5"
       id="path4394-3-2"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <flowRoot
       xml:space="preserve"
       id="flowRoot3808-6-9-5"
       style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
       transform="translate(126.40097,318.57166)"><flowRegion
         id="flowRegion3810-0-0-3"><rect
           id="rect3812-4-7-8"
           width="85.278"
           height="32.083519"
           x="16.541248"
           y="363.14072"
           style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
         style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;writing-mode:lr-tb;text-anchor:start"
         id="flowPara4337-6-6">local</flowPara></flowRoot>    <flowRoot
       xml:space="preserve"
       id="flowRoot3808-6-9-5-9"
       style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
       transform="translate(238.22879,363.06658)"><flowRegion
         id="flowRegion3810-0-0-3-4"><rect
           id="rect3812-4-7-8-5"
           width="85.278"
           height="32.083519"
           x="16.541248"
           y="363.14072"
           style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
         style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;writing-mode:lr-tb;text-anchor:start"
         id="flowPara4337-6-6-7">cdn</flowPara></flowRoot>    <path
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8-8-9)"
       d="m 300,677.36222 -80,19.99999"
       id="path4394-3-2-0"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <flowRoot
       xml:space="preserve"
       id="flowRoot3808-6-9-5-9-9"
       style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
       transform="translate(232.16455,328.36412)"><flowRegion
         id="flowRegion3810-0-0-3-4-9"><rect
           id="rect3812-4-7-8-5-1"
           width="85.278"
           height="32.083519"
           x="16.541248"
           y="363.14072"
           style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;writing-mode:lr-tb;text-anchor:start" /></flowRegion><flowPara
         style="font-style:normal;font-variant:normal;font-weight:500;font-stretch:normal;font-size:7.5px;line-height:89.99999762%;font-family:'Source Code Pro';-inkscape-font-specification:'Source Code Pro, Medium';text-align:start;writing-mode:lr-tb;text-anchor:start"
         id="flowPara4337-6-6-7-4">fetch</flowPara></flowRoot>    <path
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8-8-0)"
       d="m 170,677.36222 0,15"
       id="path4394-3-2-6"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;marker-end:url(#EmptyTriangleOutL-8-8-0-1)"
       d="m 170,712.36222 0,15"
       id="path4394-3-2-6-2"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
  </g>
 </svg>
--- a/documentation/application/application-environment.asciidoc
+++ b/documentation/application/application-environment.asciidoc
@@ -62,7 +62,9 @@ Your own theme files (OPTIONAL)::
 If your application uses a special theme (look and feel), you must include it in [filename]#VAADIN/themes/themename# directory.

 Widget sets (OPTIONAL)::
 If your application uses a project-specific widget set, it must be compiled in the [filename]#VAADIN/widgetset/# directory.
 If your application uses add-ons or custom widgets, they must be compiled to the [filename]#VAADIN/widgetset/# directory.
 When using add-ons, this is done automatically in Maven projects.
 See <<dummy/../../../framework/addons/addons-maven#addons.maven, "Using Add-ons in a Maven Project">> for more information.

 [[application.environment.webservlet]]
 == Web Servlet Class
@@ -137,7 +139,7 @@ The servlet is then mapped to a URL path in a standard way for Java Servlets.
    &lt;!-- If not using the default widget set--&gt;
    &lt;init-param&gt;
      &lt;param-name&gt;widgetset&lt;/param-name&gt;
      &lt;param-value&gt;[replaceable]##com.ex.myprj.MyWidgetSet##&lt;/param-value&gt;
      &lt;param-value&gt;[replaceable]##com.ex.myprj.AppWidgetSet##&lt;/param-value&gt;
    &lt;/init-param&gt;
  &lt;/servlet&gt;

@@ -173,24 +175,36 @@ Servlet 3.0 support is useful for at least server push.
 [[application.environment.web-xml.widgetset]]
 === Widget Set

 If the UI uses add-on components or custom widgets, it needs a custom widget
 set, which can be specified with the [parameter]#widgetset# parameter for the
 servlet. Alternatively, you can defined it with the [classname]#@WidgetSet#
 annotation for the UI class. The parameter is a class name with the same path
 but without the [filename]#.gwt.xml# extension as the widget set definition
 file. If the parameter is not given, the
 [classname]#com.vaadin.DefaultWidgetSet# is used, which contains all the widgets
 for the built-in Vaadin components.
 The widget set is normally defined and compiled automatically in Maven projects.
 It may be necessary to define it manually in some cases, such as when developing custom widgets or if you need to include special rules in the widget set definition file ([filename]#.gwt.xml# module descriptor).

 Unless using the default widget set (which is included in the
 [filename]#vaadin-client-compiled# JAR), the widget set must be compiled, as
 described in
 <<dummy/../../../framework/addons/addons-overview.asciidoc#addons.overview,"Using
 Vaadin Add-ons">> or
 <<dummy/../../../framework/clientside/clientside-compiling#clientside.compiling,"Compiling
 a Client-Side Module">>, and properly deployed with the application.
 The widget set of a UI can be defined with the [classname]#@WidgetSet# annotation for the UI class.

 [source, Java, subs="normal"]
 ----
@WidgetSet("[replaceable]#com.example.myproject.MyWidgetSet#")
 class MyUI extends UI {
    ...
 ----

 You can also define it in the [filename]#web.xml# descriptor for the servlet:

 [source, xml, subs="normal"]
 ----
 <init-param>
  <param-name>widgetset</param-name>
  <param-value>com.example.myproject.MyWidgetSet</param-value>
 </init-param>
 ----

 The name of a widget set is technically a Java class name with the same path as the widget set definition file, but without the [filename]#.gwt.xml# extension.

 If a widget set is not specified, the default is used.
 In a project that does not use add-ons or custom widgets, the [classname]#com.vaadin.DefaultWidgetSet# is used.
 It contains all the widgets for the built-in Vaadin components.
 When using add-ons, the Vaadin Maven Plugin automatically defines an  [classname]#AppWidgetSet# that includes all the add-on widget sets.

 The widget set must be compiled, as described in <<dummy/../../../framework/addons/addons-overview.asciidoc#addons.overview,"Using Vaadin Add-ons">> (for add-ons) or <<dummy/../../../framework/clientside/clientside-compiling#clientside.compiling,"Compiling a Client-Side Module">> (for custom widgets and client-side modules), and properly deployed with the application.

 [[application.environment.servlet-mapping]]
 == Servlet Mapping with URL Patterns
--- a/documentation/architecture/architecture-technology.asciidoc
+++ b/documentation/architecture/architecture-technology.asciidoc
@@ -196,9 +196,6 @@ in
 a Server-Side Web Application">>. The class is given as a parameter to the
 Vaadin Servlet in the [filename]#web.xml# deployment descriptor.

 The Vaadin Client-Side Engine as well as client-side Vaadin applications are
 loaded to the browser as static JavaScript files. The client-side engine, or
 widget set in technical terms, needs to be located under the
 [filename]#VAADIN/widgetsets# path in the web application. The precompiled
 default widget set is served from the [filename]#vaadin-client-compiled# JAR by
 the Vaadin Servlet.
 The Vaadin Client-Side Engine as well as client-side Vaadin applications are loaded to the browser as static JavaScript files.
 The client-side engine, or widget set in technical terms, needs to be located under the [filename]#VAADIN/widgetsets# path in the web application.
 It is normally automatically compiled to include the default widget set, as well as any installed add-ons and custom widgets.
--- a/documentation/clientside/clientside-compiling.asciidoc
+++ b/documentation/clientside/clientside-compiling.asciidoc
@@ -7,68 +7,172 @@ layout: page
 [[clientside.compiling]]
 = Compiling a Client-Side Module

 A client-side module, either a widget set or a pure client-side module, needs to
 be compiled to JavaScript using the Vaadin Client Compiler. During development,
 the Development Mode makes the compilation automatically when you reload the
 page, provided that the module has been initially compiled once with the
 compiler.

 As most Vaadin add-ons include widgets, widget set compilation is usually needed
 when using add-ons. In that case, the widget sets from different add-ons are
 compiled into a __project widget set__, as described in
 <<dummy/../../../framework/addons/addons-overview.asciidoc#addons.overview,"Using Vaadin Add-ons">>.

 ////
 TODO Provide a link to a proper add-on compilation section when one is
 available.
 ////
 A client-side module, either a Vaadin widget set or a pure client-side module, needs to be compiled to JavaScript using the Vaadin Client Compiler.

 Widget set compilation is most often needed when using add-ons.
 In that case, the widget sets from different add-ons are compiled into an _application widget set_, as described in <<dummy/../../../framework/addons/addons-overview.asciidoc#addons.overview, "Using Vaadin Add-ons">>.

 When doing client-side development, you need to compile the widget set every time you modify the client-side code.

 [[clientside.compiling.overview]]
 == Vaadin Compiler Overview

 The Vaadin Client Compiler compiles Java to JavaScript. It is provided as the
 [filename]#vaadin-client-compiler# JAR, which you can execute with the
 [literal]#++-jar++# parameter for the Java runtime. It requires the
 [filename]#vaadin-client# JAR, which contains the Vaadin client-side framework.
 The Vaadin Client Compiler compiles Java to JavaScript.
 It is provided as the executable [filename]#vaadin-client-compiler# JAR.
 // You can run it with the [literal]#++-jar++# parameter for the Java runtime.
 It requires the [filename]#vaadin-client# JAR, which contains the [classname]#DefaultWidgetSet#, Vaadin client-side framework.

 The compiler compiles a _client module_, which can either be a pure client-side module or a Vaadin widget set, that is, the Vaadin Client-Side Engine that includes the widgets used in the application.
 The client module is defined with a module descriptor, which was described in <<clientside-module#clientside.module, "Client-Side Module Descriptor">>.
 The module descriptor for application widget sets is automatically generated.

 While you can compile client modules individually, in Vaadin applications you normally combine them in one application widget set.
 The application widget set includes any add-on and custom widgets.
 The compiler scans the class path for any widget sets to include in the application widget set.

 === Compilation Result

 The compiler writes the compilation result to a target folder that will include the compiled JavaScript with any static resources included in the module.

 [[clientside.compiling.maven]]
 == Compiling in Maven Projects

 The Vaadin Maven Plugin, which is enabled in all Vaadin archetypes, makes Maven to automatically compile the widget set when necessary.

 ifdef::web[]
 === Plugin Configuration

 [source,xml]
 ----
 <plugin>
  <groupId>com.vaadin</groupId>
  <artifactId>vaadin-maven-plugin</artifactId>
  <version>${vaadin.plugin.version}</version>

  <configuration>
    <extraJvmArgs>-Xmx512M -Xss1024k</extraJvmArgs>
    <webappDirectory>${basedir}/target/classes/VAADIN/widgetsets</webappDirectory>
    <draftCompile>false</draftCompile>
    <compileReport>false</compileReport>
    <style>OBF</style>
    <strict>true</strict>
  </configuration>

  <executions>
    <execution>
      <goals>
        <goal>update-theme</goal>
        <goal>update-widgetset</goal>
        <goal>compile</goal>
        <goal>compile-theme</goal>
      </goals>
    </execution>
  </executions>
 </plugin>
 ----
 endif::web[]

 [[clientside.compiling.maven.modes]]
 === Compilation Modes

 The Vaadin Maven Plugin can compile widget sets either locally or online by using a cloud service.
 The online compilation requires that all the widget sets are available in certain public Maven repositories.
 As this is not the case when developing custom widgets, you must use the `local` mode.

 Local compilation is the default mode, so you only need to enable it if you have changed the mode to use the online service.

 See <<DUMMY/../../addons/addons-maven#addons.maven.modes, "Widget Set Modes">> for more information.

 [[clientside.compiling.maven.compiling]]
 === Compiling

 The compiler compiles a __client module__, which can be either a pure
 client-side module or a Vaadin widget set, that is, the Vaadin Client-Side
 Engine that includes the widgets used in the application. The client module is
 defined with a module descriptor, which was described in
 <<clientside-module#clientside.module, "Client-Side Module Descriptor">>.
 You can explicitly compile the widget set with the [literal]#vaadin:compile# goal.

 The compiler writes the compilation result to a target folder that will include
 the compiled JavaScript with any static resources included in the module.
 On command-line:

 [subs="normal"]
 ----
 [prompt]#$# [command]#mvn# [parameter]#vaadin:compile#
 ----

 If there is no widget set defined, but you have add-on dependencies that need a
 custom widget set, the Vaadin Maven plugin will automatically generate a widget set definition for you.

 [[clientside.compiling.eclipse]]
 == Compiling in Eclipse

 When the Vaadin Plugin is installed in Eclipse, you can simply click the
 button in the toolbar.
 When you have the Vaadin Plugin installed in Eclipse, you can simply click the *Compile Vaadin Widgetset* button in the toolbar.

 .Widget set compilation button in Eclipse
 image::img/widgetset-compiling-toolbar.png[width=50%, scaledwidth=60%]

 It will compile the widget set it finds from the project.
 If the project has multiple widget sets, such as one for custom widgets and another one for the project, you need to select the module descriptor of the widget set to compile before clicking the button.

 The compilation with Vaadin Plugin for Eclipse currently requires that the
 module descriptor has suffix [filename]#Widgetset.gwt.xml#, although you can use
 it to compile also other client-side modules than widget sets. The result is
 written under [filename]#WebContent/VAADIN/widgetsets# folder.
 Compiling with the Vaadin Plugin for Eclipse currently requires that the module descriptor has suffix [filename]#Widgetset.gwt.xml#, although you can use it to compile also other client-side modules than widget sets.

 The result is written under [filename]#WebContent/VAADIN/widgetsets# folder.

 ifdef::web[]
 [[clientside.compiling.ant]]
 == Compiling with Ant

 You can find a script template for compiling widget sets with Ant and Ivy at the
 link:http://vaadin.com/download/[Vaadin download page].
 You can copy the build script to your project and, once configured, run it with Ant.
 Consider the following configuration:

 [[clientside.compiling.maven]]
 == Compiling with Maven
 [source, xml, subs="normal"]
 ----
 <target name="configure">
    <!-- Where project source files are located -->
    <property name="sources" value="[replaceable]#src#" />

 You can compile the widget set with the [literal]#++vaadin:compile++# goal as
 follows:
    <!-- Path to root of web application folder -->
    <property name="webroot" value="[replaceable]#WebContent#" />

 [subs="normal"]
    <!-- Compilation work directory -->
    <property name="workdir" value="[replaceable]#build/work#"/>
 </target>
 ----
 [prompt]#$# [command]#mvn# [parameter]#vaadin:compile#

 The script assumes the Eclipse project layout with [filename]#WebContent# folder.

 The `compile-widgetset` target invokes the Vaadin Compiler to compile the widget set.
 The class path includes source folder in case there are custom widgets, compiled server-side classes, and the dependencies resolved with Ivy.

 [source, xml]
 ----
 <target name="compile-widgetset" depends="init,resolve">
    <java classname="com.google.gwt.dev.Compiler"
          failonerror="yes" fork="yes">
        <arg value="-war" />
        <arg value="${webroot}/VAADIN/widgetsets" />
        <arg value="${widgetset}" />
        <arg value="-logLevel"/>
        <arg value="INFO"/>
        <!-- <arg value="-strict"/> -->
        <jvmarg value="-Xmx1024M"/>
        <jvmarg value="-Xss512M"/>
        <jvmarg value="-Djava.awt.headless=true"/>

        <classpath>
            <!-- Location of source code -->
            <pathelement path="${sources}" />

            <!-- Compiled server-side classes -->
            <pathelement path="${workdir}/WEB-INF/classes" />

            <!-- Dependencies retrieved with Ivy -->
            <path refid="ivy.deps.widgetset"/>
        </classpath>
        <sysproperty key="vFailIfNotSerializable" value="${failifnotserializable}" />
    </java>

    <!-- Cleanup -->
    <delete dir="${webroot}/VAADIN/gwt-unitCache"/>
    <delete dir="${webroot}/VAADIN/widgetsets/WEB-INF"/>
 </target>
 ----

 You can find the complete example build script for compiling widget sets with Ant and Ivy in the https://github.com/vaadin/book-examples/blob/master/build/build.xml[build.xml for the Book Examples].
 You can copy the build script to your project and, once configured, run it with Ant.
 You may need to do some configuration in the build targets, such as to exclude or include source or target paths.
 endif::web[]
--- a/documentation/clientside/img/widgetset-compiling-toolbar.png
+++ b/documentation/clientside/img/widgetset-compiling-toolbar.png
--- a/documentation/getting-started/getting-started-first-project.asciidoc
+++ b/documentation/getting-started/getting-started-first-project.asciidoc
@@ -26,11 +26,11 @@ This walkthrough assumes that you have already installed the Eclipse IDE, the Va

 ifdef::web[]
 [[getting-started.first-project.ivy]]
 == Creating the Project
 == Creating an Ivy 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.creation>>._
 NOTE: 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.creation>>.
 endif::web[]

 ifdef::web[]
@@ -162,7 +162,7 @@ project hierarchy shown in the Project Explorer is shown in

 [[figure.getting-started.first-project.exploring]]
 .A New Vaadin Project
 image::img/myproject-ivy-created.png[scaledwidth=60%]
 image::img/myproject-ivy-created.png[width=40%, scaledwidth=60%]

 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
@@ -224,8 +224,8 @@ endif::web[]
 == 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._
 NOTE: 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.
@@ -272,12 +272,13 @@ 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.
 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%, scaledwidth=90%]
 .A new Vaadin project
 image::img/myproject-created-annotated-hi.png[width=80%, scaledwidth=100%]

 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.
@@ -295,7 +296,6 @@ import com.vaadin.ui.UI;
 ...

@Theme("mytheme")
@Widgetset("com.example.myproject.MyAppWidgetset")
 public class MyUI extends UI {

    @Override
@@ -325,14 +325,14 @@ public class MyUI extends UI {
 }
 ----

 [[getting-started.first-project.widgetset]]
 == Compiling the Widget Set and Theme
 [[getting-started.first-project.theme]]
 == Compiling the 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, click the [guilabel]#Compile Vaadin Theme# button in the toolbar, as shown in <<figure.getting-started.first-project.compiletheme>>.

 [[figure.getting-started.first-project.compilewidgetset]]
 .Compile Widgetset and Theme Menu
 image::img/myproject-compilewidgetset.png[width=50%]
 [[figure.getting-started.first-project.compiletheme]]
 .Compile Vaadin Theme
 image::img/myproject-compiletheme.png[width=40%, scaledwidth=60%]

 [[getting-started.first-project.coding]]
 == Coding Tips for Eclipse
@@ -460,8 +460,9 @@ Updating the libraries can take several minutes. You can see the progress in the
 Eclipse status bar. You can get more details about the progress by clicking the
 indicator.

 . If you have compiled the widget set for your project, recompile it by clicking
 the [guibutton]#Compile Vaadin widgets# button in Eclipse toolbar.
 . _In Vaadin 7.6 and older_: if you have compiled the widget set for your project, recompile it by clicking the *Compile Vaadin Widgetset* button in the Eclipse toolbar.
 +
 image::img/myproject-compilewidgetset.png[width=50%, scaledwidth=60%]

 . Stop the integrated Tomcat (or other server) in Eclipse, clear its caches by
 right-clicking the server and selecting [guilabel]#Clean# as well as
@@ -497,8 +498,9 @@ Updating the libraries can take several minutes. You can see the progress in the
 Eclipse status bar. You can get more details about the progress by clicking the
 indicator.

 . If you have compiled the widget set for your project, recompile it by clicking
 the [guibutton]#Compile Vaadin widgets# button in Eclipse toolbar.
 . If you have compiled the widget set for your project, recompile it by clicking the *Compile Vaadin Widgetset* button in Eclipse toolbar.
 +
 image::img/myproject-compilewidgetset.png[width=50%, scaledwidth=60%]

 . Stop the integrated Tomcat (or other server) in Eclipse, clear its caches by
 right-clicking the server and selecting Clean as well as Clean Tomcat Work
--- a/documentation/getting-started/getting-started-maven.asciidoc
+++ b/documentation/getting-started/getting-started-maven.asciidoc
@@ -11,7 +11,7 @@ layout: page

 In previous sections, we looked into creating a Vaadin Maven project in different IDEs.
 In this section, we look how to create such a project on command-line.
 You can then import such a project to your IDE.
 You can then import such a project in your IDE.

 In addition to regular Maven, you can use any Maven-compatible build or
 dependency management system, such as Ivy or Gradle. For Gradle, see the
@@ -35,7 +35,7 @@ line):
   -DarchetypeGroupId=com.vaadin \
   -DarchetypeArtifactId=[replaceable]#vaadin-archetype-application# \
   -DarchetypeVersion=[replaceable]#7.x.x# \
   -DgroupId=[replaceable]#your.company# \
   -DgroupId=[replaceable]#com.pany# \
   -DartifactId=[replaceable]#project-name# \
   -Dversion=[replaceable]#0.1# \
   -Dpackaging=war
@@ -96,13 +96,14 @@ WAR package. You can do this with the [literal]#++package++# goal as follows:
 The location of the resulting WAR package should be displayed in the command
 output. You can then deploy it to your favorite application server.

 The easiest way to run Vaadin applications with Maven is to use the light-weight
 Jetty web server. After compiling the package, all you need to do is type:
 The easiest way to run Vaadin applications with Maven is to use the light-weight Jetty web server.
 After compiling the package, all you need to do is type:

 [subs="normal"]
 ----
 [prompt]#$# [command]#mvn# jetty:run
 ----

 The special goal starts the Jetty server in port 8080 and deploys the
 application. You can then open it in a web browser at
 http://localhost:8080/project-name.
@@ -110,17 +111,16 @@ http://localhost:8080/project-name.
 (((range="endofrange", startref="term.maven.compiling")))

 [[getting-started.maven.addons]]
 == Using Add-ons and Custom Widget Sets
 == Using Add-ons

 ((("Maven", "using add-ons", id="term.maven.addons", range="startofrange")))


 If you use Vaadin add-ons that include a widget set or make your custom widgets,
 you need to enable widget set compilation in the POM. The required configuration
 is described in
 <<dummy/../../../framework/addons/addons-maven#addons.maven,"Using Add-ons in a
 If you use Vaadin add-ons from the http://vaadin.com/directory[Vaadin Directory], you need to add them as dependencies in the project POM.
 The instructions are given in <<dummy/../../../framework/addons/addons-maven#addons.maven, "Using Add-ons in a
 Maven Project">>.

 _In projects that use Vaadin 7.6 or older_, you need to compile the widget set manually.
 See the add-on usage instructions.

 (((range="endofrange", startref="term.maven.addons")))
 (((range="endofrange", startref="term.maven.creating")))
--- a/documentation/getting-started/img/myproject-compiletheme.png
+++ b/documentation/getting-started/img/myproject-compiletheme.png
--- a/documentation/getting-started/img/myproject-compilewidgetset.png
+++ b/documentation/getting-started/img/myproject-compilewidgetset.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-created.png
+++ b/documentation/getting-started/img/myproject-created.png
--- a/documentation/getting-started/img/netbeans-created-annotated-hi.png
+++ b/documentation/getting-started/img/netbeans-created-annotated-hi.png
--- a/documentation/getting-started/img/netbeans-newproject-created.png
+++ b/documentation/getting-started/img/netbeans-newproject-created.png
--- a/documentation/getting-started/original-drawings/myproject-created-annotated.svg
+++ b/documentation/getting-started/original-drawings/myproject-created-annotated.svg
@@ -14,7 +14,7 @@
   height="744.09448"
   id="svg1901"
   sodipodi:version="0.32"
   inkscape:version="0.48.4 r9939"
   inkscape:version="0.91 r"
   sodipodi:docname="myproject-created-annotated.svg"
   version="1.1">
  <defs
@@ -71,9 +71,9 @@
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="1.4"
     inkscape:cx="191.07987"
     inkscape:cy="356.49384"
     inkscape:zoom="1.979899"
     inkscape:cx="544.97755"
     inkscape:cy="286.33054"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     inkscape:window-width="1920"
@@ -122,21 +122,21 @@
     id="layer1"
     transform="translate(0,-308.2677)">
    <rect
       style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.5;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.5;marker:none;enable-background:accumulate"
       id="rect29725"
       width="480"
       height="455"
       x="95"
       y="164.09448"
       transform="translate(0,308.2677)"
       ry="3.7880721" />
       width="490"
       height="435"
       x="70"
       y="149.09448"
       ry="3.7880721"
       transform="translate(0,308.2677)" />
    <image
       y="475.67679"
       x="97.162643"
       y="459.67679"
       x="73.162643"
       id="image3215"
       xlink:href="file:///home/magi/itmill/vaadin/documentation/getting-started/img/myproject-created.png"
       height="453.37076"
       width="305.67471" />
       height="428.90781"
       width="352.83734" />
    <g
       transform="translate(204.99999,-146.51524)"
       id="g3822-4">
@@ -155,7 +155,7 @@
         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"
         d="M 34.165936,419.09448 A 9.1659365,9.1659365 0 0 1 25,428.26042 9.1659365,9.1659365 0 0 1 15.834064,419.09448 9.1659365,9.1659365 0 0 1 25,409.92855 a 9.1659365,9.1659365 0 0 1 9.165936,9.16593 z"
         transform="matrix(0.54549827,0,0,0.54549827,36.362543,498.74687)" />
      <path
         sodipodi:type="arc"
@@ -165,12 +165,12 @@
         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"
         d="M 34.165936,419.09448 A 9.1659365,9.1659365 0 0 1 25,428.26042 9.1659365,9.1659365 0 0 1 15.834064,419.09448 9.1659365,9.1659365 0 0 1 25,409.92855 a 9.1659365,9.1659365 0 0 1 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"
       style="font-size:12.5px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:'Helvetica LT Std';-inkscape-font-specification:'Helvetica LT Std, Light';"
       x="385"
       y="584.474"
       id="text13161"
@@ -180,184 +180,124 @@
         x="385"
         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)"
       transform="translate(270,28.285711)"
       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"
         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="m 25,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"
         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="m 25,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"
         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="m 45,419.09448 60,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.74977946;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"
      <circle
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;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 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,31.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"
         transform="matrix(0.54549827,0,0,0.54549827,31.362543,498.74687)"
         cx="25"
         cy="419.09448"
         r="9.1659365" />
      <circle
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;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)" />
         transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)"
         cx="25"
         cy="419.09448"
         r="9.1659365" />
    </g>
    <g
       transform="translate(270,169.99999)"
       transform="translate(270,128.42856)"
       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"
         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         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"
      <circle
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;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"
         transform="matrix(0.54549827,0,0,0.54549827,-83.637457,498.74688)"
         cx="25"
         cy="419.09448"
         r="9.1659365" />
      <circle
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;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)" />
         transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)"
         cx="25"
         cy="419.09448"
         r="9.1659365" />
    </g>
    <g
       transform="translate(270,187.3214)"
       transform="translate(270,145.74997)"
       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"
         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         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"
      <circle
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;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"
         transform="matrix(0.54549827,0,0,0.54549827,-58.637457,498.74688)"
         cx="25"
         cy="419.09448"
         r="9.1659365" />
      <circle
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;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)" />
         transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)"
         cx="25"
         cy="419.09448"
         r="9.1659365" />
    </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="385"
       y="664.25208"
       id="text13161-0"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan13163-0"
         x="385"
         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"
       style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:12.5px;line-height:125%;font-family:'Helvetica LT Std';-inkscape-font-specification:'Helvetica LT Std, Light';text-align:start;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;"
       x="385"
       y="808.74548"
       y="759.17407"
       id="text13161-0-4"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan13163-0-8"
         x="385"
         y="808.74548">The theme</tspan></text>
         y="759.17407">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"
       style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:12.5px;line-height:125%;font-family:'Helvetica LT Std';-inkscape-font-specification:'Helvetica LT Std, Light';text-align:start;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;"
       x="385"
       y="901.34863"
       y="859.77722"
       id="text13161-0-4-1"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan13163-0-8-3"
         x="385"
         y="901.34863">Maven project configuration</tspan></text>
         y="859.77722">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"
       style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:12.5px;line-height:125%;font-family:'Helvetica LT Std';-inkscape-font-specification:'Helvetica LT Std, Light';text-align:start;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;"
       x="385"
       y="918.85156"
       y="877.28015"
       id="text13161-0-4-4"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan13163-0-8-2"
         x="385"
         y="918.85156">Project README skeleton</tspan></text>
         y="877.28015">Project README skeleton</tspan></text>
  </g>
 </svg>
--- a/documentation/getting-started/original-drawings/netbeans-created-annotated.svg
+++ b/documentation/getting-started/original-drawings/netbeans-created-annotated.svg
@@ -14,7 +14,7 @@
   height="744.09448"
   id="svg1901"
   sodipodi:version="0.32"
   inkscape:version="0.48.4 r9939"
   inkscape:version="0.91 r"
   sodipodi:docname="netbeans-created-annotated.svg"
   version="1.1">
  <defs
@@ -80,11 +80,11 @@
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageopacity="1"
     inkscape:pageshadow="2"
     inkscape:zoom="1.4"
     inkscape:cx="325.14306"
     inkscape:cy="308.11666"
     inkscape:zoom="0.98994949"
     inkscape:cx="427.53838"
     inkscape:cy="397.85985"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     inkscape:window-width="1920"
@@ -123,7 +123,7 @@
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
@@ -137,188 +137,129 @@
       x="-12.462494"
       id="image3215"
       xlink:href="file:///home/magi/itmill/vaadin/documentation/getting-started/img/netbeans-newproject-created.png"
       width="587.46252"
       height="487.08057"
       mask="url(#mask3028)" />
       width="312"
       height="354"
       mask="url(#mask3028)"
       transform="matrix(1.1875352,0,0,1.1875352,2.3371561,-91.708359)" />
    <g
       transform="translate(164.99999,24.999997)"
       transform="translate(200,37.020301)"
       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"
         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="M 20.00001,419.09449 175,419.09448"
         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.74977946;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"
      <circle
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;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 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,6.3625532,498.74687)" />
      <path
         sodipodi:type="arc"
         style="color:#000000;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;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"
         transform="matrix(0.54549827,0,0,0.54549827,6.3625532,498.74687)"
         cx="25"
         cy="419.09448"
         r="9.1659365" />
      <circle
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;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)" />
         transform="matrix(0.54549827,0,0,0.54549827,156.36255,498.74687)"
         cx="25"
         cy="419.09448"
         r="9.1659365" />
    </g>
    <text
       xml:space="preserve"
       style="font-size:16px;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="354.74399"
       y="756.59644"
       style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:16px;line-height:125%;font-family:'Helvetica LT Std';-inkscape-font-specification:'Helvetica LT Std Light';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
       x="389.74399"
       y="768.6167"
       id="text13161"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan13163"
         x="354.74399"
         y="756.59644">The UI class skeleton</tspan></text>
    <g
       transform="translate(159.99999,107.5254)"
       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 145.00001,419.09448 29.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.74977946;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,131.36255,498.74687)" />
      <path
         sodipodi:type="arc"
         style="color:#000000;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;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 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,161.36255,498.74687)" />
    </g>
         x="389.74399"
         y="768.6167">The UI class skeleton</tspan></text>
    <g
       transform="translate(235,-75.000003)"
       transform="translate(270.00001,-67)"
       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"
         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="m 25,777.36219 10,-10 0,-30.00001 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"
         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="m 25,677.36219 10,10 0,29.99999 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"
         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="m 45,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.74977946;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"
      <circle
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;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,31.362543,498.74687)" />
      <path
         sodipodi:type="arc"
         style="color:#000000;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;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"
         transform="matrix(0.54549827,0,0,0.54549827,31.362543,498.74687)"
         cx="25"
         cy="419.09448"
         r="9.1659365" />
      <circle
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;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 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,86.362543,498.74687)" />
         transform="matrix(0.54549827,0,0,0.54549827,86.362543,498.74687)"
         cx="25"
         cy="419.09448"
         r="9.1659365" />
    </g>
    <g
       transform="translate(230,170)"
       transform="translate(265.00001,98.00001)"
       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"
         style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         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.74977946;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"
      <circle
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;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 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,-83.637457,498.74688)" />
      <path
         sodipodi:type="arc"
         style="color:#000000;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;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"
         transform="matrix(0.54549827,0,0,0.54549827,-83.637457,498.74688)"
         cx="25"
         cy="419.09448"
         r="9.1659365" />
      <circle
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;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)" />
         transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)"
         cx="25"
         cy="419.09448"
         r="9.1659365" />
    </g>
    <text
       xml:space="preserve"
       style="font-size:16px;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="354.74399"
       y="839.23932"
       id="text13161-0"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan13163-0"
         x="354.74399"
         y="839.23932">The widget set definition</tspan></text>
    <text
       xml:space="preserve"
       style="font-size:16px;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="354.74399"
       y="656.86194"
       style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:16px;line-height:125%;font-family:'Helvetica LT Std';-inkscape-font-specification:'Helvetica LT Std Light';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
       x="389.74399"
       y="664.86194"
       id="text13161-0-4"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan13163-0-8"
         x="354.74399"
         y="656.86194">The theme</tspan></text>
         x="389.74399"
         y="664.86194">The application theme</tspan></text>
    <text
       xml:space="preserve"
       style="font-size:16px;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="353.75201"
       y="901.60632"
       style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-size:16px;line-height:125%;font-family:'Helvetica LT Std';-inkscape-font-specification:'Helvetica LT Std Light';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
       x="388.75201"
       y="829.60632"
       id="text13161-0-4-1"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan13163-0-8-3"
         x="353.75201"
         y="901.60632">Maven project configuration</tspan></text>
         x="388.75201"
         y="829.60632">Maven project configuration</tspan></text>
  </g>
 </svg>