Framework documentation IN

Change-Id: I767477c1fc3745f9e1f58075fe30c9ac8da63581

47 files changed, 2598 insertions, 0 deletions

diff --git a/documentation/getting-started/chapter-getting-started.asciidoc b/documentation/getting-started/chapter-getting-started.asciidoc
new file mode 100644
index 0000000000..9705f0a966
--- /dev/null
+++ b/documentation/getting-started/chapter-getting-started.asciidoc
@@ -0,0 +1,27 @@
+[[getting-started]]
+== Getting Started with Vaadin
+
+This chapter gives practical instructions for installing the recommended
+toolchain, the Vaadin libraries and its dependencies, and creating a new Vaadin
+project.
+
+
+include::getting-started-overview.asciidoc[leveloffset=+2]
+
+include::getting-started-environment.asciidoc[leveloffset=+2]
+
+include::getting-started-libraries.asciidoc[leveloffset=+2]
+
+include::getting-started-eclipse.asciidoc[leveloffset=+2]
+
+include::getting-started-first-project.asciidoc[leveloffset=+2]
+
+include::getting-started-maven.asciidoc[leveloffset=+2]
+
+include::getting-started-netbeans.asciidoc[leveloffset=+2]
+
+include::getting-started-idea.asciidoc[leveloffset=+2]
+
+include::getting-started-package.asciidoc[leveloffset=+2]
+
+include::getting-started-scala.asciidoc[leveloffset=+2]
diff --git a/documentation/getting-started/getting-started-eclipse.asciidoc b/documentation/getting-started/getting-started-eclipse.asciidoc
new file mode 100644
index 0000000000..a380701d6f
--- /dev/null
+++ b/documentation/getting-started/getting-started-eclipse.asciidoc
@@ -0,0 +1,120 @@
+---
+title: Vaadin Plugin for Eclipse
+order: 4
+layout: page
+---
+
+[[getting-started.eclipse]]
+= Vaadin Plugin for Eclipse
+
+If you are using the Eclipse IDE, using the Vaadin Plugin for Eclipse helps
+greatly. The plugin includes wizards for creating new Vaadin-based projects,
+themes, and client-side widgets and widget sets. Notice that you can also create
+Vaadin projects as Maven projects in Eclipse.
+
+[[getting-started.eclipse.vaadin-plugin]]
+== Installing the Vaadin Plugin
+
+You can install the plugin as follows:
+
+. Select "Help > Install New Software...".
+
+. Add the Vaadin plugin update site by clicking [guibutton]#Add...# button.
+
++
+image::img/plugin-install-addsite.png[]
+
++
+Enter a name such as "Vaadin Update Site" and the URL of the update site:
+http://vaadin.com/eclipse. If you want or need to use the latest unstable
+plugin, which is usually more compatible with development and beta releases of
+Vaadin, you can use http://vaadin.com/eclipse/experimental and give it a
+distinctive name such as "Vaadin Experimental Site". Then click [guibutton]#OK#.
+The Vaadin site should now appear in the [guilabel]#Available Software# window.
+
+. Currently, if using the stable plugin, the [guilabel]#Group items by category# should be enabled. If using the experimental plugin, it should be disabled. This may change in future.
+. Select all the Vaadin plugins in the tree.
+
++
+image::img/plugin-install-available.png[]
+
++
+Then, click [guibutton]#Next#.
+
+. Review the installation details and click [guibutton]#Next#.
+
+. Accept or unaccept the license. Finally, click [guibutton]#Finish#.
+
+. After the plugin is installed, Eclipse will ask to restart itself. Click
+[guibutton]#Restart#.
+
+
+More installation instructions for the Eclipse plugin can be found at
+http://vaadin.com/eclipse.
+
+
+[[getting-started.eclipse.update]]
+== Updating the Plugins
+
+If you have automatic updates enabled in Eclipse (see "Window > Preferences >
+Install/Update > Automatic Updates"), the Vaadin plugin will be updated
+automatically along with other plugins. Otherwise, you can update the Vaadin
+plugin manually as follows:
+
+. Select "Help > Check for Updates". Eclipse will contact the update sites of the
+installed software.
+
+. After the updates are installed, Eclipse will ask to restart itself. Click
+[guibutton]#Restart#.
+
+
+Notice that updating the Vaadin plugin updates only the plugin and __not__ the
+Vaadin libraries, which are project specific. See below for instructions for
+updating the libraries.
+
+
+[[getting-started.eclipse.libraryupdate]]
+== Updating the Vaadin Libraries
+
+Updating the Vaadin plugin does not update Vaadin libraries. The libraries are
+project specific, as a different version might be required for different
+projects, so you have to update them separately for each project.
+
+. Open the [filename]#ivy.xml# in an editor in Eclipse.
+
+. Edit the entity definition at the beginning of the file to set the Vaadin
+version.
+
+
++
+[subs="normal"]
+----
+<!ENTITY vaadin.version "**7.x.x**">
+----
++
+You can specify either a fixed version number, as shown in the above example, or
+a dynamic revision tag such as [literal]#++latest.release++#. You can find more
+information about the dependency declarations in Ivy documentation.
+
+. Right-click the project and select "Ivy > Resolve".
+
++
+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.
+
+. 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
+Directory, and restart it.
+
+
+If you experience problems after updating the libraries, you can try clearing
+the Ivy resolution caches by right-clicking the project and selecting "Ivy >
+Clean all caches". Then, do the "Ivy > Resolve" and other tasks again.
+
+
+
+
diff --git a/documentation/getting-started/getting-started-environment.asciidoc b/documentation/getting-started/getting-started-environment.asciidoc
new file mode 100644
index 0000000000..118742be38
--- /dev/null
+++ b/documentation/getting-started/getting-started-environment.asciidoc
@@ -0,0 +1,238 @@
+---
+title: Setting up the Development Environment
+order: 2
+layout: page
+---
+
+[[getting-started.environment]]
+= Setting up the Development Environment
+
+This section guides you step-by-step in setting up a reference development
+environment. Vaadin supports a wide variety of tools, so you can use any IDE for
+writing the code, almost any Java web server for deploying the application, most
+web browsers for using it, and any operating system platform supported by Java.
+
+In this example, we use the following toolchain:
+
+* Windows, Linux, or Mac OS X
+* link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[Oracle Java SE 8] (Java 6 or newer is required)
+* link:http://www.eclipse.org/downloads/[Eclipse IDE for Java EE Developers]
+* link:http://tomcat.apache.org/[Apache Tomcat 8.0 (Core)]
+* link:http://www.getfirefox.com/[Mozilla Firefox] browser
+* link:http://www.getfirebug.com/[Firebug] debug tool (optional)
+* link:http://vaadin.com/download/[Vaadin Framework]
+
+The above reference toolchain is a good choice of tools, but you can use almost
+any tools you are comfortable with.
+
+We recommend using Java 8 for Vaadin development, but you need to make sure that
+your entire toolchain supports it. A server supporting Servlet 3.0 is
+recommended. It is required for using Vaadin CDI, for which also a CDI container
+is required, a standard feature in Java EE 6 or newer servers. It is also
+required by the Vaadin Spring add-on. Server push can benefit from using
+communication modes, such as WebSocket, enabled by features in some latest
+servers. For Java EE containers, at least Wildfly, Glassfish, and Apache TomEE
+Web Profile are recommended.
+
+[[figure.toolchain]]
+.Development Toolchain and Process
+image::img/toolchain-hi.png[]
+
+<<figure.toolchain>> illustrates the development toolchain. You develop your
+application as an Eclipse project. The project must include, in addition to your
+source code, the Vaadin libraries. It can also include project-specific themes.
+
+You need to compile and deploy a project to a web container before you can use
+it. You can deploy a project through the Web Tools Platform (WTP) for Eclipse
+(included in the Eclipse EE package), which allows automatic deployment of web
+applications from Eclipse. You can also deploy a project manually, by creating a
+web application archive (WAR) and deploying it to the web container.
+
+[[getting-started.environment.java]]
+== Installing Java SDK
+
+Java SDK is required by Vaadin and also by the Eclipse IDE. Vaadin is compatible
+with Java 1.6 and later editions. Java EE 7 is required for proper server push
+support with WebSockets.
+
+[[getting-started.environment.java.windows]]
+=== Windows
+
+. Download Oracle Java SE 8.0 from
+link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[http://www.oracle.com/technetwork/java/javase/downloads/index.html]
+
+. Install the Java SDK by running the installer. The default options are fine.
+
+
+
+[[getting-started.environment.linux]]
+=== Linux / UNIX
+
+Most Linux systems either have JDK preinstalled or allow installing it through a
+package management system. Notice however that they have OpenJDK as the default
+Java implementation. While it is known to have worked with Vaadin and possibly
+also with the development toolchain, we do not especially support it.
+
+Regarding OS X, notice that JDK 1.6 or newer is included in OS X 10.6 and newer.
+
+Otherwise:
+
+. Download Oracle Java SE 8.0 from
+link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[http://www.oracle.com/technetwork/java/javase/downloads/]
+
+. Decompress it under a suitable base directory, such as [filename]#/opt#. For
+example, for Java SDK, enter (either as root or with [command]#sudo# in Linux):
+
+
++
+[subs="normal"]
+----
+[prompt]#+++#+++# [command]#cd# [replaceable]#/opt#
+[prompt]#+++#+++# [command]#sh# [replaceable]#(path-to-installation-package)/jdk-8u20-linux-x64.bin#
+----
++
+and follow the instructions in the installer.
+
+. Set up the [literal]#++JAVA_HOME++# environment variable to point to the Java
+installation directory. Also, include the [literal]#++$JAVA_HOME/bin++# in the
+[literal]#++PATH++#. How you do that varies by the UNIX variant. For example, in
+Linux and using the Bash shell, you would add lines such as the following to the
+[filename]#.bashrc# or [filename]#.profile# script in your home directory:
+
+
++
+----
+export JAVA_HOME=/opt/jdk1.8.0_20
+export PATH=$PATH:$HOME/bin:$JAVA_HOME/bin
+----
++
+You could also make the setting system-wide in a file such as
+[filename]#/etc/bash.bashrc#, [filename]#/etc/profile#, or an equivalent file.
+If you install Apache Ant or Maven, you may also want to set up those in the
+path.
+
++
+Settings done in a [filename]#bashrc# file require that you open a new shell
+window. Settings done in a [filename]#profile# file require that you log in into
+the system. You can, of course, also give the commands in the current shell.
+
+
+
+
+[[getting-started.environment.eclipse]]
+== Installing Eclipse IDE
+
+=== Windows
+
+. Download the Eclipse IDE for Java EE Developers from
+link:http://www.eclipse.org/downloads/[http://www.eclipse.org/downloads/]
+
+. Decompress the Eclipse IDE package to a suitable directory. You are free to
+select any directory and to use any ZIP decompressor, but in this example we
+decompress the ZIP file by just double-clicking it and selecting "Extract all
+files" task from Windows compressed folder task. In our installation example, we
+use [filename]#C:\dev# as the target directory.
+
+
+Eclipse is now installed in [filename]#C:\dev\eclipse# and can be started from
+there (by double clicking eclipse.exe).
+
+
+=== Linux / OS X / UNIX
+
+We recommend that you install Eclipse manually in Linux and other UNIX variants
+as follows.
+
+. Download Eclipse IDE for Java EE Developers from
+link:http://www.eclipse.org/downloads/[http://www.eclipse.org/downloads/]
+
+. Decompress the Eclipse package into a suitable base directory. It is important
+to make sure that there is no old Eclipse installation in the target directory.
+Installing a new version on top of an old one probably renders Eclipse unusable.
+
+. Eclipse should normally be installed as a regular user, as this makes
+installation of plugins easier. Eclipse also stores some user settings in the
+installation directory. To install the package, enter:
+
+
++
+[subs="normal"]
+----
+[prompt]#$# [command]#tar# zxf [replaceable]#(path-to-installation-package)/eclipse-jee-ganymede-SR2-linux-gtk.tar.gz#
+----
++
+This will extract the package to a subdirectory with the name
+[filename]#eclipse#.
+
+. If you wish to enable starting Eclipse from command-line, you need to add the
+Eclipse installation directory to your system or user PATH, or make a symbolic
+link or script to point to the executable.
+
+
+An alternative to the above procedure would be to use an Eclipse version
+available through the package management system of your operating system. It is,
+however, __not recommended__, because you will need write access to the Eclipse
+installation directory to install Eclipse plugins, and you may face
+incompatibility issues with Eclipse plugins installed by the package management
+of the operating system.
+
+
+
+[[getting-started.environment.tomcat]]
+== Installing Apache Tomcat
+
+Apache Tomcat is a lightweight Java web server suitable for both development and
+production. There are many ways to install it, but here we simply decompress the
+installation package.
+
+__Apache Tomcat should be installed with user permissions.__ During development,
+you will be running Eclipse or some other IDE with user permissions, but
+deploying web applications to a Tomcat server that is installed system-wide
+requires administrator or root permissions.
+
+. Download the installation package:
+
++
+Apache Tomcat 8.0 (Core Binary Distribution) from http://tomcat.apache.org/
+
+. Decompress Apache Tomcat package to a suitable target directory, such as
+[filename]#C:\dev# (Windows) or [filename]#/opt# (Linux or Mac OS X). The Apache
+Tomcat home directory will be [filename]#C:\dev\apache-tomcat-8.0.x# or
+[filename]#/opt/apache-tomcat-8.0.x#, respectively.
+
+
+
+[[getting-started.environment.firefox]]
+== Firefox and Firebug
+
+Vaadin supports many web browsers and you can use any of them for development.
+If you plan to create a custom theme, customized layouts, or create new
+components, we recommend that you use either Firefox together with Firebug or
+Google Chrome, which has built-in developer tools similar to Firebug.
+
+[[getting-started.environment.firefox.firebug]]
+=== Using Firebug with Vaadin
+
+After installing Firefox, use it to open
+link:http://www.getfirebug.com/[http://www.getfirebug.com/]. Follow the
+instructions on the site to install the latest stable version of Firebug
+available for the browser. You may need to allow Firefox to install the plugin
+by clicking the yellow warning bar at the top of the browser window.
+
+After Firebug is installed, it can be enabled at any time from the Firefox
+toolbar. <<figure.firebug.calc>> shows Firebug in action.
+
+[[figure.firebug.calc]]
+.Firebug Debugger for Firefox
+image::img/firebug.png[]
+
+The most important feature in Firebug is inspecting HTML elements. Right-click
+on an element and select [guilabel]#Inspect Element with Firebug# to inspect it.
+In addition to HTML tree, it also shows the CSS rules matching the element,
+which you can use for building themes. You can even edit the CSS styles live, to
+experiment with styling.
+
+
+
+
+
diff --git a/documentation/getting-started/getting-started-first-project.asciidoc b/documentation/getting-started/getting-started-first-project.asciidoc
new file mode 100644
index 0000000000..318279924b
--- /dev/null
+++ b/documentation/getting-started/getting-started-first-project.asciidoc
@@ -0,0 +1,327 @@
+---
+title: Creating and Running a Project with Eclipse
+order: 5
+layout: page
+---
+
+[[getting-started.first-project]]
+= Creating and Running a Project with Eclipse
+
+This section gives instructions for creating a new Eclipse project using the
+Vaadin Plugin. The task will include the following steps:
+
+. Create a new project
+
+. Write the source code
+
+. Configure and start Tomcat (or some other web server)
+
+. Open a web browser to use the web application
+
+
+We also show how you can debug the application in the debug mode in Eclipse.
+
+This walkthrough assumes that you have already installed the Vaadin Plugin for
+Eclipse and set up your development environment, as instructed in
+<<dummy/../../../framework/getting-started/getting-started-environment#getting-started.environment,"Setting
+up the Development Environment">>.
+
+[[getting-started.first-project.creation]]
+== Creating the Project
+
+Let us create the first application project with the tools installed in the
+previous section. First, launch Eclipse and follow the following steps:
+
+. Start creating a new project by selecting from the menu "File > New > Project...".
+. In the [guilabel]#New Project# window that opens, select "Vaadin > Vaadin 7
+Project" and click [guibutton]#Next#.
+
++
+image::img/myproject-new-vaadin.png[]
+
+. In the [guilabel]#Vaadin Project# step, you need to set the basic web project
+settings. You need to give at least the __project name__ and the runtime; the
+default values should be good for the other settings.
+
++
+image::img/myproject-settings.png[]
+
+[guilabel]#Project name#:: Give the project a name. The name should be a valid identifier usable
+cross-platform as a filename and inside a URL, so using only lower-case
+alphanumerics, underscore, and minus sign is recommended.
+
+[guilabel]#Use default location#:: Define the directory under which the project is created. The default is under
+your workspace folder, and you should normally leave it as it is. You may need
+to set the directory, for example, if you are creating an Eclipse project on top
+of a version-controlled source tree.
+
+[guilabel]#Target runtime#:: Define the application server to use for deploying the application. The server
+that you have installed, for example Apache Tomcat, should be selected
+automatically. If not, click [guibutton]#New# to configure a new server under
+Eclipse.
+
+[guilabel]#Configuration#:: Select the configuration to use; you should normally use the default
+configuration for the application server. If you need to modify the project
+facets, click [guibutton]#Modify#. The recommended Servlet 3.0 configuration
+uses the @WebServlet deployment, while Servlet 2.4 uses the old
+[filename]#web.xml# deployment.
+
+[guilabel]#Deployment configuration#:: This setting defines the environment to which the application will be deployed,
+to generate the appropriate project directory layout and configuration files.
+The choises are:
+
+*** [guilabel]#Servlet# (default)
+*** [guilabel]#Google App Engine Servlet#
+*** [guilabel]#Generic Portlet (Portlet 2.0)#
+
++
+The further steps in the New Project Wizard depend on the selected deployment
+configuration; the steps listed in this section are for the default servlet
+configuration.
+ifdef::web[]
+See <<dummy/../../../framework/advanced/advanced-gae#advanced.gae,"Google App
+Engine Integration">> and
+<<dummy/../../../framework/portal/portal-overview.asciidoc#portal.overview,"Portal
+Integration">> for instructions regarding the use of Vaadin in the alternative
+environments.
+endif::web[]
+
+[guilabel]#Vaadin version#:: Select the Vaadin version to use. The drop-down list shows, by default, the
+latest available version of Vaadin. The selection includes nightly
+[literal]#++SNAPSHOT++# builds, if you want to keep up with the absolutely
+latest unstable versions.
+
++
+You can change the version later in the [filename]#ivy.xml#.
+
+[guilabel]#Create TestBench test#:: When enabled, the application stub will include a test case for testing the UI
+with Vaadin TestBench, as described in
+<<dummy/../../../testbench/testbench-overview.asciidoc#testbench.overview,"Vaadin
+TestBench">>. Vaadin TestBench API library will be included in
+[filename]#ivy.xml# as a dependency. Vaadin version 7.3 or later is required to
+create the stub.
+
+
+
++
+You can click [guibutton]#Finish# here to use the defaults for the rest of the
+settings, or click [guibutton]#Next#.
+
+. The settings in the [guilabel]#Web Module# step define the basic web application
+(WAR) deployment settings and the structure of the web application project. All
+the settings are pre-filled, and you should normally accept them as they are.
+
++
+image::img/myproject-web.png[]
+
+[guilabel]#Context Root#:: The context root (of the application) identifies the application in the URL used
+for accessing it. For example, if the project has a [literal]#++myproject++#
+context and a single UI at the context root, the URL would be
+http://example.com/myproject. The wizard will suggest the project name given in
+the first step as the context name. You can change the context root later in the
+Eclipse project properties.
+
+[guilabel]#Content Directory#:: The directory containing all the content to be included in the web application
+(WAR) that is deployed to the web server. The directory is relative to the root
+directory of the project.
+
+
+
++
+You can just accept the defaults and click [guibutton]#Next#.
+
+. The [guilabel]#Vaadin project# step page has various Vaadin-specific application
+settings. If you are trying out Vaadin for the first time, you should not need
+to change anything. You can set most of the settings afterwards, except the
+creation of the portlet configuration.
+
++
+image::img/myproject-vaadin.png[]
+
+[guilabel]#Create project template#:: Make the wizard create an UI class stub.
+
+[guilabel]#Application Name#:: A name for the application UI, shown in the title bar of the browser window.
+
+[guilabel]#Base package name#:: The name of the Java package under which the UI class of the application is to
+be placed.
+
+[guilabel]#Application/UI class name#:: The name of the UI class for the application, in which the user interface is
+developed.
+
+[guilabel]#Portlet version#:: When a portlet version is selected (only Portlet 2.0 is supported), the wizard
+will create the files needed for running the application in a portal. See
+<<dummy/../../../framework/portal/portal-overview.asciidoc#portal.overview,"Portal
+Integration">> for more information on portlets.
+
+
+
++
+Finally, click [guibutton]#Finish# to create the project.
+
+
+
+[[getting-started.first-project.exploring]]
+== Exploring the Project
+
+After the [guilabel]#New Project# wizard exits, it has done all the work for
+you: an UI class skeleton has been written to [filename]#src# directory and the
+[filename]#WebContent/WEB-INF/web.xml# contains a deployment descriptor. The
+project hierarchy shown in the Project Explorer is shown in
+<<figure.getting-started.first-project.exploring>>.
+
+[[figure.getting-started.first-project.exploring]]
+.A New Vaadin Project
+image::img/myproject-created.png[]
+
+The Vaadin libraries and other dependencies are managed by Ivy. Notice that the
+libraries are not stored under the project folder, even though they are listed
+in the "Java Resources > Libraries > ivy.xml" virtual folder.
+
+[[getting-started.first-project.exploring.ui]]
+=== The UI Class
+
+The UI class created by the plugin contains the following code:
+
+
+[source, java]
+----
+package com.example.myproject;
+
+import com.vaadin.ui.UI;
+...
+
+@SuppressWarnings("serial")
+@Theme("myproject")
+public class MyprojectUI extends UI {
+
+    @WebServlet(value = "/*", asyncSupported = true)
+    @VaadinServletConfiguration(
+            productionMode = false,
+            ui = MyprojectUI.class)
+    public static class Servlet extends VaadinServlet {
+    }
+
+    @Override
+    protected void init(VaadinRequest request) {
+        final VerticalLayout layout = new VerticalLayout();
+        layout.setMargin(true);
+        setContent(layout);
+
+        Button button = new Button("Click Me");
+        button.addClickListener(new Button.ClickListener() {
+            public void buttonClick(ClickEvent event) {
+                layout.addComponent(
+                    new Label("Thank you for clicking"));
+            }
+        });
+        layout.addComponent(button);
+    }
+}
+----
+
+In a Servlet 3.0 project, the deployment is configured with servlet class and a
+[literal]#++@WebServlet++# annotation. The stub includes the servlet class as a
+static inner class. You may want to refactor it to a separate normal class.
+
+In a Servlet 2.3 project, you would have a [filename]#web.xml# deployment
+descriptor.
+
+For a more detailed treatment of the deployment, see
+<<dummy/../../../framework/application/application-environment#application.environment.web-xml,"Using
+a web.xml Deployment Descriptor">>.
+
+
+
+[[getting-started.first-project.coding]]
+== Coding Tips for Eclipse
+
+One of the most useful features in Eclipse is __code completion__. Pressing
+CtrlSpace in the editor will display a popup list of possible class name and
+method name completions, as shown in
+<<figure.getting-started.first-project.coding.codecompletion>>, depending on the
+context of the cursor position.
+
+[[figure.getting-started.first-project.coding.codecompletion]]
+.Java Code Completion in Eclipse
+image::img/codingtips-codecompletion.png[]
+
+To add an [literal]#++import++# statement for a class, such as
+[classname]#Button#, simply press CtrlShiftO or click the red error indicator on
+the left side of the editor window. If the class is available in multiple
+packages, a list of the alternatives is displayed, as shown in
+<<figure.getting-started.first-project.coding.import>>. For server-side
+development, you should normally use the classes under the
+[package]#com.vaadin.ui# or [package]#com.vaadin.server# packages. You can not
+use client-side classes (under [package]#com.vaadin.client#) or GWT classes for
+server-side development.
+
+[[figure.getting-started.first-project.coding.import]]
+.Importing Classes Automatically
+image::img/codingtips-automaticimports.png[]
+
+
+[[getting-started.first-project.server]]
+== Setting Up and Starting the Web Server
+
+Eclipse IDE for Java EE Developers has the Web Standard Tools package installed,
+which supports control of various web servers and automatic deployment of web
+content to the server when changes are made to a project.
+
+Make sure that Tomcat was installed with user permissions. Configuration of the
+web server in Eclipse will fail if the user does not have write permissions to
+the configuration and deployment directories under the Tomcat installation
+directory.
+
+Follow the following steps.
+
+. Switch to the Servers tab in the lower panel in Eclipse. List of servers should be empty after Eclipse is installed. Right-click on the empty area in the panel and select "New > Server". +
+image::img/tomcat-startserver-1.png[]
+
+
+. Select "Apache > Tomcat v7.0 Server" and set [guilabel]#Server's host name# as [literal]#++localhost++#, which should be the default. If you have only one Tomcat installed, [guilabel]#Server runtime# has only one choice. Click [guibutton]#Next#. +
+image::img/tomcat-startserver-2.png[]
+
+
+. Add your project to the server by selecting it on the left and clicking [guibutton]#Add# to add it to the configured projects on the right. Click [guibutton]#Finish#. +
+image::img/tomcat-startserver-3.png[]
+
+
+. The server and the project are now installed in Eclipse and are shown in the [guilabel]#Servers# tab. To start the server, right-click on the server and select Debug. To start the server in non-debug mode, select Start. +
+image::img/tomcat-startserver-4.png[]
+
+
+. The server starts and the WebContent directory of the project is published to the server on http://localhost:8080/myproject/. +
+image::img/tomcat-startserver-5.png[]
+
+
+
+
+[[getting-started.first-project.run]]
+== Running and Debugging
+
+Starting your application is as easy as selecting [guilabel]#myproject# from the
+[guilabel]#Project Explorer# and then "Run > Debug As > Debug on Server".
+Eclipse then opens the application in built-in web browser.
+
+.Running a Vaadin Application
+image::img/runningMyProject.png[]
+
+You can insert break points in the Java code by double-clicking on the left
+margin bar of the source code window. For example, if you insert a breakpoint in
+the [methodname]#buttonClick()# method and click the [guibutton]#What is the
+time?# button, Eclipse will ask to switch to the Debug perspective. Debug
+perspective will show where the execution stopped at the breakpoint. You can
+examine and change the state of the application. To continue execution, select
+Resume from Run menu.
+
+.Debugging a Vaadin Application
+image::img/debuggingMyProject.png[]
+
+Above, we described how to debug a server-side application. Debugging
+client-side applications and widgets is described in
+<<dummy/../../../framework/clientside/clientside-debugging#clientside.debugging,"Debugging
+Client-Side Code">>.
+
+
+
+
diff --git a/documentation/getting-started/getting-started-idea.asciidoc b/documentation/getting-started/getting-started-idea.asciidoc
new file mode 100644
index 0000000000..4461d80656
--- /dev/null
+++ b/documentation/getting-started/getting-started-idea.asciidoc
@@ -0,0 +1,260 @@
+---
+title: Creating a Project with IntelliJ IDEA
+order: 8
+layout: page
+---
+
+[[getting-started.idea]]
+= Creating a Project with IntelliJ IDEA
+
+The Ultimate Edition of IntelliJ IDEA includes support for creating Vaadin
+applications and running or debugging them in an integrated application server.
+With the Community Edition, you can create a Vaadin application most easily with
+a Maven archetype and deploy it to a server with a Maven run/debug
+configuration.
+
+ifdef::web[]
+For more information, see the article "
+link:http://wiki.jetbrains.net/intellij/Creating_a_simple_Web_application_and_deploying_it_to_Tomcat[Creating
+a simple Web application and deploying it to Tomcat]" in the IntelliJ IDEA
+Encyclopedia wiki.
+endif::web[]
+
+[[getting-started.idea.server]]
+== Configuring an Application Server
+
+To run the application during development in the Ultimate Edition of IntelliJ
+IDEA, you first need to install and configure an application server that is
+integrated with the IDE. The edition includes integration with many commonly
+used application servers.
+
+In the following, we configure Apache Tomcat:
+
+. Download and extract Tomcat installation package to a local directory, as
+instructed in
+<<dummy/../../../framework/getting-started/getting-started-environment#getting-started.environment.tomcat,"Installing
+Apache Tomcat">>.
+
+. Select "Configure > Settings".
+
+. Select "IDE Settings > Application Servers".
+
+. Select "+ > Tomcat Server" to add a Tomcat server, or any of the other supported
+servers. A WebSocket-enabled server, such as Glassfish or TomEE, is required for
+server push.
+
+. In the Tomcat Server dialog, specify the home directory for the server.
+
++
+image::img/idea-server-1.png[]
+
++
+Click [guibutton]#OK#.
+
+. Review the application server settings page to check that it is OK.
+
++
+image::img/idea-server-2.png[]
+
++
+Then, click [guibutton]#OK#.
+
+
+
+[[getting-started.idea.project]]
+== Creating a Vaadin Web Application Project
+
+In the welcome page, do the following:
+
+. Download and exctract the Vaadin installation package to a local folder, as
+instructed in
+<<dummy/../../../framework/getting-started/getting-started-package#getting-started.package,"Vaadin
+Installation Package">>.
+
+. Select [menuchoice]#New Project#
+
+. In the [guilabel]#New Project# window, select [menuchoice]#Java#
+
+. Enter a [guilabel]#Project name# and [guilabel]#Project location#, and select
+the [guilabel]#Java SDK# to be used for the project. Vaadin requires at least
+Java 6. If you have not configured a Java SDK previously, you can configure it
+here.
+
++
+image::img/idea-newproject-1.png[]
+
++
+Click [guibutton]#Next#.
+
+. Select "Web Application > Vaadin" to add Vaadin technology to the project.
+
+. Select Vaadin [guilabel]#Version# and [guilabel]#Distribution# installation
+path. You probably also want an application stub, so select [guilabel]#Create
+sample application# and give a name for the generated UI class.
+
++
+image::img/idea-newproject-2.png[]
+
++
+Do __not__ click [guibutton]#Finish# yet.
+
+. Select [guilabel]#Application Server# in the same window. Set it as an
+integrated server that you have configured in IntelliJ IDEA, as described
+previously in <<getting-started.idea.server>>.
+
+ifdef::web[]
++
+image::img/idea-newproject-3.png[]
+endif::web[]
+
+. Click [guibutton]#Finish#.
+
+
+The project is created with the UI class stub and a [filename]#web.xml#
+deployment descriptor.
+
+image::img/idea-newproject-4.png[]
+
+The wizard does not currently create a servlet class automatically, and uses
+Servlet 2.4 compatible deployment with a [filename]#web.xml# deployment
+descriptor.
+
+[[getting-started.idea.project.running]]
+=== Deploying the Project
+
+To deploy the application to the integrated web server, right-click the
+[filename]#index.jsp# file in the project and select [menuchoice]#Run
+'index.jsp'#. This starts the integrated server, if it was not already running,
+and launches the default browser with the application page.
+
+
+
+[[getting-started.idea.maven]]
+== Creating a Maven Project
+
+You can choose to create a Maven project in IntelliJ IDEA. This is the
+recommended way when using the Community Edition. You will not have the
+application server integration, but can deploy the application to an application
+server using a run/debug configuration.
+
+. Select [menuchoice]#New Project#
+
+. In the [guilabel]#New Project# window, select [menuchoice]#Maven#
+
+//&lt;?dbfo-need height="8cm" ?&gt;
+. Enter a project name, location, and the Java SDK to be used for the project.
+Vaadin requires at least Java 6. Click [guibutton]#Next#.
+
++
+image::img/idea-maven-newproject-1.png[]
+
+//&lt;?dbfo-need height="6cm" ?&gt;
+. Give a Maven [guilabel]#GroupID#, [guilabel]#ArtifactID#, and a
+[guilabel]#Version# for the project, or use the defaults.
+
++
+image::img/idea-maven-newproject-2.png[]
+
+. Check [guilabel]#Create from archetype#
+
+//&lt;?dbfo-need height="6cm" ?&gt;
+. If the Vaadin archetype is not in the list, click [guibutton]#Add archetype#,
+enter [guilabel]#GroupId# [literal]#++com.vaadin++#, [guilabel]#ArtifactId#
+[literal]#++vaadin-archetype-application++#, and [guilabel]#Version#
+[literal]#++LATEST++# (or a specific version number).
+
+ifdef::web[]
++
+image::img/idea-maven-newproject-3.png[]
+endif::web[]
+
++
+Click [guibutton]#OK# in the dialog.
+
+//&lt;?dbfo-need height="8cm" ?&gt;
+. Select the [literal]#++com.vaadin:vaadin-archetype-application++#.
+
+ifdef::web[]
++
+image::img/idea-maven-newproject-4.png[]
+endif::web[]
+
++
+Click [guibutton]#Next#.
+
+//&lt;?dbfo-need height="8cm" ?&gt;
+. Review the general Maven settings and settings for the new project. You may need
+to override the settings, especially if you are creating a Maven project for the
+first time. Click [guibutton]#Finish#.
+
+ifdef::web[]
++
+image::img/idea-maven-newproject-5.png[]
+endif::web[]
+
+
+Creating the Maven project takes some time as Maven fetches the dependencies.
+Once done, the project is created and the Maven POM is opened in the editor.
+
+[[getting-started.idea.maven.compiling]]
+=== Compiling the Project
+
+To compile a Vaadin application using Maven, you can define a run/debug
+configuration to execute a goal such as [literal]#++package++# to build the
+deployable WAR package. It will also compile the widget set and theme, if
+necessary. See
+<<dummy/../../../framework/getting-started/getting-started-maven#getting-started.maven.compiling,"Compiling
+and Running the Application">> for more details.
+
+Compilation is included in the following instructions for deploying the
+application.
+
+
+[[getting-started.idea.maven.deploying]]
+=== Deploying to a Server
+
+There exists Maven plugins for deploying to various application servers. For
+example, to deploy to Apache Tomcat, you can to configure the
+[literal]#++tomcat-maven-plugin++# and then execute the
+[literal]#++tomcat:deploy++# goal. See the documentation of the plugin that you
+use for more details. If no Maven plugin exists for a particular server, you can
+always use some lower-level method to deploy the application, such as running an
+Ant task.
+
+In the following, we create a run/debug configuration to build, deploy, and
+launch a Vaadin Maven application on the light-weight Jetty web server.
+
+. Select "Run > Edit Configurations".
+
+. Select "+ > Maven" to create a new Maven run/debug configuration.
+
+. Enter a [guilabel]#Name# for the run configuration. For the [guilabel]#Command
+line#, enter " [literal]#++package jetty:run++# to first compile and package the
+project, and then launch Jetty to run it.
+
+ifdef::web[]
++
+image::img/idea-maven-run-1.png[]
+endif::web[]
+
++
+Click [guibutton]#OK#.
+
+. Select the run configuration in the toolbar and click the [guibutton]#Run#
+button beside it.
+
+ifdef::web[]
++
+image::img/idea-maven-run-2.png[]
+endif::web[]
+
+
+Compiling the project takes some time on the first time, as it compiles the
+widget set and theme. Once the run console pane informs that Jetty Server has
+been started, you can open the browser at the default URL
+http://localhost:8080/.
+
+
+
+
+
diff --git a/documentation/getting-started/getting-started-libraries.asciidoc b/documentation/getting-started/getting-started-libraries.asciidoc
new file mode 100644
index 0000000000..013a4f445c
--- /dev/null
+++ b/documentation/getting-started/getting-started-libraries.asciidoc
@@ -0,0 +1,75 @@
+---
+title: Overview of Vaadin Libraries
+order: 3
+layout: page
+---
+
+[[getting-started.libraries]]
+= Overview of Vaadin Libraries
+
+Vaadin comes as a set of library JARs, of which some are optional or alternative
+ones, depending on whether you are developing server-side or client-side
+applications, whether you use add-on components, or use CSS or Sass themes.
+
+[filename]#vaadin-server-7.x.x.jar#:: The main library for developing server-side Vaadin applications, as described in
+<<dummy/../../../framework/application/application-overview.asciidoc#application.overview,"Writing
+a Server-Side Web Application">>. It requires the [filename]#vaadin-shared# and
+the [filename]#vaadin-themes# libraries. You can use the prebuilt
+[filename]#vaadin-client-compiled# for server-side development, unless you need
+add-on components or custom widgets.
+
+[filename]#vaadin-shared-7.x.x.jar#:: A shared library for server-side and client-side development. It is always
+needed.
+
+[filename]#vaadin-client-7.x.x.jar#:: The client-side Vaadin framework, including the basic GWT API and
+Vaadin-specific widgets and other additions. It is required when using the
+[filename]#vaadin-client-compiler# to compile client-side modules. It is not
+needed if you just use the server-side framework with the precompiled
+Client-Side Engine. You should not deploy it with a web application.
+
+[filename]#vaadin-client-compiler-7.x.x.jar#:: The Vaadin Client Compiler is a Java-to-JavaScript compiler that allows building
+client-side modules, such as the Client-Side Engine (widget set) required for
+server-side applications. The compiler is needed, for example, for compiling
+add-on components to the application widget set, as described in
+<<dummy/../../../framework/addons/addons-overview.asciidoc#addons.overview,"Using
+Vaadin Add-ons">>.
++
+//TODO There's a need for such
+section.
+For detailed information regarding the compiler, see
+<<dummy/../../../framework/clientside/clientside-compiling#clientside.compiling,"Compiling
+a Client-Side Module">>. Note that you should not deploy this library with a web
+application.
+
+[filename]#vaadin-client-compiled-7.x.x.jar#:: A precompiled Vaadin Client-Side Engine (widget set) that includes all the basic
+built-in widgets in Vaadin. This library is not needed if you compile the
+application widget set with the Vaadin Client Compiler.
+
+[filename]#vaadin-themes-7.x.x.jar#:: Vaadin built-in themes both as SCSS source files and precompiled CSS files. The
+library is required both for basic use with CSS themes and for compiling custom
+Sass themes.
+
+[filename]#vaadin-sass-compiler-1.x.x.jar#:: The Vaadin Sass Compiler compiles Sass themes to CSS, as described in
+<<dummy/../../../framework/themes/themes-sass#themes.sass,"Syntactically Awesome
+Stylesheets (Sass)">>. It requires the [filename]#vaadin-themes-7.x.x.jar#
+library, which contains the Sass sources for the built-in themes. The library
+needs to be included in deployment in development mode to allow on-the-fly
+compilation of themes, but it is not needed in production deployment, when the
+themes are compiled before deployment.
+
+
+
+Some of the libraries depend on each other as well as on the dependency
+libraries provided in the [filename]#lib# folder of the installation package,
+especially the [filename]#lib/vaadin-shared-deps.jar#.
+
+The different ways to install the libraries are described in the subsequent
+sections.
+
+Note that the [filename]#vaadin-client-compiler# and [filename]#vaadin-client#
+JARs should not be deployed with the web application by including them in
+[filename]#WEB-INF/lib#. Some other libraries, such as
+[filename]#vaadin-sass-compiler#, are not needed in production deployment.
+
+
+
diff --git a/documentation/getting-started/getting-started-maven.asciidoc b/documentation/getting-started/getting-started-maven.asciidoc
new file mode 100644
index 0000000000..3914e973aa
--- /dev/null
+++ b/documentation/getting-started/getting-started-maven.asciidoc
@@ -0,0 +1,133 @@
+---
+title: Using Vaadin with Maven
+order: 6
+layout: page
+---
+
+[[getting-started.maven]]
+= Using Vaadin with Maven
+
+((("Maven", "creating a project", id="term.maven.creating", range="startofrange")))
+
+
+Maven is a commonly used build and dependency management system. The Vaadin core
+library and all Vaadin add-ons are available through Maven. You can use a Maven
+with a front-end from Eclipse or NetBeans, or by using the command-line as
+described in this section.
+
+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
+link:https://github.com/johndevs/gradle-vaadin-plugin[Gradle Vaadin Plugin].
+Vaadin Plugin for Eclipse uses Ivy for resolving dependencies in Vaadin
+projects, and it should provide you with the basic Ivy configuration.
+
+[[getting-started.maven.command-line]]
+== Working from Command-Line
+
+You can create a new Maven project with the following command (given in one
+line):
+
+[subs="normal"]
+----
+[prompt]#$# [command]#mvn# archetype:generate \
+   -DarchetypeGroupId=com.vaadin \
+   -DarchetypeArtifactId=[parameter]#vaadin-archetype-application# \
+   -DarchetypeVersion=[replaceable]#7.x.x# \
+   -DgroupId=[replaceable]#your.company# \
+   -DartifactId=[replaceable]#project-name# \
+   -Dversion=[replaceable]#0.1# \
+   -Dpackaging=war
+----
+The parameters are as follows:
+
+[parameter]#archetypeGroupId#:: The group ID of the archetype is [literal]#++com.vaadin++# for Vaadin
+archetypes.
+
+[parameter]#archetypeArtifactId#:: The archetype ID. Vaadin 7 currently supports
+[literal]#++vaadin-archetype-application++# archetype for server-side
+applications and [literal]#++vaadin-archetype-widget++# for client-side widget
+development projects.
+
++
+//TODO Vaadin 7: Not all these archetypes are supported
++
+////
+&lt;itemizedlist&gt; &lt;listitem&gt; &lt;literal&gt;vaadin-archetype-clean&lt;/literal&gt; is a new project with a barebone skeleton for a regular Vaadin application. The &lt;filename&gt;pom.xml&lt;/filename&gt; includes out-commented definitions for additional widgets. &lt;/listitem&gt; &lt;/itemizedlist&gt; &lt;itemizedlist&gt; &lt;listitem&gt; &lt;literal&gt;vaadin-archetype-widget&lt;/literal&gt; is a skeleton for a project with custom widgets. &lt;/listitem&gt; &lt;/itemizedlist&gt; &lt;itemizedlist&gt; &lt;listitem&gt; &lt;literal&gt;vaadin-archetype-sample&lt;/literal&gt; is also for a project with custom widgets, but the skeleton includes the Color Picker example used in &lt;xref linkend="gwt"/&gt;. &lt;/listitem&gt; &lt;/itemizedlist&gt; &lt;itemizedlist&gt; &lt;listitem&gt; &lt;literal&gt;vaadin-archetype-addon&lt;/literal&gt; is for Vaadin add-on projects. It packages the add-on so that it can be published in Vaadin Directory. The archetype is for server-side add-ons and does not include definitions needed for building a widget set. If your add-on includes or requires other than the widgets in the Vaadin core library, you need to copy the required definitions from a POM of a &lt;literal&gt;vaadin-archetype-clean&lt;/literal&gt; project. &lt;/listitem&gt; &lt;/itemizedlist&gt; &lt;itemizedlist&gt; &lt;listitem&gt; &lt;literal&gt;vaadin-archetype-touchkit&lt;/literal&gt; is for projects using Vaadin TouchKit, described in &lt;xref linkend="mobile"/&gt;. Notice that this archetype uses the AGPL-licensed version of TouchKit, which requires that your project must also be licensed under the AGPL license. &lt;/listitem&gt; &lt;/itemizedlist&gt;
+////
+[parameter]#archetypeVersion#:: Version of the archetype to use. This should be [literal]#++LATEST++# for normal
+Vaadin releases. For prerelease versions it should be the exact version number,
+such as [literal]#++7.5.3++#.
+
+[parameter]#groupId#:: A Maven group ID for your project. It is normally your organization domain name
+in reverse order, such as com.example. The group ID is also used as a prefix for
+the Java package in the sources, so it should be Java compatible - only
+alphanumerics and an underscore.
+
+[parameter]#artifactId#:: Identifier of the artifact, that is, your project. The identifier may contain
+alphanumerics, minus, and underscore. It is appended to the group ID to obtain
+the Java package name for the sources. For example, if the group ID is
+com.example and artifact ID is myproject, the project sources would be placed in
+com.example.myproject package.
+
+[parameter]#version#:: Initial version number of your application. The number must obey the Maven
+version numbering format.
+
+[parameter]#packaging#:: How will the project be packaged. It is normally [literal]#++war++#.
+
+
+
+Creating a project can take a while as Maven fetches all the dependencies. The
+created project structure is shown in
+<<figure.getting-started.maven.archetype.created>>.
+
+[[figure.getting-started.maven.archetype.created]]
+.A New Vaadin Project with Maven
+image::img/maven-project-created.png[]
+
+
+[[getting-started.maven.compiling]]
+== Compiling and Running the Application
+
+((("Maven", "compiling", id="term.maven.compiling", range="startofrange")))
+
+
+Before the application can be deployed, it must be compiled and packaged as a
+WAR package. You can do this with the [literal]#++package++# goal as follows:
+
+[subs="normal"]
+----
+[prompt]#$# [command]#mvn# package
+----
+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:
+
+[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.
+
+(((range="endofrange", startref="term.maven.compiling")))
+
+[[getting-started.maven.addons]]
+== Using Add-ons and Custom Widget Sets
+
+((("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
+Maven Project">>.
+
+
+(((range="endofrange", startref="term.maven.addons")))
+(((range="endofrange", startref="term.maven.creating")))
+
+
diff --git a/documentation/getting-started/getting-started-netbeans.asciidoc b/documentation/getting-started/getting-started-netbeans.asciidoc
new file mode 100644
index 0000000000..6e2fa660de
--- /dev/null
+++ b/documentation/getting-started/getting-started-netbeans.asciidoc
@@ -0,0 +1,61 @@
+---
+title: Creating a Project with NetBeans IDE
+order: 7
+layout: page
+---
+
+[[getting-started.netbeans]]
+= Creating a Project with NetBeans IDE
+
+The easiest way to develop Vaadin application with the NetBeans IDE is to use
+the Vaadin Plugin for NetBeans. It allows you to create new Vaadin projects
+easily and provides many features for working on a project. You can download the
+plugin at http://plugins.netbeans.org/plugin/50531/vaadin-plug-in-for-netbeans.
+The download page contains a link to a plugin features overview in NetBeans
+Wiki.
+
+Without the plugin, you can most easily create a Vaadin project as a Maven
+project using a Vaadin archetype. You can also create a Vaadin project as a
+regular web application project, but it requires many manual steps to install
+all the Vaadin libraries, create the UI class, configure the servlet, create
+theme, and so on.
+
+[[getting-started.netbeans.maven]]
+== Maven Project from a Vaadin Archetype
+
+Creating a Maven project with a Vaadin archetype creates an application skeleton
+with a UI class and project theme, defines the [filename]#web.xml# deployment
+descriptor, and also retrieves the latest Vaadin library automatically.
+
+. Select "File > New Project".
+
+. Select "Maven > Project from Archetype" and click [guibutton]#Next#.
+
+. Find [literal]#++vaadin-archetype-application++#, select it, and click
+[guilabel]#Next#.
+
+. In the [guilabel]#Name and Location# step, enter [guilabel]#Project Name#, which
+is recommended to be only lower-case alphabetics, as it is used also as a
+suggestion for the Java package name of the project. Modify the other parameters
+for your project and click [guibutton]#Finish#.
+
++
+[[figure.getting-started.netbeans.maven.new-project]]
+.Adding a New Maven Project in NetBeans
+image::img/netbeans-maven-newproject-name.png[]
+
+
+Creating the project can take a while as Maven loads all the needed
+dependencies. Once created, you can run it by right-clicking on the project in
+the [guilabel]#Projects# view and selecting [guilabel]#Run#. In the
+[guilabel]#Select deployment server# window that opens, select
+[guilabel]#Glassfish# or [guilabel]#Apache Tomcat#, and click [guibutton]#OK#.
+If all goes well, NetBeans starts the server in port 8080 and, depending on your
+system configuration, launches the default browser to display the web
+application. If not, you can open it manually, for example, at
+http://localhost:8080/myproject. The project name is used by default as the
+context path of the application.
+
+
+
+
diff --git a/documentation/getting-started/getting-started-overview.asciidoc b/documentation/getting-started/getting-started-overview.asciidoc
new file mode 100644
index 0000000000..994ca48248
--- /dev/null
+++ b/documentation/getting-started/getting-started-overview.asciidoc
@@ -0,0 +1,30 @@
+---
+title: Overview
+order: 1
+layout: page
+---
+
+[[getting-started.overview]]
+= Overview
+
+You can develop Vaadin applications in essentially any development environment
+that has the Java SDK and a Java Servlet container. Vaadin has special support
+for the Eclipse and NetBeans IDEs, but community support exists also for
+IntelliJ IDEA. You can use it with any Java IDE or no IDE at all.
+
+Managing Vaadin and other Java libraries can get tedious to do manually, so
+using a build system that manages dependencies automatically is adviced. Vaadin
+is distributed in the Maven central repository, and can be used with any build
+or dependency management system that can access Maven repository, such as Ivy or
+Gradle, in addition to Maven.
+
+Vaadin has a multitude of installation options for different IDEs, dependency
+managers, and you can also install it from an installation package:
+
+* With the Eclipse IDE, use the Vaadin Plugin for Eclipse, as described in <<dummy/../../../framework/getting-started/getting-started-eclipse#getting-started.eclipse,"Vaadin Plugin for Eclipse">>
+* With the Vaadin plugin for NetBeans IDE ( <<dummy/../../../framework/getting-started/getting-started-netbeans#getting-started.netbeans,"Creating a Project with NetBeans IDE">>) or IntelliJ IDEA
+* With Maven, Ivy, Gradle, or other Maven-compatible dependency manager, under Eclipse, NetBeans, IDEA, or using command-line, as described in <<dummy/../../../framework/getting-started/getting-started-maven#getting-started.maven,"Using Vaadin with Maven">>
+* From installation package without dependency management, as described in <<dummy/../../../framework/getting-started/getting-started-package#getting-started.package,"Vaadin Installation Package">>
+
+
+
diff --git a/documentation/getting-started/getting-started-package.asciidoc b/documentation/getting-started/getting-started-package.asciidoc
new file mode 100644
index 0000000000..4dbe735958
--- /dev/null
+++ b/documentation/getting-started/getting-started-package.asciidoc
@@ -0,0 +1,65 @@
+---
+title: Vaadin Installation Package
+order: 9
+layout: page
+---
+
+[[getting-started.package]]
+= Vaadin Installation Package
+
+While the recommended way to install Vaadin is to use the Eclipse plugin, one of
+the other IDE plugins, or a dependency management system, such as Maven, Vaadin
+is also available as a ZIP distribution package.
+
+You can download the newest Vaadin installation package from the download page
+at http://vaadin.com/download/. Please use a ZIP decompression utility available
+in your operating system to extract the files from the ZIP package.
+
+[[getting-started.package.contents]]
+== Package Contents
+
+[filename]#README.TXT#:: This Readme file gives simple instructions for installing Vaadin in your
+project.
+
+[filename]#release-notes.html#:: The Release Notes contain information about the new features in the particular
+release, give upgrade instructions, describe compatibility, etc. Please open the
+HTML file with a web browser.
+
+[filename]#license.html#:: Apache License version 2.0. Please open the HTML file with a web browser.
+
+[filename]#lib#folder:: All dependency libraries required by Vaadin are contained within the
+[filename]#lib# folder.
+
+[filename]#*.jar#:: Vaadin libraries, as described in
+<<dummy/../../../framework/getting-started/getting-started-libraries#getting-started.libraries,"Overview
+of Vaadin Libraries">>.
+
+
+
+
+[[getting-started.package.install]]
+== Installing the Libraries
+
+You can install the Vaadin ZIP package in a few simple steps:
+
+. Copy the JAR files at the package root folder to the [filename]#WEB-APP/lib# web
+library folder in the project. Some of the libraries are optional, as explained
+in
+<<dummy/../../../framework/getting-started/getting-started-libraries#getting-started.libraries,"Overview
+of Vaadin Libraries">>.
+
+. Also copy the dependency JAR files at the [filename]#lib# folder to the
+[filename]#WEB-APP/lib# web library folder in the project.
+
+
+The location of the [filename]#WEB-APP/lib# folder depends on the project
+organization, which depends on the development environment.
+
+* In Eclipse Dynamic Web Application projects: [filename]#WebContent/WEB-INF/lib#.
+
+* In Maven projects: [filename]#src/main/webapp/WEB-INF/lib#.
+
+
+
+
+
diff --git a/documentation/getting-started/getting-started-scala.asciidoc b/documentation/getting-started/getting-started-scala.asciidoc
new file mode 100644
index 0000000000..1da94d0853
--- /dev/null
+++ b/documentation/getting-started/getting-started-scala.asciidoc
@@ -0,0 +1,113 @@
+---
+title: Using Vaadin with Scala
+order: 10
+layout: page
+---
+
+[[getting-started.scala]]
+= Using Vaadin with Scala
+
+You can use Vaadin with any JVM compatible language, such as Scala or Groovy.
+There are, however, some caveats related to libraries and project set-up. In the
+following, we give instructions for creating a Scala UI in Eclipse, with the
+Scala IDE for Eclipse and the Vaadin Plugin for Eclipse.
+
+. Install the link:http://scala-ide.org/[Scala IDE for Eclipse], either from an
+Eclipse update site or as a bundled Eclipse distribution.
+
+. Open an existing Vaadin Java project or create a new one as outlined in
+<<dummy/../../../framework/getting-started/getting-started-first-project#getting-started.first-project,"Creating
+and Running a Project with Eclipse">>. You can delete the UI class created by
+the wizard.
+
+. Switch to the Scala perspective by clicking the perspective in the upper-right
+corner of the Eclipse window.
+
+. Right-click on the project folder in [guilabel]#Project Explorer# and select
+"Configure > Add Scala Nature".
+
+. The web application needs [filename]#scala-library.jar# in its class path. If
+using Scala IDE, you can copy it from somewhere under your Eclipse installation
+to the class path of the web application, that is, either to the
+[filename]#WebContent/WEB-INF/lib# folder in the project or to the library path
+of the application server. If copying outside Eclipse to a project, refresh the
+project by selecting it and pressing F5.
+
++
+You could also get it with an Ivy or Maven dependency, just make sure that the
+version is same as what the Scala IDE uses.
+
+
+You should now be able to create a Scala UI class, such as the following:
+
+
+[source, scala]
+----
+@Theme("mytheme")
+class MyScalaUI extends UI {
+  override def init(request: VaadinRequest) = {
+    val content: VerticalLayout = new VerticalLayout
+    setContent(content)
+
+    val label: Label = new Label("Hello, world!")
+    content addComponent label
+
+    // Handle user interaction
+    content addComponent new Button("Click Me!",
+      new ClickListener {
+        override def buttonClick(event: ClickEvent) =
+          Notification.show("The time is " + new Date)
+      })
+  }
+}
+----
+
+Eclipse and Scala IDE should be able to import the Vaadin classes automatically
+when you press CtrlShiftO.
+
+You need to define the Scala UI class either in a servlet class (in Servlet 3.0
+project) or in a [filename]#web.xml# deployment descriptor, just like described
+in
+<<dummy/../../../framework/getting-started/getting-started-first-project#getting-started.first-project.exploring,"Exploring
+the Project">> for Java UIs.
+
+ifdef::web[]
+The link:https://github.com/henrikerola/scaladin[Scaladin add-on] offers a more
+Scala-like API for Vaadin. A Vaadin 7 compatible version is under development.
+endif::web[]
+
+ifdef::web[]
+[[getting-started.scala.lambdas]]
+== Defining Listeners with Lambda Expressions
+
+Scala does not support use of lambda expressions for calling functional
+interfaces, like Java 8 does. Hence, we can't just use a lambda expression for
+the [interfacename]#ClickListener# in the example above. You can, however,
+define implicit conversions from lambda expressions to such interface
+implementations. For example, for click listeners:
+
+
+[source, scala]
+----
+implicit def clickListener(f: ClickEvent => Unit) =
+  new ClickListener {
+    override def buttonClick(event: ClickEvent) {
+      f(event)
+    }
+  }
+----
+
+You could then use a lambda expression as follows:
+
+
+[source, scala]
+----
+content addComponent new Button("Click Me!",
+  (event: ClickEvent) =>
+      Notification.show("The time is " + new Date))
+----
+
+endif::web[]
+
+
+
diff --git a/documentation/getting-started/img/codingtips-automaticimports.png b/documentation/getting-started/img/codingtips-automaticimports.png
new file mode 100644
index 0000000000..1a66204235
--- /dev/null
+++ b/documentation/getting-started/img/codingtips-automaticimports.png
diff --git a/documentation/getting-started/img/codingtips-codecompletion.png b/documentation/getting-started/img/codingtips-codecompletion.png
new file mode 100644
index 0000000000..3f648da0bc
--- /dev/null
+++ b/documentation/getting-started/img/codingtips-codecompletion.png
diff --git a/documentation/getting-started/img/debuggingMyProject.png b/documentation/getting-started/img/debuggingMyProject.png
new file mode 100644
index 0000000000..2baae3d191
--- /dev/null
+++ b/documentation/getting-started/img/debuggingMyProject.png
diff --git a/documentation/getting-started/img/firebug.png b/documentation/getting-started/img/firebug.png
new file mode 100644
index 0000000000..81512b615d
--- /dev/null
+++ b/documentation/getting-started/img/firebug.png
diff --git a/documentation/getting-started/img/idea-maven-newproject-1.png b/documentation/getting-started/img/idea-maven-newproject-1.png
new file mode 100644
index 0000000000..6a24a14ea8
--- /dev/null
+++ b/documentation/getting-started/img/idea-maven-newproject-1.png
diff --git a/documentation/getting-started/img/idea-maven-newproject-2.png b/documentation/getting-started/img/idea-maven-newproject-2.png
new file mode 100644
index 0000000000..2f31ac2c35
--- /dev/null
+++ b/documentation/getting-started/img/idea-maven-newproject-2.png
diff --git a/documentation/getting-started/img/idea-maven-newproject-3.png b/documentation/getting-started/img/idea-maven-newproject-3.png
new file mode 100644
index 0000000000..b0b56b311a
--- /dev/null
+++ b/documentation/getting-started/img/idea-maven-newproject-3.png
diff --git a/documentation/getting-started/img/idea-maven-newproject-4.png b/documentation/getting-started/img/idea-maven-newproject-4.png
new file mode 100644
index 0000000000..9dc571499f
--- /dev/null
+++ b/documentation/getting-started/img/idea-maven-newproject-4.png
diff --git a/documentation/getting-started/img/idea-maven-newproject-5.png b/documentation/getting-started/img/idea-maven-newproject-5.png
new file mode 100644
index 0000000000..1e22e8d6d8
--- /dev/null
+++ b/documentation/getting-started/img/idea-maven-newproject-5.png
diff --git a/documentation/getting-started/img/idea-maven-run-1.png b/documentation/getting-started/img/idea-maven-run-1.png
new file mode 100644
index 0000000000..976711c36a
--- /dev/null
+++ b/documentation/getting-started/img/idea-maven-run-1.png
diff --git a/documentation/getting-started/img/idea-maven-run-2.png b/documentation/getting-started/img/idea-maven-run-2.png
new file mode 100644
index 0000000000..a567bb6661
--- /dev/null
+++ b/documentation/getting-started/img/idea-maven-run-2.png
diff --git a/documentation/getting-started/img/idea-newproject-1.png b/documentation/getting-started/img/idea-newproject-1.png
new file mode 100644
index 0000000000..739b210fdc
--- /dev/null
+++ b/documentation/getting-started/img/idea-newproject-1.png
diff --git a/documentation/getting-started/img/idea-newproject-2.png b/documentation/getting-started/img/idea-newproject-2.png
new file mode 100644
index 0000000000..882a4eed18
--- /dev/null
+++ b/documentation/getting-started/img/idea-newproject-2.png
diff --git a/documentation/getting-started/img/idea-newproject-3.png b/documentation/getting-started/img/idea-newproject-3.png
new file mode 100644
index 0000000000..fe35a7c787
--- /dev/null
+++ b/documentation/getting-started/img/idea-newproject-3.png
diff --git a/documentation/getting-started/img/idea-newproject-4.png b/documentation/getting-started/img/idea-newproject-4.png
new file mode 100644
index 0000000000..ae14aea8b4
--- /dev/null
+++ b/documentation/getting-started/img/idea-newproject-4.png
diff --git a/documentation/getting-started/img/idea-server-1.png b/documentation/getting-started/img/idea-server-1.png
new file mode 100644
index 0000000000..f0e0fb7f9b
--- /dev/null
+++ b/documentation/getting-started/img/idea-server-1.png
diff --git a/documentation/getting-started/img/idea-server-2.png b/documentation/getting-started/img/idea-server-2.png
new file mode 100644
index 0000000000..2375f44c48
--- /dev/null
+++ b/documentation/getting-started/img/idea-server-2.png
diff --git a/documentation/getting-started/img/ivyde-install-available.png b/documentation/getting-started/img/ivyde-install-available.png
new file mode 100644
index 0000000000..9b8500c356
--- /dev/null
+++ b/documentation/getting-started/img/ivyde-install-available.png
diff --git a/documentation/getting-started/img/maven-project-created.png b/documentation/getting-started/img/maven-project-created.png
new file mode 100644
index 0000000000..075e2e49ea
--- /dev/null
+++ b/documentation/getting-started/img/maven-project-created.png
diff --git a/documentation/getting-started/img/myproject-created.png b/documentation/getting-started/img/myproject-created.png
new file mode 100644
index 0000000000..0cebb5f0db
--- /dev/null
+++ b/documentation/getting-started/img/myproject-created.png
diff --git a/documentation/getting-started/img/myproject-new-vaadin.png b/documentation/getting-started/img/myproject-new-vaadin.png
new file mode 100644
index 0000000000..e2243d5c1a
--- /dev/null
+++ b/documentation/getting-started/img/myproject-new-vaadin.png
diff --git a/documentation/getting-started/img/myproject-settings.png b/documentation/getting-started/img/myproject-settings.png
new file mode 100644
index 0000000000..20d4509317
--- /dev/null
+++ b/documentation/getting-started/img/myproject-settings.png
diff --git a/documentation/getting-started/img/myproject-vaadin.png b/documentation/getting-started/img/myproject-vaadin.png
new file mode 100644
index 0000000000..fff616e6fe
--- /dev/null
+++ b/documentation/getting-started/img/myproject-vaadin.png
diff --git a/documentation/getting-started/img/myproject-web.png b/documentation/getting-started/img/myproject-web.png
new file mode 100644
index 0000000000..ae47d37c0f
--- /dev/null
+++ b/documentation/getting-started/img/myproject-web.png
diff --git a/documentation/getting-started/img/netbeans-maven-newproject-name.png b/documentation/getting-started/img/netbeans-maven-newproject-name.png
new file mode 100644
index 0000000000..90a1ad517e
--- /dev/null
+++ b/documentation/getting-started/img/netbeans-maven-newproject-name.png
diff --git a/documentation/getting-started/img/plugin-install-addsite.png b/documentation/getting-started/img/plugin-install-addsite.png
new file mode 100644
index 0000000000..baa36c5416
--- /dev/null
+++ b/documentation/getting-started/img/plugin-install-addsite.png
diff --git a/documentation/getting-started/img/plugin-install-available.png b/documentation/getting-started/img/plugin-install-available.png
new file mode 100644
index 0000000000..d9c305de62
--- /dev/null
+++ b/documentation/getting-started/img/plugin-install-available.png
diff --git a/documentation/getting-started/img/runningMyProject.png b/documentation/getting-started/img/runningMyProject.png
new file mode 100644
index 0000000000..e4c4ebcd54
--- /dev/null
+++ b/documentation/getting-started/img/runningMyProject.png
diff --git a/documentation/getting-started/img/tomcat-startserver-1.png b/documentation/getting-started/img/tomcat-startserver-1.png
new file mode 100644
index 0000000000..3c2693ba01
--- /dev/null
+++ b/documentation/getting-started/img/tomcat-startserver-1.png
diff --git a/documentation/getting-started/img/tomcat-startserver-2.png b/documentation/getting-started/img/tomcat-startserver-2.png
new file mode 100644
index 0000000000..04ac7d87d0
--- /dev/null
+++ b/documentation/getting-started/img/tomcat-startserver-2.png
diff --git a/documentation/getting-started/img/tomcat-startserver-3.png b/documentation/getting-started/img/tomcat-startserver-3.png
new file mode 100644
index 0000000000..2cc17876e9
--- /dev/null
+++ b/documentation/getting-started/img/tomcat-startserver-3.png
diff --git a/documentation/getting-started/img/tomcat-startserver-4.png b/documentation/getting-started/img/tomcat-startserver-4.png
new file mode 100644
index 0000000000..7e704e772b
--- /dev/null
+++ b/documentation/getting-started/img/tomcat-startserver-4.png
diff --git a/documentation/getting-started/img/tomcat-startserver-5.png b/documentation/getting-started/img/tomcat-startserver-5.png
new file mode 100644
index 0000000000..f860a0005b
--- /dev/null
+++ b/documentation/getting-started/img/tomcat-startserver-5.png
diff --git a/documentation/getting-started/img/toolchain-hi.png b/documentation/getting-started/img/toolchain-hi.png
new file mode 100644
index 0000000000..88d9dfcc4c
--- /dev/null
+++ b/documentation/getting-started/img/toolchain-hi.png
diff --git a/documentation/getting-started/img/toolchain-lo.png b/documentation/getting-started/img/toolchain-lo.png
new file mode 100644
index 0000000000..e42b94bc2f
--- /dev/null
+++ b/documentation/getting-started/img/toolchain-lo.png
diff --git a/documentation/getting-started/original-drawings/toolchain.svg b/documentation/getting-started/original-drawings/toolchain.svg
new file mode 100644
index 0000000000..63148883f3
--- /dev/null
+++ b/documentation/getting-started/original-drawings/toolchain.svg
@@ -0,0 +1,1149 @@
+<?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.48.1 r9760"

+   sodipodi:docname="toolchain.svg"

+   inkscape:output_extension="org.inkscape.output.svg.inkscape"

+   version="1.1">

+  <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="perspective206" />

+    <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>

+    <marker

+       inkscape:stockid="DiamondL"

+       orient="auto"

+       refY="0.0"

+       refX="0.0"

+       id="DiamondL"

+       style="overflow:visible">

+      <path

+         id="path4404"

+         d="M 0,-7.0710768 L -7.0710894,0 L 0,7.0710589 L 7.0710462,0 L 0,-7.0710768 z "

+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt;marker-start:none"

+         transform="scale(0.8)" />

+    </marker>

+    <marker

+       orient="auto"

+       refY="0.0"

+       refX="0.0"

+       id="DiamondEmpty"

+       style="overflow:visible">

+      <path

+         id="path7"

+         d="M 0,-5 L -5,0 L 0,5 L 5,0 L 0,-5 z "

+         style="fill-rule:evenodd;fill:#ffffff;stroke:#000000;stroke-width:1.0pt;marker-start:none"

+         transform="scale(1.0) translate(-5,0)" />

+    </marker>

+    <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

+       orient="auto"

+       refY="0.0"

+       refX="0.0"

+       id="EmptyArrow"

+       style="overflow:visible;">

+      <path

+         id="path9"

+         d="M 0.0,0.0 L 0.0,-5.0 L -12.5,0.0 L 0.0,5.0 L 0.0,0.0 z      M -0.5,0.0 L -0.5,-4.5 L -12.0,0.0 L -0.5,4.5 L -0.5,0.0 z"

+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt;marker-start:none;"

+         transform="scale(1.0) rotate(180) translate(10,0)" />

+    </marker>

+    <marker

+       orient="auto"

+       refY="0.0"

+       refX="0.0"

+       id="EmptyArrow2"

+       style="overflow:visible;">

+      <path

+         id="path13"

+         d="M 0.0,0.0 L 0.0,-5.0 L -10.0,0.0 L 0.0,5.0 L 0.0,0.0 z"

+         style="fill-rule:evenodd;fill:#ffffff;stroke:#000000;stroke-width:1.0pt;marker-start:none;"

+         transform="scale(1.0) rotate(180) translate(10,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>

+    <marker

+       inkscape:stockid="Arrow2Lend"

+       orient="auto"

+       refY="0.0"

+       refX="0.0"

+       id="Arrow2Lend"

+       style="overflow:visible;">

+      <path

+         id="path16811"

+         style="font-size:12.0;fill-rule:evenodd;stroke-width:0.62500000;stroke-linejoin:round;"

+         d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "

+         transform="scale(1.1) rotate(180) translate(1,0)" />

+    </marker>

+    <marker

+       inkscape:stockid="Arrow1Lend"

+       orient="auto"

+       refY="0.0"

+       refX="0.0"

+       id="Arrow1Lend"

+       style="overflow:visible;">

+      <path

+         id="path16829"

+         d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "

+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt;marker-start:none;"

+         transform="scale(0.8) rotate(180) translate(12.5,0)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutM"

+       orient="auto"

+       refY="0.0"

+       refX="0.0"

+       id="TriangleOutM"

+       style="overflow:visible">

+      <path

+         id="path16731"

+         d="M 5.77,0.0 L -2.88,5.0 L -2.88,-5.0 L 5.77,0.0 z "

+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt;marker-start:none"

+         transform="scale(0.4)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleInL"

+       orient="auto"

+       refY="0.0"

+       refX="0.0"

+       id="TriangleInL"

+       style="overflow:visible">

+      <path

+         id="path16743"

+         d="M 5.77,0.0 L -2.88,5.0 L -2.88,-5.0 L 5.77,0.0 z "

+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt;marker-start:none"

+         transform="scale(-0.8)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutL"

+       orient="auto"

+       refY="0.0"

+       refX="0.0"

+       id="TriangleOutL"

+       style="overflow:visible">

+      <path

+         id="path16734"

+         d="M 5.77,0.0 L -2.88,5.0 L -2.88,-5.0 L 5.77,0.0 z "

+         style="fill-rule:evenodd;stroke:#000000;stroke-width:1.0pt;marker-start:none"

+         transform="scale(0.8)" />

+    </marker>

+    <linearGradient

+       id="linearGradient9263">

+      <stop

+         style="stop-color:#000000;stop-opacity:0"

+         offset="0"

+         id="stop9265" />

+      <stop

+         style="stop-color:#000000;stop-opacity:0;"

+         offset="1"

+         id="stop9267" />

+    </linearGradient>

+    <linearGradient

+       id="linearGradient7299">

+      <stop

+         style="stop-color:#ffffff;stop-opacity:1"

+         offset="0"

+         id="stop7301" />

+      <stop

+         style="stop-color:#a090e7;stop-opacity:1"

+         offset="1"

+         id="stop7303" />

+    </linearGradient>

+    <linearGradient

+       id="linearGradient5349">

+      <stop

+         style="stop-color:#000000;stop-opacity:1;"

+         offset="0"

+         id="stop5351" />

+      <stop

+         style="stop-color:#000000;stop-opacity:0;"

+         offset="1"

+         id="stop5353" />

+    </linearGradient>

+    <linearGradient

+       id="linearGradient4152">

+      <stop

+         style="stop-color:#6b6bff;stop-opacity:1;"

+         offset="0"

+         id="stop4154" />

+      <stop

+         style="stop-color:#6b6bff;stop-opacity:0;"

+         offset="1"

+         id="stop4156" />

+    </linearGradient>

+    <linearGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient5349"

+       id="linearGradient5355"

+       x1="96.085953"

+       y1="148.38934"

+       x2="389.01985"

+       y2="148.38934"

+       gradientUnits="userSpaceOnUse" />

+    <radialGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient7299"

+       id="radialGradient12637"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(0.9214039,2.3896193e-3,-2.166448e-3,0.5977017,265.61411,78.560061)"

+       cx="-147.5"

+       cy="97.300964"

+       fx="-147.5"

+       fy="97.300964"

+       r="109.42857" />

+    <radialGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient7299"

+       id="radialGradient15668"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(0.9214039,2.3896193e-3,-2.166448e-3,0.5977017,262.24281,78.560061)"

+       cx="-147.5"

+       cy="97.300964"

+       fx="-147.5"

+       fy="97.300964"

+       r="109.42857" />

+    <radialGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient19816"

+       id="radialGradient17873"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(0.9214039,2.3896193e-3,-2.166448e-3,0.5977017,541.12253,30.198804)"

+       cx="-147.5"

+       cy="97.300964"

+       fx="-147.5"

+       fy="97.300964"

+       r="109.42857" />

+    <radialGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient7299"

+       id="radialGradient17875"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(1.3208501,2.3843471e-3,-3.1056446e-3,0.596383,334.93437,78.721097)"

+       cx="-147.5"

+       cy="97.300964"

+       fx="-147.5"

+       fy="97.300964"

+       r="109.42857" />

+    <radialGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient19816"

+       id="radialGradient20832"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(1.6000725,2.3808346e-3,-3.7621654e-3,0.5955044,664.61868,-4.8275956)"

+       cx="-147.5"

+       cy="97.300964"

+       fx="-147.5"

+       fy="97.300964"

+       r="109.42857" />

+    <radialGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient7299"

+       id="radialGradient22790"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(1.3208501,2.3843471e-3,-3.1056446e-3,0.596383,334.93437,78.721097)"

+       cx="-147.5"

+       cy="97.300964"

+       fx="-147.5"

+       fy="97.300964"

+       r="109.42857" />

+    <radialGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient7299"

+       id="radialGradient22806"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(1.3208501,2.3843471e-3,-3.1056446e-3,0.596383,334.93437,78.721097)"

+       cx="-147.5"

+       cy="97.300964"

+       fx="-147.5"

+       fy="97.300964"

+       r="109.42857" />

+    <radialGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient7299"

+       id="radialGradient22822"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(1.3208501,2.3843471e-3,-3.1056446e-3,0.596383,334.93437,78.721097)"

+       cx="-147.5"

+       cy="97.300964"

+       fx="-147.5"

+       fy="97.300964"

+       r="109.42857" />

+    <radialGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient7299"

+       id="radialGradient22838"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(1.3208501,2.3843471e-3,-3.1056446e-3,0.596383,334.93437,78.721097)"

+       cx="-147.5"

+       cy="97.300964"

+       fx="-147.5"

+       fy="97.300964"

+       r="109.42857" />

+    <radialGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient3286"

+       id="radialGradient2303"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(1.6000725,2.3808346e-3,-3.7621654e-3,0.5955044,664.61868,-4.8275956)"

+       cx="-147.5"

+       cy="97.300964"

+       fx="-147.5"

+       fy="97.300964"

+       r="109.42857" />

+    <radialGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient19816"

+       id="radialGradient3306"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(1.2251403,2.385383e-3,-2.8806072e-3,0.5966421,625.8055,-4.9637231)"

+       cx="-147.5"

+       cy="97.300964"

+       fx="-147.5"

+       fy="97.300964"

+       r="109.42857" />

+    <radialGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient19816"

+       id="radialGradient3307"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(1.634924,2.3804409e-3,-3.8441097e-3,0.5954059,670.96002,-4.81581)"

+       cx="-147.5"

+       cy="97.300964"

+       fx="-147.5"

+       fy="97.300964"

+       r="109.42857" />

+    <radialGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient7299"

+       id="radialGradient3327"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(1.3208501,2.3843471e-3,-3.1056446e-3,0.596383,334.93437,78.721097)"

+       cx="-147.5"

+       cy="97.300964"

+       fx="-147.5"

+       fy="97.300964"

+       r="109.42857" />

+    <radialGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient3286"

+       id="radialGradient8322"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(1.6000725,2.3808346e-3,-3.7621654e-3,0.5955044,664.61868,-4.8275956)"

+       cx="-147.5"

+       cy="97.300964"

+       fx="-147.5"

+       fy="97.300964"

+       r="109.42857" />

+    <radialGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient7299"

+       id="radialGradient8338"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(1.3208501,2.3843471e-3,-3.1056446e-3,0.596383,334.93437,78.721097)"

+       cx="-147.5"

+       cy="97.300964"

+       fx="-147.5"

+       fy="97.300964"

+       r="109.42857" />

+    <radialGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient7299"

+       id="radialGradient8354"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(1.3208501,2.3843471e-3,-3.1056446e-3,0.596383,334.93437,78.721097)"

+       cx="-147.5"

+       cy="97.300964"

+       fx="-147.5"

+       fy="97.300964"

+       r="109.42857" />

+    <radialGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient7299"

+       id="radialGradient11393"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(1.2251403,2.385383e-3,-2.8806072e-3,0.5966421,625.8055,-4.9637231)"

+       cx="-145.65326"

+       cy="87.697487"

+       fx="-145.65326"

+       fy="87.697487"

+       r="109.42857" />

+    <radialGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient19816"

+       id="radialGradient11490"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(1.3208501,2.3843471e-3,-3.1056446e-3,0.596383,334.93437,78.721097)"

+       cx="-147.5"

+       cy="97.300964"

+       fx="-147.5"

+       fy="97.300964"

+       r="109.42857" />

+    <radialGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient11508"

+       id="radialGradient11506"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(1.3208501,2.3843471e-3,-3.1056446e-3,0.596383,334.93437,78.721097)"

+       cx="-147.5"

+       cy="97.300964"

+       fx="-147.5"

+       fy="97.300964"

+       r="109.42857" />

+    <linearGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient11516"

+       id="linearGradient11514"

+       x1="402.58597"

+       y1="24.440832"

+       x2="535.59796"

+       y2="190.61652"

+       gradientUnits="userSpaceOnUse" />

+    <radialGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient19816"

+       id="radialGradient11602"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(1.3208501,2.3843471e-3,-3.1056446e-3,0.596383,334.93437,78.721097)"

+       cx="-147.5"

+       cy="97.300964"

+       fx="-147.5"

+       fy="97.300964"

+       r="109.42857" />

+    <radialGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient11508"

+       id="radialGradient11604"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(1.3208501,2.3843471e-3,-3.1056446e-3,0.596383,334.93437,78.721097)"

+       cx="-147.5"

+       cy="97.300964"

+       fx="-147.5"

+       fy="97.300964"

+       r="109.42857" />

+    <linearGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient11516"

+       id="linearGradient13616"

+       x1="174.35712"

+       y1="96.654701"

+       x2="220.02124"

+       y2="192.93446"

+       gradientUnits="userSpaceOnUse" />

+    <radialGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient7299"

+       id="radialGradient14623"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(0.9722636,1.8198108e-3,-2.2860317e-3,0.4551788,579.72294,2.0165387)"

+       cx="-147.5"

+       cy="97.300964"

+       fx="-147.5"

+       fy="97.300964"

+       r="109.42857" />

+    <linearGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient7299"

+       id="linearGradient16644"

+       x1="160.84073"

+       y1="73.780838"

+       x2="239.77594"

+       y2="207.50426"

+       gradientUnits="userSpaceOnUse" />

+    <linearGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient11516"

+       id="linearGradient18644"

+       x1="1036.6514"

+       y1="1185.2882"

+       x2="1076.5066"

+       y2="1351.074"

+       gradientUnits="userSpaceOnUse" />

+    <radialGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient19816"

+       id="radialGradient19653"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(1.3208501,2.3843471e-3,-3.1056446e-3,0.596383,334.93437,78.721097)"

+       cx="-147.5"

+       cy="97.300964"

+       fx="-147.5"

+       fy="97.300964"

+       r="109.42857" />

+    <marker

+       id="marker52016"

+       orient="auto"

+       markerHeight="5.7450786"

+       markerWidth="4.6297302">

+      <g

+         id="g52010"

+         transform="matrix(0.5,0,0,0.5,-185.64299,-257.19655)">

+        <path

+           inkscape:connector-curvature="0"

+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"

+           id="path52012"

+           d="m 370,508.65625 c -0.86067,0.0587 -1.60944,0.6213 -1.90625,1.4375 -0.26976,0.74176 -0.0577,1.53493 0.4375,2.125 l -1.75,0 c -0.0424,-0.005 -0.0824,0.002 -0.125,0 l 0,4.375 0.125,0 1.75,0 c -0.67896,0.8597 -0.69701,2.11549 0.0937,2.90625 0.85091,0.85091 2.27409,0.85091 3.125,0 l 3.34375,-3.375 c 0.033,-0.0295 0.0643,-0.0608 0.0937,-0.0937 0.0322,-0.0193 0.0635,-0.0402 0.0937,-0.0625 3.7e-4,-3.6e-4 0.21851,-0.28079 0.21875,-0.28125 5e-5,-9e-5 -0.007,-0.0447 0,-0.0625 0.001,-0.003 0.03,0.003 0.0312,0 0.0391,-0.0521 0.051,-0.0518 0.0937,-0.125 0.13699,-0.23476 0.16684,-0.37191 0.15625,-0.34375 0.0368,-0.0915 0.0185,-0.11251 0.0312,-0.15625 0.0106,-0.0102 0.021,-0.0206 0.0312,-0.0312 0.06,-0.22398 0.0881,-0.51689 0.0625,-0.78125 -0.0136,-0.20363 -0.0589,-0.29765 -0.0625,-0.3125 1.4e-4,-0.0104 1.4e-4,-0.0208 0,-0.0312 0.026,0.097 0.0153,0.016 -0.0937,-0.25 -0.0525,-0.13039 -0.0899,-0.21936 -0.125,-0.28125 -0.0524,-0.0897 -0.13346,-0.26235 -0.34375,-0.46875 L 371.75,509.3125 c -0.45645,-0.48671 -1.08509,-0.71163 -1.75,-0.65625 z"

+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" />

+        <path

+           inkscape:connector-curvature="0"

+           sodipodi:nodetypes="cccscccsssssssscccsccc"

+           id="path52014"

+           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:#f39300;fill-opacity:1;fill-rule:evenodd;stroke:none" />

+      </g>

+    </marker>

+    <marker

+       id="marker52016-3"

+       orient="auto"

+       markerHeight="5.7450786"

+       markerWidth="4.6297302">

+      <g

+         id="g52010-8"

+         transform="matrix(0.5,0,0,0.5,-185.64299,-257.19655)">

+        <path

+           inkscape:connector-curvature="0"

+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"

+           id="path52012-6"

+           d="m 370,508.65625 c -0.86067,0.0587 -1.60944,0.6213 -1.90625,1.4375 -0.26976,0.74176 -0.0577,1.53493 0.4375,2.125 l -1.75,0 c -0.0424,-0.005 -0.0824,0.002 -0.125,0 l 0,4.375 0.125,0 1.75,0 c -0.67896,0.8597 -0.69701,2.11549 0.0937,2.90625 0.85091,0.85091 2.27409,0.85091 3.125,0 l 3.34375,-3.375 c 0.033,-0.0295 0.0643,-0.0608 0.0937,-0.0937 0.0322,-0.0193 0.0635,-0.0402 0.0937,-0.0625 3.7e-4,-3.6e-4 0.21851,-0.28079 0.21875,-0.28125 5e-5,-9e-5 -0.007,-0.0447 0,-0.0625 0.001,-0.003 0.03,0.003 0.0312,0 0.0391,-0.0521 0.051,-0.0518 0.0937,-0.125 0.13699,-0.23476 0.16684,-0.37191 0.15625,-0.34375 0.0368,-0.0915 0.0185,-0.11251 0.0312,-0.15625 0.0106,-0.0102 0.021,-0.0206 0.0312,-0.0312 0.06,-0.22398 0.0881,-0.51689 0.0625,-0.78125 -0.0136,-0.20363 -0.0589,-0.29765 -0.0625,-0.3125 1.4e-4,-0.0104 1.4e-4,-0.0208 0,-0.0312 0.026,0.097 0.0153,0.016 -0.0937,-0.25 -0.0525,-0.13039 -0.0899,-0.21936 -0.125,-0.28125 -0.0524,-0.0897 -0.13346,-0.26235 -0.34375,-0.46875 L 371.75,509.3125 c -0.45645,-0.48671 -1.08509,-0.71163 -1.75,-0.65625 z"

+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none" />

+        <path

+           inkscape:connector-curvature="0"

+           sodipodi:nodetypes="cccscccsssssssscccsccc"

+           id="path52014-3"

+           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:#f39300;fill-opacity:1;fill-rule:evenodd;stroke:none" />

+      </g>

+    </marker>

+  </defs>

+  <sodipodi:namedview

+     id="base"

+     pagecolor="#ffffff"

+     bordercolor="#666666"

+     borderopacity="1.0"

+     inkscape:pageopacity="0.0"

+     inkscape:pageshadow="2"

+     inkscape:zoom="1.8159691"

+     inkscape:cx="284.00046"

+     inkscape:cy="744.0301"

+     inkscape:document-units="px"

+     inkscape:current-layer="layer1"

+     gridtolerance="10000"

+     inkscape:window-width="1861"

+     inkscape:window-height="1023"

+     inkscape:window-x="0"

+     inkscape:window-y="0"

+     showgrid="true"

+     showguides="false"

+     inkscape:connector-spacing="10"

+     inkscape:guide-bbox="true"

+     inkscape:window-maximized="0">

+    <sodipodi:guide

+       orientation="0,1"

+       position="31.938869,788.55965"

+       id="guide17449" />

+    <sodipodi:guide

+       orientation="1,0"

+       position="224.67342,882.17358"

+       id="guide17453" />

+    <sodipodi:guide

+       orientation="0,1"

+       position="285.41744,976.57155"

+       id="guide23390" />

+    <sodipodi:guide

+       orientation="0,1"

+       position="285.79781,806.73177"

+       id="guide23439" />

+    <sodipodi:guide

+       orientation="1,0"

+       position="561.68355,823.80254"

+       id="guide23441" />

+    <sodipodi:guide

+       orientation="1,0"

+       position="415.75596,833.7146"

+       id="guide23443" />

+    <sodipodi:guide

+       orientation="1,0"

+       position="61.675057,822.15053"

+       id="guide23607" />

+  </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" />

+      </cc:Work>

+    </rdf:RDF>

+  </metadata>

+  <g

+     inkscape:label="Taso 1"

+     inkscape:groupmode="layer"

+     id="layer1"

+     style="opacity:1">

+    <rect

+       style="fill:#ffffff;fill-opacity:1;stroke:none"

+       id="rect23609"

+       width="549.70648"

+       height="443.42712"

+       x="41.713261"

+       y="73.132996"

+       ry="3.7880721" />

+    <rect

+       style="fill:#ffdfdf;fill-opacity:1;stroke:#000000;stroke-width:1.77165353;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+       id="rect6642-4-3"

+       width="179.50378"

+       height="175.10982"

+       x="399.79388"

+       y="263.80252"

+       ry="3.7880721" />

+    <rect

+       style="fill:#ffdfdf;fill-opacity:1;stroke:#000000;stroke-width:1.77165353;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+       id="rect6642-4"

+       width="179.50378"

+       height="175.10982"

+       x="45.162289"

+       y="263.80252"

+       ry="3.7880721" />

+    <flowRoot

+       xml:space="preserve"

+       id="flowRoot11361"

+       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+       transform="translate(-763.81732,-794.25552)"

+       inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/img/intro/toolchain.png"

+       inkscape:export-xdpi="90"

+       inkscape:export-ydpi="90"><flowRegion

+         id="flowRegion11363"><rect

+           id="rect11365"

+           width="94.752312"

+           height="17.67767"

+           x="813.87988"

+           y="1064.3831"

+           style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold" /></flowRegion><flowPara

+         id="flowPara11367">User Project</flowPara></flowRoot>    <flowRoot

+       xml:space="preserve"

+       id="flowRoot11369"

+       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+       transform="translate(-763.87827,-982.67399)"

+       inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/img/intro/toolchain.png"

+       inkscape:export-xdpi="90"

+       inkscape:export-ydpi="90"><flowRegion

+         id="flowRegion11371"><rect

+           id="rect11373"

+           width="116.12012"

+           height="17.979126"

+           x="813.87988"

+           y="1064.3831"

+           style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold" /></flowRegion><flowPara

+         id="flowPara11375">Developer Tools</flowPara></flowRoot>    <rect

+       style="opacity:0;fill:none;fill-opacity:0.6875;stroke:none;stroke-width:0.95700002;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"

+       id="rect19657"

+       width="565"

+       height="465"

+       x="35"

+       y="52.362183"

+       rx="8.6243191"

+       ry="4.9402232"

+       inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/img/intro/toolchain.png"

+       inkscape:export-xdpi="90"

+       inkscape:export-ydpi="90" />

+    <rect

+       style="fill:none;stroke:#000000;stroke-width:1.77165353;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+       id="rect6642"

+       width="179.50377"

+       height="179.94197"

+       x="44.538742"

+       y="75.790634"

+       ry="3.7880721" />

+    <g

+       transform="translate(51.979289,-16.470967)"

+       id="g28403">

+      <rect

+         style="fill:#4fb047;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect4680"

+         width="130.11183"

+         height="142.24257"

+         x="9.6957684"

+         y="119.85882"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:14px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot3307"

+         transform="translate(5.320609,22.724306)"><flowRegion

+           id="flowRegion3309"><use

+             x="0"

+             y="0"

+             xlink:href="#rect4680"

+             id="use3311"

+             width="744.09448"

+             height="1052.3622"

+             transform="translate(-0.08313296,-13.857718)" /></flowRegion><flowPara

+           id="flowPara3313">Eclipse IDE</flowPara></flowRoot>      <flowRoot

+         xml:space="preserve"

+         id="flowRoot11361-6-1-1-2-9-4-9-6"

+         style="font-size:12px;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:#ffffff;fill-opacity:1;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"

+         transform="translate(-797.72677,-917.96995)"

+         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-64-3-8-8-6-8"><rect

+             id="rect11365-5-4-5-1-4-8-8-5"

+             width="136.60326"

+             height="42.457775"

+             x="813.87988"

+             y="1064.3831"

+             style="font-size:12px;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:#ffffff;fill-opacity:1;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" /></flowRegion><flowPara

+           id="flowPara17609-3-7-2-3-9-1">(optional)</flowPara></flowRoot>    </g>

+    <g

+       transform="translate(35.305057,331.62713)"

+       id="g28403-1">

+      <rect

+         style="fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect4680-5"

+         width="544.37036"

+         height="63.517254"

+         x="9.6957684"

+         y="119.85882"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:18px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot3307-9"

+         transform="translate(8.4356698,25.839367)"><flowRegion

+           id="flowRegion3309-9"><use

+             x="0"

+             y="0"

+             xlink:href="#rect4680-5"

+             id="use3311-1"

+             width="744.09448"

+             height="1052.3622"

+             transform="translate(-0.08313296,-13.857718)" /></flowRegion><flowPara

+           id="flowPara3313-62">Java SDK</flowPara></flowRoot>    </g>

+    <flowRoot

+       xml:space="preserve"

+       id="flowRoot11361-6"

+       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+       transform="translate(-407.79416,-793.88956)"

+       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"><rect

+           id="rect11365-5"

+           width="159.7314"

+           height="20.981634"

+           x="813.87988"

+           y="1064.3831"

+           style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold" /></flowRegion><flowPara

+         id="flowPara11367-2">Web Application (WAR)</flowPara></flowRoot>    <g

+       transform="translate(38.613319,112.28017)"

+       id="g28403-3">

+      <rect

+         style="fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3;stroke-opacity:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect4680-7"

+         width="149.53987"

+         height="60.488556"

+         x="21.810513"

+         y="180.43254"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

+         id="flowRoot11361-6-1"

+         style="font-size:14px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         transform="translate(-786.22146,-876.33845)"

+         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"><rect

+             id="rect11365-5-4"

+             width="136.60326"

+             height="42.457775"

+             x="813.87988"

+             y="1064.3831"

+             style="font-size:14px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold" /></flowRegion><flowPara

+           id="flowPara17605">Vaadin</flowPara><flowPara

+           id="flowPara17609">Library &amp; Themes</flowPara></flowRoot>    </g>

+    <g

+       transform="translate(39.163989,181.70718)"

+       id="g28403-3-9">

+      <rect

+         style="fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3;stroke-opacity:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect4680-7-1"

+         width="150.09055"

+         height="62.691235"

+         x="21.259842"

+         y="179.88187"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

+         id="flowRoot11361-6-1-2"

+         style="font-size:14px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         transform="translate(-787.87347,-877.99046)"

+         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-6"><rect

+             id="rect11365-5-4-9"

+             width="142.10995"

+             height="56.224495"

+             x="813.87988"

+             y="1064.3831"

+             style="font-size:14px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold" /></flowRegion><flowPara

+           id="flowPara17609-8">User</flowPara><flowPara

+           id="flowPara17650">Sources &amp; Themes</flowPara></flowRoot>    </g>

+    <g

+       transform="translate(392.17272,112.28017)"

+       id="g28403-3-0">

+      <rect

+         style="fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3;stroke-opacity:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect4680-7-0"

+         width="149.53987"

+         height="60.488556"

+         x="21.810513"

+         y="180.43254"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

+         id="flowRoot11361-6-1-1"

+         style="font-size:14px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         transform="translate(-782.22146,-876.33845)"

+         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-64"><rect

+             id="rect11365-5-4-5"

+             width="136.60326"

+             height="42.457775"

+             x="813.87988"

+             y="1064.3831"

+             style="font-size:14px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold" /></flowRegion><flowPara

+           id="flowPara17605-8">Vaadin</flowPara><flowPara

+           id="flowPara17609-3">Library &amp; Themes</flowPara></flowRoot>    </g>

+    <g

+       transform="translate(392.72339,181.70718)"

+       id="g28403-3-9-1">

+      <rect

+         style="fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:3;stroke-opacity:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect4680-7-1-2"

+         width="150.09055"

+         height="62.691235"

+         x="21.259842"

+         y="179.88187"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

+         id="flowRoot11361-6-1-2-2"

+         style="font-size:14px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         transform="translate(-783.87347,-877.99046)"

+         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-6-9"><rect

+             id="rect11365-5-4-9-5"

+             width="142.10995"

+             height="56.224495"

+             x="813.87988"

+             y="1064.3831"

+             style="font-size:14px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold" /></flowRegion><flowPara

+           id="flowPara17609-8-5">User Executable</flowPara><flowPara

+           id="flowPara17650-4">&amp; Themes</flowPara></flowRoot>    </g>

+    <g

+       transform="translate(416.84384,59.059463)"

+       id="g28403-2">

+      <rect

+         style="fill:#4fb047;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect4680-4"

+         width="146.14641"

+         height="64.509453"

+         x="-1.08788"

+         y="122.0615"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

+         id="flowRoot11361-6-1-1-2"

+         style="font-size:14px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         transform="translate(-805.39463,-934.99119)"

+         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-64-3"><rect

+             id="rect11365-5-4-5-1"

+             width="136.60326"

+             height="42.457775"

+             x="813.87988"

+             y="1064.3831"

+             style="font-size:14px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold" /></flowRegion><flowPara

+           id="flowPara17609-3-7">Apache Tomcat</flowPara></flowRoot>      <flowRoot

+         xml:space="preserve"

+         id="flowRoot11361-6-1-1-2-9"

+         style="font-size:12px;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:#ffffff;fill-opacity:1;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"

+         transform="translate(-805.41938,-916.49551)"

+         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-64-3-8"><rect

+             id="rect11365-5-4-5-1-4"

+             width="136.60326"

+             height="42.457775"

+             x="813.87988"

+             y="1064.3831"

+             style="font-size:12px;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:#ffffff;fill-opacity:1;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" /></flowRegion><flowPara

+           id="flowPara17609-3-7-2">or any other web container</flowPara></flowRoot>    </g>

+    <flowRoot

+       xml:space="preserve"

+       id="flowRoot11369-9"

+       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+       transform="translate(-415.72387,-902.95392)"

+       inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/img/intro/toolchain.png"

+       inkscape:export-xdpi="90"

+       inkscape:export-ydpi="90"><flowRegion

+         id="flowRegion11371-3"><rect

+           id="rect11373-3"

+           width="116.12012"

+           height="17.979126"

+           x="813.87988"

+           y="1064.3831"

+           style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold" /></flowRegion><flowPara

+         id="flowPara11375-6">Application Server</flowPara></flowRoot>    <rect

+       style="fill:none;stroke:#000000;stroke-width:1.77165353;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+       id="rect6642-49"

+       width="189.6277"

+       height="287.64139"

+       x="394.64005"

+       y="156.44901"

+       ry="3.7880721" />

+    <g

+       transform="translate(386.472,-43.932236)"

+       id="g28403-2-5">

+      <rect

+         style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect4680-4-4"

+         width="143.20576"

+         height="62.146721"

+         x="7.3594728"

+         y="119.85882"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

+         id="flowRoot11361-6-1-1-2-1"

+         style="font-size:14px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         transform="translate(-798.65656,-935.26653)"

+         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-64-3-6"><rect

+             id="rect11365-5-4-5-1-8"

+             width="136.60326"

+             height="42.457775"

+             x="813.87988"

+             y="1064.3831"

+             style="font-size:14px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold" /></flowRegion><flowPara

+           id="flowPara17609-3-7-0">Mozilla Firefox</flowPara></flowRoot>      <flowRoot

+         xml:space="preserve"

+         id="flowRoot11361-6-1-1-2-9-4"

+         style="font-size:12px;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:#ffffff;fill-opacity:1;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"

+         transform="translate(-798.68131,-915.81479)"

+         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-64-3-8-8"><rect

+             id="rect11365-5-4-5-1-4-8"

+             width="136.60326"

+             height="42.457775"

+             x="813.87988"

+             y="1064.3831"

+             style="font-size:12px;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:#ffffff;fill-opacity:1;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" /></flowRegion><flowPara

+           id="flowPara17609-3-7-2-3">or any other</flowPara><flowPara

+           id="flowPara23437">browser</flowPara></flowRoot>    </g>

+    <g

+       transform="translate(470.88179,-11.856436)"

+       id="g28403-2-5-7">

+      <rect

+         style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:2;stroke-opacity:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;stroke-miterlimit:4;stroke-dasharray:none"

+         id="rect4680-4-4-5"

+         width="99.427483"

+         height="38.192566"

+         x="10.388159"

+         y="123.16283"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

+         id="flowRoot11361-6-1-1-2-1-6"

+         style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         transform="translate(-798.65656,-935.26653)"

+         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-64-3-6-0"><rect

+             id="rect11365-5-4-5-1-8-4"

+             width="136.60326"

+             height="42.457775"

+             x="813.87988"

+             y="1064.3831"

+             style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold" /></flowRegion><flowPara

+           id="flowPara17609-3-7-0-6">Firebug Plugin</flowPara></flowRoot>      <flowRoot

+         xml:space="preserve"

+         id="flowRoot11361-6-1-1-2-9-4-9"

+         style="font-size:12px;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:#ffffff;fill-opacity:1;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"

+         transform="translate(-798.68131,-922.91615)"

+         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-64-3-8-8-6"><rect

+             id="rect11365-5-4-5-1-4-8-8"

+             width="136.60326"

+             height="42.457775"

+             x="813.87988"

+             y="1064.3831"

+             style="font-size:12px;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:#ffffff;fill-opacity:1;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" /></flowRegion><flowPara

+           id="flowPara17609-3-7-2-3-9">(optional)</flowPara></flowRoot>    </g>

+    <path

+       inkscape:connector-type="polyline"

+       id="path4676"

+       d="m 186.86922,214.73837 225.57699,0.0813"

+       style="fill:none;stroke:#4fb047;stroke-width:4;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:none;marker-mid:none;marker-end:url(#marker52016);display:inline"

+       inkscape:connector-curvature="0"

+       sodipodi:nodetypes="cc" />

+    <path

+       inkscape:connector-type="polyline"

+       id="path4676-4"

+       d="m 206.52638,393.9556 204.492,0.0813"

+       style="fill:none;stroke:#f39300;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker-start:none;marker-mid:none;marker-end:url(#marker52016);display:inline"

+       inkscape:connector-curvature="0"

+       sodipodi:nodetypes="cc" />

+    <g

+       transform="translate(64.64086,36.289394)"

+       id="g28403-2-5-7-9">

+      <rect

+         style="fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:2;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect4680-4-4-5-5"

+         width="99.427483"

+         height="38.192566"

+         x="10.388159"

+         y="123.16283"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

+         id="flowRoot11361-6-1-1-2-1-6-3"

+         style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         transform="translate(-798.65656,-935.26653)"

+         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-64-3-6-0-2"><rect

+             id="rect11365-5-4-5-1-8-4-4"

+             width="136.60326"

+             height="42.457775"

+             x="813.87988"

+             y="1064.3831"

+             style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold" /></flowRegion><flowPara

+           id="flowPara17609-3-7-0-6-8">Vaadin Plugin</flowPara></flowRoot>      <flowRoot

+         xml:space="preserve"

+         id="flowRoot11361-6-1-1-2-9-4-9-3"

+         style="font-size:12px;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:#ffffff;fill-opacity:1;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"

+         transform="translate(-798.68131,-922.91615)"

+         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-64-3-8-8-6-5"><rect

+             id="rect11365-5-4-5-1-4-8-8-9"

+             width="136.60326"

+             height="42.457775"

+             x="813.87988"

+             y="1064.3831"

+             style="font-size:12px;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:#ffffff;fill-opacity:1;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" /></flowRegion><flowPara

+           id="flowPara17609-3-7-2-3-9-2">(optional)</flowPara></flowRoot>    </g>

+    <flowRoot

+       xml:space="preserve"

+       id="flowRoot11361-6-1-1-2-9-4-9-6-6"

+       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;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"

+       transform="translate(-569.95724,-867.87202)"

+       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-64-3-8-8-6-8-8"><rect

+           id="rect11365-5-4-5-1-4-8-8-5-5"

+           width="136.60326"

+           height="42.457775"

+           x="813.87988"

+           y="1064.3831"

+           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;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" /></flowRegion><flowPara

+         id="flowPara17609-3-7-2-3-9-1-0">Deploy and Control</flowPara></flowRoot>    <flowRoot

+       xml:space="preserve"

+       id="flowRoot11361-6-1-1-1"

+       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;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"

+       transform="translate(-574.81713,-688.54658)"

+       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-64-6"><rect

+           id="rect11365-5-4-5-0"

+           width="158.07941"

+           height="33.096371"

+           x="813.87988"

+           y="1064.3831"

+           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;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" /></flowRegion><flowPara

+         id="flowPara17609-3-3">Compile and Package</flowPara></flowRoot>  </g>

+  <g

+     inkscape:groupmode="layer"

+     id="layer2"

+     inkscape:label="Varjot" />

+</svg>