Add documentation to master branch

Change-Id: I2504bb10f1ae73ec0cbc08b7ba5a88925caa1674
author: Markus Koivisto <markus@vaadin.com> 2016-01-22 14:55:18 +0200
committer: Markus Koivisto <markus@vaadin.com> 2016-01-22 14:55:18 +0200
commit: 99d6de546c74f0eed230ea8253dda6b85109d2e7 (patch)
tree: 10fc21c557566fe3241e6e13499df18d80f8dcb2 /documentation/introduction
parent: 610736d9f373d4b37fd39ff8f90aabd13eab7926 (diff)
download: vaadin-framework-99d6de546c74f0eed230ea8253dda6b85109d2e7.tar.gz
vaadin-framework-99d6de546c74f0eed230ea8253dda6b85109d2e7.zip
16 files changed, 2705 insertions, 0 deletions
diff --git a/documentation/introduction/chapter-introduction.asciidoc b/documentation/introduction/chapter-introduction.asciidoc
new file mode 100644
index 0000000000..111d3a23f5
--- /dev/null
+++ b/documentation/introduction/chapter-introduction.asciidoc
@@ -0,0 +1,17 @@
+[[intro]]
+== Introduction
+
+This chapter gives a brief introduction to software development with Vaadin. We
+also try to give some insight about the design philosophy behind Vaadin and its
+history.
+
+
+include::intro-overview.asciidoc[leveloffset=+2]
+
+include::intro-walkthrough.asciidoc[leveloffset=+2]
+
+include::intro-eclipse.asciidoc[leveloffset=+2]
+
+include::intro-goals.asciidoc[leveloffset=+2]
+
+include::intro-background.asciidoc[leveloffset=+2]
diff --git a/documentation/introduction/img/HelloWorld.png b/documentation/introduction/img/HelloWorld.png
new file mode 100644
index 0000000000..3991d0dbab
--- /dev/null
+++ b/documentation/introduction/img/HelloWorld.png
diff --git a/documentation/introduction/img/architecture-vaadin7-hi.png b/documentation/introduction/img/architecture-vaadin7-hi.png
new file mode 100644
index 0000000000..a28e5be7c6
--- /dev/null
+++ b/documentation/introduction/img/architecture-vaadin7-hi.png
diff --git a/documentation/introduction/img/architecture-vaadin7-lo.png b/documentation/introduction/img/architecture-vaadin7-lo.png
new file mode 100644
index 0000000000..5ef0c0bea0
--- /dev/null
+++ b/documentation/introduction/img/architecture-vaadin7-lo.png
diff --git a/documentation/introduction/img/intro-themes-faded-hi.png b/documentation/introduction/img/intro-themes-faded-hi.png
new file mode 100644
index 0000000000..e7f4653232
--- /dev/null
+++ b/documentation/introduction/img/intro-themes-faded-hi.png
diff --git a/documentation/introduction/img/intro-themes-faded-lo.png b/documentation/introduction/img/intro-themes-faded-lo.png
new file mode 100644
index 0000000000..b9c4b5724f
--- /dev/null
+++ b/documentation/introduction/img/intro-themes-faded-lo.png
diff --git a/documentation/introduction/intro-background.asciidoc b/documentation/introduction/intro-background.asciidoc
new file mode 100644
index 0000000000..ec70b75d9f
--- /dev/null
+++ b/documentation/introduction/intro-background.asciidoc
@@ -0,0 +1,94 @@
+---
+title: Background
+order: 5
+layout: page
+---
+
+[[intro.background]]
+= Background
+
+The Vaadin Framework was not written overnight. After working with web user
+interfaces since the beginning of the Web, a group of developers got together in
+2000 to form IT Mill. The team had a desire to develop a new programming
+paradigm that would support the creation of real user interfaces for real
+applications using a real programming language.
+
+The library was originally called Millstone Library. The first version was used
+in a large production application that IT Mill designed and implemented for an
+international pharmaceutical company. IT Mill made the application already in
+the year 2001 and it is still in use. Since then, the company has produced
+dozens of large business applications with the library and it has proven its
+ability to solve hard problems easily.
+
+The next generation of the library, IT Mill Toolkit Release 4, was released in
+2006. It introduced an entirely new AJAX-based presentation engine. This allowed
+the development of AJAX applications without the need to worry about
+communications between the client and the server.
+
+[[intro.background.toolkit-5]]
+== Release 5 Into the Open
+
+((("IT Mill
+Toolkit")))
+((("AJAX")))
+IT Mill Toolkit 5, released initially at the end of 2007, took a significant
+step further into AJAX. The client-side rendering of the user interface was
+completely rewritten using GWT, the Google Web Toolkit. ((("Google Web
+Toolkit")))
+
+IT Mill Toolkit 5 introduced many significant improvements both in the
+server-side API and in the functionality. Rewriting the Client-Side Engine with
+GWT allowed the use of Java both on the client and the server-side. The
+transition from JavaScript to GWT made the development and integration of custom
+components and customization of existing components much easier than before, and
+it also allows easy integration of existing GWT components. The adoption of GWT
+on the client-side did not, by itself, cause any changes in the server-side API,
+because GWT is a browser technology that is hidden well behind the API. Also
+theming was completely revised in IT Mill Toolkit 5.
+
+The Release 5 was published under the Apache License 2, an unrestrictive open
+source license, to create faster expansion of the user base and to make the
+formation of a developer community possible.
+
+
+[[intro.background.vaadin6]]
+== Birth of Vaadin Release 6
+
+IT Mill Toolkit was renamed as __Vaadin Framework__, or Vaadin in short, in
+spring 2009. Later IT Mill, the company, was also renamed as Vaadin Ltd. Vaadin
+means an adult female semi-domesticated mountain reindeer in Finnish.
+
+With Vaadin 6, the number of developers using the framework exploded. Together
+with the release, the Vaadin Plugin for Eclipse was released, helping the
+creation of Vaadin projects. The introduction of Vaadin Directory in early 2010
+gave it a further boost, as the number of available components multiplied almost
+overnight. Many of the originally experimental components have since then
+matured and are now used by thousands of developers. In 2013, we are seeing
+tremendous growth in the ecosystem around Vaadin. The size of the user
+community, at least if measured by forum activity, has already gone past the
+competing server-side frameworks and even GWT.
+
+
+[[intro.background.vaadin7]]
+== The Major Revision with Vaadin 7
+
+Vaadin 7 was a major revision that changed the Vaadin API much more than Vaadin
+6 did. It is certainly more web-oriented than Vaadin 6 was. We are doing
+everything we can to help Vaadin rise high in the web universe. Some of this
+work is easy and almost routine - fixing bugs and implementing features. But
+going higher also requires standing firmer. That was one of the aims of Vaadin 7
+- redesigning the product so that the new architecture enables Vaadin to reach
+over many long-standing challenges. Many of the changes required breaking API
+compatibility with Vaadin 6, especially in the client-side, but they are made
+with a strong desire to avoid carrying unnecessary legacy burden far into the
+future.
+
+Inclusion of the Google Web Toolkit in Vaadin 7 was a significant development,
+as it meant that Vaadin now provides support for GWT as well. When Google opened
+the GWT development in summer 2012, Vaadin (the company) joined the new GWT
+steering committee. As a member of the committee, Vaadin can work towards the
+success of GWT as a foundation of the Java web development community.
+
+
+
+
diff --git a/documentation/introduction/intro-eclipse.asciidoc b/documentation/introduction/intro-eclipse.asciidoc
new file mode 100644
index 0000000000..b2fb127f7b
--- /dev/null
+++ b/documentation/introduction/intro-eclipse.asciidoc
@@ -0,0 +1,40 @@
+---
+title: Support for the Eclipse IDE
+order: 3
+layout: page
+---
+
+[[intro.eclipse]]
+= Support for the Eclipse IDE
+
+While Vaadin is not bound to any specific IDE, and you can in fact easily use it
+without any IDE altogether, we provide special support for the Eclipse IDE,
+which has become the most used environment for Java development. The support is
+provided in the Vaadin Plugin for Eclipse, which helps you in:
+
+* Creating new Vaadin projects
+
+* Creating custom themes
+
+* Creating custom client-side widgets
+
+* Easily upgrading to a newer version of the Vaadin library
+
+
+Using the Vaadin Plugin for Eclipse is the recommended way of installing Vaadin
+for development. Downloading the installation package that contains the JARs or
+defining Vaadin as a Maven dependency is also possible.
+
+Installing and updating the Eclipse plugin is covered in
+<<dummy/../../../framework/getting-started/getting-started-eclipse#getting-started.eclipse,"Vaadin
+Plugin for Eclipse">> and the creation of a new Vaadin project using the plugin
+in
+<<dummy/../../../framework/getting-started/getting-started-first-project#getting-started.first-project.creation,"Creating
+the Project">>. See
+<<dummy/../../../framework/themes/themes-eclipse#themes.eclipse,"Creating a
+Theme in Eclipse">> and
+<<dummy/../../../framework/gwt/gwt-eclipse#gwt.eclipse,"Starting It Simple With
+Eclipse">> for instructions on using the different features of the plugin.
+
+
+
diff --git a/documentation/introduction/intro-goals.asciidoc b/documentation/introduction/intro-goals.asciidoc
new file mode 100644
index 0000000000..0972a998cf
--- /dev/null
+++ b/documentation/introduction/intro-goals.asciidoc
@@ -0,0 +1,53 @@
+---
+title: Goals and Philosophy
+order: 4
+layout: page
+---
+
+[[intro.goals]]
+= Goals and Philosophy
+
+Simply put, Vaadin's ambition is to be the best possible tool when it comes to
+creating web user interfaces for business applications. It is easy to adopt, as
+it is designed to support both entry-level and advanced programmers, as well as
+usability experts and graphic designers.
+
+When designing Vaadin, we have followed the philosophy inscribed in the
+following rules.
+
+== Right tool for the right purpose
+
+Because our goals are high, the focus must be clear. Vaadin is designed for
+creating web applications. It is not designed for creating websites or
+advertisement demos. You may find, for example, JSP/JSF or Flash more suitable
+for such purposes.
+
+
+== Simplicity and maintainability
+
+We have chosen to emphasize robustness, simplicity, and maintainability. This
+involves following the well-established best practices in user interface
+frameworks and ensuring that our implementation represents an ideal solution for
+its purpose without clutter or bloat.
+
+
+== XML is not designed for programming
+
+The Web is inherently document-centered and very much bound to the declarative
+presentation of user interfaces. While Vaadin allows for declarative designs of
+views, layouts, and even entire UIs, the programmatic approach by building the
+UIs from Java components frees the programmer from these limitations. To create
+highly dynamic views, it is more natural to create them by programming.
+
+
+== Tools should not limit your work
+
+There should not be any limits on what you can do with the framework: if for
+some reason the user interface components do not support what you need to
+achieve, it must be easy to add new ones to your application. When you need to
+create new components, the role of the framework is critical: it makes it easy
+to create re-usable components that are easy to maintain.
+
+
+
+
diff --git a/documentation/introduction/intro-overview.asciidoc b/documentation/introduction/intro-overview.asciidoc
new file mode 100644
index 0000000000..fb46e6fac6
--- /dev/null
+++ b/documentation/introduction/intro-overview.asciidoc
@@ -0,0 +1,89 @@
+---
+title: Overview
+order: 1
+layout: page
+---
+
+[[intro.overview]]
+= Overview
+
+Vaadin Framework is a Java web application development framework that is
+designed to make creation and maintenance of high quality web-based user
+interfaces easy. Vaadin supports two different programming models: server-side
+and client-side. The server-driven programming model is the more powerful one.
+It lets you forget the web and program user interfaces much like you would
+program a desktop application with conventional Java toolkits such as AWT,
+Swing, or SWT. But easier.
+
+While traditional web programming is a fun way to spend your time learning new
+web technologies, you probably want to be productive and concentrate on the
+application logic. The server-side Vaadin framework takes care of managing the
+user interface in the browser and the __AJAX__ communications between the
+browser and the server. With the Vaadin approach, you do not need to learn and
+deal directly with browser technologies, such as HTML or JavaScript.
+
+[[figure.intro.architecture]]
+.Vaadin Application Architecture
+image::img/architecture-vaadin7-hi.png[]
+
+<<figure.intro.architecture>> illustrates the basic architectures of web
+applications made with Vaadin. The server-side application architecture consists
+of the __server-side framework__ and a __client-side engine__. The engine runs
+in the browser as JavaScript code, rendering the user interface, and delivering
+user interaction to the server. The UI logic of an application runs as a Java
+Servlet in a Java application server.
+
+As the client-side engine is executed as JavaScript in the browser, no browser
+plugins are needed for using applications made with Vaadin. This gives it an
+edge over frameworks based on Flash, Java Applets, or other plugins. Vaadin
+relies on the support of Google Web Toolkit for a wide range of browsers, so
+that the developer does not need to worry about browser support.
+
+Because HTML, JavaScript, and other browser technologies are essentially
+invisible to the application logic, you can think of the web browser as only a
+thin client platform. A thin client displays the user interface and communicates
+user events to the server at a low level. The control logic of the user
+interface runs on a Java-based web server, together with your business logic. By
+contrast, a normal client-server architecture with a dedicated client
+application would include a lot of application specific communications between
+the client and the server. Essentially removing the user interface tier from the
+application architecture makes our approach a very effective one.
+
+Behind the server-driven development model, Vaadin makes the best use of AJAX (
+__Asynchronous JavaScript and XML__, see
+<<dummy/../../../framework/architecture/architecture-technology#architecture.technology.ajax,"AJAX">>
+for a description) techniques that make it possible to create Rich Internet
+Applications (RIA) that are as responsive and interactive as desktop
+applications.
+
+In addition to the server-side Java application development, you can develop on
+the client-side by making new widgets in Java, and even pure client-side
+applications that run solely in the browser. The Vaadin client-side framework
+includes Google Web Toolkit (GWT), which provides a compiler from Java to the
+JavaScript that runs in the browser, as well a full-featured user interface
+framework. With this approach, Vaadin is pure Java on both sides. ((("Google Web
+Toolkit")))
+
+Vaadin uses a client-side engine for rendering the user interface of a
+server-side application in the browser. All the client-server communications are
+hidden well under the hood.
+((("JavaScript")))
+Vaadin is designed to be extensible, and you can indeed use any 3rd-party
+widgets easily, in addition to the component repertoire offered in Vaadin. In
+fact, you can find hundreds of add-ons in the Vaadin Directory.
+
+Vaadin allows flexible separation between the appearance, structure, and
+interaction logic of the user interface. You can design the layouts either
+programmatically or declaratively, at the level of your choosing. The final
+appearance is defined in __themes__ in CSS or Sass, as described in
+<<dummy/../../../framework/themes/themes-overview.asciidoc#themes.overview,"Themes">>.
+
+We hope that this is enough about the basic architecture and features of Vaadin
+for now. You can read more about it later in
+<<dummy/../../../framework/architecture/architecture-overview.asciidoc#architecture.overview,"Architecture">>,
+or jump straight to more practical things in
+<<dummy/../../../framework/application/application-overview.asciidoc#application.overview,"Writing
+a Server-Side Web Application">>.
+
+
+
diff --git a/documentation/introduction/intro-walkthrough.asciidoc b/documentation/introduction/intro-walkthrough.asciidoc
new file mode 100644
index 0000000000..218e76b337
--- /dev/null
+++ b/documentation/introduction/intro-walkthrough.asciidoc
@@ -0,0 +1,111 @@
+---
+title: Example Application Walkthrough
+order: 2
+layout: page
+---
+
+[[intro.walkthrough]]
+= Example Application Walkthrough
+
+Let us follow the long tradition of first saying "Hello World!" when learning a
+new programming framework. First, using the primary server-side API.
+
+
+[source, java]
+----
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.UI;
+
+@Title("My UI")
+@Theme("valo")
+public class HelloWorld extends UI {
+    @Override
+    protected void init(VaadinRequest request) {
+        // Create the content root layout for the UI
+        VerticalLayout content = new VerticalLayout();
+        setContent(content);
+
+        // Display the greeting
+        content.addComponent(new Label("Hello World!"));
+
+        // Have a clickable button        
+        content.addComponent(new Button("Push Me!",
+            new ClickListener() {
+                @Override
+                public void buttonClick(ClickEvent e) {
+                    Notification.show("Pushed!");
+                }
+            }));
+    }
+}
+----
+
+A Vaadin application has one or more __UI__s that extend the
+[classname]#com.vaadin.ui.UI# class. A UI is a part of the web page in which the
+Vaadin application runs. An application can have multiple UIs in the same page,
+especially in portals, or in different windows or tabs. A UI is associated with
+a user session, and a session is created for each user who uses the application.
+In the context of our Hello World UI, it is sufficient to know that the
+underlying session is created when the user first accesses the application by
+opening the page, and the [methodname]#init()# method is invoked at that time.
+
+The page title, which is shown in the caption of the browser window or tab, is
+defined with an annotation. The example uses a layout component as the root
+content of the UI, as that is the case with most Vaadin applications, which
+normally have more than one component. It then creates a new [classname]#Label#
+user interface component, which displays simple text, and sets the text to
+"Hello World!". The label is added to the layout.
+
+The example also shows how to create a button and handle button click events.
+Event handling is described in
+<<dummy/../../../framework/architecture/architecture-events#architecture.events,"Events
+and Listeners">> and on the practical side in
+<<dummy/../../../framework/application/application-events#application.events,"Handling
+Events with Listeners">>. In addition to listeners, in Java 8 you can handle
+events with lambda expressions, which simplifies the handler code significantly.
+
+
+[source, java]
+----
+content.addComponent(new Button("Push Me!",
+    event -> Notification.show("Pushed!")));
+----
+
+The result of the Hello World application, when opened in a browser, is shown in
+<<figure.intro.walkthrough>>.
+
+[[figure.intro.walkthrough]]
+.Hello World Application
+image::img/HelloWorld.png[]
+
+To run a program, you need to package it as a web application WAR package and
+deploy it to a server, as explained in
+<<dummy/../../../framework/application/application-environment#application.environment,"Deploying
+an Application">>. During development, you typically deploy to an application
+server integrated with the IDE.
+
+Developing a pure client-side application, you could write a Hello World just as
+easily, and also in Java:
+
+
+[source, java]
+----
+public class HelloWorld implements EntryPoint {
+    @Override
+    public void onModuleLoad() {
+        RootPanel.get().add(new Label("Hello, world!"));
+    }
+}
+----
+
+We do not set the title here, because it is usually defined in the HTML page in
+which the code is executed. The application would be compiled into JavaScript
+with the Vaadin Client Compiler (or GWT Compiler). It is more typical, however,
+to write client-side widgets, which you can then use from a server-side Vaadin
+application. For more information regarding client-side development, see
+<<dummy/../../../framework/clientside/clientside-overview.asciidoc#clientside.overview,"Client-Side
+Vaadin Development">>.
+
+
+
diff --git a/documentation/introduction/original-drawings/architecture-vaadin7.svg b/documentation/introduction/original-drawings/architecture-vaadin7.svg
new file mode 100644
index 0000000000..581fb7aa04
--- /dev/null
+++ b/documentation/introduction/original-drawings/architecture-vaadin7.svg
@@ -0,0 +1,826 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="210mm"
+   height="297mm"
+   id="svg1901"
+   sodipodi:version="0.32"
+   inkscape:version="0.48.2 r9819"
+   sodipodi:docname="architecture-vaadin7.svg"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape"
+   inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/original-drawings/intro/architecture.png"
+   inkscape:export-xdpi="300"
+   inkscape:export-ydpi="300"
+   version="1.1">
+  <defs
+     id="defs1903">
+    <marker
+       id="marker18095"
+       orient="auto"
+       markerHeight="5.7450776"
+       markerWidth="4.6297302">
+      <g
+         id="g11064"
+         transform="matrix(0.5,0,0,0.5,-185.64298,-257.19655)">
+        <path
+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"
+           id="path11050"
+           d="M 370,508.65625 C 369.13933,508.715 368.39056,509.27755 368.09375,510.09375 C 367.82399,510.83551 368.03605,511.62868 368.53125,512.21875 L 366.78125,512.21875 C 366.73884,512.21408 366.69882,512.22093 366.65625,512.21875 L 366.65625,516.59375 L 366.78125,516.59375 L 368.53125,516.59375 C 367.85229,517.45345 367.83424,518.70924 368.625,519.5 C 369.47591,520.35091 370.89909,520.35091 371.75,519.5 L 375.09375,516.125 C 375.12672,516.09552 375.15802,516.06422 375.1875,516.03125 C 375.21972,516.01191 375.25101,515.99105 375.28125,515.96875 C 375.28162,515.96839 375.49976,515.68796 375.5,515.6875 C 375.50005,515.68741 375.49338,515.64282 375.5,515.625 C 375.5011,515.62203 375.53002,515.62832 375.53125,515.625 C 375.57039,515.57293 375.58228,515.57321 375.625,515.5 C 375.76199,515.26524 375.79184,515.12809 375.78125,515.15625 C 375.81807,515.06473 375.79977,515.04374 375.8125,515 C 375.82311,514.98978 375.83353,514.97936 375.84375,514.96875 C 375.90379,514.74477 375.93181,514.45186 375.90625,514.1875 C 375.89266,513.98387 375.84739,513.88985 375.84375,513.875 C 375.84389,513.86458 375.84389,513.85417 375.84375,513.84375 C 375.86975,513.94071 375.85901,513.85978 375.75,513.59375 C 375.69753,513.46336 375.66014,513.37439 375.625,513.3125 C 375.57262,513.22275 375.49154,513.05015 375.28125,512.84375 L 371.75,509.3125 C 371.29355,508.82579 370.66491,508.60087 370,508.65625 z"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1" />
+        <path
+           sodipodi:nodetypes="cccscccsssssssscccsccc"
+           id="path11035"
+           d="M 366.65625,515.40625 L 371.28125,515.40625 L 369.46875,517.21875 C 369.0718,517.6157 369.0718,518.2593 369.46875,518.65625 C 369.8657,519.0532 370.5093,519.0532 370.90625,518.65625 L 374.34375,515.1875 L 374.4375,515.125 C 374.44343,515.11918 374.43171,515.09972 374.4375,515.09375 C 374.49291,515.03659 374.5526,514.97676 374.59375,514.90625 C 374.62239,514.85717 374.63663,514.80216 374.65625,514.75 C 374.66861,514.71928 374.67831,514.68783 374.6875,514.65625 C 374.71862,514.54015 374.73024,514.43132 374.71875,514.3125 C 374.71489,514.25466 374.70138,514.21285 374.6875,514.15625 C 374.6766,514.1156 374.67237,514.07059 374.65625,514.03125 C 374.63982,513.99042 374.61578,513.94505 374.59375,513.90625 C 374.5483,513.82838 374.50015,513.74899 374.4375,513.6875 L 370.90625,510.15625 C 370.69734,509.93349 370.39809,509.8184 370.09375,509.84375 C 369.69897,509.8707 369.35398,510.12813 369.21875,510.5 C 369.08351,510.87187 369.18349,511.28826 369.46875,511.5625 L 371.34375,513.40625 L 366.65625,513.40625"
+           style="fill:#49c2f1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      </g>
+    </marker>
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="0 : 526.18109 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="744.09448 : 526.18109 : 1"
+       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
+       id="perspective110" />
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0.0"
+       refX="0.0"
+       id="TriangleOutL"
+       style="overflow:visible">
+      <path
+         id="path3520"
+         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="linearGradient3503">
+      <stop
+         style="stop-color:#37ff40;stop-opacity:0.53608245;"
+         offset="0"
+         id="stop3505" />
+      <stop
+         style="stop-color:#ffe0e0;stop-opacity:1;"
+         offset="1"
+         id="stop3507" />
+    </linearGradient>
+    <marker
+       inkscape:stockid="Arrow2Lstart"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow2Lstart"
+       style="overflow:visible">
+      <path
+         id="path6743"
+         style="font-size:12px;fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round"
+         d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.97309,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+         transform="matrix(1.1,0,0,1.1,1.1,0)" />
+    </marker>
+    <linearGradient
+       id="linearGradient19816">
+      <stop
+         id="stop19818"
+         offset="0"
+         style="stop-color:#ffffff;stop-opacity:1;" />
+      <stop
+         id="stop19820"
+         offset="1"
+         style="stop-color:#e7e790;stop-opacity:1;" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient11516">
+      <stop
+         id="stop11518"
+         offset="0"
+         style="stop-color:#ffffff;stop-opacity:1" />
+      <stop
+         id="stop11520"
+         offset="1"
+         style="stop-color:#a090e7;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient11508">
+      <stop
+         id="stop11510"
+         offset="0"
+         style="stop-color:#ffffff;stop-opacity:1;" />
+      <stop
+         id="stop11512"
+         offset="1"
+         style="stop-color:#e27979;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3286">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop3288" />
+      <stop
+         style="stop-color:#79e291;stop-opacity:1;"
+         offset="1"
+         id="stop3290" />
+    </linearGradient>
+    <marker
+       inkscape:stockid="Arrow2Lend"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow2Lend"
+       style="overflow:visible">
+      <path
+         id="path16811"
+         style="font-size:12px;fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round"
+         d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.97309,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+         transform="matrix(-1.1,0,0,-1.1,-1.1,0)" />
+    </marker>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.8"
+     inkscape:cx="230.46176"
+     inkscape:cy="936.84249"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     gridtolerance="10000"
+     inkscape:window-width="1672"
+     inkscape:window-height="1019"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:showpageshadow="false"
+     borderlayer="false"
+     showgrid="true"
+     inkscape:window-maximized="0"
+     showguides="true"
+     inkscape:guide-bbox="true"
+     inkscape:snap-bbox="true">
+    <inkscape:grid
+       type="xygrid"
+       id="grid6362"
+       visible="true"
+       enabled="true"
+       empspacing="5"
+       snapvisiblegridlinesonly="true"
+       spacingx="1px" />
+    <sodipodi:guide
+       orientation="0,1"
+       position="27,1017"
+       id="guide3154" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata1906">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Taso 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="opacity:1">
+    <rect
+       ry="3.7880721"
+       y="30.362183"
+       x="115"
+       height="172"
+       width="235"
+       id="rect6367-4"
+       style="fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+    <g
+       id="g6789"
+       transform="translate(201.94598,-187.75591)">
+      <rect
+         ry="3.7880721"
+         y="235.11809"
+         x="13.054024"
+         height="120.00001"
+         width="54.999996"
+         id="rect6791"
+         style="fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+      <flowRoot
+         xml:space="preserve"
+         id="flowRoot9963-2-3-6"
+         style="font-size:10px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;letter-spacing:0px;word-spacing:0px;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"
+         transform="translate(131.17902,-28.711907)"><flowRegion
+           id="flowRegion9965-2-7-7"><rect
+             id="rect9967-3-5-6"
+             width="68.012077"
+             height="51.315746"
+             x="-113.13708"
+             y="271.51425"
+             style="font-size:10px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;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="flowPara10992">UI Logic</flowPara></flowRoot>      <g
+         transform="matrix(0.06329721,0,0,0.06329721,12.360276,272.97423)"
+         id="g6827-8">
+        <g
+           id="g6829-7"
+           transform="matrix(29.999985,-0.03019888,0.03019888,29.999985,-11004.945,-15375.022)">
+          <g
+             style="fill:#ffffff;fill-opacity:1"
+             transform="matrix(0.71644053,0,0,0.71644053,103.9698,144.62879)"
+             id="g6831-7">
+            <path
+               inkscape:connector-curvature="0"
+               transform="matrix(0.03333332,3.3554312e-5,-3.3554312e-5,0.03333332,366.53421,512.86995)"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;display:inline"
+               d="M 142.5625,-6.4375 40.6875,-6.34375 C 29.868538,-6.48507 19.811533,-0.790227 14.367338,8.560208 8.9231424,17.910644 8.9351814,29.468085 14.398845,38.807157 19.862509,48.14623 29.931356,53.820109 40.75,53.65625 L 142.625,53.5625 c 10.81896,0.14132 20.87597,-5.553523 26.32016,-14.903958 5.4442,-9.350436 5.43216,-20.907877 -0.0315,-30.246949 C 163.44999,-0.92748 153.38114,-6.601359 142.5625,-6.4375 l 0,0 z"
+               id="path6833-7" />
+            <path
+               inkscape:connector-curvature="0"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
+               d="m 366.65701,514.67289 4.625,0 -1.8125,1.8125 c -0.39695,0.39695 -0.39695,1.04055 0,1.4375 0.39695,0.39695 1.04055,0.39695 1.4375,0 l 3.4375,-3.46875 0.0937,-0.0625 c 0.006,-0.006 -0.006,-0.0253 0,-0.0312 0.0554,-0.0572 0.1151,-0.11699 0.15625,-0.1875 0.0286,-0.0491 0.0429,-0.10409 0.0625,-0.15625 0.0124,-0.0307 0.0221,-0.0622 0.0312,-0.0937 0.0311,-0.1161 0.0427,-0.22493 0.0312,-0.34375 -0.004,-0.0578 -0.0174,-0.0996 -0.0312,-0.15625 -0.0109,-0.0407 -0.0151,-0.0857 -0.0312,-0.125 -0.0164,-0.0408 -0.0405,-0.0862 -0.0625,-0.125 -0.0455,-0.0779 -0.0936,-0.15726 -0.15625,-0.21875 l -3.53125,-3.53125 c -0.20891,-0.22276 -0.50816,-0.33785 -0.8125,-0.3125 -0.39478,0.0269 -0.73977,0.28438 -0.875,0.65625 -0.13524,0.37187 -0.0353,0.78826 0.25,1.0625 l 1.875,1.84375 -4.6875,0"
+               id="path6835-3"
+               sodipodi:nodetypes="cccscccsssssssscccsccc" />
+          </g>
+        </g>
+      </g>
+      <g
+         id="g6829-2-5-6"
+         transform="matrix(-1.8989154,-0.0019115,-0.0019115,1.8989154,765.271,-700.0021)">
+        <g
+           style="fill:#ffffff;fill-opacity:1"
+           transform="matrix(0.71644053,0,0,0.71644053,103.9698,144.62879)"
+           id="g6831-2-7-3">
+          <path
+             inkscape:connector-curvature="0"
+             transform="matrix(0.03333332,3.3554312e-5,-3.3554312e-5,0.03333332,366.53421,512.86995)"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;display:inline"
+             d="M 142.5625,-6.4375 40.6875,-6.34375 C 29.868538,-6.48507 19.811533,-0.790227 14.367338,8.560208 8.9231424,17.910644 8.9351814,29.468085 14.398845,38.807157 19.862509,48.14623 29.931356,53.820109 40.75,53.65625 L 142.625,53.5625 c 10.81896,0.14132 20.87597,-5.553523 26.32016,-14.903958 5.4442,-9.350436 5.43216,-20.907877 -0.0315,-30.246949 C 163.44999,-0.92748 153.38114,-6.601359 142.5625,-6.4375 l 0,0 z"
+             id="path6833-1-5-9" />
+          <path
+             inkscape:connector-curvature="0"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
+             d="m 366.65701,514.67289 4.625,0 -1.8125,1.8125 c -0.39695,0.39695 -0.39695,1.04055 0,1.4375 0.39695,0.39695 1.04055,0.39695 1.4375,0 l 3.4375,-3.46875 0.0937,-0.0625 c 0.006,-0.006 -0.006,-0.0253 0,-0.0312 0.0554,-0.0572 0.1151,-0.11699 0.15625,-0.1875 0.0286,-0.0491 0.0429,-0.10409 0.0625,-0.15625 0.0124,-0.0307 0.0221,-0.0622 0.0312,-0.0937 0.0311,-0.1161 0.0427,-0.22493 0.0312,-0.34375 -0.004,-0.0578 -0.0174,-0.0996 -0.0312,-0.15625 -0.0109,-0.0407 -0.0151,-0.0857 -0.0312,-0.125 -0.0164,-0.0408 -0.0405,-0.0862 -0.0625,-0.125 -0.0455,-0.0779 -0.0936,-0.15726 -0.15625,-0.21875 l -3.53125,-3.53125 c -0.20891,-0.22276 -0.50816,-0.33785 -0.8125,-0.3125 -0.39478,0.0269 -0.73977,0.28438 -0.875,0.65625 -0.13524,0.37187 -0.0353,0.78826 0.25,1.0625 l 1.875,1.84375 -4.6875,0"
+             id="path6835-0-9-2"
+             sodipodi:nodetypes="cccscccsssssssscccsccc" />
+        </g>
+      </g>
+    </g>
+    <g
+       id="g6813"
+       transform="translate(106.94598,-187.75591)">
+      <rect
+         ry="3.7880721"
+         y="235.11809"
+         x="13.054024"
+         height="120.00001"
+         width="90"
+         id="rect6815"
+         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" />
+      <flowRoot
+         xml:space="preserve"
+         id="flowRoot9963-2-3"
+         style="font-size:10px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
+         transform="translate(131.17902,-28.711907)"><flowRegion
+           id="flowRegion9965-2-7"><rect
+             id="rect9967-3-5"
+             width="95.012077"
+             height="37.315746"
+             x="-113.13708"
+             y="271.51425"
+             style="font-size:10px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr;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="flowPara10160">Components</flowPara></flowRoot>      <g
+         id="g28403-2-5-2-40-2"
+         transform="translate(15.694547,135.25927)">
+        <rect
+           ry="3.7880721"
+           y="119.85882"
+           x="7.3594728"
+           height="95.000008"
+           width="70"
+           id="rect4680-4-4-7-0-9"
+           style="fill:#666666;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+        <g
+           transform="translate(-9.4510395,-55.573718)"
+           id="g28403-3-5-6-2">
+          <rect
+             style="fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+             id="rect4680-7-10-5-0"
+             width="60"
+             height="25"
+             x="21.810513"
+             y="180.43254"
+             ry="3.7880721" />
+          <flowRoot
+             xml:space="preserve"
+             id="flowRoot11361-6-1-8-1-4"
+             style="font-size:8px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;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.43047,-878.23713)"
+             inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/img/intro/toolchain.png"
+             inkscape:export-xdpi="90"
+             inkscape:export-ydpi="90"><flowRegion
+               id="flowRegion11363-2-0-7-7-9"><rect
+                 id="rect11365-5-4-6-4-2"
+                 width="138.69197"
+                 height="47.876488"
+                 x="813.87988"
+                 y="1064.3831"
+                 style="font-size:8px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;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="flowPara4198-9-0">Built-in</flowPara><flowPara
+               id="flowPara4300-0">Components</flowPara></flowRoot>        </g>
+        <g
+           transform="translate(-9.4510395,-25.573718)"
+           id="g28403-3-5-6-6-7">
+          <rect
+             style="fill:#4fb047;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+             id="rect4680-7-10-5-5-8"
+             width="60"
+             height="25"
+             x="21.810513"
+             y="180.43254"
+             ry="3.7880721" />
+          <flowRoot
+             xml:space="preserve"
+             id="flowRoot11361-6-1-8-1-1-6"
+             style="font-size:8px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;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.52461,-878.4214)"
+             inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/img/intro/toolchain.png"
+             inkscape:export-xdpi="90"
+             inkscape:export-ydpi="90"><flowRegion
+               id="flowRegion11363-2-0-7-7-5-3"><rect
+                 id="rect11365-5-4-6-4-5-9"
+                 width="138.69197"
+                 height="47.876488"
+                 x="813.87988"
+                 y="1064.3831"
+                 style="font-size:8px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;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="flowPara4198-9-9-4">Add-on</flowPara><flowPara
+               id="flowPara4338-2">Components</flowPara></flowRoot>        </g>
+        <g
+           transform="translate(-9.4510395,4.4262817)"
+           id="g28403-3-5-6-6-6-5">
+          <rect
+             style="fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:1.5, 1.5;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+             id="rect4680-7-10-5-5-9-2"
+             width="60"
+             height="25"
+             x="21.810513"
+             y="180.43254"
+             ry="3.7880721" />
+          <flowRoot
+             xml:space="preserve"
+             id="flowRoot11361-6-1-8-1-1-4-4"
+             style="font-size:8px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;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.52461,-878.4214)"
+             inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/img/intro/toolchain.png"
+             inkscape:export-xdpi="90"
+             inkscape:export-ydpi="90"><flowRegion
+               id="flowRegion11363-2-0-7-7-5-8-5"><rect
+                 id="rect11365-5-4-6-4-5-7-3"
+                 width="138.69197"
+                 height="47.876488"
+                 x="813.87988"
+                 y="1064.3831"
+                 style="font-size:8px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;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="flowPara4198-9-9-0-2">Custom</flowPara><flowPara
+               id="flowPara4338-0-3">Components</flowPara></flowRoot>        </g>
+      </g>
+      <g
+         transform="matrix(0.06329721,0,0,0.06329721,12.360273,273.14646)"
+         id="g6827">
+        <g
+           id="g6829"
+           transform="matrix(29.999985,-0.03019888,0.03019888,29.999985,-11004.221,-15375.022)">
+          <g
+             style="fill:#ffffff;fill-opacity:1"
+             transform="matrix(0.71644053,0,0,0.71644053,103.9698,144.62879)"
+             id="g6831">
+            <path
+               inkscape:connector-curvature="0"
+               transform="matrix(0.03333332,3.3554312e-5,-3.3554312e-5,0.03333332,366.53421,512.86995)"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;display:inline"
+               d="M 142.5625,-6.4375 40.6875,-6.34375 C 29.868538,-6.48507 19.811533,-0.790227 14.367338,8.560208 8.9231424,17.910644 8.9351814,29.468085 14.398845,38.807157 19.862509,48.14623 29.931356,53.820109 40.75,53.65625 L 142.625,53.5625 c 10.81896,0.14132 20.87597,-5.553523 26.32016,-14.903958 5.4442,-9.350436 5.43216,-20.907877 -0.0315,-30.246949 C 163.44999,-0.92748 153.38114,-6.601359 142.5625,-6.4375 l 0,0 z"
+               id="path6833" />
+            <path
+               inkscape:connector-curvature="0"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
+               d="m 366.65701,514.67289 4.625,0 -1.8125,1.8125 c -0.39695,0.39695 -0.39695,1.04055 0,1.4375 0.39695,0.39695 1.04055,0.39695 1.4375,0 l 3.4375,-3.46875 0.0937,-0.0625 c 0.006,-0.006 -0.006,-0.0253 0,-0.0312 0.0554,-0.0572 0.1151,-0.11699 0.15625,-0.1875 0.0286,-0.0491 0.0429,-0.10409 0.0625,-0.15625 0.0124,-0.0307 0.0221,-0.0622 0.0312,-0.0937 0.0311,-0.1161 0.0427,-0.22493 0.0312,-0.34375 -0.004,-0.0578 -0.0174,-0.0996 -0.0312,-0.15625 -0.0109,-0.0407 -0.0151,-0.0857 -0.0312,-0.125 -0.0164,-0.0408 -0.0405,-0.0862 -0.0625,-0.125 -0.0455,-0.0779 -0.0936,-0.15726 -0.15625,-0.21875 l -3.53125,-3.53125 c -0.20891,-0.22276 -0.50816,-0.33785 -0.8125,-0.3125 -0.39478,0.0269 -0.73977,0.28438 -0.875,0.65625 -0.13524,0.37187 -0.0353,0.78826 0.25,1.0625 l 1.875,1.84375 -4.6875,0"
+               id="path6835"
+               sodipodi:nodetypes="cccscccsssssssscccsccc" />
+          </g>
+        </g>
+      </g>
+      <g
+         id="g6829-2-5"
+         transform="matrix(-1.8989154,-0.0019115,-0.0019115,1.8989154,800.31481,-700.16918)">
+        <g
+           style="fill:#ffffff;fill-opacity:1"
+           transform="matrix(0.71644053,0,0,0.71644053,103.9698,144.62879)"
+           id="g6831-2-7">
+          <path
+             inkscape:connector-curvature="0"
+             transform="matrix(0.03333332,3.3554312e-5,-3.3554312e-5,0.03333332,366.53421,512.86995)"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;display:inline"
+             d="M 142.5625,-6.4375 40.6875,-6.34375 C 29.868538,-6.48507 19.811533,-0.790227 14.367338,8.560208 8.9231424,17.910644 8.9351814,29.468085 14.398845,38.807157 19.862509,48.14623 29.931356,53.820109 40.75,53.65625 L 142.625,53.5625 c 10.81896,0.14132 20.87597,-5.553523 26.32016,-14.903958 5.4442,-9.350436 5.43216,-20.907877 -0.0315,-30.246949 C 163.44999,-0.92748 153.38114,-6.601359 142.5625,-6.4375 l 0,0 z"
+             id="path6833-1-5" />
+          <path
+             inkscape:connector-curvature="0"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
+             d="m 366.65701,514.67289 4.625,0 -1.8125,1.8125 c -0.39695,0.39695 -0.39695,1.04055 0,1.4375 0.39695,0.39695 1.04055,0.39695 1.4375,0 l 3.4375,-3.46875 0.0937,-0.0625 c 0.006,-0.006 -0.006,-0.0253 0,-0.0312 0.0554,-0.0572 0.1151,-0.11699 0.15625,-0.1875 0.0286,-0.0491 0.0429,-0.10409 0.0625,-0.15625 0.0124,-0.0307 0.0221,-0.0622 0.0312,-0.0937 0.0311,-0.1161 0.0427,-0.22493 0.0312,-0.34375 -0.004,-0.0578 -0.0174,-0.0996 -0.0312,-0.15625 -0.0109,-0.0407 -0.0151,-0.0857 -0.0312,-0.125 -0.0164,-0.0408 -0.0405,-0.0862 -0.0625,-0.125 -0.0455,-0.0779 -0.0936,-0.15726 -0.15625,-0.21875 l -3.53125,-3.53125 c -0.20891,-0.22276 -0.50816,-0.33785 -0.8125,-0.3125 -0.39478,0.0269 -0.73977,0.28438 -0.875,0.65625 -0.13524,0.37187 -0.0353,0.78826 0.25,1.0625 l 1.875,1.84375 -4.6875,0"
+             id="path6835-0-9"
+             sodipodi:nodetypes="cccscccsssssssscccsccc" />
+        </g>
+      </g>
+    </g>
+    <g
+       id="g6789-3"
+       transform="translate(261.94598,-187.75591)">
+      <rect
+         ry="3.7880721"
+         y="235.11809"
+         x="13.054024"
+         height="150"
+         width="70"
+         id="rect6791-7"
+         style="fill:#00b400;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+      <flowRoot
+         xml:space="preserve"
+         id="flowRoot9963-2-3-6-8"
+         style="font-size:10px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
+         transform="translate(131.17902,-28.711907)"><flowRegion
+           id="flowRegion9965-2-7-7-1"><rect
+             id="rect9967-3-5-6-4"
+             width="60.012077"
+             height="32.315746"
+             x="-113.13708"
+             y="271.51425"
+             style="font-size:10px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr;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="flowPara10992-4">Back-End</flowPara></flowRoot>      <flowRoot
+         xml:space="preserve"
+         id="flowRoot9963-2-3-6-8-6"
+         style="font-size:9px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:100%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
+         transform="translate(131.17902,18.233093)"><flowRegion
+           id="flowRegion9965-2-7-7-1-9"><rect
+             id="rect9967-3-5-6-4-7"
+             width="70.012077"
+             height="53.315746"
+             x="-113.13708"
+             y="271.51425"
+             style="font-size:9px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:100%;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="flowPara5520">Business</flowPara><flowPara
+           id="flowPara5532">Logic</flowPara><flowPara
+           id="flowPara5534" /><flowPara
+           id="flowPara11082">Persistence</flowPara></flowRoot>      <g
+         transform="matrix(0.06329721,0,0,0.06329721,12.360276,272.99779)"
+         id="g6827-8-0">
+        <g
+           id="g6829-7-6"
+           transform="matrix(29.999985,-0.03019888,0.03019888,29.999985,-11004.221,-15375.022)">
+          <g
+             style="fill:#ffffff;fill-opacity:1"
+             transform="matrix(0.71644053,0,0,0.71644053,103.9698,144.62879)"
+             id="g6831-7-1">
+            <path
+               inkscape:connector-curvature="0"
+               transform="matrix(0.03333332,3.3554312e-5,-3.3554312e-5,0.03333332,366.53421,512.86995)"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;display:inline"
+               d="M 142.5625,-6.4375 40.6875,-6.34375 C 29.868538,-6.48507 19.811533,-0.790227 14.367338,8.560208 8.9231424,17.910644 8.9351814,29.468085 14.398845,38.807157 19.862509,48.14623 29.931356,53.820109 40.75,53.65625 L 142.625,53.5625 c 10.81896,0.14132 20.87597,-5.553523 26.32016,-14.903958 5.4442,-9.350436 5.43216,-20.907877 -0.0315,-30.246949 C 163.44999,-0.92748 153.38114,-6.601359 142.5625,-6.4375 l 0,0 z"
+               id="path6833-7-8" />
+            <path
+               inkscape:connector-curvature="0"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
+               d="m 366.65701,514.67289 4.625,0 -1.8125,1.8125 c -0.39695,0.39695 -0.39695,1.04055 0,1.4375 0.39695,0.39695 1.04055,0.39695 1.4375,0 l 3.4375,-3.46875 0.0937,-0.0625 c 0.006,-0.006 -0.006,-0.0253 0,-0.0312 0.0554,-0.0572 0.1151,-0.11699 0.15625,-0.1875 0.0286,-0.0491 0.0429,-0.10409 0.0625,-0.15625 0.0124,-0.0307 0.0221,-0.0622 0.0312,-0.0937 0.0311,-0.1161 0.0427,-0.22493 0.0312,-0.34375 -0.004,-0.0578 -0.0174,-0.0996 -0.0312,-0.15625 -0.0109,-0.0407 -0.0151,-0.0857 -0.0312,-0.125 -0.0164,-0.0408 -0.0405,-0.0862 -0.0625,-0.125 -0.0455,-0.0779 -0.0936,-0.15726 -0.15625,-0.21875 l -3.53125,-3.53125 c -0.20891,-0.22276 -0.50816,-0.33785 -0.8125,-0.3125 -0.39478,0.0269 -0.73977,0.28438 -0.875,0.65625 -0.13524,0.37187 -0.0353,0.78826 0.25,1.0625 l 1.875,1.84375 -4.6875,0"
+               id="path6835-3-1"
+               sodipodi:nodetypes="cccscccsssssssscccsccc" />
+          </g>
+        </g>
+      </g>
+      <g
+         transform="matrix(0.06329721,0,0,0.06329721,12.844795,372.99779)"
+         id="g6827-8-0-8">
+        <g
+           id="g6829-7-6-9"
+           transform="matrix(29.999985,-0.03019888,0.03019888,29.999985,-11011.509,-15375.022)">
+          <g
+             style="fill:#ffffff;fill-opacity:1"
+             transform="matrix(0.71644053,0,0,0.71644053,103.9698,144.62879)"
+             id="g6831-7-1-9">
+            <path
+               inkscape:connector-curvature="0"
+               transform="matrix(0.03333332,3.3554312e-5,-3.3554312e-5,0.03333332,366.53421,512.86995)"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;display:inline"
+               d="M 142.5625,-6.4375 40.6875,-6.34375 C 29.868538,-6.48507 19.811533,-0.790227 14.367338,8.560208 8.9231424,17.910644 8.9351814,29.468085 14.398845,38.807157 19.862509,48.14623 29.931356,53.820109 40.75,53.65625 L 142.625,53.5625 c 10.81896,0.14132 20.87597,-5.553523 26.32016,-14.903958 5.4442,-9.350436 5.43216,-20.907877 -0.0315,-30.246949 C 163.44999,-0.92748 153.38114,-6.601359 142.5625,-6.4375 l 0,0 z"
+               id="path6833-7-8-5" />
+            <path
+               inkscape:connector-curvature="0"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
+               d="m 366.65701,514.67289 4.625,0 -1.8125,1.8125 c -0.39695,0.39695 -0.39695,1.04055 0,1.4375 0.39695,0.39695 1.04055,0.39695 1.4375,0 l 3.4375,-3.46875 0.0937,-0.0625 c 0.006,-0.006 -0.006,-0.0253 0,-0.0312 0.0554,-0.0572 0.1151,-0.11699 0.15625,-0.1875 0.0286,-0.0491 0.0429,-0.10409 0.0625,-0.15625 0.0124,-0.0307 0.0221,-0.0622 0.0312,-0.0937 0.0311,-0.1161 0.0427,-0.22493 0.0312,-0.34375 -0.004,-0.0578 -0.0174,-0.0996 -0.0312,-0.15625 -0.0109,-0.0407 -0.0151,-0.0857 -0.0312,-0.125 -0.0164,-0.0408 -0.0405,-0.0862 -0.0625,-0.125 -0.0455,-0.0779 -0.0936,-0.15726 -0.15625,-0.21875 l -3.53125,-3.53125 c -0.20891,-0.22276 -0.50816,-0.33785 -0.8125,-0.3125 -0.39478,0.0269 -0.73977,0.28438 -0.875,0.65625 -0.13524,0.37187 -0.0353,0.78826 0.25,1.0625 l 1.875,1.84375 -4.6875,0"
+               id="path6835-3-1-5"
+               sodipodi:nodetypes="cccscccsssssssscccsccc" />
+          </g>
+        </g>
+      </g>
+    </g>
+    <g
+       id="g3808"
+       transform="translate(21.945976,-187.75591)">
+      <rect
+         ry="3.7880721"
+         y="218.11809"
+         x="13.054024"
+         height="172.00002"
+         width="74.999992"
+         id="rect3810"
+         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" />
+      <flowRoot
+         xml:space="preserve"
+         id="flowRoot9963-2-8"
+         style="font-size:10px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;letter-spacing:0px;word-spacing:0px;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"
+         transform="translate(130.41902,-47.290241)"><flowRegion
+           id="flowRegion9965-2-8"><rect
+             id="rect9967-3-0"
+             width="60.012081"
+             height="52.315746"
+             x="-113.13708"
+             y="271.51425"
+             style="font-size:10px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;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="flowPara11184">Browser</flowPara></flowRoot>      <g
+         id="g28403-2-5-2-40"
+         transform="translate(10.694551,135.25927)">
+        <rect
+           ry="3.7880721"
+           y="119.85882"
+           x="7.3594728"
+           height="95.000008"
+           width="60"
+           id="rect4680-4-4-7-0"
+           style="fill:#666666;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+        <g
+           transform="translate(-9.4510395,-55.573718)"
+           id="g28403-3-5-6">
+          <rect
+             style="fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+             id="rect4680-7-10-5"
+             width="50"
+             height="25"
+             x="21.810513"
+             y="180.43254"
+             ry="3.7880721" />
+          <flowRoot
+             xml:space="preserve"
+             id="flowRoot11361-6-1-8-1"
+             style="font-size:8px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;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.43047,-878.23713)"
+             inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/img/intro/toolchain.png"
+             inkscape:export-xdpi="90"
+             inkscape:export-ydpi="90"><flowRegion
+               id="flowRegion11363-2-0-7-7"><rect
+                 id="rect11365-5-4-6-4"
+                 width="138.69197"
+                 height="47.876488"
+                 x="813.87988"
+                 y="1064.3831"
+                 style="font-size:8px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;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="flowPara4198-9">Built-in</flowPara><flowPara
+               id="flowPara4300">Widgets</flowPara></flowRoot>        </g>
+        <g
+           transform="translate(-9.4510395,-25.573718)"
+           id="g28403-3-5-6-6">
+          <rect
+             style="fill:#4fb047;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+             id="rect4680-7-10-5-5"
+             width="49"
+             height="24"
+             x="21.810513"
+             y="180.43254"
+             ry="3.7880721" />
+          <flowRoot
+             xml:space="preserve"
+             id="flowRoot11361-6-1-8-1-1"
+             style="font-size:8px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;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.52461,-878.4214)"
+             inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/img/intro/toolchain.png"
+             inkscape:export-xdpi="90"
+             inkscape:export-ydpi="90"><flowRegion
+               id="flowRegion11363-2-0-7-7-5"><rect
+                 id="rect11365-5-4-6-4-5"
+                 width="138.69197"
+                 height="47.876488"
+                 x="813.87988"
+                 y="1064.3831"
+                 style="font-size:8px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;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="flowPara4198-9-9">Add-on</flowPara><flowPara
+               id="flowPara4338">Widgets</flowPara></flowRoot>        </g>
+        <g
+           transform="translate(-9.4510395,4.4262817)"
+           id="g28403-3-5-6-6-6">
+          <rect
+             style="fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.5;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:1.5, 1.5;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+             id="rect4680-7-10-5-5-9"
+             width="49"
+             height="24"
+             x="21.810513"
+             y="180.43254"
+             ry="3.7880721" />
+          <flowRoot
+             xml:space="preserve"
+             id="flowRoot11361-6-1-8-1-1-4"
+             style="font-size:8px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;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.52461,-878.4214)"
+             inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/img/intro/toolchain.png"
+             inkscape:export-xdpi="90"
+             inkscape:export-ydpi="90"><flowRegion
+               id="flowRegion11363-2-0-7-7-5-8"><rect
+                 id="rect11365-5-4-6-4-5-7"
+                 width="138.69197"
+                 height="47.876488"
+                 x="813.87988"
+                 y="1064.3831"
+                 style="font-size:8px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;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="flowPara4198-9-9-0">Custom</flowPara><flowPara
+               id="flowPara4338-0">Widgets</flowPara></flowRoot>        </g>
+      </g>
+      <g
+         transform="matrix(-0.06329721,0,0,0.06329721,88.282414,273.14646)"
+         id="g6827-4">
+        <g
+           id="g6829-2"
+           transform="matrix(29.999985,-0.03019888,0.03019888,29.999985,-11011.509,-15375.022)">
+          <g
+             style="fill:#ffffff;fill-opacity:1"
+             transform="matrix(0.71644053,0,0,0.71644053,103.9698,144.62879)"
+             id="g6831-2">
+            <path
+               inkscape:connector-curvature="0"
+               transform="matrix(0.03333332,3.3554312e-5,-3.3554312e-5,0.03333332,366.53421,512.86995)"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;display:inline"
+               d="M 142.5625,-6.4375 40.6875,-6.34375 C 29.868538,-6.48507 19.811533,-0.790227 14.367338,8.560208 8.9231424,17.910644 8.9351814,29.468085 14.398845,38.807157 19.862509,48.14623 29.931356,53.820109 40.75,53.65625 L 142.625,53.5625 c 10.81896,0.14132 20.87597,-5.553523 26.32016,-14.903958 5.4442,-9.350436 5.43216,-20.907877 -0.0315,-30.246949 C 163.44999,-0.92748 153.38114,-6.601359 142.5625,-6.4375 l 0,0 z"
+               id="path6833-1" />
+            <path
+               inkscape:connector-curvature="0"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
+               d="m 366.65701,514.67289 4.625,0 -1.8125,1.8125 c -0.39695,0.39695 -0.39695,1.04055 0,1.4375 0.39695,0.39695 1.04055,0.39695 1.4375,0 l 3.4375,-3.46875 0.0937,-0.0625 c 0.006,-0.006 -0.006,-0.0253 0,-0.0312 0.0554,-0.0572 0.1151,-0.11699 0.15625,-0.1875 0.0286,-0.0491 0.0429,-0.10409 0.0625,-0.15625 0.0124,-0.0307 0.0221,-0.0622 0.0312,-0.0937 0.0311,-0.1161 0.0427,-0.22493 0.0312,-0.34375 -0.004,-0.0578 -0.0174,-0.0996 -0.0312,-0.15625 -0.0109,-0.0407 -0.0151,-0.0857 -0.0312,-0.125 -0.0164,-0.0408 -0.0405,-0.0862 -0.0625,-0.125 -0.0455,-0.0779 -0.0936,-0.15726 -0.15625,-0.21875 l -3.53125,-3.53125 c -0.20891,-0.22276 -0.50816,-0.33785 -0.8125,-0.3125 -0.39478,0.0269 -0.73977,0.28438 -0.875,0.65625 -0.13524,0.37187 -0.0353,0.78826 0.25,1.0625 l 1.875,1.84375 -4.6875,0"
+               id="path6835-0"
+               sodipodi:nodetypes="cccscccsssssssscccsccc" />
+          </g>
+        </g>
+      </g>
+      <g
+         transform="translate(-3.7564885,179.68555)"
+         id="g28403-3-5-6-6-6-6">
+        <rect
+           style="fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.50000000000000000;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:1.50000000000000000, 1.50000000000000000;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+           id="rect4680-7-10-5-5-9-0"
+           width="60"
+           height="25.000002"
+           x="21.810513"
+           y="180.43254"
+           ry="3.7880721" />
+        <flowRoot
+           xml:space="preserve"
+           id="flowRoot11361-6-1-8-1-1-4-8"
+           style="font-size:8px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;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.52461,-878.4214)"
+           inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/img/intro/toolchain.png"
+           inkscape:export-xdpi="90"
+           inkscape:export-ydpi="90"><flowRegion
+             id="flowRegion11363-2-0-7-7-5-8-8"><rect
+               id="rect11365-5-4-6-4-5-7-0"
+               width="138.69197"
+               height="47.876488"
+               x="813.87988"
+               y="1064.3831"
+               style="font-size:8px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;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="flowPara4338-0-9">Client-Side</flowPara><flowPara
+             id="flowPara5189">UI</flowPara></flowRoot>      </g>
+      <g
+         transform="matrix(-0.06329721,0,0,0.06329721,88.801543,373.00293)"
+         id="g6827-4-1">
+        <g
+           id="g6829-2-0"
+           transform="matrix(29.999985,-0.03019888,0.03019888,29.999985,-11003.16,-15375.022)">
+          <g
+             style="fill:#ffffff;fill-opacity:1"
+             transform="matrix(0.71644053,0,0,0.71644053,103.9698,144.62879)"
+             id="g6831-2-5">
+            <path
+               inkscape:connector-curvature="0"
+               transform="matrix(0.03333332,3.3554312e-5,-3.3554312e-5,0.03333332,366.53421,512.86995)"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;display:inline"
+               d="M 142.5625,-6.4375 40.6875,-6.34375 C 29.868538,-6.48507 19.811533,-0.790227 14.367338,8.560208 8.9231424,17.910644 8.9351814,29.468085 14.398845,38.807157 19.862509,48.14623 29.931356,53.820109 40.75,53.65625 L 142.625,53.5625 c 10.81896,0.14132 20.87597,-5.553523 26.32016,-14.903958 5.4442,-9.350436 5.43216,-20.907877 -0.0315,-30.246949 C 163.44999,-0.92748 153.38114,-6.601359 142.5625,-6.4375 l 0,0 z"
+               id="path6833-1-3" />
+            <path
+               inkscape:connector-curvature="0"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
+               d="m 366.65701,514.67289 4.625,0 -1.8125,1.8125 c -0.39695,0.39695 -0.39695,1.04055 0,1.4375 0.39695,0.39695 1.04055,0.39695 1.4375,0 l 3.4375,-3.46875 0.0937,-0.0625 c 0.006,-0.006 -0.006,-0.0253 0,-0.0312 0.0554,-0.0572 0.1151,-0.11699 0.15625,-0.1875 0.0286,-0.0491 0.0429,-0.10409 0.0625,-0.15625 0.0124,-0.0307 0.0221,-0.0622 0.0312,-0.0937 0.0311,-0.1161 0.0427,-0.22493 0.0312,-0.34375 -0.004,-0.0578 -0.0174,-0.0996 -0.0312,-0.15625 -0.0109,-0.0407 -0.0151,-0.0857 -0.0312,-0.125 -0.0164,-0.0408 -0.0405,-0.0862 -0.0625,-0.125 -0.0455,-0.0779 -0.0936,-0.15726 -0.15625,-0.21875 l -3.53125,-3.53125 c -0.20891,-0.22276 -0.50816,-0.33785 -0.8125,-0.3125 -0.39478,0.0269 -0.73977,0.28438 -0.875,0.65625 -0.13524,0.37187 -0.0353,0.78826 0.25,1.0625 l 1.875,1.84375 -4.6875,0"
+               id="path6835-0-2"
+               sodipodi:nodetypes="cccscccsssssssscccsccc" />
+          </g>
+        </g>
+      </g>
+      <flowRoot
+         xml:space="preserve"
+         id="flowRoot9963-2-3-6-8-6-1"
+         style="font-size:8px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:100%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
+         transform="translate(130.79502,-35.256574)"><flowRegion
+           id="flowRegion9965-2-7-7-1-9-6"><rect
+             id="rect9967-3-5-6-4-7-9"
+             width="70.012077"
+             height="53.315746"
+             x="-113.13708"
+             y="271.51425"
+             style="font-size:8px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:100%;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="flowPara11082-4">Client-Side Engine</flowPara></flowRoot>    </g>
+    <g
+       transform="translate(98.189487,-8.0703583)"
+       id="g28403-3-5-6-6-6-6-1">
+      <rect
+         style="fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.5;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:1.5,1.5;stroke-dashoffset:0"
+         id="rect4680-7-10-5-5-9-0-0"
+         width="150"
+         height="25"
+         x="21.810513"
+         y="180.43254"
+         ry="3.7880721" />
+      <flowRoot
+         xml:space="preserve"
+         id="flowRoot11361-6-1-8-1-1-4-8-0"
+         style="font-size:8px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;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(-779.64794,-878.48467)"
+         inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/img/intro/toolchain.png"
+         inkscape:export-xdpi="90"
+         inkscape:export-ydpi="90"><flowRegion
+           id="flowRegion11363-2-0-7-7-5-8-8-1"><rect
+             id="rect11365-5-4-6-4-5-7-0-7"
+             width="138.69197"
+             height="47.876488"
+             x="813.87988"
+             y="1064.3831"
+             style="font-size:8px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;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="flowPara5189-3">Service</flowPara></flowRoot>      <g
+         id="g6829-1"
+         transform="matrix(1.8989154,-0.0019115,0.0019115,1.8989154,-675.40034,-779.73512)">
+        <g
+           style="fill:#ffffff;fill-opacity:1"
+           transform="matrix(0.71644053,0,0,0.71644053,103.9698,144.62879)"
+           id="g6831-0">
+          <path
+             inkscape:connector-curvature="0"
+             transform="matrix(0.03333332,3.3554312e-5,-3.3554312e-5,0.03333332,366.53421,512.86995)"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;display:inline"
+             d="M 142.5625,-6.4375 40.6875,-6.34375 C 29.868538,-6.48507 19.811533,-0.790227 14.367338,8.560208 8.9231424,17.910644 8.9351814,29.468085 14.398845,38.807157 19.862509,48.14623 29.931356,53.820109 40.75,53.65625 L 142.625,53.5625 c 10.81896,0.14132 20.87597,-5.553523 26.32016,-14.903958 5.4442,-9.350436 5.43216,-20.907877 -0.0315,-30.246949 C 163.44999,-0.92748 153.38114,-6.601359 142.5625,-6.4375 l 0,0 z"
+             id="path6833-6" />
+          <path
+             inkscape:connector-curvature="0"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
+             d="m 366.65701,514.67289 4.625,0 -1.8125,1.8125 c -0.39695,0.39695 -0.39695,1.04055 0,1.4375 0.39695,0.39695 1.04055,0.39695 1.4375,0 l 3.4375,-3.46875 0.0937,-0.0625 c 0.006,-0.006 -0.006,-0.0253 0,-0.0312 0.0554,-0.0572 0.1151,-0.11699 0.15625,-0.1875 0.0286,-0.0491 0.0429,-0.10409 0.0625,-0.15625 0.0124,-0.0307 0.0221,-0.0622 0.0312,-0.0937 0.0311,-0.1161 0.0427,-0.22493 0.0312,-0.34375 -0.004,-0.0578 -0.0174,-0.0996 -0.0312,-0.15625 -0.0109,-0.0407 -0.0151,-0.0857 -0.0312,-0.125 -0.0164,-0.0408 -0.0405,-0.0862 -0.0625,-0.125 -0.0455,-0.0779 -0.0936,-0.15726 -0.15625,-0.21875 l -3.53125,-3.53125 c -0.20891,-0.22276 -0.50816,-0.33785 -0.8125,-0.3125 -0.39478,0.0269 -0.73977,0.28438 -0.875,0.65625 -0.13524,0.37187 -0.0353,0.78826 0.25,1.0625 l 1.875,1.84375 -4.6875,0"
+             id="path6835-8"
+             sodipodi:nodetypes="cccscccsssssssscccsccc" />
+        </g>
+      </g>
+      <g
+         id="g6829-2-5-6-8"
+         transform="matrix(-1.8989154,-0.0019115,-0.0019115,1.8989154,869.03658,-780.00348)">
+        <g
+           style="fill:#ffffff;fill-opacity:1"
+           transform="matrix(0.71644053,0,0,0.71644053,103.9698,144.62879)"
+           id="g6831-2-7-3-2">
+          <path
+             inkscape:connector-curvature="0"
+             transform="matrix(0.03333332,3.3554312e-5,-3.3554312e-5,0.03333332,366.53421,512.86995)"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;display:inline"
+             d="M 142.5625,-6.4375 40.6875,-6.34375 C 29.868538,-6.48507 19.811533,-0.790227 14.367338,8.560208 8.9231424,17.910644 8.9351814,29.468085 14.398845,38.807157 19.862509,48.14623 29.931356,53.820109 40.75,53.65625 L 142.625,53.5625 c 10.81896,0.14132 20.87597,-5.553523 26.32016,-14.903958 5.4442,-9.350436 5.43216,-20.907877 -0.0315,-30.246949 C 163.44999,-0.92748 153.38114,-6.601359 142.5625,-6.4375 l 0,0 z"
+             id="path6833-1-5-9-7" />
+          <path
+             inkscape:connector-curvature="0"
+             style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
+             d="m 366.65701,514.67289 4.625,0 -1.8125,1.8125 c -0.39695,0.39695 -0.39695,1.04055 0,1.4375 0.39695,0.39695 1.04055,0.39695 1.4375,0 l 3.4375,-3.46875 0.0937,-0.0625 c 0.006,-0.006 -0.006,-0.0253 0,-0.0312 0.0554,-0.0572 0.1151,-0.11699 0.15625,-0.1875 0.0286,-0.0491 0.0429,-0.10409 0.0625,-0.15625 0.0124,-0.0307 0.0221,-0.0622 0.0312,-0.0937 0.0311,-0.1161 0.0427,-0.22493 0.0312,-0.34375 -0.004,-0.0578 -0.0174,-0.0996 -0.0312,-0.15625 -0.0109,-0.0407 -0.0151,-0.0857 -0.0312,-0.125 -0.0164,-0.0408 -0.0405,-0.0862 -0.0625,-0.125 -0.0455,-0.0779 -0.0936,-0.15726 -0.15625,-0.21875 l -3.53125,-3.53125 c -0.20891,-0.22276 -0.50816,-0.33785 -0.8125,-0.3125 -0.39478,0.0269 -0.73977,0.28438 -0.875,0.65625 -0.13524,0.37187 -0.0353,0.78826 0.25,1.0625 l 1.875,1.84375 -4.6875,0"
+             id="path6835-0-9-2-8"
+             sodipodi:nodetypes="cccscccsssssssscccsccc" />
+        </g>
+      </g>
+    </g>
+    <flowRoot
+       xml:space="preserve"
+       id="flowRoot9963-2-8-1"
+       style="font-size:10px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
+       transform="translate(233.035,-234.87615)"><flowRegion
+         id="flowRegion9965-2-8-7"><rect
+           id="rect9967-3-0-9"
+           width="180.60732"
+           height="30.82765"
+           x="-113.13708"
+           y="271.51425"
+           style="font-size:10px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold" /></flowRegion><flowPara
+         id="flowPara11184-1">Web Server / Portal</flowPara></flowRoot>  </g>
+</svg>
diff --git a/documentation/introduction/original-drawings/architecture.svg b/documentation/introduction/original-drawings/architecture.svg
new file mode 100644
index 0000000000..674cd0b959
--- /dev/null
+++ b/documentation/introduction/original-drawings/architecture.svg
@@ -0,0 +1,449 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="210mm"
+   height="297mm"
+   id="svg1901"
+   sodipodi:version="0.32"
+   inkscape:version="0.48.2 r9819"
+   sodipodi:docname="architecture.svg"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape"
+   inkscape:export-filename="/home/magi/itmill/toolkit5/doc/manual/original-drawings/intro/architecture.png"
+   inkscape:export-xdpi="300"
+   inkscape:export-ydpi="300"
+   version="1.1">
+  <defs
+     id="defs1903">
+    <marker
+       id="marker18095"
+       orient="auto"
+       markerHeight="5.7450776"
+       markerWidth="4.6297302">
+      <g
+         id="g11064"
+         transform="matrix(0.5,0,0,0.5,-185.64298,-257.19655)">
+        <path
+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"
+           id="path11050"
+           d="M 370,508.65625 C 369.13933,508.715 368.39056,509.27755 368.09375,510.09375 C 367.82399,510.83551 368.03605,511.62868 368.53125,512.21875 L 366.78125,512.21875 C 366.73884,512.21408 366.69882,512.22093 366.65625,512.21875 L 366.65625,516.59375 L 366.78125,516.59375 L 368.53125,516.59375 C 367.85229,517.45345 367.83424,518.70924 368.625,519.5 C 369.47591,520.35091 370.89909,520.35091 371.75,519.5 L 375.09375,516.125 C 375.12672,516.09552 375.15802,516.06422 375.1875,516.03125 C 375.21972,516.01191 375.25101,515.99105 375.28125,515.96875 C 375.28162,515.96839 375.49976,515.68796 375.5,515.6875 C 375.50005,515.68741 375.49338,515.64282 375.5,515.625 C 375.5011,515.62203 375.53002,515.62832 375.53125,515.625 C 375.57039,515.57293 375.58228,515.57321 375.625,515.5 C 375.76199,515.26524 375.79184,515.12809 375.78125,515.15625 C 375.81807,515.06473 375.79977,515.04374 375.8125,515 C 375.82311,514.98978 375.83353,514.97936 375.84375,514.96875 C 375.90379,514.74477 375.93181,514.45186 375.90625,514.1875 C 375.89266,513.98387 375.84739,513.88985 375.84375,513.875 C 375.84389,513.86458 375.84389,513.85417 375.84375,513.84375 C 375.86975,513.94071 375.85901,513.85978 375.75,513.59375 C 375.69753,513.46336 375.66014,513.37439 375.625,513.3125 C 375.57262,513.22275 375.49154,513.05015 375.28125,512.84375 L 371.75,509.3125 C 371.29355,508.82579 370.66491,508.60087 370,508.65625 z"
+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1" />
+        <path
+           sodipodi:nodetypes="cccscccsssssssscccsccc"
+           id="path11035"
+           d="M 366.65625,515.40625 L 371.28125,515.40625 L 369.46875,517.21875 C 369.0718,517.6157 369.0718,518.2593 369.46875,518.65625 C 369.8657,519.0532 370.5093,519.0532 370.90625,518.65625 L 374.34375,515.1875 L 374.4375,515.125 C 374.44343,515.11918 374.43171,515.09972 374.4375,515.09375 C 374.49291,515.03659 374.5526,514.97676 374.59375,514.90625 C 374.62239,514.85717 374.63663,514.80216 374.65625,514.75 C 374.66861,514.71928 374.67831,514.68783 374.6875,514.65625 C 374.71862,514.54015 374.73024,514.43132 374.71875,514.3125 C 374.71489,514.25466 374.70138,514.21285 374.6875,514.15625 C 374.6766,514.1156 374.67237,514.07059 374.65625,514.03125 C 374.63982,513.99042 374.61578,513.94505 374.59375,513.90625 C 374.5483,513.82838 374.50015,513.74899 374.4375,513.6875 L 370.90625,510.15625 C 370.69734,509.93349 370.39809,509.8184 370.09375,509.84375 C 369.69897,509.8707 369.35398,510.12813 369.21875,510.5 C 369.08351,510.87187 369.18349,511.28826 369.46875,511.5625 L 371.34375,513.40625 L 366.65625,513.40625"
+           style="fill:#49c2f1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      </g>
+    </marker>
+    <inkscape:perspective
+       sodipodi:type="inkscape:persp3d"
+       inkscape:vp_x="0 : 526.18109 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_z="744.09448 : 526.18109 : 1"
+       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
+       id="perspective110" />
+    <marker
+       inkscape:stockid="TriangleOutL"
+       orient="auto"
+       refY="0.0"
+       refX="0.0"
+       id="TriangleOutL"
+       style="overflow:visible">
+      <path
+         id="path3520"
+         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="linearGradient3503">
+      <stop
+         style="stop-color:#37ff40;stop-opacity:0.53608245;"
+         offset="0"
+         id="stop3505" />
+      <stop
+         style="stop-color:#ffe0e0;stop-opacity:1;"
+         offset="1"
+         id="stop3507" />
+    </linearGradient>
+    <marker
+       inkscape:stockid="Arrow2Lstart"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow2Lstart"
+       style="overflow:visible">
+      <path
+         id="path6743"
+         style="font-size:12px;fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round"
+         d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.97309,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+         transform="matrix(1.1,0,0,1.1,1.1,0)" />
+    </marker>
+    <linearGradient
+       id="linearGradient19816">
+      <stop
+         id="stop19818"
+         offset="0"
+         style="stop-color:#ffffff;stop-opacity:1;" />
+      <stop
+         id="stop19820"
+         offset="1"
+         style="stop-color:#e7e790;stop-opacity:1;" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient11516">
+      <stop
+         id="stop11518"
+         offset="0"
+         style="stop-color:#ffffff;stop-opacity:1" />
+      <stop
+         id="stop11520"
+         offset="1"
+         style="stop-color:#a090e7;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient11508">
+      <stop
+         id="stop11510"
+         offset="0"
+         style="stop-color:#ffffff;stop-opacity:1;" />
+      <stop
+         id="stop11512"
+         offset="1"
+         style="stop-color:#e27979;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient
+       id="linearGradient3286">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0"
+         id="stop3288" />
+      <stop
+         style="stop-color:#79e291;stop-opacity:1;"
+         offset="1"
+         id="stop3290" />
+    </linearGradient>
+    <marker
+       inkscape:stockid="Arrow2Lend"
+       orient="auto"
+       refY="0"
+       refX="0"
+       id="Arrow2Lend"
+       style="overflow:visible">
+      <path
+         id="path16811"
+         style="font-size:12px;fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round"
+         d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.97309,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
+         transform="matrix(-1.1,0,0,-1.1,-1.1,0)" />
+    </marker>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="2.8"
+     inkscape:cx="205.74747"
+     inkscape:cy="939.96477"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     gridtolerance="10000"
+     inkscape:window-width="1672"
+     inkscape:window-height="1019"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:showpageshadow="false"
+     borderlayer="false"
+     showgrid="true"
+     inkscape:window-maximized="0">
+    <inkscape:grid
+       type="xygrid"
+       id="grid6362"
+       visible="true"
+       enabled="true"
+       empspacing="5"
+       snapvisiblegridlinesonly="true"
+       spacingx="1px" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata1906">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Taso 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="opacity:1">
+    <g
+       id="g3808"
+       transform="translate(21.945976,-187.75591)">
+      <rect
+         ry="3.7880721"
+         y="235.11809"
+         x="13.054024"
+         height="120.00001"
+         width="70"
+         id="rect3810"
+         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" />
+      <flowRoot
+         xml:space="preserve"
+         id="flowRoot9963-2-3-6-8-6-8"
+         style="font-size:9px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:100%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
+         transform="translate(131.17902,3.2330926)"><flowRegion
+           id="flowRegion9965-2-7-7-1-9-9"><rect
+             id="rect9967-3-5-6-4-7-1"
+             width="60.012081"
+             height="40.370747"
+             x="-113.13708"
+             y="271.51425"
+             style="font-size:9px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:100%;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="flowPara11130">Client-Side</flowPara><flowPara
+           id="flowPara11126">Engine</flowPara></flowRoot>      <flowRoot
+         xml:space="preserve"
+         id="flowRoot9963-2-8"
+         style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;letter-spacing:0px;word-spacing:0px;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"
+         transform="translate(131.17902,-28.711907)"><flowRegion
+           id="flowRegion9965-2-8"><rect
+             id="rect9967-3-0"
+             width="60.012081"
+             height="52.315746"
+             x="-113.13708"
+             y="271.51425"
+             style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;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="flowPara9973-8-5">Web</flowPara><flowPara
+           id="flowPara11184">Browser</flowPara></flowRoot>    </g>
+    <g
+       id="g6365"
+       transform="translate(96.945976,-187.75591)">
+      <rect
+         ry="3.7880721"
+         y="235.11809"
+         x="13.054024"
+         height="120"
+         width="70"
+         id="rect6367"
+         style="fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+      <g
+         transform="matrix(0.07579619,0,0,0.07579619,12.243598,335.45189)"
+         id="g5925">
+        <g
+           id="g5931"
+           transform="matrix(29.999985,-0.03019888,0.03019888,29.999985,-11011.509,-15375.022)">
+          <g
+             style="fill:#ffffff;fill-opacity:1"
+             transform="translate(-2.6843449e-4,0.2666665)"
+             id="g5977">
+            <path
+               inkscape:connector-curvature="0"
+               transform="matrix(0.03333332,3.3554312e-5,-3.3554312e-5,0.03333332,366.53421,512.86995)"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;display:inline"
+               d="M 142.5625,-6.4375 40.6875,-6.34375 C 29.868538,-6.48507 19.811533,-0.790227 14.367338,8.560208 8.9231424,17.910644 8.9351814,29.468085 14.398845,38.807157 19.862509,48.14623 29.931356,53.820109 40.75,53.65625 L 142.625,53.5625 c 10.81896,0.14132 20.87597,-5.553523 26.32016,-14.903958 5.4442,-9.350436 5.43216,-20.907877 -0.0315,-30.246949 C 163.44999,-0.92748 153.38114,-6.601359 142.5625,-6.4375 l 0,0 z"
+               id="path3599" />
+            <path
+               inkscape:connector-curvature="0"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
+               d="m 366.65701,514.67289 4.625,0 -1.8125,1.8125 c -0.39695,0.39695 -0.39695,1.04055 0,1.4375 0.39695,0.39695 1.04055,0.39695 1.4375,0 l 3.4375,-3.46875 0.0937,-0.0625 c 0.006,-0.006 -0.006,-0.0253 0,-0.0312 0.0554,-0.0572 0.1151,-0.11699 0.15625,-0.1875 0.0286,-0.0491 0.0429,-0.10409 0.0625,-0.15625 0.0124,-0.0307 0.0221,-0.0622 0.0312,-0.0937 0.0311,-0.1161 0.0427,-0.22493 0.0312,-0.34375 -0.004,-0.0578 -0.0174,-0.0996 -0.0312,-0.15625 -0.0109,-0.0407 -0.0151,-0.0857 -0.0312,-0.125 -0.0164,-0.0408 -0.0405,-0.0862 -0.0625,-0.125 -0.0455,-0.0779 -0.0936,-0.15726 -0.15625,-0.21875 l -3.53125,-3.53125 c -0.20891,-0.22276 -0.50816,-0.33785 -0.8125,-0.3125 -0.39478,0.0269 -0.73977,0.28438 -0.875,0.65625 -0.13524,0.37187 -0.0353,0.78826 0.25,1.0625 l 1.875,1.84375 -4.6875,0"
+               id="path5935"
+               sodipodi:nodetypes="cccscccsssssssscccsccc" />
+          </g>
+        </g>
+      </g>
+      <flowRoot
+         xml:space="preserve"
+         id="flowRoot9963-2"
+         style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
+         transform="translate(131.17902,-28.711912)"><flowRegion
+           id="flowRegion9965-2"><rect
+             id="rect9967-3"
+             width="50.012081"
+             height="52.315746"
+             x="-113.13708"
+             y="271.51425"
+             style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold" /></flowRegion><flowPara
+           id="flowPara9969-5">Java</flowPara><flowPara
+           id="flowPara9971-5">Web</flowPara><flowPara
+           id="flowPara9973-8">Server</flowPara></flowRoot>    </g>
+    <g
+       id="g6789"
+       transform="translate(251.94598,-187.75591)">
+      <rect
+         ry="3.7880721"
+         y="235.11809"
+         x="13.054024"
+         height="120.00001"
+         width="70"
+         id="rect6791"
+         style="fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+      <g
+         transform="matrix(0.07579619,0,0,0.07579619,12.253952,335.42292)"
+         id="g6803">
+        <g
+           id="g6805"
+           transform="matrix(29.999985,-0.03019888,0.03019888,29.999985,-11011.509,-15375.022)">
+          <g
+             style="fill:#ffffff;fill-opacity:1"
+             transform="translate(-2.6843449e-4,0.2666665)"
+             id="g6807">
+            <path
+               inkscape:connector-curvature="0"
+               transform="matrix(0.03333332,3.3554312e-5,-3.3554312e-5,0.03333332,366.53421,512.86995)"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;display:inline"
+               d="M 142.5625,-6.4375 40.6875,-6.34375 C 29.868538,-6.48507 19.811533,-0.790227 14.367338,8.560208 8.9231424,17.910644 8.9351814,29.468085 14.398845,38.807157 19.862509,48.14623 29.931356,53.820109 40.75,53.65625 L 142.625,53.5625 c 10.81896,0.14132 20.87597,-5.553523 26.32016,-14.903958 5.4442,-9.350436 5.43216,-20.907877 -0.0315,-30.246949 C 163.44999,-0.92748 153.38114,-6.601359 142.5625,-6.4375 l 0,0 z"
+               id="path6809" />
+            <path
+               inkscape:connector-curvature="0"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
+               d="m 366.65701,514.67289 4.625,0 -1.8125,1.8125 c -0.39695,0.39695 -0.39695,1.04055 0,1.4375 0.39695,0.39695 1.04055,0.39695 1.4375,0 l 3.4375,-3.46875 0.0937,-0.0625 c 0.006,-0.006 -0.006,-0.0253 0,-0.0312 0.0554,-0.0572 0.1151,-0.11699 0.15625,-0.1875 0.0286,-0.0491 0.0429,-0.10409 0.0625,-0.15625 0.0124,-0.0307 0.0221,-0.0622 0.0312,-0.0937 0.0311,-0.1161 0.0427,-0.22493 0.0312,-0.34375 -0.004,-0.0578 -0.0174,-0.0996 -0.0312,-0.15625 -0.0109,-0.0407 -0.0151,-0.0857 -0.0312,-0.125 -0.0164,-0.0408 -0.0405,-0.0862 -0.0625,-0.125 -0.0455,-0.0779 -0.0936,-0.15726 -0.15625,-0.21875 l -3.53125,-3.53125 c -0.20891,-0.22276 -0.50816,-0.33785 -0.8125,-0.3125 -0.39478,0.0269 -0.73977,0.28438 -0.875,0.65625 -0.13524,0.37187 -0.0353,0.78826 0.25,1.0625 l 1.875,1.84375 -4.6875,0"
+               id="path6811"
+               sodipodi:nodetypes="cccscccsssssssscccsccc" />
+          </g>
+        </g>
+      </g>
+      <flowRoot
+         xml:space="preserve"
+         id="flowRoot9963-2-3-6"
+         style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;letter-spacing:0px;word-spacing:0px;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"
+         transform="translate(131.17902,-28.711907)"><flowRegion
+           id="flowRegion9965-2-7-7"><rect
+             id="rect9967-3-5-6"
+             width="68.012077"
+             height="51.315746"
+             x="-113.13708"
+             y="271.51425"
+             style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;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="flowPara10160-1">Your</flowPara><flowPara
+           id="flowPara10992">UI</flowPara></flowRoot>    </g>
+    <g
+       id="g6813"
+       transform="translate(171.94598,-187.75591)">
+      <rect
+         ry="3.7880721"
+         y="235.11809"
+         x="13.054024"
+         height="120.00002"
+         width="75"
+         id="rect6815"
+         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" />
+      <g
+         transform="matrix(0.07579619,0,0,0.07579619,12.243595,335.4519)"
+         id="g6827">
+        <g
+           id="g6829"
+           transform="matrix(29.999985,-0.03019888,0.03019888,29.999985,-11011.509,-15375.022)">
+          <g
+             style="fill:#ffffff;fill-opacity:1"
+             transform="translate(-2.6843449e-4,0.2666665)"
+             id="g6831">
+            <path
+               inkscape:connector-curvature="0"
+               transform="matrix(0.03333332,3.3554312e-5,-3.3554312e-5,0.03333332,366.53421,512.86995)"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;display:inline"
+               d="M 142.5625,-6.4375 40.6875,-6.34375 C 29.868538,-6.48507 19.811533,-0.790227 14.367338,8.560208 8.9231424,17.910644 8.9351814,29.468085 14.398845,38.807157 19.862509,48.14623 29.931356,53.820109 40.75,53.65625 L 142.625,53.5625 c 10.81896,0.14132 20.87597,-5.553523 26.32016,-14.903958 5.4442,-9.350436 5.43216,-20.907877 -0.0315,-30.246949 C 163.44999,-0.92748 153.38114,-6.601359 142.5625,-6.4375 l 0,0 z"
+               id="path6833" />
+            <path
+               inkscape:connector-curvature="0"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
+               d="m 366.65701,514.67289 4.625,0 -1.8125,1.8125 c -0.39695,0.39695 -0.39695,1.04055 0,1.4375 0.39695,0.39695 1.04055,0.39695 1.4375,0 l 3.4375,-3.46875 0.0937,-0.0625 c 0.006,-0.006 -0.006,-0.0253 0,-0.0312 0.0554,-0.0572 0.1151,-0.11699 0.15625,-0.1875 0.0286,-0.0491 0.0429,-0.10409 0.0625,-0.15625 0.0124,-0.0307 0.0221,-0.0622 0.0312,-0.0937 0.0311,-0.1161 0.0427,-0.22493 0.0312,-0.34375 -0.004,-0.0578 -0.0174,-0.0996 -0.0312,-0.15625 -0.0109,-0.0407 -0.0151,-0.0857 -0.0312,-0.125 -0.0164,-0.0408 -0.0405,-0.0862 -0.0625,-0.125 -0.0455,-0.0779 -0.0936,-0.15726 -0.15625,-0.21875 l -3.53125,-3.53125 c -0.20891,-0.22276 -0.50816,-0.33785 -0.8125,-0.3125 -0.39478,0.0269 -0.73977,0.28438 -0.875,0.65625 -0.13524,0.37187 -0.0353,0.78826 0.25,1.0625 l 1.875,1.84375 -4.6875,0"
+               id="path6835"
+               sodipodi:nodetypes="cccscccsssssssscccsccc" />
+          </g>
+        </g>
+      </g>
+      <flowRoot
+         xml:space="preserve"
+         id="flowRoot9963-2-3"
+         style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;letter-spacing:0px;word-spacing:0px;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"
+         transform="translate(131.17902,-28.711907)"><flowRegion
+           id="flowRegion9965-2-7"><rect
+             id="rect9967-3-5"
+             width="68.012077"
+             height="51.315746"
+             x="-113.13708"
+             y="271.51425"
+             style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;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="flowPara9973-8-4">Vaadin</flowPara><flowPara
+           id="flowPara11084">Server-</flowPara><flowPara
+           id="flowPara11086">Side</flowPara><flowPara
+           id="flowPara10160">Framework</flowPara></flowRoot>    </g>
+    <g
+       id="g6789-3"
+       transform="translate(326.94598,-187.75591)">
+      <rect
+         ry="3.7880721"
+         y="235.11809"
+         x="13.054024"
+         height="120.00002"
+         width="75"
+         id="rect6791-7"
+         style="fill:#00b400;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+      <g
+         transform="matrix(0.07579619,0,0,0.07579619,12.243595,335.4519)"
+         id="g6803-4">
+        <g
+           id="g6805-7"
+           transform="matrix(29.999985,-0.03019888,0.03019888,29.999985,-11011.509,-15375.022)">
+          <g
+             style="fill:#ffffff;fill-opacity:1"
+             transform="translate(-2.6843449e-4,0.2666665)"
+             id="g6807-4">
+            <path
+               transform="matrix(0.03333332,3.3554312e-5,-3.3554312e-5,0.03333332,366.53421,512.86995)"
+               style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;display:inline"
+               d="M 142.5625,-6.4375 40.6875,-6.34375 C 29.868538,-6.48507 19.811533,-0.790227 14.367338,8.560208 8.9231424,17.910644 8.9351814,29.468085 14.398845,38.807157 19.862509,48.14623 29.931356,53.820109 40.75,53.65625 L 142.625,53.5625 c 10.81896,0.14132 20.87597,-5.553523 26.32016,-14.903958 5.4442,-9.350436 5.43216,-20.907877 -0.0315,-30.246949 C 163.44999,-0.92748 153.38114,-6.601359 142.5625,-6.4375 l 0,0 z"
+               id="path6809-4"
+               inkscape:connector-curvature="0" />
+            <path
+               style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
+               d="m 366.65701,514.67289 4.625,0 -1.8125,1.8125 c -0.39695,0.39695 -0.39695,1.04055 0,1.4375 0.39695,0.39695 1.04055,0.39695 1.4375,0 l 3.4375,-3.46875 0.0937,-0.0625 c 0.006,-0.006 -0.006,-0.0253 0,-0.0312 0.0554,-0.0572 0.1151,-0.11699 0.15625,-0.1875 0.0286,-0.0491 0.0429,-0.10409 0.0625,-0.15625 0.0124,-0.0307 0.0221,-0.0622 0.0312,-0.0937 0.0311,-0.1161 0.0427,-0.22493 0.0312,-0.34375 -0.004,-0.0578 -0.0174,-0.0996 -0.0312,-0.15625 -0.0109,-0.0407 -0.0151,-0.0857 -0.0312,-0.125 -0.0164,-0.0408 -0.0405,-0.0862 -0.0625,-0.125 -0.0455,-0.0779 -0.0936,-0.15726 -0.15625,-0.21875 l -3.53125,-3.53125 c -0.20891,-0.22276 -0.50816,-0.33785 -0.8125,-0.3125 -0.39478,0.0269 -0.73977,0.28438 -0.875,0.65625 -0.13524,0.37187 -0.0353,0.78826 0.25,1.0625 l 1.875,1.84375 -4.6875,0"
+               id="path6811-3"
+               sodipodi:nodetypes="cccscccsssssssscccsccc"
+               inkscape:connector-curvature="0" />
+          </g>
+        </g>
+      </g>
+      <flowRoot
+         xml:space="preserve"
+         id="flowRoot9963-2-3-6-8"
+         style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;letter-spacing:0px;word-spacing:0px;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"
+         transform="translate(131.17902,-28.711907)"><flowRegion
+           id="flowRegion9965-2-7-7-1"><rect
+             id="rect9967-3-5-6-4"
+             width="60.012077"
+             height="32.315746"
+             x="-113.13708"
+             y="271.51425"
+             style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;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="flowPara10992-4">Back-End</flowPara></flowRoot>      <flowRoot
+         xml:space="preserve"
+         id="flowRoot9963-2-3-6-8-6"
+         style="font-size:9px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:100%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"
+         transform="translate(131.17902,-9.711907)"><flowRegion
+           id="flowRegion9965-2-7-7-1-9"><rect
+             id="rect9967-3-5-6-4-7"
+             width="70.012077"
+             height="53.315746"
+             x="-113.13708"
+             y="271.51425"
+             style="font-size:9px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:100%;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="flowPara10992-4-9">Business Logic</flowPara><flowPara
+           id="flowPara11080">Persistence</flowPara><flowPara
+           id="flowPara11082">Database</flowPara></flowRoot>    </g>
+  </g>
+</svg>
diff --git a/documentation/introduction/original-drawings/intro-layout-capture-1.png b/documentation/introduction/original-drawings/intro-layout-capture-1.png
new file mode 100644
index 0000000000..0823787f00
--- /dev/null
+++ b/documentation/introduction/original-drawings/intro-layout-capture-1.png
diff --git a/documentation/introduction/original-drawings/intro-themes-faded.svg b/documentation/introduction/original-drawings/intro-themes-faded.svg
new file mode 100644
index 0000000000..fdeb1e9ef1
--- /dev/null
+++ b/documentation/introduction/original-drawings/intro-themes-faded.svg
@@ -0,0 +1,143 @@
+<?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="intro-themes-faded.svg"
+   inkscape:output_extension="org.inkscape.output.svg.inkscape"
+   version="1.1">
+  <defs
+     id="defs1903">
+    <linearGradient
+       id="linearGradient3942">
+      <stop
+         style="stop-color:#ffffff;stop-opacity:0;"
+         offset="0"
+         id="stop3944" />
+      <stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="1"
+         id="stop3946" />
+    </linearGradient>
+    <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="perspective3285" />
+    <inkscape:perspective
+       id="perspective3425"
+       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
+       inkscape:vp_z="744.09448 : 526.18109 : 1"
+       inkscape:vp_y="0 : 1000 : 0"
+       inkscape:vp_x="0 : 526.18109 : 1"
+       sodipodi:type="inkscape:persp3d" />
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3942"
+       id="radialGradient3948"
+       cx="266.94611"
+       cy="212.33144"
+       fx="266.94611"
+       fy="212.33144"
+       r="204.55081"
+       gradientTransform="matrix(1.1694303,7.9008514e-3,-7.2468582e-3,1.1882556,-43.048357,-40.231826)"
+       gradientUnits="userSpaceOnUse" />
+    <filter
+       inkscape:collect="always"
+       id="filter4256"
+       x="-0.0077072907"
+       width="1.0154146"
+       y="-0.10312293"
+       height="1.2062459">
+      <feGaussianBlur
+         inkscape:collect="always"
+         stdDeviation="0.9979963"
+         id="feGaussianBlur4258" />
+    </filter>
+    <radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient3942"
+       id="radialGradient5489"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.1694303,0.00790085,-0.00724686,1.1882556,-43.553433,-37.706444)"
+       cx="266.94611"
+       cy="212.33144"
+       fx="266.94611"
+       fy="212.33144"
+       r="204.55081" />
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="1.979899"
+     inkscape:cx="312.28164"
+     inkscape:cy="843.03236"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     gridtolerance="10000"
+     inkscape:window-width="1310"
+     inkscape:window-height="838"
+     inkscape:window-x="602"
+     inkscape:window-y="185"
+     showgrid="false"
+     inkscape:window-maximized="0" />
+  <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="opacity:0.74493929;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect4190"
+       width="375.7767"
+       height="321.22855"
+       x="132.32999"
+       y="106.85941"
+       ry="15.937783" />
+    <image
+       sodipodi:absref="/home/magi/itmill/doc/manual/original-drawings/intro/intro-layout-capture-1.png"
+       xlink:href="intro-layout-capture-1.png"
+       width="365"
+       height="348"
+       id="image3427"
+       x="137.5293"
+       y="114.28848" />
+    <rect
+       style="fill:url(#radialGradient5489);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+       id="rect3431"
+       width="370.97107"
+       height="357.59399"
+       x="134.85538"
+       y="110.39493"
+       ry="15.337974" />
+  </g>
+</svg>
diff --git a/documentation/introduction/original-drawings/structure.graffle b/documentation/introduction/original-drawings/structure.graffle
new file mode 100644
index 0000000000..6d3f8e124b
--- /dev/null
+++ b/documentation/introduction/original-drawings/structure.graffle
@@ -0,0 +1,883 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>ActiveLayerIndex</key>
+	<integer>0</integer>
+	<key>AutoAdjust</key>
+	<true/>
+	<key>CanvasColor</key>
+	<dict>
+		<key>w</key>
+		<string>1</string>
+	</dict>
+	<key>CanvasOrigin</key>
+	<string>{0, 0}</string>
+	<key>CanvasScale</key>
+	<real>1</real>
+	<key>ColumnAlign</key>
+	<integer>1</integer>
+	<key>ColumnSpacing</key>
+	<real>36</real>
+	<key>CreationDate</key>
+	<string>2007-02-10 20:49:22 +0200</string>
+	<key>Creator</key>
+	<string>Sami Ekblad</string>
+	<key>DisplayScale</key>
+	<string>1 cm = 1 cm</string>
+	<key>GraphDocumentVersion</key>
+	<integer>5</integer>
+	<key>GraphicsList</key>
+	<array>
+		<dict>
+			<key>Bounds</key>
+			<string>{{131.5, 135.5}, {181.5, 30}}</string>
+			<key>Class</key>
+			<string>ShapedGraphic</string>
+			<key>ID</key>
+			<integer>135</integer>
+			<key>Shape</key>
+			<string>Cloud</string>
+			<key>Style</key>
+			<dict>
+				<key>fill</key>
+				<dict>
+					<key>FillType</key>
+					<integer>2</integer>
+					<key>GradientAngle</key>
+					<real>70</real>
+					<key>GradientColor</key>
+					<dict>
+						<key>w</key>
+						<string>0.666667</string>
+					</dict>
+				</dict>
+				<key>stroke</key>
+				<dict>
+					<key>Color</key>
+					<dict>
+						<key>b</key>
+						<string>0.631373</string>
+						<key>g</key>
+						<string>0.513726</string>
+						<key>r</key>
+						<string>0.411765</string>
+					</dict>
+				</dict>
+			</dict>
+			<key>Text</key>
+			<dict>
+				<key>Text</key>
+				<string>{\rtf1\mac\ansicpg10000\cocoartf824\cocoasubrtf420
+{\fonttbl\f0\fswiss\fcharset77 Helvetica;}
+{\colortbl;\red255\green255\blue255;}
+\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc\pardirnatural
+
+\f0\fs24 \cf0 HTTP(S)}</string>
+			</dict>
+		</dict>
+		<dict>
+			<key>Class</key>
+			<string>LineGraphic</string>
+			<key>Head</key>
+			<dict>
+				<key>ID</key>
+				<integer>4</integer>
+			</dict>
+			<key>ID</key>
+			<integer>150</integer>
+			<key>Points</key>
+			<array>
+				<string>{167.953, 101.704}</string>
+				<string>{213.226, 199.296}</string>
+			</array>
+			<key>Style</key>
+			<dict>
+				<key>stroke</key>
+				<dict>
+					<key>HeadArrow</key>
+					<string>FilledArrow</string>
+					<key>TailArrow</key>
+					<string>FilledArrow</string>
+				</dict>
+			</dict>
+			<key>Tail</key>
+			<dict>
+				<key>ID</key>
+				<integer>146</integer>
+			</dict>
+		</dict>
+		<dict>
+			<key>Bounds</key>
+			<string>{{85, 42}, {138, 59.25}}</string>
+			<key>Class</key>
+			<string>ShapedGraphic</string>
+			<key>FontInfo</key>
+			<dict>
+				<key>Color</key>
+				<dict>
+					<key>w</key>
+					<string>0</string>
+				</dict>
+				<key>Font</key>
+				<string>Helvetica</string>
+				<key>NSKern</key>
+				<real>0.0</real>
+				<key>Size</key>
+				<real>12</real>
+			</dict>
+			<key>ID</key>
+			<integer>146</integer>
+			<key>Shape</key>
+			<string>Rectangle</string>
+			<key>Style</key>
+			<dict>
+				<key>fill</key>
+				<dict>
+					<key>Color</key>
+					<dict>
+						<key>b</key>
+						<string>1</string>
+						<key>g</key>
+						<string>0.929412</string>
+						<key>r</key>
+						<string>0.85098</string>
+					</dict>
+					<key>FillType</key>
+					<integer>2</integer>
+					<key>GradientAngle</key>
+					<real>90</real>
+					<key>GradientColor</key>
+					<dict>
+						<key>b</key>
+						<string>0.772549</string>
+						<key>g</key>
+						<string>0.662745</string>
+						<key>r</key>
+						<string>0.568627</string>
+					</dict>
+				</dict>
+				<key>stroke</key>
+				<dict>
+					<key>CornerRadius</key>
+					<real>5</real>
+				</dict>
+			</dict>
+			<key>Text</key>
+			<dict>
+				<key>Text</key>
+				<string>{\rtf1\mac\ansicpg10000\cocoartf824\cocoasubrtf420
+{\fonttbl\f0\fswiss\fcharset77 Helvetica;}
+{\colortbl;\red255\green255\blue255;}
+\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc\pardirnatural
+
+\f0\fs24 \cf0 \expnd0\expndtw0\kerning0
+Web Browser\
+\
+(AJAX rendering)}</string>
+				<key>VerticalPad</key>
+				<integer>10</integer>
+			</dict>
+			<key>TextPlacement</key>
+			<integer>0</integer>
+		</dict>
+		<dict>
+			<key>Class</key>
+			<string>LineGraphic</string>
+			<key>Head</key>
+			<dict>
+				<key>ID</key>
+				<integer>4</integer>
+			</dict>
+			<key>ID</key>
+			<integer>145</integer>
+			<key>Points</key>
+			<array>
+				<string>{278.935, 101.7}</string>
+				<string>{231.669, 199.3}</string>
+			</array>
+			<key>Style</key>
+			<dict>
+				<key>stroke</key>
+				<dict>
+					<key>HeadArrow</key>
+					<string>FilledArrow</string>
+					<key>TailArrow</key>
+					<string>FilledArrow</string>
+				</dict>
+			</dict>
+			<key>Tail</key>
+			<dict>
+				<key>ID</key>
+				<integer>3</integer>
+			</dict>
+		</dict>
+		<dict>
+			<key>Class</key>
+			<string>LineGraphic</string>
+			<key>Head</key>
+			<dict>
+				<key>ID</key>
+				<integer>10</integer>
+			</dict>
+			<key>ID</key>
+			<integer>144</integer>
+			<key>Points</key>
+			<array>
+				<string>{221.373, 238.249}</string>
+				<string>{219.877, 271.501}</string>
+			</array>
+			<key>Style</key>
+			<dict>
+				<key>stroke</key>
+				<dict>
+					<key>HeadArrow</key>
+					<string>FilledArrow</string>
+					<key>TailArrow</key>
+					<string>FilledArrow</string>
+				</dict>
+			</dict>
+			<key>Tail</key>
+			<dict>
+				<key>ID</key>
+				<integer>4</integer>
+			</dict>
+		</dict>
+		<dict>
+			<key>Class</key>
+			<string>LineGraphic</string>
+			<key>Head</key>
+			<dict>
+				<key>ID</key>
+				<integer>142</integer>
+			</dict>
+			<key>ID</key>
+			<integer>143</integer>
+			<key>Points</key>
+			<array>
+				<string>{235.183, 310.384}</string>
+				<string>{263.16, 343.893}</string>
+			</array>
+			<key>Style</key>
+			<dict>
+				<key>stroke</key>
+				<dict>
+					<key>HeadArrow</key>
+					<string>FilledArrow</string>
+					<key>Pattern</key>
+					<integer>1</integer>
+					<key>TailArrow</key>
+					<string>0</string>
+				</dict>
+			</dict>
+			<key>Tail</key>
+			<dict>
+				<key>ID</key>
+				<integer>10</integer>
+			</dict>
+		</dict>
+		<dict>
+			<key>Bounds</key>
+			<string>{{259, 344.25}, {54, 54}}</string>
+			<key>Class</key>
+			<string>ShapedGraphic</string>
+			<key>ID</key>
+			<integer>142</integer>
+			<key>Shape</key>
+			<string>Rectangle</string>
+			<key>Style</key>
+			<dict>
+				<key>fill</key>
+				<dict>
+					<key>Color</key>
+					<dict>
+						<key>b</key>
+						<string>1</string>
+						<key>g</key>
+						<string>0.929412</string>
+						<key>r</key>
+						<string>0.85098</string>
+					</dict>
+					<key>FillType</key>
+					<integer>2</integer>
+					<key>GradientAngle</key>
+					<real>90</real>
+					<key>GradientColor</key>
+					<dict>
+						<key>b</key>
+						<string>0.772549</string>
+						<key>g</key>
+						<string>0.662745</string>
+						<key>r</key>
+						<string>0.568627</string>
+					</dict>
+				</dict>
+				<key>stroke</key>
+				<dict>
+					<key>CornerRadius</key>
+					<real>5</real>
+				</dict>
+			</dict>
+			<key>Text</key>
+			<dict>
+				<key>Text</key>
+				<string>{\rtf1\mac\ansicpg10000\cocoartf824\cocoasubrtf420
+{\fonttbl\f0\fswiss\fcharset77 Helvetica;}
+{\colortbl;\red255\green255\blue255;}
+\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc\pardirnatural
+
+\f0\fs24 \cf0 DB}</string>
+			</dict>
+		</dict>
+		<dict>
+			<key>Class</key>
+			<string>LineGraphic</string>
+			<key>Head</key>
+			<dict>
+				<key>ID</key>
+				<integer>140</integer>
+			</dict>
+			<key>ID</key>
+			<integer>141</integer>
+			<key>Points</key>
+			<array>
+				<string>{219.243, 310.5}</string>
+				<string>{219.657, 343.75}</string>
+			</array>
+			<key>Style</key>
+			<dict>
+				<key>stroke</key>
+				<dict>
+					<key>HeadArrow</key>
+					<string>FilledArrow</string>
+					<key>Pattern</key>
+					<integer>1</integer>
+					<key>TailArrow</key>
+					<string>0</string>
+				</dict>
+			</dict>
+			<key>Tail</key>
+			<dict>
+				<key>ID</key>
+				<integer>10</integer>
+			</dict>
+		</dict>
+		<dict>
+			<key>Class</key>
+			<string>LineGraphic</string>
+			<key>Head</key>
+			<dict>
+				<key>ID</key>
+				<integer>139</integer>
+			</dict>
+			<key>ID</key>
+			<integer>24</integer>
+			<key>Points</key>
+			<array>
+				<string>{203.296, 310.389}</string>
+				<string>{176.184, 343.861}</string>
+			</array>
+			<key>Style</key>
+			<dict>
+				<key>stroke</key>
+				<dict>
+					<key>HeadArrow</key>
+					<string>FilledArrow</string>
+					<key>Pattern</key>
+					<integer>1</integer>
+					<key>TailArrow</key>
+					<string>0</string>
+				</dict>
+			</dict>
+			<key>Tail</key>
+			<dict>
+				<key>ID</key>
+				<integer>10</integer>
+			</dict>
+		</dict>
+		<dict>
+			<key>Bounds</key>
+			<string>{{193, 344.25}, {54, 54}}</string>
+			<key>Class</key>
+			<string>ShapedGraphic</string>
+			<key>ID</key>
+			<integer>140</integer>
+			<key>Shape</key>
+			<string>Rectangle</string>
+			<key>Style</key>
+			<dict>
+				<key>fill</key>
+				<dict>
+					<key>Color</key>
+					<dict>
+						<key>b</key>
+						<string>1</string>
+						<key>g</key>
+						<string>0.929412</string>
+						<key>r</key>
+						<string>0.85098</string>
+					</dict>
+					<key>FillType</key>
+					<integer>2</integer>
+					<key>GradientAngle</key>
+					<real>90</real>
+					<key>GradientColor</key>
+					<dict>
+						<key>b</key>
+						<string>0.772549</string>
+						<key>g</key>
+						<string>0.662745</string>
+						<key>r</key>
+						<string>0.568627</string>
+					</dict>
+				</dict>
+				<key>stroke</key>
+				<dict>
+					<key>CornerRadius</key>
+					<real>5</real>
+				</dict>
+			</dict>
+			<key>Text</key>
+			<dict>
+				<key>Text</key>
+				<string>{\rtf1\mac\ansicpg10000\cocoartf824\cocoasubrtf420
+{\fonttbl\f0\fswiss\fcharset77 Helvetica;}
+{\colortbl;\red255\green255\blue255;}
+\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc\pardirnatural
+
+\f0\fs24 \cf0 EJB}</string>
+			</dict>
+		</dict>
+		<dict>
+			<key>Bounds</key>
+			<string>{{127, 344.25}, {54, 54}}</string>
+			<key>Class</key>
+			<string>ShapedGraphic</string>
+			<key>ID</key>
+			<integer>139</integer>
+			<key>Shape</key>
+			<string>Rectangle</string>
+			<key>Style</key>
+			<dict>
+				<key>fill</key>
+				<dict>
+					<key>Color</key>
+					<dict>
+						<key>b</key>
+						<string>1</string>
+						<key>g</key>
+						<string>0.929412</string>
+						<key>r</key>
+						<string>0.85098</string>
+					</dict>
+					<key>FillType</key>
+					<integer>2</integer>
+					<key>GradientAngle</key>
+					<real>90</real>
+					<key>GradientColor</key>
+					<dict>
+						<key>b</key>
+						<string>0.772549</string>
+						<key>g</key>
+						<string>0.662745</string>
+						<key>r</key>
+						<string>0.568627</string>
+					</dict>
+				</dict>
+				<key>stroke</key>
+				<dict>
+					<key>CornerRadius</key>
+					<real>5</real>
+				</dict>
+			</dict>
+			<key>Text</key>
+			<dict>
+				<key>Text</key>
+				<string>{\rtf1\mac\ansicpg10000\cocoartf824\cocoasubrtf420
+{\fonttbl\f0\fswiss\fcharset77 Helvetica;}
+{\colortbl;\red255\green255\blue255;}
+\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc\pardirnatural
+
+\f0\fs24 \cf0 Web\
+Service}</string>
+			</dict>
+		</dict>
+		<dict>
+			<key>Bounds</key>
+			<string>{{125, 272}, {188, 38}}</string>
+			<key>Class</key>
+			<string>ShapedGraphic</string>
+			<key>FontInfo</key>
+			<dict>
+				<key>Color</key>
+				<dict>
+					<key>b</key>
+					<string>1</string>
+					<key>g</key>
+					<string>1</string>
+					<key>r</key>
+					<string>1</string>
+				</dict>
+			</dict>
+			<key>ID</key>
+			<integer>10</integer>
+			<key>Shape</key>
+			<string>Rectangle</string>
+			<key>Style</key>
+			<dict>
+				<key>fill</key>
+				<dict>
+					<key>Color</key>
+					<dict>
+						<key>b</key>
+						<string>0.041377</string>
+						<key>g</key>
+						<string>0.853261</string>
+						<key>r</key>
+						<string>6.48952e-05</string>
+					</dict>
+					<key>FillType</key>
+					<integer>2</integer>
+					<key>GradientAngle</key>
+					<real>80</real>
+					<key>GradientColor</key>
+					<dict>
+						<key>b</key>
+						<string>0.0224016</string>
+						<key>g</key>
+						<string>0.461957</string>
+						<key>r</key>
+						<string>3.51343e-05</string>
+					</dict>
+				</dict>
+				<key>stroke</key>
+				<dict>
+					<key>CornerRadius</key>
+					<real>5</real>
+				</dict>
+			</dict>
+			<key>Text</key>
+			<dict>
+				<key>Text</key>
+				<string>{\rtf1\mac\ansicpg10000\cocoartf824\cocoasubrtf420
+{\fonttbl\f0\fswiss\fcharset77 Helvetica;}
+{\colortbl;\red255\green255\blue255;}
+\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc\pardirnatural
+
+\f0\fs24 \cf1 Java Application}</string>
+			</dict>
+		</dict>
+		<dict>
+			<key>Bounds</key>
+			<string>{{131.5, 199.75}, {181.5, 38}}</string>
+			<key>Class</key>
+			<string>ShapedGraphic</string>
+			<key>FontInfo</key>
+			<dict>
+				<key>Color</key>
+				<dict>
+					<key>b</key>
+					<string>1</string>
+					<key>g</key>
+					<string>1</string>
+					<key>r</key>
+					<string>1</string>
+				</dict>
+			</dict>
+			<key>ID</key>
+			<integer>4</integer>
+			<key>Shape</key>
+			<string>Rectangle</string>
+			<key>Style</key>
+			<dict>
+				<key>fill</key>
+				<dict>
+					<key>Color</key>
+					<dict>
+						<key>b</key>
+						<string>1</string>
+						<key>g</key>
+						<string>0.630186</string>
+						<key>r</key>
+						<string>0.248129</string>
+					</dict>
+					<key>FillType</key>
+					<integer>2</integer>
+					<key>GradientAngle</key>
+					<real>80</real>
+					<key>GradientColor</key>
+					<dict>
+						<key>b</key>
+						<string>0.673913</string>
+						<key>g</key>
+						<string>5.08933e-05</string>
+						<key>r</key>
+						<string>0.109836</string>
+					</dict>
+					<key>MiddleFraction</key>
+					<real>0.579365074634552</real>
+				</dict>
+				<key>stroke</key>
+				<dict>
+					<key>CornerRadius</key>
+					<real>5</real>
+				</dict>
+			</dict>
+			<key>Text</key>
+			<dict>
+				<key>Text</key>
+				<string>{\rtf1\mac\ansicpg10000\cocoartf824\cocoasubrtf420
+{\fonttbl\f0\fswiss\fcharset77 Helvetica;}
+{\colortbl;\red255\green255\blue255;}
+\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc\pardirnatural
+
+\f0\fs24 \cf1 IT Mill Toolkit Components}</string>
+			</dict>
+		</dict>
+		<dict>
+			<key>Bounds</key>
+			<string>{{231, 42}, {125, 59.25}}</string>
+			<key>Class</key>
+			<string>ShapedGraphic</string>
+			<key>FontInfo</key>
+			<dict>
+				<key>Color</key>
+				<dict>
+					<key>w</key>
+					<string>0</string>
+				</dict>
+				<key>Font</key>
+				<string>Helvetica</string>
+				<key>NSKern</key>
+				<real>0.0</real>
+				<key>Size</key>
+				<real>12</real>
+			</dict>
+			<key>ID</key>
+			<integer>3</integer>
+			<key>Shape</key>
+			<string>Rectangle</string>
+			<key>Style</key>
+			<dict>
+				<key>fill</key>
+				<dict>
+					<key>FillType</key>
+					<integer>2</integer>
+					<key>GradientAngle</key>
+					<real>70</real>
+					<key>GradientColor</key>
+					<dict>
+						<key>w</key>
+						<string>0.666667</string>
+					</dict>
+				</dict>
+				<key>stroke</key>
+				<dict>
+					<key>CornerRadius</key>
+					<real>5</real>
+					<key>Pattern</key>
+					<integer>1</integer>
+				</dict>
+			</dict>
+			<key>Text</key>
+			<dict>
+				<key>Text</key>
+				<string>{\rtf1\mac\ansicpg10000\cocoartf824\cocoasubrtf420
+{\fonttbl\f0\fswiss\fcharset77 Helvetica;}
+{\colortbl;\red255\green255\blue255;}
+\pard\tx560\tx1120\tx1680\tx2240\tx2800\tx3360\tx3920\tx4480\tx5040\tx5600\tx6160\tx6720\qc\pardirnatural
+
+\f0\fs24 \cf0 \expnd0\expndtw0\kerning0
+Web Browser\
+\
+(HTML rendering)}</string>
+				<key>VerticalPad</key>
+				<integer>10</integer>
+			</dict>
+			<key>TextPlacement</key>
+			<integer>0</integer>
+		</dict>
+	</array>
+	<key>GridInfo</key>
+	<dict/>
+	<key>GuidesLocked</key>
+	<string>NO</string>
+	<key>GuidesVisible</key>
+	<string>YES</string>
+	<key>HPages</key>
+	<integer>1</integer>
+	<key>ImageCounter</key>
+	<integer>6</integer>
+	<key>IsPalette</key>
+	<string>NO</string>
+	<key>KeepToScale</key>
+	<false/>
+	<key>Layers</key>
+	<array>
+		<dict>
+			<key>Lock</key>
+			<string>NO</string>
+			<key>Name</key>
+			<string>Layer 1</string>
+			<key>Print</key>
+			<string>YES</string>
+			<key>View</key>
+			<string>YES</string>
+		</dict>
+	</array>
+	<key>LayoutInfo</key>
+	<dict/>
+	<key>LinksVisible</key>
+	<string>NO</string>
+	<key>MagnetsVisible</key>
+	<string>NO</string>
+	<key>MasterSheet</key>
+	<string>Master 1</string>
+	<key>MasterSheets</key>
+	<array>
+		<dict>
+			<key>ActiveLayerIndex</key>
+			<integer>0</integer>
+			<key>AutoAdjust</key>
+			<true/>
+			<key>CanvasColor</key>
+			<dict>
+				<key>w</key>
+				<string>1</string>
+			</dict>
+			<key>CanvasOrigin</key>
+			<string>{0, 0}</string>
+			<key>CanvasScale</key>
+			<real>1</real>
+			<key>ColumnAlign</key>
+			<integer>1</integer>
+			<key>ColumnSpacing</key>
+			<real>36</real>
+			<key>DisplayScale</key>
+			<string>1 cm = 1 cm</string>
+			<key>GraphicsList</key>
+			<array/>
+			<key>GridInfo</key>
+			<dict/>
+			<key>HPages</key>
+			<integer>1</integer>
+			<key>IsPalette</key>
+			<string>NO</string>
+			<key>KeepToScale</key>
+			<false/>
+			<key>Layers</key>
+			<array>
+				<dict>
+					<key>Lock</key>
+					<string>NO</string>
+					<key>Name</key>
+					<string>Layer 1</string>
+					<key>Print</key>
+					<string>YES</string>
+					<key>View</key>
+					<string>YES</string>
+				</dict>
+			</array>
+			<key>LayoutInfo</key>
+			<dict/>
+			<key>Orientation</key>
+			<integer>2</integer>
+			<key>OutlineStyle</key>
+			<string>Basic</string>
+			<key>RowAlign</key>
+			<integer>1</integer>
+			<key>RowSpacing</key>
+			<real>36</real>
+			<key>SheetTitle</key>
+			<string>Master 1</string>
+			<key>UniqueID</key>
+			<integer>1</integer>
+			<key>VPages</key>
+			<integer>1</integer>
+		</dict>
+	</array>
+	<key>ModificationDate</key>
+	<string>2007-02-11 12:53:28 +0200</string>
+	<key>Modifier</key>
+	<string>Joonas Lehtinen</string>
+	<key>NotesVisible</key>
+	<string>NO</string>
+	<key>Orientation</key>
+	<integer>2</integer>
+	<key>OriginVisible</key>
+	<string>NO</string>
+	<key>OutlineStyle</key>
+	<string>Basic</string>
+	<key>PageBreaks</key>
+	<string>YES</string>
+	<key>PrintInfo</key>
+	<dict>
+		<key>NSBottomMargin</key>
+		<array>
+			<string>float</string>
+			<string>0</string>
+		</array>
+		<key>NSLeftMargin</key>
+		<array>
+			<string>float</string>
+			<string>0</string>
+		</array>
+		<key>NSPaperSize</key>
+		<array>
+			<string>size</string>
+			<string>{595, 842}</string>
+		</array>
+		<key>NSRightMargin</key>
+		<array>
+			<string>float</string>
+			<string>0</string>
+		</array>
+		<key>NSTopMargin</key>
+		<array>
+			<string>float</string>
+			<string>0</string>
+		</array>
+	</dict>
+	<key>ReadOnly</key>
+	<string>NO</string>
+	<key>RowAlign</key>
+	<integer>1</integer>
+	<key>RowSpacing</key>
+	<real>36</real>
+	<key>SheetTitle</key>
+	<string>Canvas 1</string>
+	<key>SmartAlignmentGuidesActive</key>
+	<string>YES</string>
+	<key>SmartDistanceGuidesActive</key>
+	<string>YES</string>
+	<key>UniqueID</key>
+	<integer>1</integer>
+	<key>UseEntirePage</key>
+	<true/>
+	<key>VPages</key>
+	<integer>1</integer>
+	<key>WindowInfo</key>
+	<dict>
+		<key>CurrentSheet</key>
+		<string>0</string>
+		<key>DrawerOpen</key>
+		<false/>
+		<key>DrawerTab</key>
+		<string>Outline</string>
+		<key>DrawerWidth</key>
+		<real>209</real>
+		<key>FitInWindow</key>
+		<false/>
+		<key>Frame</key>
+		<string>{{78, 88}, {834, 898}}</string>
+		<key>ShowRuler</key>
+		<false/>
+		<key>ShowStatusBar</key>
+		<true/>
+		<key>VisibleRegion</key>
+		<string>{{-124, 0}, {819, 784}}</string>
+		<key>Zoom</key>
+		<string>1</string>
+	</dict>
+</dict>
+</plist>
author	Markus Koivisto <markus@vaadin.com>	2016-01-22 14:55:18 +0200
committer	Markus Koivisto <markus@vaadin.com>	2016-01-22 14:55:18 +0200
commit	99d6de546c74f0eed230ea8253dda6b85109d2e7 (patch)
tree	10fc21c557566fe3241e6e13499df18d80f8dcb2 /documentation/introduction
parent	610736d9f373d4b37fd39ff8f90aabd13eab7926 (diff)
download	vaadin-framework-99d6de546c74f0eed230ea8253dda6b85109d2e7.tar.gz vaadin-framework-99d6de546c74f0eed230ea8253dda6b85109d2e7.zip