Browse Source

Update documentation, BoV chapters 1 - 5.3 (#8085)

* Update documentation chapters 1 - 5.3

Images and diagrams have not been updated,
but unnecessary images have been removed.

* Sync application declarative and architecture sections source code.

Screenshot image is updated to match the source code.

* Old datamodel image is removed.

* Ivy install image is removed.

* Remove unnecessary linking / reference
tags/8.0.0.beta2
Pekka Hyvönen 7 years ago
parent
commit
9c6831bab0
46 changed files with 120 additions and 7166 deletions
  1. 18
    44
      documentation/application/application-architecture.asciidoc
  2. 12
    26
      documentation/application/application-declarative.asciidoc
  3. 13
    13
      documentation/application/application-overview.asciidoc
  4. 0
    970
      documentation/application/img/application-architecture.svg
  5. BIN
      documentation/application/img/ui-architecture-hierarchical.png
  6. 1
    1
      documentation/architecture/architecture-client-side.asciidoc
  7. 8
    28
      documentation/architecture/architecture-events.asciidoc
  8. 1
    1
      documentation/architecture/architecture-overview.asciidoc
  9. 15
    21
      documentation/architecture/architecture-technology.asciidoc
  10. BIN
      documentation/architecture/img/datamodel.png
  11. 0
    2879
      documentation/architecture/original-drawings/clientside-arch.svg.2012_10_09_18_20_24.0.svg
  12. 0
    2735
      documentation/architecture/original-drawings/clientside-arch.svg.2012_10_12_17_35_17.0.svg
  13. 4
    9
      documentation/getting-started/getting-started-archetypes.asciidoc
  14. 7
    285
      documentation/getting-started/getting-started-first-project.asciidoc
  15. 1
    37
      documentation/getting-started/getting-started-idea.asciidoc
  16. 18
    16
      documentation/getting-started/getting-started-libraries.asciidoc
  17. 2
    12
      documentation/getting-started/getting-started-maven.asciidoc
  18. 3
    4
      documentation/getting-started/getting-started-overview.adoc
  19. 1
    39
      documentation/getting-started/getting-started-package.asciidoc
  20. 1
    1
      documentation/getting-started/getting-started-scala.asciidoc
  21. BIN
      documentation/getting-started/img/idea-maven-newproject-3.png
  22. BIN
      documentation/getting-started/img/idea-maven-newproject-4.png
  23. BIN
      documentation/getting-started/img/idea-maven-newproject-5.png
  24. BIN
      documentation/getting-started/img/idea-maven-run-1.png
  25. BIN
      documentation/getting-started/img/idea-maven-run-2.png
  26. BIN
      documentation/getting-started/img/idea-newproject-3.png
  27. BIN
      documentation/getting-started/img/ivyde-install-available.png
  28. BIN
      documentation/getting-started/img/maven-project-created.png
  29. BIN
      documentation/getting-started/img/myproject-ivy-created.png
  30. BIN
      documentation/getting-started/img/myproject-ivy-new-vaadin.png
  31. BIN
      documentation/getting-started/img/myproject-ivy-settings.png
  32. BIN
      documentation/getting-started/img/myproject-ivy-vaadin.png
  33. BIN
      documentation/getting-started/img/myproject-ivy-web.png
  34. BIN
      documentation/getting-started/img/runningMyProject.png
  35. BIN
      documentation/getting-started/img/tomcat-startserver-1.png
  36. BIN
      documentation/getting-started/img/tomcat-startserver-2.png
  37. BIN
      documentation/getting-started/img/tomcat-startserver-3.png
  38. BIN
      documentation/getting-started/img/tomcat-startserver-4.png
  39. BIN
      documentation/getting-started/img/tomcat-startserver-5.png
  40. 4
    4
      documentation/installing/installing-eclipse.adoc
  41. 3
    5
      documentation/installing/installing-java.adoc
  42. 1
    6
      documentation/installing/installing-server.adoc
  43. 1
    1
      documentation/installing/installing-toolchain.adoc
  44. 5
    5
      documentation/introduction/intro-background.asciidoc
  45. 1
    1
      documentation/introduction/intro-goals.asciidoc
  46. 0
    23
      documentation/introduction/intro-walkthrough.asciidoc

+ 18
- 44
documentation/application/application-architecture.asciidoc View File

@@ -9,7 +9,7 @@ layout: page

*_This section has not yet been updated to Vaadin Framework 8_*

Vaadin user interfaces are built hierarchically from components, so that the
Vaadin Framework user interfaces are built hierarchically from components, so that the
leaf components are contained within layout components and other component
containers. Building the hierarchy starts from the top (or bottom - whichever
way you like to think about it), from the [classname]#UI# class of the
@@ -27,25 +27,15 @@ public class MyHierarchicalUI extends UI {
setContent(content); // Attach to the UI

// Add some component
content.addComponent(new Label("Hello!"));

// Layout inside layout
HorizontalLayout hor = new HorizontalLayout();
hor.setSizeFull(); // Use all available space

// Couple of horizontally laid out components
Tree tree = new Tree("My Tree",
TreeExample.createTreeContent());
hor.addComponent(tree);

Table table = new Table("My Table",
TableExample.generateContent());
table.setSizeFull();
hor.addComponent(table);
hor.setExpandRatio(table, 1); // Expand to fill

content.addComponent(hor);
content.setExpandRatio(hor, 1); // Expand to fill
content.addComponent(new Label("<b>Hello!</b> - How are you?",
ContentMode.HTML));

Grid<Person> grid = new Grid<>();
grid.setCaption("My Grid");
grid.setItems(GridExample.generateContent());
grid.setSizeFull();
content.addComponent(grid);
content.setExpandRatio(grid, 1); // Expand to fill
}
}
----
@@ -95,15 +85,6 @@ information about common architectures, see
Application Architectures">>, which discusses layered architectures, the
Model-View-Presenter (MVP) pattern, and so forth.

ifdef::web[]
The
<<dummy/../../../framework/advanced/advanced-global#advanced.global,"Accessing
Session-Global Data">> discusses the problem of passing essentially global
references around, a common problem which is also visited in
<<application.architecture.accessing>>.
endif::web[]


[[application.architecture.composition]]
== Compositing Components

@@ -116,30 +97,24 @@ extend layout components to create composite components.
[source, java]
----
class MyView extends VerticalLayout {
TextField entry = new TextField("Enter this");
Label display = new Label("See this");
Button click = new Button("Click This");
TextField entry = new TextField("Enter this");
Label display = new Label("See this");
Button click = new Button("Click This");

public MyView() {
addComponent(entry);
addComponent(display);
addComponent(click);

// Configure it a bit
setSizeFull();
addStyleName("myview");
}
}

// Use it
// Create an instance of MyView
Layout myview = new MyView();
----

This composition pattern is especially supported for creating forms, as
described in
<<dummy/../../../framework/datamodel/datamodel-itembinding#datamodel.itembinding.formclass,"Binding
Member Fields">>.

While extending layouts is an easy way to make component composition, it is a
good practice to encapsulate implementation details, such as the exact layout
component used. Otherwise, the users of such a composite could begin to rely on
@@ -151,9 +126,9 @@ content representation.
[source, java]
----
class MyView extends CustomComponent {
TextField entry = new TextField("Enter this");
Label display = new Label("See this");
Button click = new Button("Click This");
TextField entry = new TextField("Enter this");
Label display = new Label("See this");
Button click = new Button("Click This");

public MyView() {
Layout layout = new VerticalLayout();
@@ -163,12 +138,11 @@ class MyView extends CustomComponent {
layout.addComponent(click);

setCompositionRoot(layout);

setSizeFull();
}
}

// Use it
// Create an instance of MyView
MyView myview = new MyView();
----


+ 12
- 26
documentation/application/application-declarative.asciidoc View File

@@ -25,7 +25,6 @@ vertical.addComponent(new TextField("Street address"));
vertical.addComponent(new TextField("Postal code"));
layout.addComponent(vertical);
----
See the http://demo.vaadin.com/book-examples-vaadin7/book#layout.orderedlayout.basic[on-line example, window="_blank"].

You could define it declaractively with the following equivalent design:

@@ -37,9 +36,6 @@ You could define it declaractively with the following equivalent design:
<vaadin-text-field caption="Postal code"/>
</vaadin-vertical-layout>
----
ifdef::web[]
See the http://demo.vaadin.com/book-examples-vaadin7/book#layout.orderedlayout.basic[on-line example, window="_blank"].
endif::web[]

Declarative designs can be crafted by hand, but are most conveniently created
with the Vaadin Designer.
@@ -72,12 +68,8 @@ to variables in the Java code, as well as optional attributes.
<vaadin-label><b>Hello!</b> -
How are you?</vaadin-label>

<vaadin-horizontal-layout size-full :expand>
<vaadin-tree _id="mytree" caption="My Tree"
width-auto height-full/>
<vaadin-table _id="mytable" caption="My Table"
size-full :expand/>
</vaadin-horizontal-layout>
<vaadin-grid _id="mygrid" caption="My Grid"
size-full :expand/>
</vaadin-vertical-layout>
</body>
</html>
@@ -248,17 +240,13 @@ component [parameter]#c# is equivalent to calling [methodname]#setExpandRatio(c,
&lt;!-- Expands to take up all remaining vertical space --&gt;
&lt;vaadin-horizontal-layout size-full **:expand**&gt;
&lt;!-- Automatic width - shrinks horizontally --&gt;
&lt;vaadin-tree width-auto height-full/&gt;
&lt;vaadin-radio-button-group width-auto height-full/&gt;

&lt;!-- Expands horizontally to take remaining space --&gt;
&lt;vaadin-table size-full **:expand**/&gt;
&lt;vaadin-grid size-full **:expand**/&gt;
&lt;/vaadin-horizontal-layout&gt;
&lt;/vaadin-vertical-layout&gt;
----
Again, compare the above declaration to the Java code given in
<<dummy/../../../framework/application/application-architecture#application.architecture,"Building
the UI">>.



[[application.declarative.identifiers]]
@@ -281,7 +269,7 @@ design. This is the recommended way to identifying components.

[source, html]
----
<vaadin-tree _id="mytree" caption="My Tree"/>
<vaadin-grid _id="mygrid" caption="My Grid"/>
----


@@ -310,26 +298,24 @@ For example, the following class could be used to bind the design given earlier.
----
@DesignRoot
public class MyViewDesign extends VerticalLayout {
Tree mytree;
Table mytable;
RadioButtonGroup<String> myRadioButtonGroup;
Grid<String> myGrid;

public MyViewDesign() {
Design.read("MyDeclarativeUI.html", this);

// Show some (example) data
mytree.setContainerDataSource(
TreeExample.createTreeContent());
mytable.setContainerDataSource(
TableExample.generateContent());
myCheckBoxGroup.setItems("Venus", "Earth", "Mars");
myGrid.setItems(
GridExample.generateContent());

// Some interaction
mytree.addItemClickListener(event -> // Java 8
myCheckBoxGroup.addValueChangeListener(event ->
Notification.show("Selected " +
event.getItemId()));
event.getValue());
}
}
----
See the http://demo.vaadin.com/book-examples-vaadin7/book#application.declarative.designroot[on-line example, window="_blank"].

The design root class must match or extend the root element class of the design.
For example, earlier we had [literal]#++<vaadin-vertical-layout>++# element in the

+ 13
- 13
documentation/application/application-overview.asciidoc View File

@@ -7,7 +7,7 @@ layout: page
[[application.overview]]
= Overview

A server-side Vaadin application runs as a Java Servlet in a servlet container.
A Vaadin Framework application runs as a Java Servlet in a servlet container.
The Java Servlet API is, however, hidden behind the framework. The user
interface of the application is implemented as a __UI__ class, which needs to
create and manage the user interface components that make up the user interface.
@@ -18,14 +18,14 @@ downloadable files are handled as __resources__, which can be external or served
by the application server or the application itself.

[[figure.application.architecture]]
.Server-Side Application Architecture
.Vaadin Framework Application Architecture
image::img/application-architecture-hi.png[width=75%, scaledwidth=90%]

<<figure.application.architecture>> illustrates the basic architecture of an
application made with the Vaadin Framework, with all the major elements, which
are introduced below and discussed in detail in this chapter.

First of all, a Vaadin application must have one or more UI classes that extend
First of all, a Vaadin Framework application must have one or more UI classes that extend
the abstract [classname]#com.vaadin.ui.UI# class and implement the
[methodname]#init()# method. A custom theme can be defined as an annotation for
the UI.
@@ -41,15 +41,15 @@ public class HelloWorld extends UI {
}
----

A UI is a viewport to a Vaadin application running in a web page. A web page can
A UI is a viewport to the application running in a web page. A web page can
actually have multiple such UIs within it. Such situation is typical especially
with portlets in a portal. An application can run in multiple browser windows,
each having a distinct [classname]#UI# instance. The UIs of an application can
be the same UI class or different.

Vaadin framework handles servlet requests internally and associates the requests
with user sessions and a UI state. Because of this, you can develop Vaadin
applications much like you would develop desktop applications.
Vaadin Framework handles servlet requests internally and associates the requests
with user sessions and a UI state. Because of this, you can develop
applications with Vaadin Framework much like you would develop desktop applications.

The most important task in the initialization is the creation of the initial
user interface. This, and the deployment of a UI as a Java Servlet in the
@@ -62,11 +62,11 @@ UI:

UI:: A __UI__ represents an HTML fragment in which a Vaadin application runs in a web
page. It typically fills the entire page, but can also be just a part of a page.
You normally develop a Vaadin application by extending the [classname]#UI# class
You normally develop an application with Vaadin Framework by extending the [classname]#UI# class
and adding content to it. A UI is essentially a viewport connected to a user
session of an application, and you can have many such views, especially in a
multi-window application. Normally, when the user opens a new page with the URL
of the Vaadin UI, a new [classname]#UI# (and the associated [classname]#Page#
of the UI, a new [classname]#UI# (and the associated [classname]#Page#
object) is automatically created for it. All of them share the same user
session.

@@ -99,7 +99,7 @@ They are laid out hierarchically using special __layout components__, with a
content root layout at the top of the hierarchy. User interaction with the
components causes __events__ related to the component, which the application can
handle. __Field components__ are intended for inputting values and can be
directly bound to data using the Vaadin Data Model. You can make your own user
directly bound to data using the data model of the framework. You can make your own user
interface components through either inheritance or composition. For a thorough
reference of user interface components, see
<<dummy/../../../framework/components/components-overview.asciidoc#components.overview,"User
@@ -109,7 +109,7 @@ Layout">>, and for compositing components, see
<<dummy/../../../framework/components/components-customcomponent#components.customcomponent,"Composition
with CustomComponent">>.

Events and Listeners:: Vaadin follows an event-driven programming paradigm, in which events, and
Events and Listeners:: Vaadin Framework follows an event-driven programming paradigm, in which events, and
listeners that handle the events, are the basis of handling user interaction in
an application (although also server push is possible as described in
<<dummy/../../../framework/advanced/advanced-push#advanced.push,"Server
@@ -139,11 +139,11 @@ Layouts">>, and theme resources in
<<dummy/../../../framework/application/application-resources#application.resources.theme,"Theme
Resources">>.

Data Binding:: With data binding, any Vaadin field component can be bound to the properties
Data Binding:: With data binding, any field component in Vaadin Framework can be bound to the properties
of business objects such as JavaBeans and grouped together as forms. The components
can get their values from and update user input to the data model directly, without
the need for any control code. Similarly, any select component can be bound to a
__data source__, fetching its items from a Java Collection or a backend such as an SQL database.
__data provider__, fetching its items from a Java Collection or a backend such as an SQL database.
For a complete overview of data binding in Vaadin, please refer to
<<dummy/../../../framework/datamodel/datamodel-overview.asciidoc#datamodel.overview,"Binding
Components to Data">>.

+ 0
- 970
documentation/application/img/application-architecture.svg View File

@@ -1,970 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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"
height="1536.1"
width="1463.1"
xml:space="preserve"
viewBox="0 0 1463.1 1536.1"
y="0px"
x="0px"
id="Layer_1"
version="1.1"><metadata
id="metadata973"><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><defs
id="defs971" /><style
id="style3"
type="text/css">
.st0{fill:none;stroke:#FF3A4B;stroke-miterlimit:10;}
.st1{fill:#FFFFFF;stroke:#E61E6E;stroke-miterlimit:10;}
.st2{fill:none;stroke:#7F7F7F;stroke-miterlimit:10;}
.st3{fill:none;stroke:#33393B;stroke-width:2;stroke-miterlimit:10;}
.st4{fill:none;}
.st5{fill:#E5E7E9;}
.st6{fill:none;stroke:#231F20;stroke-miterlimit:10;}
.st7{fill:none;stroke:#000000;stroke-linejoin:round;stroke-miterlimit:10;}
.st8{fill:none;stroke:#000000;stroke-miterlimit:10;}
.st9{fill:none;stroke:#00B4F0;stroke-miterlimit:10;}
.st10{fill:#FF3A4B;}
.st11{fill:none;stroke:#FF3A4B;stroke-width:2;stroke-miterlimit:10;}
.st12{fill:none;stroke:#00B4F0;stroke-width:2;stroke-miterlimit:10;}
.st13{fill:#FFFFFF;}
.st14{fill:#33393B;}
.st15{fill:#FF3B4A;}
.st16{fill:#00B4F0;}
.st17{fill:none;stroke:#33393B;stroke-miterlimit:10;}
</style><rect
style="fill:none;stroke:#ff3a4b;stroke-miterlimit:10"
id="rect5"
height="1172.1"
width="1452.1"
class="st0"
y="272.70001"
x="5.5" /><rect
style="fill:#ffffff;stroke:#e61e6e;stroke-miterlimit:10"
id="rect7"
height="192"
width="1270.3"
class="st1"
y="1338.6"
x="130.5" /><g
transform="translate(-356.5,-160.5)"
id="g55"><path
id="path57"
d="m 757.9,254.8 -3.7,-12.3 -3.8,12.3 -2.7,0 -5.2,-15.8 2.9,0 3.8,12.8 3.8,-12.8 2.6,0 3.8,12.8 3.8,-12.8 2.7,0 -5.3,15.8 -2.7,0 z" /><path
id="path59"
d="m 774.9,241.4 0,4.3 7.7,0 0,2.4 -7.7,0 0,4.3 8.9,0 0,2.4 -11.5,0 0,-15.8 11.3,0 0,2.4 -8.7,0 z" /><path
id="path61"
d="m 798.4,239 c 3.3,0 5.3,1.5 5.3,3.9 0,1.8 -1.1,3.1 -2.8,3.5 2.1,0.4 3.4,1.9 3.4,4 0,2.7 -2.2,4.3 -5.7,4.3 l -7,0 0,-15.7 6.8,0 z m -4.2,6.5 4.1,0 c 1.7,0 2.7,-0.8 2.7,-2.1 0,-1.3 -1,-2.1 -2.7,-2.1 l -4.1,0 0,4.2 z m 0,6.9 4.1,0 c 2.1,0 3.3,-0.8 3.3,-2.3 0,-1.4 -1.2,-2.2 -3.3,-2.2 l -4.1,0 0,4.5 z" /><path
id="path63"
d="m 829.1,239 c 3.3,0 5.3,1.5 5.3,3.9 0,1.8 -1.1,3.1 -2.8,3.5 2.1,0.4 3.4,1.9 3.4,4 0,2.7 -2.2,4.3 -5.7,4.3 l -7,0 0,-15.7 6.8,0 z m -4.2,6.5 4.1,0 c 1.7,0 2.7,-0.8 2.7,-2.1 0,-1.3 -1,-2.1 -2.7,-2.1 l -4.1,0 0,4.2 z m 0,6.9 4.1,0 c 2.1,0 3.3,-0.8 3.3,-2.3 0,-1.4 -1.2,-2.2 -3.3,-2.2 l -4.1,0 0,4.5 z" /><path
id="path65"
d="m 849.8,250 c -0.2,0 -0.5,0 -0.7,0 l -3.7,0 0,4.8 -2.7,0 0,-15.8 6.4,0 c 4,0 6.4,2 6.4,5.4 0,2.5 -1.2,4.3 -3.3,5.1 l 3.5,5.3 -3,0 -2.9,-4.8 z m -0.7,-2.4 c 2.4,0 3.8,-1 3.8,-3.2 0,-2.1 -1.4,-3.1 -3.8,-3.1 l -3.7,0 0,6.2 3.7,0 z" /><path
id="path67"
d="m 878.9,246.9 c 0,4.5 -3.7,8 -8.4,8 -4.7,0 -8.4,-3.5 -8.4,-8 0,-4.5 3.7,-8 8.4,-8 4.8,0 8.4,3.5 8.4,8 z m -14,0 c 0,3.1 2.6,5.6 5.7,5.6 3.1,0 5.6,-2.5 5.6,-5.6 0,-3.1 -2.5,-5.6 -5.6,-5.6 -3.1,0 -5.7,2.5 -5.7,5.6 z" /><path
id="path69"
d="m 899.5,254.8 -3.7,-12.3 -3.8,12.3 -2.7,0 -5.3,-15.8 2.9,0 3.8,12.8 3.8,-12.8 2.6,0 3.8,12.8 3.8,-12.8 2.7,0 -5.3,15.8 -2.6,0 z" /><path
id="path71"
d="m 924.6,240.5 -1.1,2.3 c -1.7,-1 -3.4,-1.5 -4.6,-1.5 -1.6,0 -2.6,0.6 -2.6,1.6 0,3.4 8.5,1.6 8.5,7.3 0,2.8 -2.5,4.6 -5.9,4.6 -2.5,0 -4.8,-1 -6.4,-2.5 l 1.1,-2.3 c 1.6,1.5 3.7,2.3 5.3,2.3 1.8,0 3,-0.7 3,-1.9 0,-3.5 -8.5,-1.6 -8.5,-7.2 0,-2.7 2.3,-4.4 5.7,-4.4 2,0.1 4,0.8 5.5,1.7 z" /><path
id="path73"
d="m 935.1,241.4 0,4.3 7.7,0 0,2.4 -7.7,0 0,4.3 8.9,0 0,2.4 -11.5,0 0,-15.8 11.3,0 0,2.4 -8.7,0 z" /><path
id="path75"
d="m 958.8,250 c -0.2,0 -0.5,0 -0.7,0 l -3.7,0 0,4.8 -2.7,0 0,-15.8 6.4,0 c 4,0 6.4,2 6.4,5.4 0,2.5 -1.2,4.3 -3.3,5.1 l 3.5,5.3 -3,0 -2.9,-4.8 z m -0.7,-2.4 c 2.4,0 3.8,-1 3.8,-3.2 0,-2.1 -1.4,-3.1 -3.8,-3.1 l -3.7,0 0,6.2 3.7,0 z" /></g><g
transform="translate(-356.5,-160.5)"
id="g77"><path
id="path79"
d="m 757.2,275.4 -1.1,1.4 c -1.2,-1.2 -2.9,-2 -4.7,-2 -3.6,0 -6.4,2.8 -6.4,6.2 0,3.4 2.9,6.2 6.4,6.2 1.7,0 3.4,-0.7 4.7,-1.9 l 1.1,1.2 c -1.6,1.5 -3.7,2.4 -5.9,2.4 -4.6,0 -8.2,-3.5 -8.2,-8 0,-4.4 3.7,-7.9 8.2,-7.9 2.3,0.1 4.4,1 5.9,2.4 z" /><path
id="path81"
d="m 761.5,289 0,-16.7 1.8,0 0,16.7 -1.8,0 z" /><path
id="path83"
d="m 770.8,273.7 c 0,0.7 -0.5,1.2 -1.1,1.2 -0.7,0 -1.1,-0.5 -1.1,-1.2 0,-0.7 0.5,-1.2 1.1,-1.2 0.6,0 1.1,0.5 1.1,1.2 z m -2,15.3 0,-11.9 1.7,0 0,11.9 -1.7,0 z" /><path
id="path85"
d="m 786.1,283.7 -9.7,0 c 0.3,2.3 2,3.8 4.3,3.8 1.5,0 2.8,-0.5 3.7,-1.5 l 1,1 c -1.1,1.3 -2.8,2 -4.8,2 -3.5,0 -5.9,-2.5 -5.9,-6 0,-3.5 2.4,-6 5.9,-6 3.8,0 5.7,2.7 5.5,6.7 z m -1.5,-1.4 c -0.1,-2.3 -1.6,-3.7 -4,-3.7 -2.3,0 -3.9,1.5 -4.1,3.7 l 8.1,0 z" /><path
id="path87"
d="m 801.1,281.6 0,7.3 -1.8,0 0,-6.9 c 0,-2.1 -1.3,-3.3 -3.4,-3.3 -2.3,0 -3.8,1.6 -4,3.8 l 0,6.4 -1.8,0 0,-11.9 1.8,0 0,2.6 c 0.8,-1.8 2.4,-2.7 4.6,-2.7 3,0.1 4.6,1.9 4.6,4.7 z" /><path
id="path89"
d="m 812.3,288.2 c -0.8,0.6 -1.7,0.9 -2.7,0.9 -1.7,0 -3,-1 -3,-3.4 l 0,-6.8 -1.7,0 0,-1.4 1.7,0 0,-3.1 1.7,0 0,3.1 3.8,0 0,1.4 -3.8,0 0,6.5 c 0,1.4 0.6,2 1.6,2 0.6,0 1.2,-0.2 1.9,-0.6 l 0.5,1.4 z" /><path
id="path91"
d="m 830.3,278.1 -0.7,1.4 c -0.9,-0.6 -2.1,-1 -3.2,-1 -1.3,0 -2.3,0.5 -2.3,1.6 0,2.6 6.6,1.3 6.6,5.5 0,2.3 -2.1,3.4 -4.4,3.4 -1.7,0 -3.4,-0.6 -4.6,-1.7 l 0.7,-1.3 c 1,0.9 2.5,1.5 3.9,1.5 1.4,0 2.5,-0.5 2.5,-1.7 0.1,-2.9 -6.6,-1.4 -6.6,-5.6 0,-2.3 2,-3.2 4.1,-3.2 1.7,0 3.1,0.4 4,1.1 z" /><path
id="path93"
d="m 836.8,273.7 c 0,0.7 -0.5,1.2 -1.1,1.2 -0.7,0 -1.1,-0.5 -1.1,-1.2 0,-0.7 0.5,-1.2 1.1,-1.2 0.6,0 1.1,0.5 1.1,1.2 z m -2.1,15.3 0,-11.9 1.7,0 0,11.9 -1.7,0 z" /><path
id="path95"
d="m 852.8,289 -1.8,0 0,-2.5 c -0.9,1.7 -2.5,2.6 -4.6,2.6 -3.4,0 -5.7,-2.5 -5.7,-6 0,-3.6 2.3,-6 5.7,-6 2.1,0 3.8,1 4.6,2.7 l 0,-7.4 1.8,0 0,16.6 z m -1.8,-5.9 c 0,-2.6 -1.8,-4.5 -4.3,-4.5 -2.5,0 -4.3,1.9 -4.3,4.5 0,2.6 1.8,4.4 4.3,4.4 2.6,0 4.3,-1.9 4.3,-4.4 z" /><path
id="path97"
d="m 868.6,283.7 -9.7,0 c 0.3,2.3 2,3.8 4.3,3.8 1.5,0 2.7,-0.5 3.7,-1.5 l 1,1 c -1.1,1.3 -2.8,2 -4.8,2 -3.5,0 -5.9,-2.5 -5.9,-6 0,-3.5 2.4,-6 5.9,-6 3.7,0 5.6,2.7 5.5,6.7 z m -1.6,-1.4 c -0.1,-2.3 -1.6,-3.7 -4,-3.7 -2.3,0 -3.9,1.5 -4.1,3.7 l 8.1,0 z" /><path
id="path99"
d="m 890.2,283.7 -9.7,0 c 0.3,2.3 2,3.8 4.3,3.8 1.5,0 2.8,-0.5 3.7,-1.5 l 1,1 c -1.1,1.3 -2.8,2 -4.8,2 -3.5,0 -5.9,-2.5 -5.9,-6 0,-3.5 2.4,-6 5.9,-6 3.8,0 5.7,2.7 5.5,6.7 z m -1.5,-1.4 c -0.1,-2.3 -1.6,-3.7 -4,-3.7 -2.3,0 -3.9,1.5 -4.1,3.7 l 8.1,0 z" /><path
id="path101"
d="m 905.2,281.6 0,7.3 -1.8,0 0,-6.9 c 0,-2.1 -1.3,-3.3 -3.4,-3.3 -2.3,0 -3.8,1.6 -4,3.8 l 0,6.4 -1.8,0 0,-11.9 1.8,0 0,2.6 c 0.8,-1.8 2.4,-2.7 4.6,-2.7 3,0.1 4.6,1.9 4.6,4.7 z" /><path
id="path103"
d="m 920.6,287.7 c 0,3.5 -2.4,5.7 -6,5.7 -1.9,0 -3.4,-0.6 -4.9,-1.7 l 0.8,-1.4 c 1.2,1 2.4,1.5 4,1.5 2.6,0 4.3,-1.6 4.3,-4.1 l 0,-1.7 c -0.8,1.6 -2.4,2.5 -4.4,2.5 -3.2,0 -5.4,-2.4 -5.4,-5.7 0,-3.3 2.2,-5.7 5.4,-5.7 2,0 3.6,0.9 4.4,2.5 l 0,-2.4 1.8,0 0,10.5 z m -1.7,-4.9 c 0,-2.5 -1.7,-4.2 -4.1,-4.2 -2.4,0 -4.1,1.8 -4.1,4.2 0,2.4 1.7,4.2 4.1,4.2 2.4,0 4.1,-1.8 4.1,-4.2 z" /><path
id="path105"
d="m 927.8,273.7 c 0,0.7 -0.5,1.2 -1.1,1.2 -0.7,0 -1.1,-0.5 -1.1,-1.2 0,-0.7 0.5,-1.2 1.1,-1.2 0.6,0 1.1,0.5 1.1,1.2 z m -2,15.3 0,-11.9 1.7,0 0,11.9 -1.7,0 z" /><path
id="path107"
d="m 943.8,281.6 0,7.3 -1.8,0 0,-6.9 c 0,-2.1 -1.3,-3.3 -3.4,-3.3 -2.3,0 -3.8,1.6 -4,3.8 l 0,6.4 -1.8,0 0,-11.9 1.8,0 0,2.6 c 0.8,-1.8 2.4,-2.7 4.6,-2.7 2.9,0.1 4.6,1.9 4.6,4.7 z" /><path
id="path109"
d="m 959,283.7 -9.7,0 c 0.3,2.3 2,3.8 4.3,3.8 1.5,0 2.8,-0.5 3.7,-1.5 l 1,1 c -1.1,1.3 -2.8,2 -4.8,2 -3.5,0 -5.9,-2.5 -5.9,-6 0,-3.5 2.4,-6 5.9,-6 3.8,0 5.7,2.7 5.5,6.7 z m -1.5,-1.4 c -0.1,-2.3 -1.6,-3.7 -4,-3.7 -2.3,0 -3.9,1.5 -4.1,3.7 l 8.1,0 z" /></g><g
transform="translate(-356.5,-160.5)"
id="g111"><path
id="path113"
d="m 1558.7,717.6 c 4.7,0 8.2,3.3 8.2,7.9 0,4.6 -3.4,7.9 -8.2,7.9 l -6.4,0 0,-15.8 6.4,0 z m -3.9,13.4 3.9,0 c 3.1,0 5.4,-2.3 5.4,-5.5 0,-3.2 -2.4,-5.5 -5.5,-5.5 l -3.8,0 0,11 z" /><path
id="path115"
d="m 1576.8,720 0,4.3 7.7,0 0,2.4 -7.7,0 0,4.3 8.9,0 0,2.4 -11.5,0 0,-15.8 11.3,0 0,2.4 -8.7,0 z" /><path
id="path117"
d="m 1596.1,720 0,4.6 7.2,0 0,2.4 -7.2,0 0,6.5 -2.7,0 0,-15.8 10.6,0 0,2.4 -7.9,0 z" /><path
id="path119"
d="m 1612.5,729.8 -1.5,3.6 -2.8,0 7,-15.8 2.7,0 6.9,15.8 -2.8,0 -1.5,-3.6 -8,0 z m 4,-9.4 -3,7 5.9,0 -2.9,-7 z" /><path
id="path121"
d="m 1644.4,726.8 c 0,4.1 -2.6,6.6 -6.9,6.6 -4.3,0 -6.9,-2.5 -6.9,-6.6 l 0,-9.2 2.7,0 0,9.2 c 0,2.7 1.6,4.3 4.2,4.3 2.6,0 4.2,-1.6 4.2,-4.3 l 0,-9.2 2.7,0 0,9.2 z" /><path
id="path123"
d="m 1662.2,730.9 0,2.4 -9.5,0 0,-15.8 2.7,0 0,13.4 6.8,0 z" /><path
id="path125"
d="m 1675,720 0,13.4 -2.7,0 0,-13.4 -5,0 0,-2.4 12.6,0 0,2.4 -4.9,0 z" /><path
id="path127"
d="m 1573.4,747 0,13.4 -2.7,0 0,-13.4 -5,0 0,-2.4 12.6,0 0,2.4 -4.9,0 z" /><path
id="path129"
d="m 1596.2,760.4 0,-6.5 -8.4,0 0,6.5 -2.7,0 0,-15.8 2.7,0 0,6.9 8.4,0 0,-6.9 2.7,0 0,15.8 -2.7,0 z" /><path
id="path131"
d="m 1610.1,747 0,4.3 7.7,0 0,2.4 -7.7,0 0,4.3 8.9,0 0,2.4 -11.5,0 0,-15.8 11.3,0 0,2.4 -8.7,0 z" /><path
id="path133"
d="m 1641,760.4 0,-11.8 -5,10.1 -1.7,0 -5,-10.1 0,11.8 -2.5,0 0,-15.8 3.2,0 5.2,10.5 5.2,-10.5 3.1,0 0,15.8 -2.5,0 z" /><path
id="path135"
d="m 1654.8,747 0,4.3 7.7,0 0,2.4 -7.7,0 0,4.3 8.9,0 0,2.4 -11.5,0 0,-15.8 11.3,0 0,2.4 -8.7,0 z" /></g><g
transform="translate(-356.5,-160.5)"
id="g137"><path
id="path139"
d="m 1518.8,940.8 -1.5,3.6 -2.8,0 7,-15.8 2.7,0 6.9,15.8 -2.8,0 -1.5,-3.6 -8,0 z m 3.9,-9.4 -3,7 5.9,0 -2.9,-7 z" /><path
id="path141"
d="m 1544,928.6 c 4,0 6.2,2 6.2,5.4 0,3.6 -2.3,5.6 -6.2,5.6 l -3.6,0 0,4.8 -2.7,0 0,-15.8 6.3,0 z m -3.7,8.6 3.5,0 c 2.4,0 3.8,-1 3.8,-3.2 0,-2.1 -1.4,-3.1 -3.8,-3.1 l -3.5,0 0,6.3 z" /><path
id="path143"
d="m 1563.6,928.6 c 4,0 6.2,2 6.2,5.4 0,3.6 -2.3,5.6 -6.2,5.6 l -3.6,0 0,4.8 -2.7,0 0,-15.8 6.3,0 z m -3.6,8.6 3.5,0 c 2.4,0 3.8,-1 3.8,-3.2 0,-2.1 -1.4,-3.1 -3.8,-3.1 l -3.5,0 0,6.3 z" /><path
id="path145"
d="m 1586.5,941.9 0,2.4 -9.5,0 0,-15.8 2.7,0 0,13.4 6.8,0 z" /><path
id="path147"
d="m 1593.6,944.4 0,-15.8 2.7,0 0,15.8 -2.7,0 z" /><path
id="path149"
d="m 1617.9,930.9 -1.6,1.9 c -1.1,-1.2 -2.8,-2 -4.4,-2 -3.2,0 -5.6,2.4 -5.6,5.5 0,3.1 2.5,5.6 5.6,5.6 1.6,0 3.2,-0.7 4.4,-1.9 l 1.6,1.8 c -1.6,1.6 -3.9,2.6 -6.1,2.6 -4.6,0 -8.2,-3.5 -8.2,-8 0,-4.5 3.6,-7.9 8.3,-7.9 2.2,0 4.4,0.9 6,2.4 z" /><path
id="path151"
d="m 1627.2,940.8 -1.5,3.6 -2.8,0 7,-15.8 2.7,0 6.9,15.8 -2.8,0 -1.5,-3.6 -8,0 z m 4,-9.4 -3,7 5.9,0 -2.9,-7 z" /><path
id="path153"
d="m 1650.3,931 0,13.4 -2.7,0 0,-13.4 -5,0 0,-2.4 12.6,0 0,2.4 -4.9,0 z" /><path
id="path155"
d="m 1662.1,944.4 0,-15.8 2.7,0 0,15.8 -2.7,0 z" /><path
id="path157"
d="m 1688.9,936.5 c 0,4.5 -3.7,8 -8.4,8 -4.7,0 -8.4,-3.5 -8.4,-8 0,-4.5 3.7,-8 8.4,-8 4.7,0 8.4,3.5 8.4,8 z m -14.1,0 c 0,3.1 2.6,5.6 5.7,5.6 3.1,0 5.6,-2.5 5.6,-5.6 0,-3.1 -2.5,-5.6 -5.6,-5.6 -3.1,0 -5.7,2.4 -5.7,5.6 z" /><path
id="path159"
d="m 1707.3,944.4 -8.4,-11.3 0,11.3 -2.7,0 0,-15.8 2.6,0 8.5,11.3 0,-11.3 2.6,0 0,15.8 -2.6,0 z" /><path
id="path161"
d="m 1571.4,958 0,13.4 -2.7,0 0,-13.4 -5,0 0,-2.4 12.6,0 0,2.4 -4.9,0 z" /><path
id="path163"
d="m 1594.2,971.4 0,-6.5 -8.4,0 0,6.5 -2.7,0 0,-15.8 2.7,0 0,6.9 8.4,0 0,-6.9 2.7,0 0,15.8 -2.7,0 z" /><path
id="path165"
d="m 1608.2,958 0,4.3 7.7,0 0,2.4 -7.7,0 0,4.3 8.9,0 0,2.4 -11.5,0 0,-15.8 11.3,0 0,2.4 -8.7,0 z" /><path
id="path167"
d="m 1639,971.4 0,-11.8 -5,10.1 -1.7,0 -5,-10.1 0,11.8 -2.5,0 0,-15.8 3.2,0 5.2,10.5 5.2,-10.5 3.1,0 0,15.8 -2.5,0 z" /><path
id="path169"
d="m 1652.8,958 0,4.3 7.7,0 0,2.4 -7.7,0 0,4.3 8.9,0 0,2.4 -11.5,0 0,-15.8 11.3,0 0,2.4 -8.7,0 z" /></g><path
style="fill:none;stroke:#231f20;stroke-miterlimit:10"
id="path171"
d="m 350.8,120 -64.7,0 c -2.2,0 -4,-1.8 -4,-4 l 0,-45.5 c 0,-2.2 1.8,-4 4,-4 l 64.7,0 c 2.2,0 4,1.8 4,4 l 0,45.5 c 0,2.2 -1.8,4 -4,4 z"
class="st6" /><line
style="fill:none;stroke:#000000;stroke-linejoin:round;stroke-miterlimit:10"
id="line173"
y2="130.89999"
x2="318.5"
y1="120"
x1="318.5"
class="st7" /><line
style="fill:none;stroke:#000000;stroke-linejoin:round;stroke-miterlimit:10"
id="line175"
y2="131"
x2="308.29999"
y1="131"
x1="328.70001"
class="st7" /><circle
id="circle177"
r="2.5999999"
cy="131"
cx="328.70001" /><circle
id="circle179"
r="2.5999999"
cy="131"
cx="308.29999" /><line
style="fill:none;stroke:#000000;stroke-miterlimit:10"
id="line181"
y2="79.800003"
x2="354.79999"
y1="79.800003"
x1="282.20001"
class="st8" /><circle
id="circle183"
r="2"
cy="73.399994"
cx="289.5" /><circle
id="circle185"
r="2"
cy="73.399994"
cx="297.40002" /><circle
id="circle187"
r="2"
cy="73.399994"
cx="304.70001" /><polygon
transform="translate(-356.5,-160.5)"
style="fill:none;stroke:#000000;stroke-miterlimit:10"
id="polygon189"
points="671.9,231.8 698.1,231.8 701.1,240.3 668.9,240.3 "
class="st8" /><rect
style="fill:none;stroke:#000000;stroke-miterlimit:10"
id="rect191"
height="8.5"
width="63.299999"
class="st8"
y="85.800003"
x="287.5" /><rect
style="fill:none;stroke:#000000;stroke-miterlimit:10"
id="rect193"
height="13.5"
width="27.700001"
class="st8"
y="100.29999"
x="287.5" /><line
style="fill:none;stroke:#000000;stroke-miterlimit:10"
id="line195"
y2="101.5"
x2="347"
y1="101.5"
x1="323"
class="st8" /><line
style="fill:none;stroke:#000000;stroke-miterlimit:10"
id="line197"
y2="105.70001"
x2="343"
y1="105.70001"
x1="323"
class="st8" /><rect
style="fill:none;stroke:#00b4f0;stroke-miterlimit:10"
id="rect199"
height="192"
width="1267.4"
class="st9"
y="5.5"
x="125.5" /><g
transform="translate(-356.5,-160.5)"
id="g201"><path
id="path203"
d="m 756.2,1572.1 c 3.3,0 5.3,1.5 5.3,3.9 0,1.8 -1.1,3.1 -2.8,3.5 2.1,0.4 3.4,1.9 3.4,4 0,2.7 -2.2,4.3 -5.7,4.3 l -7,0 0,-15.8 6.8,0 z m -4.1,6.6 4.1,0 c 1.7,0 2.7,-0.8 2.7,-2.1 0,-1.3 -1,-2.1 -2.7,-2.1 l -4.1,0 0,4.2 z m 0,6.8 4.1,0 c 2.1,0 3.3,-0.8 3.3,-2.3 0,-1.4 -1.2,-2.2 -3.3,-2.2 l -4.1,0 0,4.5 z" /><path
id="path205"
d="m 772,1584.3 -1.5,3.6 -2.8,0 7,-15.8 2.7,0 6.9,15.8 -2.8,0 -1.5,-3.6 -8,0 z m 4,-9.3 -3,7 5.9,0 -2.9,-7 z" /><path
id="path207"
d="m 803.5,1574.5 -1.6,1.9 c -1.1,-1.2 -2.8,-2 -4.4,-2 -3.2,0 -5.6,2.4 -5.6,5.5 0,3.1 2.5,5.6 5.6,5.6 1.6,0 3.2,-0.7 4.4,-1.9 l 1.6,1.8 c -1.6,1.6 -3.9,2.6 -6.1,2.6 -4.6,0 -8.2,-3.5 -8.2,-8 0,-4.5 3.6,-7.9 8.3,-7.9 2.3,0 4.5,0.9 6,2.4 z" /><path
id="path209"
d="m 816.1,1580.9 -2.7,3 0,4 -2.7,0 0,-15.8 2.7,0 0,8.2 7.5,-8.2 3.1,0 -6.1,6.7 6.5,9 -3.2,0 -5.1,-6.9 z" /><path
id="path211"
d="m 844.4,1574.5 0,4.3 7.7,0 0,2.4 -7.7,0 0,4.3 8.9,0 0,2.4 -11.5,0 0,-15.8 11.2,0 0,2.4 -8.6,0 z" /><path
id="path213"
d="m 872.1,1587.9 -8.4,-11.3 0,11.3 -2.7,0 0,-15.8 2.6,0 8.5,11.3 0,-11.3 2.6,0 0,15.8 -2.6,0 z" /><path
id="path215"
d="m 889.9,1572.1 c 4.7,0 8.2,3.3 8.2,7.9 0,4.6 -3.4,7.9 -8.2,7.9 l -6.4,0 0,-15.8 6.4,0 z m -3.8,13.4 3.9,0 c 3.1,0 5.4,-2.3 5.4,-5.5 0,-3.2 -2.4,-5.5 -5.5,-5.5 l -3.8,0 0,11 z" /></g><g
transform="translate(-356.5,-160.5)"
id="g217"><path
id="path219"
d="m 759.4,1607.8 -0.8,1.7 c -1.4,-0.9 -3.1,-1.3 -4.3,-1.3 -2,0 -3.4,0.8 -3.4,2.1 0,4.1 8.9,1.9 8.9,7.7 0,2.6 -2.3,4.3 -5.7,4.3 -2.3,0 -4.6,-1 -6,-2.4 l 0.8,-1.6 c 1.5,1.4 3.5,2.2 5.3,2.2 2.3,0 3.7,-0.9 3.7,-2.4 0,-4.1 -8.9,-1.9 -8.9,-7.6 0,-2.5 2.2,-4.1 5.5,-4.1 1.7,-0.1 3.6,0.5 4.9,1.4 z" /><path
id="path221"
d="m 774.6,1616.9 -9.7,0 c 0.3,2.3 2,3.8 4.3,3.8 1.5,0 2.8,-0.5 3.7,-1.5 l 1,1 c -1.1,1.3 -2.8,2 -4.8,2 -3.5,0 -5.9,-2.5 -5.9,-6 0,-3.5 2.4,-6 5.9,-6 3.8,0 5.7,2.7 5.5,6.7 z m -1.6,-1.4 c -0.1,-2.3 -1.6,-3.7 -4,-3.7 -2.3,0 -3.9,1.5 -4.1,3.7 l 8.1,0 z" /><path
id="path223"
d="m 780.5,1612.9 c 0.8,-1.7 2.3,-2.7 4.3,-2.7 l 0,1.8 c -2.5,0 -4.1,1.5 -4.3,3.9 l 0,6.3 -1.8,0 0,-11.9 1.8,0 0,2.6 z" /><path
id="path225"
d="m 791.5,1622.2 -4.7,-11.9 1.9,0 3.8,10.1 3.8,-10.1 1.8,0 -4.7,11.9 -1.9,0 z" /><path
id="path227"
d="m 811.1,1616.9 -9.7,0 c 0.3,2.3 2,3.8 4.3,3.8 1.5,0 2.7,-0.5 3.7,-1.5 l 1,1 c -1.1,1.3 -2.8,2 -4.8,2 -3.5,0 -5.9,-2.5 -5.9,-6 0,-3.5 2.4,-6 5.9,-6 3.8,0 5.7,2.7 5.5,6.7 z m -1.6,-1.4 c -0.1,-2.3 -1.6,-3.7 -4,-3.7 -2.3,0 -3.9,1.5 -4.1,3.7 l 8.1,0 z" /><path
id="path229"
d="m 817,1612.9 c 0.8,-1.7 2.3,-2.7 4.3,-2.7 l 0,1.8 c -2.5,0 -4.1,1.5 -4.3,3.9 l 0,6.3 -1.8,0 0,-11.9 1.8,0 0,2.6 z" /><path
id="path231"
d="m 839,1611.3 -0.7,1.4 c -0.9,-0.6 -2.1,-1 -3.2,-1 -1.3,0 -2.3,0.5 -2.3,1.6 0,2.6 6.6,1.3 6.6,5.5 0,2.3 -2.1,3.4 -4.4,3.4 -1.7,0 -3.4,-0.6 -4.6,-1.7 l 0.7,-1.3 c 1,0.9 2.5,1.5 3.9,1.5 1.4,0 2.5,-0.5 2.5,-1.7 0.1,-2.9 -6.6,-1.4 -6.6,-5.6 0,-2.3 2,-3.2 4.1,-3.2 1.6,0 3,0.4 4,1.1 z" /><path
id="path233"
d="m 845.4,1606.9 c 0,0.7 -0.5,1.2 -1.1,1.2 -0.7,0 -1.1,-0.5 -1.1,-1.2 0,-0.7 0.5,-1.2 1.1,-1.2 0.6,0 1.1,0.5 1.1,1.2 z m -2,15.3 0,-11.9 1.7,0 0,11.9 -1.7,0 z" /><path
id="path235"
d="m 861.4,1622.2 -1.8,0 0,-2.5 c -0.9,1.7 -2.5,2.6 -4.6,2.6 -3.4,0 -5.7,-2.5 -5.7,-6 0,-3.6 2.3,-6 5.7,-6 2.1,0 3.8,1 4.6,2.7 l 0,-7.4 1.8,0 0,16.6 z m -1.7,-5.9 c 0,-2.6 -1.8,-4.5 -4.3,-4.5 -2.5,0 -4.3,1.9 -4.3,4.5 0,2.6 1.8,4.4 4.3,4.4 2.5,0 4.3,-1.9 4.3,-4.4 z" /><path
id="path237"
d="m 877.2,1616.9 -9.7,0 c 0.3,2.3 2,3.8 4.3,3.8 1.5,0 2.7,-0.5 3.7,-1.5 l 1,1 c -1.1,1.3 -2.8,2 -4.8,2 -3.5,0 -5.9,-2.5 -5.9,-6 0,-3.5 2.4,-6 5.9,-6 3.8,0 5.7,2.7 5.5,6.7 z m -1.6,-1.4 c -0.1,-2.3 -1.6,-3.7 -4,-3.7 -2.3,0 -3.9,1.5 -4.1,3.7 l 8.1,0 z" /><path
id="path239"
d="m 888.7,1622.2 0,-16.7 1.8,0 0,16.7 -1.8,0 z" /><path
id="path241"
d="m 906.9,1616.2 c 0,3.6 -2.5,6 -6,6 -3.5,0 -6,-2.5 -6,-6 0,-3.5 2.5,-6 6,-6 3.5,0 6,2.5 6,6 z m -10.3,0 c 0,2.6 1.8,4.4 4.3,4.4 2.5,0 4.3,-1.8 4.3,-4.4 0,-2.6 -1.8,-4.4 -4.3,-4.4 -2.5,0 -4.3,1.9 -4.3,4.4 z" /><path
id="path243"
d="m 921.4,1620.9 c 0,3.5 -2.4,5.7 -6,5.7 -1.9,0 -3.4,-0.6 -4.9,-1.7 l 0.8,-1.4 c 1.2,1 2.4,1.5 4,1.5 2.6,0 4.3,-1.6 4.3,-4.1 l 0,-1.8 c -0.8,1.6 -2.4,2.5 -4.4,2.5 -3.2,0 -5.4,-2.4 -5.4,-5.7 0,-3.3 2.2,-5.7 5.4,-5.7 2,0 3.6,0.9 4.4,2.5 l 0,-2.4 1.8,0 0,10.6 z m -1.7,-4.9 c 0,-2.5 -1.7,-4.2 -4.1,-4.2 -2.4,0 -4.1,1.8 -4.1,4.2 0,2.4 1.7,4.2 4.1,4.2 2.4,0 4.1,-1.8 4.1,-4.2 z" /><path
id="path245"
d="m 928.5,1606.9 c 0,0.7 -0.5,1.2 -1.1,1.2 -0.7,0 -1.1,-0.5 -1.1,-1.2 0,-0.7 0.5,-1.2 1.1,-1.2 0.7,0 1.1,0.5 1.1,1.2 z m -2,15.3 0,-11.9 1.7,0 0,11.9 -1.7,0 z" /><path
id="path247"
d="m 943,1612 -1,1.2 c -0.9,-0.9 -2.1,-1.4 -3.5,-1.4 -2.5,0 -4.2,1.8 -4.2,4.4 0,2.6 1.8,4.4 4.2,4.4 1.6,0 2.8,-0.5 3.7,-1.5 l 1,1.1 c -1.1,1.3 -2.7,2.1 -4.8,2.1 -3.4,0 -5.9,-2.5 -5.9,-6 0,-3.5 2.5,-6 5.9,-6 1.9,-0.1 3.5,0.6 4.6,1.7 z" /></g><line
style="fill:none;stroke:#000000;stroke-miterlimit:10"
id="line249"
y2="496.40002"
x2="261.70001"
y1="197.5"
x1="261.70001"
class="st8" /><rect
style="fill:none;stroke:#000000;stroke-miterlimit:10"
id="rect251"
height="153"
width="272.29999"
class="st8"
y="496.40002"
x="1123.4" /><g
transform="translate(-356.5,-160.5)"
id="g253"><path
id="path255"
d="m 566.4,715.4 -6.3,-15.8 2.9,0 4.9,12.8 4.9,-12.8 2.8,0 -6.4,15.8 -2.8,0 z" /><path
id="path257"
d="m 583.3,711.8 -1.5,3.6 -2.8,0 7,-15.8 2.7,0 6.9,15.8 -2.8,0 -1.5,-3.6 -8,0 z m 4,-9.4 -3,7 5.9,0 -2.9,-7 z" /><path
id="path259"
d="m 604.4,711.8 -1.5,3.6 -2.8,0 7,-15.8 2.7,0 6.9,15.8 -2.8,0 -1.5,-3.6 -8,0 z m 4,-9.4 -3,7 5.9,0 -2.9,-7 z" /><path
id="path261"
d="m 629.8,699.6 c 4.7,0 8.2,3.3 8.2,7.9 0,4.6 -3.4,7.9 -8.2,7.9 l -6.4,0 0,-15.8 6.4,0 z m -3.8,13.4 3.9,0 c 3.1,0 5.4,-2.3 5.4,-5.5 0,-3.2 -2.4,-5.5 -5.5,-5.5 l -3.8,0 0,11 z" /><path
id="path263"
d="m 645.3,715.4 0,-15.8 2.7,0 0,15.8 -2.7,0 z" /><path
id="path265"
d="m 667.7,715.4 -8.4,-11.3 0,11.3 -2.7,0 0,-15.8 2.6,0 8.5,11.3 0,-11.3 2.6,0 0,15.8 -2.6,0 z" /><path
id="path267"
d="m 559.3,728.1 -1.1,2.3 c -1.7,-1 -3.4,-1.5 -4.6,-1.5 -1.6,0 -2.6,0.6 -2.6,1.6 0,3.4 8.5,1.6 8.5,7.3 0,2.8 -2.5,4.6 -5.9,4.6 -2.5,0 -4.8,-1 -6.4,-2.5 l 1.1,-2.3 c 1.6,1.5 3.7,2.3 5.3,2.3 1.8,0 3,-0.7 3,-1.9 0,-3.5 -8.5,-1.6 -8.5,-7.2 0,-2.7 2.3,-4.4 5.7,-4.4 2,0.1 4.1,0.8 5.5,1.7 z" /><path
id="path269"
d="m 569.8,729 0,4.3 7.7,0 0,2.4 -7.7,0 0,4.3 8.9,0 0,2.4 -11.5,0 0,-15.8 11.3,0 0,2.4 -8.7,0 z" /><path
id="path271"
d="m 593.6,737.6 c -0.2,0 -0.5,0 -0.7,0 l -3.7,0 0,4.8 -2.7,0 0,-15.8 6.4,0 c 4,0 6.4,2 6.4,5.4 0,2.5 -1.2,4.3 -3.3,5.1 l 3.5,5.3 -3,0 -2.9,-4.8 z m -0.8,-2.3 c 2.4,0 3.8,-1 3.8,-3.2 0,-2.1 -1.4,-3.1 -3.8,-3.1 l -3.7,0 0,6.2 3.7,0 z" /><path
id="path273"
d="m 611.3,742.4 -6.3,-15.8 2.9,0 4.9,12.8 4.9,-12.8 2.8,0 -6.4,15.8 -2.8,0 z" /><path
id="path275"
d="m 636.6,740 0,2.4 -9.5,0 0,-15.8 2.7,0 0,13.4 6.8,0 z" /><path
id="path277"
d="m 646.3,729 0,4.3 7.7,0 0,2.4 -7.7,0 0,4.3 8.9,0 0,2.4 -11.5,0 0,-15.8 11.3,0 0,2.4 -8.7,0 z" /><path
id="path279"
d="m 668.7,729 0,13.4 -2.7,0 0,-13.4 -5,0 0,-2.4 12.6,0 0,2.4 -4.9,0 z" /><path
id="path281"
d="m 678,745 7.1,-21 2.2,0 -7.1,21 -2.2,0 z" /><path
id="path283"
d="m 559.7,753.7 c 4,0 6.2,2 6.2,5.4 0,3.6 -2.3,5.6 -6.2,5.6 l -3.6,0 0,4.8 -2.7,0 0,-15.8 6.3,0 z m -3.6,8.6 3.5,0 c 2.4,0 3.8,-1 3.8,-3.2 0,-2.1 -1.4,-3.1 -3.8,-3.1 l -3.5,0 0,6.3 z" /><path
id="path285"
d="m 588.5,761.6 c 0,4.5 -3.7,8 -8.4,8 -4.7,0 -8.4,-3.5 -8.4,-8 0,-4.5 3.7,-8 8.4,-8 4.8,0 8.4,3.5 8.4,8 z m -14,0 c 0,3.1 2.6,5.6 5.7,5.6 3.1,0 5.6,-2.5 5.6,-5.6 0,-3.1 -2.5,-5.6 -5.6,-5.6 -3.1,0 -5.7,2.4 -5.7,5.6 z" /><path
id="path287"
d="m 603,764.7 c -0.2,0 -0.5,0 -0.7,0 l -3.7,0 0,4.8 -2.7,0 0,-15.8 6.4,0 c 4,0 6.4,2 6.4,5.4 0,2.5 -1.2,4.3 -3.3,5.1 l 3.5,5.3 -3,0 -2.9,-4.8 z m -0.7,-2.4 c 2.4,0 3.8,-1 3.8,-3.2 0,-2.1 -1.4,-3.1 -3.8,-3.1 l -3.7,0 0,6.2 3.7,0 z" /><path
id="path289"
d="m 622.5,756.1 0,13.4 -2.7,0 0,-13.4 -5,0 0,-2.4 12.6,0 0,2.4 -4.9,0 z" /><path
id="path291"
d="m 643.7,767 0,2.4 -9.5,0 0,-15.8 2.7,0 0,13.4 6.8,0 z" /><path
id="path293"
d="m 653.5,756.1 0,4.3 7.7,0 0,2.4 -7.7,0 0,4.3 8.9,0 0,2.4 -11.5,0 0,-15.8 11.3,0 0,2.4 -8.7,0 z" /><path
id="path295"
d="m 675.9,756.1 0,13.4 -2.7,0 0,-13.4 -5,0 0,-2.4 12.6,0 0,2.4 -4.9,0 z" /></g><rect
style="fill:none;stroke:#ff3a4b;stroke-miterlimit:10"
id="rect297"
height="153"
width="272.29999"
class="st0"
y="496.40002"
x="125.5" /><g
transform="translate(-356.5,-160.5)"
id="g299"><path
id="path301"
d="m 896.4,733.4 -6.3,-15.8 2.9,0 4.9,12.8 4.9,-12.8 2.8,0 -6.4,15.8 -2.8,0 z" /><path
id="path303"
d="m 913.3,729.8 -1.5,3.6 -2.8,0 7,-15.8 2.7,0 6.9,15.8 -2.8,0 -1.5,-3.6 -8,0 z m 3.9,-9.4 -3,7 5.9,0 -2.9,-7 z" /><path
id="path305"
d="m 934.4,729.8 -1.5,3.6 -2.8,0 7,-15.8 2.7,0 6.9,15.8 -2.8,0 -1.5,-3.6 -8,0 z m 4,-9.4 -3,7 5.9,0 -2.9,-7 z" /><path
id="path307"
d="m 959.8,717.6 c 4.7,0 8.2,3.3 8.2,7.9 0,4.6 -3.4,7.9 -8.2,7.9 l -6.4,0 0,-15.8 6.4,0 z m -3.8,13.4 3.9,0 c 3.1,0 5.4,-2.3 5.4,-5.5 0,-3.2 -2.4,-5.5 -5.5,-5.5 l -3.8,0 0,11 z" /><path
id="path309"
d="m 975.3,733.4 0,-15.8 2.7,0 0,15.8 -2.7,0 z" /><path
id="path311"
d="m 997.7,733.4 -8.4,-11.3 0,11.3 -2.7,0 0,-15.8 2.6,0 8.5,11.3 0,-11.3 2.6,0 0,15.8 -2.6,0 z" /><path
id="path313"
d="m 896.6,746.1 -1.1,2.3 c -1.7,-1 -3.4,-1.5 -4.6,-1.5 -1.6,0 -2.6,0.6 -2.6,1.6 0,3.4 8.5,1.6 8.5,7.3 0,2.8 -2.5,4.6 -5.9,4.6 -2.5,0 -4.8,-1 -6.4,-2.5 l 1.1,-2.3 c 1.6,1.5 3.7,2.3 5.3,2.3 1.8,0 3,-0.7 3,-1.9 0,-3.5 -8.5,-1.6 -8.5,-7.2 0,-2.7 2.3,-4.4 5.7,-4.4 2,0.1 4,0.8 5.5,1.7 z" /><path
id="path315"
d="m 907,747 0,4.3 7.7,0 0,2.4 -7.7,0 0,4.3 8.9,0 0,2.4 -11.5,0 0,-15.8 11.3,0 0,2.4 -8.7,0 z" /><path
id="path317"
d="m 930.8,755.6 c -0.2,0 -0.5,0 -0.7,0 l -3.7,0 0,4.8 -2.7,0 0,-15.8 6.4,0 c 4,0 6.4,2 6.4,5.4 0,2.5 -1.2,4.3 -3.3,5.1 l 3.5,5.3 -3,0 -2.9,-4.8 z m -0.7,-2.3 c 2.4,0 3.8,-1 3.8,-3.2 0,-2.1 -1.4,-3.1 -3.8,-3.1 l -3.7,0 0,6.2 3.7,0 z" /><path
id="path319"
d="m 948.6,760.4 -6.3,-15.8 2.9,0 4.9,12.8 4.9,-12.8 2.8,0 -6.4,15.8 -2.8,0 z" /><path
id="path321"
d="m 964.4,760.4 0,-15.8 2.7,0 0,15.8 -2.7,0 z" /><path
id="path323"
d="m 988.7,747 -1.6,1.9 c -1.1,-1.2 -2.8,-2 -4.4,-2 -3.2,0 -5.6,2.4 -5.6,5.5 0,3.1 2.5,5.6 5.6,5.6 1.6,0 3.2,-0.7 4.4,-1.9 l 1.6,1.8 c -1.6,1.6 -3.9,2.6 -6.1,2.6 -4.6,0 -8.2,-3.5 -8.2,-8 0,-4.5 3.6,-7.9 8.3,-7.9 2.2,0 4.4,0.9 6,2.4 z" /><path
id="path325"
d="m 998.6,747 0,4.3 7.7,0 0,2.4 -7.7,0 0,4.3 8.9,0 0,2.4 -11.5,0 0,-15.8 11.3,0 0,2.4 -8.7,0 z" /></g><rect
style="fill:none;stroke:#ff3a4b;stroke-miterlimit:10"
id="rect327"
height="153"
width="272.29999"
class="st0"
y="496.40002"
x="455.5" /><g
transform="translate(-356.5,-160.5)"
id="g329"><path
id="path331"
d="m 896.4,943.8 -6.3,-15.8 2.9,0 4.9,12.8 4.9,-12.8 2.8,0 -6.4,15.8 -2.8,0 z" /><path
id="path333"
d="m 913.3,940.2 -1.5,3.6 -2.8,0 7,-15.8 2.7,0 6.9,15.8 -2.8,0 -1.5,-3.6 -8,0 z m 3.9,-9.3 -3,7 5.9,0 -2.9,-7 z" /><path
id="path335"
d="m 934.4,940.2 -1.5,3.6 -2.8,0 7,-15.8 2.7,0 6.9,15.8 -2.8,0 -1.5,-3.6 -8,0 z m 4,-9.3 -3,7 5.9,0 -2.9,-7 z" /><path
id="path337"
d="m 959.8,928 c 4.7,0 8.2,3.3 8.2,7.9 0,4.6 -3.4,7.9 -8.2,7.9 l -6.4,0 0,-15.8 6.4,0 z m -3.8,13.4 3.9,0 c 3.1,0 5.4,-2.3 5.4,-5.5 0,-3.2 -2.4,-5.5 -5.5,-5.5 l -3.8,0 0,11 z" /><path
id="path339"
d="m 975.3,943.8 0,-15.8 2.7,0 0,15.8 -2.7,0 z" /><path
id="path341"
d="m 997.7,943.8 -8.4,-11.3 0,11.3 -2.7,0 0,-15.8 2.6,0 8.5,11.3 0,-11.3 2.6,0 0,15.8 -2.6,0 z" /><path
id="path343"
d="m 895.6,956.6 -1.1,2.3 c -1.7,-1 -3.4,-1.5 -4.6,-1.5 -1.6,0 -2.6,0.6 -2.6,1.6 0,3.4 8.5,1.6 8.5,7.3 0,2.8 -2.5,4.6 -5.9,4.6 -2.5,0 -4.8,-1 -6.4,-2.5 l 1.1,-2.3 c 1.6,1.5 3.7,2.3 5.3,2.3 1.8,0 3,-0.7 3,-1.9 0,-3.5 -8.5,-1.6 -8.5,-7.2 0,-2.7 2.3,-4.4 5.7,-4.4 2,0.1 4,0.7 5.5,1.7 z" /><path
id="path345"
d="m 906.1,957.5 0,4.3 7.7,0 0,2.4 -7.7,0 0,4.3 8.9,0 0,2.4 -11.5,0 0,-15.8 11.3,0 0,2.4 -8.7,0 z" /><path
id="path347"
d="m 933.4,956.6 -1.1,2.3 c -1.7,-1 -3.4,-1.5 -4.6,-1.5 -1.6,0 -2.6,0.6 -2.6,1.6 0,3.4 8.5,1.6 8.5,7.3 0,2.8 -2.5,4.6 -5.9,4.6 -2.5,0 -4.8,-1 -6.4,-2.5 l 1.1,-2.3 c 1.6,1.5 3.7,2.3 5.3,2.3 1.8,0 3,-0.7 3,-1.9 0,-3.5 -8.5,-1.6 -8.5,-7.2 0,-2.7 2.3,-4.4 5.7,-4.4 2,0.1 4,0.7 5.5,1.7 z" /><path
id="path349"
d="m 951.9,956.6 -1.1,2.3 c -1.7,-1 -3.4,-1.5 -4.6,-1.5 -1.6,0 -2.6,0.6 -2.6,1.6 0,3.4 8.5,1.6 8.5,7.3 0,2.8 -2.5,4.6 -5.9,4.6 -2.5,0 -4.8,-1 -6.4,-2.5 l 1.1,-2.3 c 1.6,1.5 3.7,2.3 5.3,2.3 1.8,0 3,-0.7 3,-1.9 0,-3.5 -8.5,-1.6 -8.5,-7.2 0,-2.7 2.3,-4.4 5.7,-4.4 2.1,0.1 4.1,0.7 5.5,1.7 z" /><path
id="path351"
d="m 959.7,970.8 0,-15.8 2.7,0 0,15.8 -2.7,0 z" /><path
id="path353"
d="m 986.5,963 c 0,4.5 -3.7,8 -8.4,8 -4.7,0 -8.4,-3.5 -8.4,-8 0,-4.5 3.7,-8 8.4,-8 4.7,0 8.4,3.4 8.4,8 z m -14,0 c 0,3.1 2.6,5.6 5.7,5.6 3.1,0 5.6,-2.5 5.6,-5.6 0,-3.1 -2.5,-5.6 -5.6,-5.6 -3.2,0 -5.7,2.4 -5.7,5.6 z" /><path
id="path355"
d="m 1004.9,970.8 -8.4,-11.3 0,11.3 -2.7,0 0,-15.8 2.6,0 8.5,11.3 0,-11.3 2.6,0 0,15.8 -2.6,0 z" /></g><rect
style="fill:none;stroke:#ff3a4b;stroke-miterlimit:10"
id="rect357"
height="153"
width="272.29999"
class="st0"
y="706.79999"
x="455.5" /><rect
style="fill:none;stroke:#000000;stroke-miterlimit:10"
id="rect359"
height="153"
width="272.29999"
class="st8"
y="707.40002"
x="1120.6" /><g
transform="translate(-356.5,-160.5)"
id="g361"><path
id="path363"
d="m 941.5,1148.5 c 0,4.1 -2.6,6.6 -6.9,6.6 -4.3,0 -6.9,-2.5 -6.9,-6.6 l 0,-9.2 2.7,0 0,9.2 c 0,2.7 1.6,4.3 4.2,4.3 2.6,0 4.2,-1.6 4.2,-4.3 l 0,-9.2 2.7,0 0,9.2 z" /><path
id="path365"
d="m 949.8,1155.1 0,-15.8 2.7,0 0,15.8 -2.7,0 z" /><path
id="path367"
d="m 852.3,1168.7 -1.6,1.9 c -1.1,-1.2 -2.8,-2 -4.4,-2 -3.2,0 -5.6,2.4 -5.6,5.5 0,3.1 2.5,5.6 5.6,5.6 1.6,0 3.2,-0.7 4.4,-1.9 l 1.6,1.8 c -1.6,1.6 -3.9,2.6 -6.1,2.6 -4.6,0 -8.2,-3.5 -8.2,-8 0,-4.5 3.6,-7.9 8.3,-7.9 2.2,0 4.5,0.9 6,2.4 z" /><path
id="path369"
d="m 874.6,1174.2 c 0,4.5 -3.7,8 -8.4,8 -4.7,0 -8.4,-3.5 -8.4,-8 0,-4.5 3.7,-8 8.4,-8 4.8,0.1 8.4,3.5 8.4,8 z m -14,0 c 0,3.1 2.6,5.6 5.7,5.6 3.1,0 5.6,-2.5 5.6,-5.6 0,-3.1 -2.5,-5.6 -5.6,-5.6 -3.1,0.1 -5.7,2.5 -5.7,5.6 z" /><path
id="path371"
d="m 896.2,1182.1 0,-11.8 -5,10.1 -1.7,0 -5,-10.1 0,11.8 -2.5,0 0,-15.8 3.2,0 5.2,10.5 5.2,-10.5 3.1,0 0,15.8 -2.5,0 z" /><path
id="path373"
d="m 913.6,1166.3 c 4,0 6.2,2 6.2,5.4 0,3.6 -2.3,5.6 -6.2,5.6 l -3.6,0 0,4.8 -2.7,0 0,-15.8 6.3,0 z m -3.6,8.7 3.5,0 c 2.4,0 3.8,-1 3.8,-3.2 0,-2.1 -1.4,-3.1 -3.8,-3.1 l -3.5,0 0,6.3 z" /><path
id="path375"
d="m 942.4,1174.2 c 0,4.5 -3.7,8 -8.4,8 -4.7,0 -8.4,-3.5 -8.4,-8 0,-4.5 3.7,-8 8.4,-8 4.8,0.1 8.4,3.5 8.4,8 z m -14,0 c 0,3.1 2.6,5.6 5.7,5.6 3.1,0 5.6,-2.5 5.6,-5.6 0,-3.1 -2.5,-5.6 -5.6,-5.6 -3.1,0.1 -5.7,2.5 -5.7,5.6 z" /><path
id="path377"
d="m 960.8,1182.1 -8.4,-11.3 0,11.3 -2.7,0 0,-15.8 2.6,0 8.5,11.3 0,-11.3 2.6,0 0,15.8 -2.6,0 z" /><path
id="path379"
d="m 974.8,1168.7 0,4.3 7.7,0 0,2.4 -7.7,0 0,4.3 8.9,0 0,2.4 -11.5,0 0,-15.8 11.3,0 0,2.4 -8.7,0 z" /><path
id="path381"
d="m 1002.5,1182.1 -8.4,-11.3 0,11.3 -2.7,0 0,-15.8 2.6,0 8.5,11.3 0,-11.3 2.6,0 0,15.8 -2.6,0 z" /><path
id="path383"
d="m 1019.5,1168.7 0,13.4 -2.7,0 0,-13.4 -5,0 0,-2.4 12.6,0 0,2.4 -4.9,0 z" /><path
id="path385"
d="m 1042,1167.9 -1.1,2.3 c -1.7,-1 -3.4,-1.5 -4.6,-1.5 -1.6,0 -2.6,0.6 -2.6,1.6 0,3.4 8.5,1.6 8.5,7.3 0,2.8 -2.5,4.6 -5.9,4.6 -2.5,0 -4.8,-1 -6.4,-2.5 l 1.1,-2.3 c 1.6,1.5 3.7,2.3 5.3,2.3 1.8,0 3,-0.7 3,-1.9 0,-3.5 -8.5,-1.6 -8.5,-7.2 0,-2.7 2.3,-4.4 5.7,-4.4 2.1,0 4.1,0.7 5.5,1.7 z" /></g><rect
style="fill:none;stroke:#ff3a4b;stroke-miterlimit:10"
id="rect387"
height="153"
width="272.29999"
class="st0"
y="918.09998"
x="451.5" /><g
transform="translate(-356.5,-160.5)"
id="g389"><path
id="path391"
d="m 591.8,1148.5 c 0,4.1 -2.6,6.6 -6.9,6.6 -4.3,0 -6.9,-2.5 -6.9,-6.6 l 0,-9.2 2.7,0 0,9.2 c 0,2.7 1.6,4.3 4.2,4.3 2.6,0 4.2,-1.6 4.2,-4.3 l 0,-9.2 2.7,0 0,9.2 z" /><path
id="path393"
d="m 610.8,1140.8 -1.1,2.3 c -1.7,-1 -3.4,-1.5 -4.6,-1.5 -1.6,0 -2.6,0.6 -2.6,1.6 0,3.4 8.5,1.6 8.5,7.3 0,2.8 -2.5,4.6 -5.9,4.6 -2.5,0 -4.8,-1 -6.4,-2.5 l 1.1,-2.3 c 1.6,1.5 3.7,2.3 5.3,2.3 1.8,0 3,-0.7 3,-1.9 0,-3.5 -8.5,-1.6 -8.5,-7.2 0,-2.7 2.3,-4.4 5.7,-4.4 2,0.1 4,0.7 5.5,1.7 z" /><path
id="path395"
d="m 621.3,1141.7 0,4.3 7.7,0 0,2.4 -7.7,0 0,4.3 8.9,0 0,2.4 -11.5,0 0,-15.8 11.3,0 0,2.4 -8.7,0 z" /><path
id="path397"
d="m 645,1150.3 c -0.2,0 -0.5,0 -0.7,0 l -3.7,0 0,4.8 -2.7,0 0,-15.8 6.4,0 c 4,0 6.4,2 6.4,5.4 0,2.5 -1.2,4.3 -3.3,5.1 l 3.5,5.3 -3,0 -2.9,-4.8 z m -0.7,-2.4 c 2.4,0 3.8,-1 3.8,-3.2 0,-2.1 -1.4,-3.1 -3.8,-3.1 l -3.7,0 0,6.2 3.7,0 z" /><path
id="path399"
d="m 534.3,1182.1 0,-15.8 2.7,0 0,15.8 -2.7,0 z" /><path
id="path401"
d="m 556.7,1182.1 -8.4,-11.3 0,11.3 -2.7,0 0,-15.8 2.6,0 8.5,11.3 0,-11.3 2.6,0 0,15.8 -2.6,0 z" /><path
id="path403"
d="m 573.8,1168.7 0,13.4 -2.7,0 0,-13.4 -5,0 0,-2.4 12.6,0 0,2.4 -4.9,0 z" /><path
id="path405"
d="m 588.2,1168.7 0,4.3 7.7,0 0,2.4 -7.7,0 0,4.3 8.9,0 0,2.4 -11.5,0 0,-15.8 11.3,0 0,2.4 -8.7,0 z" /><path
id="path407"
d="m 612,1177.3 c -0.2,0 -0.5,0 -0.7,0 l -3.7,0 0,4.8 -2.7,0 0,-15.8 6.4,0 c 4,0 6.4,2 6.4,5.4 0,2.5 -1.2,4.3 -3.3,5.1 l 3.5,5.3 -3,0 -2.9,-4.8 z m -0.7,-2.3 c 2.4,0 3.8,-1 3.8,-3.2 0,-2.1 -1.4,-3.1 -3.8,-3.1 l -3.7,0 0,6.2 3.7,0 z" /><path
id="path409"
d="m 628.3,1168.7 0,4.6 7.2,0 0,2.4 -7.2,0 0,6.5 -2.7,0 0,-15.8 10.6,0 0,2.4 -7.9,0 z" /><path
id="path411"
d="m 644.7,1178.6 -1.5,3.6 -2.8,0 7,-15.8 2.7,0 6.9,15.8 -2.8,0 -1.5,-3.6 -8,0 z m 4,-9.4 -3,7 5.9,0 -2.9,-7 z" /><path
id="path413"
d="m 676.2,1168.7 -1.6,1.9 c -1.1,-1.2 -2.8,-2 -4.4,-2 -3.2,0 -5.6,2.4 -5.6,5.5 0,3.1 2.5,5.6 5.6,5.6 1.6,0 3.2,-0.7 4.4,-1.9 l 1.6,1.8 c -1.6,1.6 -3.9,2.6 -6.1,2.6 -4.6,0 -8.2,-3.5 -8.2,-8 0,-4.5 3.6,-7.9 8.3,-7.9 2.3,0 4.5,0.9 6,2.4 z" /><path
id="path415"
d="m 686.1,1168.7 0,4.3 7.7,0 0,2.4 -7.7,0 0,4.3 8.9,0 0,2.4 -11.5,0 0,-15.8 11.3,0 0,2.4 -8.7,0 z" /></g><rect
style="fill:none;stroke:#ff3a4b;stroke-miterlimit:10"
id="rect417"
height="153"
width="272.29999"
class="st0"
y="918.09998"
x="125.5" /><g
transform="translate(-356.5,-160.5)"
id="g419"><path
id="path421"
d="m 558.2,953.2 -3.7,-12.3 -3.8,12.3 -2.7,0 -5.2,-15.8 2.9,0 3.8,12.8 3.8,-12.8 2.6,0 3.8,12.8 3.8,-12.8 2.7,0 -5.3,15.8 -2.7,0 z" /><path
id="path423"
d="m 575.2,939.8 0,4.3 7.7,0 0,2.4 -7.7,0 0,4.3 8.9,0 0,2.4 -11.5,0 0,-15.8 11.3,0 0,2.4 -8.7,0 z" /><path
id="path425"
d="m 598.7,937.4 c 3.3,0 5.3,1.5 5.3,3.9 0,1.8 -1.1,3.1 -2.8,3.5 2.1,0.4 3.4,1.9 3.4,4 0,2.7 -2.2,4.3 -5.7,4.3 l -7,0 0,-15.8 6.8,0 z m -4.2,6.6 4.1,0 c 1.7,0 2.7,-0.8 2.7,-2.1 0,-1.3 -1,-2.1 -2.7,-2.1 l -4.1,0 0,4.2 z m 0,6.9 4.1,0 c 2.1,0 3.3,-0.8 3.3,-2.3 0,-1.4 -1.2,-2.2 -3.3,-2.2 l -4.1,0 0,4.5 z" /><path
id="path427"
d="m 618.6,937.4 c 4,0 6.2,2 6.2,5.4 0,3.6 -2.3,5.6 -6.2,5.6 l -3.6,0 0,4.8 -2.7,0 0,-15.8 6.3,0 z m -3.7,8.7 3.5,0 c 2.4,0 3.8,-1 3.8,-3.2 0,-2.1 -1.4,-3.1 -3.8,-3.1 l -3.5,0 0,6.3 z" /><path
id="path429"
d="m 633.2,949.7 -1.5,3.6 -2.8,0 7,-15.8 2.7,0 6.9,15.8 -2.8,0 -1.5,-3.6 -8,0 z m 4,-9.4 -3,7 5.9,0 -2.9,-7 z" /><path
id="path431"
d="m 664.8,945.5 0,5.8 c -1.6,1.2 -4,2.1 -6.1,2.1 -4.7,0 -8.3,-3.5 -8.3,-8 0,-4.5 3.7,-8 8.5,-8 2.3,0 4.5,0.9 6.1,2.2 l -1.5,2 c -1.2,-1.1 -2.9,-1.8 -4.6,-1.8 -3.2,0 -5.7,2.5 -5.7,5.6 0,3.2 2.5,5.6 5.8,5.6 1.2,0 2.5,-0.4 3.6,-1.1 l 0,-4.4 2.2,0 z" /><path
id="path433"
d="m 675.7,939.8 0,4.3 7.7,0 0,2.4 -7.7,0 0,4.3 8.9,0 0,2.4 -11.5,0 0,-15.8 11.3,0 0,2.4 -8.7,0 z" /></g><rect
style="fill:none;stroke:#ff3a4b;stroke-miterlimit:10"
id="rect435"
height="153"
width="272.29999"
class="st0"
y="707.20001"
x="125.5" /><g
transform="translate(-356.5,-160.5)"
id="g437"><path
id="path439"
d="m 903.9,1346.9 0,4.3 7.7,0 0,2.4 -7.7,0 0,4.3 8.9,0 0,2.4 -11.5,0 0,-15.8 11.3,0 0,2.4 -8.7,0 z" /><path
id="path441"
d="m 924.8,1360.3 -6.3,-15.8 2.9,0 4.9,12.8 4.9,-12.8 2.8,0 -6.4,15.8 -2.8,0 z" /><path
id="path443"
d="m 943.3,1346.9 0,4.3 7.7,0 0,2.4 -7.7,0 0,4.3 8.9,0 0,2.4 -11.5,0 0,-15.8 11.3,0 0,2.4 -8.7,0 z" /><path
id="path445"
d="m 971,1360.3 -8.4,-11.3 0,11.3 -2.7,0 0,-15.8 2.6,0 8.5,11.3 0,-11.3 2.6,0 0,15.8 -2.6,0 z" /><path
id="path447"
d="m 988,1346.9 0,13.4 -2.7,0 0,-13.4 -5,0 0,-2.4 12.7,0 0,2.4 -5,0 z" /><path
id="path449"
d="m 887.2,1384.9 0,2.4 -9.5,0 0,-15.8 2.7,0 0,13.4 6.8,0 z" /><path
id="path451"
d="m 894.2,1387.3 0,-15.8 2.7,0 0,15.8 -2.7,0 z" /><path
id="path453"
d="m 916.2,1373 -1.1,2.3 c -1.7,-1 -3.4,-1.5 -4.6,-1.5 -1.6,0 -2.6,0.6 -2.6,1.6 0,3.4 8.5,1.6 8.5,7.3 0,2.8 -2.5,4.6 -6,4.6 -2.5,0 -4.8,-1 -6.4,-2.5 l 1.1,-2.3 c 1.6,1.5 3.7,2.3 5.3,2.3 1.8,0 3,-0.7 3,-1.9 0,-3.5 -8.5,-1.6 -8.5,-7.2 0,-2.7 2.3,-4.4 5.7,-4.4 2.2,0.1 4.2,0.8 5.6,1.7 z" /><path
id="path455"
d="m 929.8,1373.9 0,13.4 -2.7,0 0,-13.4 -5,0 0,-2.4 12.6,0 0,2.4 -4.9,0 z" /><path
id="path457"
d="m 944.3,1373.9 0,4.3 7.7,0 0,2.4 -7.7,0 0,4.3 8.9,0 0,2.4 -11.5,0 0,-15.8 11.3,0 0,2.4 -8.7,0 z" /><path
id="path459"
d="m 972,1387.3 -8.4,-11.3 0,11.3 -2.7,0 0,-15.8 2.6,0 8.5,11.3 0,-11.3 2.6,0 0,15.8 -2.6,0 z" /><path
id="path461"
d="m 985.9,1373.9 0,4.3 7.7,0 0,2.4 -7.7,0 0,4.3 8.9,0 0,2.4 -11.5,0 0,-15.8 11.3,0 0,2.4 -8.7,0 z" /><path
id="path463"
d="m 1009.7,1382.5 c -0.2,0 -0.5,0 -0.7,0 l -3.7,0 0,4.8 -2.7,0 0,-15.8 6.4,0 c 4,0 6.4,2 6.4,5.4 0,2.5 -1.2,4.3 -3.3,5.1 l 3.5,5.3 -3,0 -2.9,-4.8 z m -0.7,-2.3 c 2.4,0 3.8,-1 3.8,-3.2 0,-2.1 -1.4,-3.1 -3.8,-3.1 l -3.7,0 0,6.2 3.7,0 z" /></g><rect
style="fill:none;stroke:#ff3a4b;stroke-miterlimit:10"
id="rect465"
height="153"
width="272.29999"
class="st0"
y="1127.3"
x="125.5" /><g
transform="translate(-356.5,-160.5)"
id="g467"><path
id="path469"
d="m 523.7,1360.7 -1.5,3.6 -2.8,0 7,-15.8 2.7,0 6.9,15.8 -2.8,0 -1.5,-3.6 -8,0 z m 4,-9.4 -3,7 5.9,0 -2.9,-7 z" /><path
id="path471"
d="m 548.9,1348.5 c 4,0 6.2,2 6.2,5.4 0,3.6 -2.3,5.6 -6.2,5.6 l -3.6,0 0,4.8 -2.7,0 0,-15.8 6.3,0 z m -3.6,8.6 3.5,0 c 2.4,0 3.8,-1 3.8,-3.2 0,-2.1 -1.4,-3.1 -3.8,-3.1 l -3.5,0 0,6.3 z" /><path
id="path473"
d="m 568.6,1348.5 c 4,0 6.2,2 6.2,5.4 0,3.6 -2.3,5.6 -6.2,5.6 l -3.6,0 0,4.8 -2.7,0 0,-15.8 6.3,0 z m -3.7,8.6 3.5,0 c 2.4,0 3.8,-1 3.8,-3.2 0,-2.1 -1.4,-3.1 -3.8,-3.1 l -3.5,0 0,6.3 z" /><path
id="path475"
d="m 591.4,1361.8 0,2.4 -9.4,0 0,-15.8 2.7,0 0,13.4 6.7,0 z" /><path
id="path477"
d="m 598.5,1364.3 0,-15.8 2.7,0 0,15.8 -2.7,0 z" /><path
id="path479"
d="m 622.8,1350.8 -1.6,1.9 c -1.1,-1.2 -2.8,-2 -4.4,-2 -3.2,0 -5.6,2.4 -5.6,5.5 0,3.1 2.5,5.6 5.6,5.6 1.6,0 3.2,-0.7 4.4,-1.9 l 1.6,1.8 c -1.6,1.6 -3.9,2.6 -6.1,2.6 -4.6,0 -8.2,-3.5 -8.2,-8 0,-4.5 3.6,-7.9 8.3,-7.9 2.2,0 4.5,0.9 6,2.4 z" /><path
id="path481"
d="m 632.2,1360.7 -1.5,3.6 -2.8,0 7,-15.8 2.7,0 6.9,15.8 -2.8,0 -1.5,-3.6 -8,0 z m 3.9,-9.4 -3,7 5.9,0 -2.9,-7 z" /><path
id="path483"
d="m 655.3,1350.9 0,13.4 -2.7,0 0,-13.4 -5,0 0,-2.4 12.6,0 0,2.4 -4.9,0 z" /><path
id="path485"
d="m 667.1,1364.3 0,-15.8 2.7,0 0,15.8 -2.7,0 z" /><path
id="path487"
d="m 693.8,1356.4 c 0,4.5 -3.7,8 -8.4,8 -4.7,0 -8.4,-3.5 -8.4,-8 0,-4.5 3.7,-8 8.4,-8 4.7,0 8.4,3.5 8.4,8 z m -14,0 c 0,3.1 2.6,5.6 5.7,5.6 3.1,0 5.6,-2.5 5.6,-5.6 0,-3.1 -2.5,-5.6 -5.6,-5.6 -3.2,0 -5.7,2.4 -5.7,5.6 z" /><path
id="path489"
d="m 712.2,1364.3 -8.4,-11.3 0,11.3 -2.7,0 0,-15.8 2.6,0 8.5,11.3 0,-11.3 2.6,0 0,15.8 -2.6,0 z" /><path
id="path491"
d="m 619.4,1384.8 c 0,4.1 -2.6,6.6 -6.9,6.6 -4.3,0 -6.9,-2.5 -6.9,-6.6 l 0,-9.2 2.7,0 0,9.2 c 0,2.7 1.6,4.3 4.2,4.3 2.6,0 4.2,-1.6 4.2,-4.3 l 0,-9.2 2.7,0 0,9.2 z" /><path
id="path493"
d="m 627.7,1391.3 0,-15.8 2.7,0 0,15.8 -2.7,0 z" /></g><rect
style="fill:none;stroke:#ff3a4b;stroke-miterlimit:10"
id="rect495"
height="153"
width="272.29999"
class="st0"
y="1127.3"
x="455.5" /><g
transform="translate(-356.5,-160.5)"
id="g497"><path
id="path499"
d="m 1249.8,1348.5 c 4.7,0 8.2,3.3 8.2,7.9 0,4.6 -3.4,7.9 -8.2,7.9 l -6.4,0 0,-15.8 6.4,0 z m -3.8,13.4 3.9,0 c 3.1,0 5.4,-2.3 5.4,-5.5 0,-3.2 -2.4,-5.5 -5.5,-5.5 l -3.8,0 0,11 z" /><path
id="path501"
d="m 1267.2,1360.7 -1.5,3.6 -2.8,0 7,-15.8 2.7,0 6.9,15.8 -2.8,0 -1.5,-3.6 -8,0 z m 3.9,-9.4 -3,7 6,0 -3,-7 z" /><path
id="path503"
d="m 1290.3,1350.9 0,13.4 -2.7,0 0,-13.4 -5,0 0,-2.4 12.6,0 0,2.4 -4.9,0 z" /><path
id="path505"
d="m 1302.8,1360.7 -1.5,3.6 -2.8,0 7,-15.8 2.7,0 6.9,15.8 -2.8,0 -1.5,-3.6 -8,0 z m 3.9,-9.4 -3,7 5.9,0 -2.9,-7 z" /><path
id="path507"
d="m 1243.8,1391.3 0,-11.8 -5,10.1 -1.7,0 -5,-10.1 0,11.8 -2.5,0 0,-15.8 3.2,0 5.2,10.5 5.2,-10.5 3.1,0 0,15.8 -2.5,0 z" /><path
id="path509"
d="m 1270.3,1383.4 c 0,4.5 -3.7,8 -8.4,8 -4.7,0 -8.4,-3.5 -8.4,-8 0,-4.5 3.7,-8 8.4,-8 4.8,0.1 8.4,3.5 8.4,8 z m -14,0 c 0,3.1 2.6,5.6 5.7,5.6 3.1,0 5.6,-2.5 5.6,-5.6 0,-3.1 -2.5,-5.6 -5.6,-5.6 -3.1,0 -5.7,2.5 -5.7,5.6 z" /><path
id="path511"
d="m 1284.1,1375.5 c 4.7,0 8.2,3.3 8.2,7.9 0,4.6 -3.4,7.9 -8.2,7.9 l -6.4,0 0,-15.8 6.4,0 z m -3.8,13.4 3.9,0 c 3.1,0 5.4,-2.3 5.4,-5.5 0,-3.2 -2.4,-5.5 -5.5,-5.5 l -3.8,0 0,11 z" /><path
id="path513"
d="m 1302.3,1377.9 0,4.3 7.7,0 0,2.4 -7.7,0 0,4.3 8.9,0 0,2.4 -11.5,0 0,-15.8 11.3,0 0,2.4 -8.7,0 z" /><path
id="path515"
d="m 1328.4,1388.9 0,2.4 -9.5,0 0,-15.8 2.7,0 0,13.4 6.8,0 z" /></g><rect
style="fill:none;stroke:#ff3a4b;stroke-miterlimit:10"
id="rect517"
height="153"
width="272.29999"
class="st0"
y="1127.3"
x="789.5" /><g
transform="translate(-356.5,-160.5)"
id="g519"><path
style="fill:#ff3a4b"
id="path521"
d="m 770,505.4 -4.5,10 -2.3,0 16,-35.3 2.3,0 16.2,35.3 -2.3,0 -4.6,-10 -20.8,0 z m 10.3,-22.8 -9.3,20.7 18.8,0 -9.5,-20.7 z"
class="st10" /><path
style="fill:#ff3a4b"
id="path523"
d="m 826.6,480.1 c 8.7,0 13.6,4.2 13.6,11.6 0,7.6 -4.9,11.9 -13.6,11.9 l -10.3,0 0,11.8 -2.1,0 0,-35.3 12.4,0 z m -10.3,21.5 10.2,0 c 7.4,0 11.6,-3.5 11.6,-9.8 0,-6.2 -4.2,-9.6 -11.6,-9.6 l -10.2,0 0,19.4 z"
class="st10" /><path
style="fill:#ff3a4b"
id="path525"
d="m 870.2,480.1 c 8.7,0 13.6,4.2 13.6,11.6 0,7.6 -4.9,11.9 -13.6,11.9 l -10.3,0 0,11.8 -2.1,0 0,-35.3 12.4,0 z m -10.3,21.5 10.2,0 c 7.4,0 11.6,-3.5 11.6,-9.8 0,-6.2 -4.2,-9.6 -11.6,-9.6 l -10.2,0 0,19.4 z"
class="st10" /><path
style="fill:#ff3a4b"
id="path527"
d="m 919.2,513.4 0,2.1 -17.8,0 0,-35.3 2.1,0 0,33.2 15.7,0 z"
class="st10" /><path
style="fill:#ff3a4b"
id="path529"
d="m 936.8,515.4 0,-35.3 2.1,0 0,35.3 -2.1,0 z"
class="st10" /><path
style="fill:#ff3a4b"
id="path531"
d="m 988,484.8 -1.3,1.6 c -2.9,-2.7 -6.9,-4.3 -11.1,-4.3 -8.9,0 -16.2,7 -16.2,15.6 0,8.7 7.2,15.7 16.2,15.7 4.2,0 8.1,-1.6 11.1,-4.3 l 1.3,1.5 c -3.3,3 -7.8,4.9 -12.5,4.9 -10,0 -18.2,-7.9 -18.2,-17.7 0,-9.8 8.2,-17.7 18.2,-17.7 4.8,0 9.2,1.8 12.5,4.7 z"
class="st10" /><path
style="fill:#ff3a4b"
id="path533"
d="m 1007.8,505.4 -4.5,10 -2.3,0 16,-35.3 2.3,0 16.2,35.3 -2.3,0 -4.6,-10 -20.8,0 z m 10.3,-22.8 -9.3,20.7 18.8,0 -9.5,-20.7 z"
class="st10" /><path
style="fill:#ff3a4b"
id="path535"
d="m 1057.4,482.2 0,33.2 -2.1,0 0,-33.2 -11.9,0 0,-2.1 25.9,0 0,2.1 -11.9,0 z"
class="st10" /><path
style="fill:#ff3a4b"
id="path537"
d="m 1086.1,515.4 0,-35.3 2.1,0 0,35.3 -2.1,0 z"
class="st10" /><path
style="fill:#ff3a4b"
id="path539"
d="m 1143.2,497.8 c 0,9.8 -8.2,17.7 -18.3,17.7 -10.1,0 -18.3,-7.9 -18.3,-17.7 0,-9.8 8.2,-17.7 18.3,-17.7 10.2,0 18.3,7.9 18.3,17.7 z m -34.3,0 c 0,8.6 7.3,15.6 16.1,15.6 8.8,0 16.1,-7 16.1,-15.6 0,-8.6 -7.3,-15.6 -16.1,-15.6 -8.9,0 -16.1,6.9 -16.1,15.6 z"
class="st10" /><path
style="fill:#ff3a4b"
id="path541"
d="m 1187.4,515.4 -23.5,-32.1 0,32.1 -2.1,0 0,-35.3 2.5,0 23.6,32.1 0,-32.1 2.1,0 0,35.3 -2.6,0 z"
class="st10" /><path
style="fill:#ff3a4b"
id="path543"
d="m 1256.3,482.9 -1,1.9 c -2.6,-1.7 -6.2,-2.6 -9.2,-2.6 -5.6,0 -9.2,2.3 -9.2,6 0,10.8 20.7,5.2 20.6,18.2 0,5.5 -4.9,9 -12.3,9 -4.7,0 -9.5,-2.1 -12.6,-5.1 l 1.1,-1.9 c 2.9,3 7.4,4.8 11.5,4.8 6.1,0 9.9,-2.6 9.9,-6.8 0.1,-11.1 -20.6,-5.4 -20.6,-18.1 0,-5.1 4.6,-8.4 11.6,-8.4 3.7,0.1 7.6,1.3 10.2,3 z"
class="st10" /><path
style="fill:#ff3a4b"
id="path545"
d="m 1279.3,482.2 0,14.1 18.4,0 0,2.1 -18.4,0 0,14.9 21.3,0 0,2.1 -23.4,0 0,-35.3 22.8,0 0,2.1 -20.7,0 z"
class="st10" /><path
style="fill:#ff3a4b"
id="path547"
d="m 1335.4,503.5 c -1,0.2 -1.9,0.2 -3,0.2 l -10.4,0 0,11.8 -2.1,0 0,-35.3 12.5,0 c 8.7,0 13.7,4.2 13.7,11.6 0,6 -3.1,9.9 -8.7,11.4 l 8.8,12.3 -2.5,0 -8.3,-12 z m -3,-1.9 c 7.4,0 11.6,-3.5 11.6,-9.8 0,-6.2 -4.2,-9.6 -11.6,-9.6 l -10.4,0 0,19.4 10.4,0 z"
class="st10" /><path
style="fill:#ff3a4b"
id="path549"
d="m 1374.9,515.4 -14.6,-35.3 2.4,0 13.4,32.8 13.4,-32.8 2.3,0 -14.6,35.3 -2.3,0 z"
class="st10" /><path
style="fill:#ff3a4b"
id="path551"
d="m 1410.5,482.2 0,14.1 18.4,0 0,2.1 -18.4,0 0,14.9 21.3,0 0,2.1 -23.4,0 0,-35.3 22.8,0 0,2.1 -20.7,0 z"
class="st10" /><path
style="fill:#ff3a4b"
id="path553"
d="m 1466.6,503.5 c -1,0.2 -1.9,0.2 -3,0.2 l -10.3,0 0,11.8 -2.1,0 0,-35.3 12.5,0 c 8.7,0 13.7,4.2 13.7,11.6 0,6 -3.1,9.9 -8.7,11.4 l 8.8,12.3 -2.5,0 -8.4,-12 z m -3,-1.9 c 7.4,0 11.6,-3.5 11.6,-9.8 0,-6.2 -4.2,-9.6 -11.6,-9.6 l -10.4,0 0,19.4 10.4,0 z"
class="st10" /></g><g
transform="translate(-356.5,-160.5)"
id="g555"><path
id="path557"
d="m 919.8,565.1 c 0,4.4 -2.6,6.9 -6.8,6.9 -2.6,0 -4.8,-1.2 -6.4,-3.1 l 1.7,-2.8 c 1.4,1.6 3.1,2.4 4.6,2.4 2,0 3.1,-1.2 3.1,-3.5 l 0,-11.7 -7.5,0 0,-3.3 11.3,0 0,15.1 z" /><path
id="path559"
d="m 941.1,569.8 c -1.2,1.5 -3.1,2.2 -5.5,2.2 -3.6,0 -5.8,-2.2 -5.8,-5.1 0,-3 2.3,-5 6.3,-5 l 5,0 0,-0.5 c 0,-2.1 -1.3,-3.3 -4,-3.3 -1.6,0 -3.2,0.6 -4.9,1.7 l -1.5,-2.5 c 2.3,-1.4 4,-2.1 7.1,-2.1 4.3,0 6.7,2.2 6.7,5.8 l 0,10.9 -3.5,0 0,-2.1 z m -0.1,-3.8 0,-1.5 -4.5,0 c -2.3,0 -3.4,0.6 -3.4,2.2 0,1.5 1.2,2.5 3.2,2.5 2.6,-0.1 4.6,-1.4 4.7,-3.2 z" /><path
id="path561"
d="m 958.9,571.8 -6.4,-16.6 3.7,0 4.6,13.1 4.6,-13.1 3.6,0 -6.4,16.6 -3.7,0 z" /><path
id="path563"
d="m 987.2,569.8 c -1.2,1.5 -3.1,2.2 -5.5,2.2 -3.6,0 -5.8,-2.2 -5.8,-5.1 0,-3 2.3,-5 6.3,-5 l 5,0 0,-0.5 c 0,-2.1 -1.3,-3.3 -4,-3.3 -1.6,0 -3.2,0.6 -4.9,1.7 l -1.5,-2.5 c 2.3,-1.4 4,-2.1 7.1,-2.1 4.3,0 6.7,2.2 6.7,5.8 l 0,10.9 -3.5,0 0,-2.1 z m 0,-3.8 0,-1.5 -4.5,0 c -2.3,0 -3.4,0.6 -3.4,2.2 0,1.5 1.2,2.5 3.2,2.5 2.5,-0.1 4.5,-1.4 4.7,-3.2 z" /><path
id="path565"
d="m 1035,571.8 -5.2,-17 -5.2,17 -3.8,0 -7.2,-21.8 4,0 5.3,17.7 5.3,-17.7 3.6,0 5.3,17.7 5.3,-17.7 3.8,0 -7.3,21.8 -3.9,0 z" /><path
id="path567"
d="m 1067.5,564.9 -12.5,0 c 0.6,2.6 2.5,4.1 5.1,4.1 1.8,0 3.5,-0.7 4.7,-1.9 l 1.9,2 c -1.6,1.8 -4,2.8 -6.9,2.8 -5.1,0 -8.5,-3.4 -8.5,-8.4 0,-5 3.5,-8.4 8.4,-8.4 5.9,0 8.2,3.8 7.8,9.8 z m -3.1,-2.6 c -0.1,-2.7 -1.9,-4.3 -4.6,-4.3 -2.6,0 -4.5,1.7 -4.9,4.3 l 9.5,0 z" /><path
id="path569"
d="m 1094.9,563.6 c 0,5 -3.1,8.4 -7.9,8.4 -2.6,0 -4.6,-1.1 -5.9,-3 l 0,2.9 -3.6,0 0,-23.1 3.6,0 0,9.4 c 1.2,-1.9 3.2,-3 5.8,-3 4.8,-0.1 8,3.3 8,8.4 z m -3.6,-0.1 c 0,-3.1 -2.1,-5.4 -5.1,-5.4 -3,0 -5,2.2 -5,5.4 0,3.2 2.1,5.4 5,5.4 3,0 5.1,-2.3 5.1,-5.4 z" /><path
id="path571"
d="m 1122.5,566.9 -2.1,4.9 -3.8,0 9.6,-21.8 3.8,0 9.5,21.8 -3.9,0 -2.1,-4.9 -11,0 z m 5.5,-13 -4.1,9.7 8.2,0 -4.1,-9.7 z" /><path
id="path573"
d="m 1165.9,563.6 c 0,5 -3.1,8.4 -7.9,8.4 -2.6,0 -4.6,-1.1 -5.9,-3 l 0,8.9 -3.6,0 0,-22.6 3.6,0 0,2.9 c 1.2,-1.9 3.2,-3 5.8,-3 4.8,-0.1 8,3.3 8,8.4 z m -3.6,-0.1 c 0,-3.1 -2.1,-5.4 -5.1,-5.4 -3,0 -5,2.2 -5,5.4 0,3.2 2.1,5.4 5,5.4 3,0 5.1,-2.3 5.1,-5.4 z" /><path
id="path575"
d="m 1193.3,563.6 c 0,5 -3.1,8.4 -7.9,8.4 -2.6,0 -4.6,-1.1 -5.9,-3 l 0,8.9 -3.6,0 0,-22.6 3.6,0 0,2.9 c 1.2,-1.9 3.2,-3 5.8,-3 4.8,-0.1 8,3.3 8,8.4 z m -3.6,-0.1 c 0,-3.1 -2.1,-5.4 -5.1,-5.4 -3,0 -5,2.2 -5,5.4 0,3.2 2.1,5.4 5,5.4 3,0 5.1,-2.3 5.1,-5.4 z" /><path
id="path577"
d="m 1203.5,571.8 0,-23.1 3.6,0 0,23.1 -3.6,0 z" /><path
id="path579"
d="m 1222.6,550.5 c 0,1.2 -0.9,2.2 -2.1,2.2 -1.2,0 -2.1,-0.9 -2.1,-2.2 0,-1.3 0.9,-2.2 2.1,-2.2 1.2,0 2.1,0.9 2.1,2.2 z m -3.8,21.3 0,-16.6 3.6,0 0,16.6 -3.6,0 z" /><path
id="path581"
d="m 1247.5,557.8 -2,2.3 c -1.2,-1.2 -2.7,-1.9 -4.7,-1.9 -2.9,0 -4.9,2.2 -4.9,5.3 0,3.1 2.1,5.3 4.9,5.3 2.1,0 3.8,-0.7 4.9,-2 l 2,2 c -1.5,2 -3.9,3.1 -7,3.1 -4.9,0 -8.4,-3.4 -8.4,-8.4 0,-5 3.4,-8.4 8.4,-8.4 2.9,0 5.3,1 6.8,2.7 z" /><path
id="path583"
d="m 1266.9,569.8 c -1.2,1.5 -3.1,2.2 -5.5,2.2 -3.6,0 -5.8,-2.2 -5.8,-5.1 0,-3 2.3,-5 6.3,-5 l 5,0 0,-0.5 c 0,-2.1 -1.3,-3.3 -4,-3.3 -1.6,0 -3.2,0.6 -4.9,1.7 l -1.5,-2.5 c 2.3,-1.4 4,-2.1 7.1,-2.1 4.3,0 6.7,2.2 6.7,5.8 l 0,10.9 -3.5,0 0,-2.1 z m 0,-3.8 0,-1.5 -4.5,0 c -2.3,0 -3.4,0.6 -3.4,2.2 0,1.5 1.2,2.5 3.2,2.5 2.5,-0.1 4.5,-1.4 4.7,-3.2 z" /><path
id="path585"
d="m 1290.9,570.8 c -1.3,0.8 -2.7,1.2 -4.1,1.2 -2.5,0 -4.6,-1.4 -4.6,-4.8 l 0,-8.6 -2.3,0 0,-2.7 2.3,0 0,-4.6 3.6,0 0,4.6 4.9,0 0,2.7 -4.9,0 0,7.9 c 0,1.7 0.7,2.2 1.8,2.2 0.7,0 1.5,-0.2 2.5,-0.7 l 0.8,2.8 z" /><path
id="path587"
d="m 1304.3,550.5 c 0,1.2 -0.9,2.2 -2.1,2.2 -1.2,0 -2.1,-0.9 -2.1,-2.2 0,-1.3 0.9,-2.2 2.1,-2.2 1.2,0 2.1,0.9 2.1,2.2 z m -3.9,21.3 0,-16.6 3.6,0 0,16.6 -3.6,0 z" /><path
id="path589"
d="m 1331.3,563.5 c 0,5 -3.5,8.4 -8.6,8.4 -5.1,0 -8.7,-3.4 -8.7,-8.4 0,-5 3.5,-8.4 8.7,-8.4 5,0 8.6,3.4 8.6,8.4 z m -13.8,0.1 c 0,3.2 2.1,5.4 5.1,5.4 3,0 5,-2.2 5,-5.4 0,-3.2 -2.1,-5.4 -5,-5.4 -3,0 -5.1,2.2 -5.1,5.4 z" /><path
id="path591"
d="m 1357.1,561.5 0,10.3 -3.6,0 0,-9.3 c 0,-2.5 -1.5,-4 -4,-4 -2.7,0 -4.5,1.9 -4.7,4.5 l 0,8.8 -3.6,0 0,-16.6 3.6,0 0,3.2 c 1.2,-2.3 3.3,-3.3 6.1,-3.3 3.9,0 6.2,2.4 6.2,6.4 z" /></g><g
transform="translate(-356.5,-160.5)"
id="g605"><path
id="rect607"
d="m 647.59998,1563.2 57.09999,0 0,12.3 -57.09999,0 z"
style="fill:#ffffff" /><path
style="fill:#33393b"
id="path609"
d="m 705.1,1576 -58,0 0,-13.2 58,0 0,13.2 z m -57.1,-1 56.2,0 0,-11.4 -56.2,0 0,11.4 z"
class="st14" /></g><g
transform="translate(-356.5,-160.5)"
id="g611"><path
id="rect613"
d="m 647.59998,1580.3 57.09999,0 0,12.3 -57.09999,0 z"
style="fill:#ffffff" /><path
style="fill:#33393b"
id="path615"
d="m 705.1,1593.1 -58,0 0,-13.2 58,0 0,13.2 z m -57.1,-1 56.2,0 0,-11.4 -56.2,0 0,11.4 z"
class="st14" /></g><g
transform="translate(-356.5,-160.5)"
id="g617"><path
id="rect619"
d="m 647.59998,1597.4 57.09999,0 0,12.3 -57.09999,0 z"
style="fill:#ffffff" /><path
style="fill:#33393b"
id="path621"
d="m 705.1,1610.1 -58,0 0,-13.2 58,0 0,13.2 z m -57.1,-0.9 56.2,0 0,-11.4 -56.2,0 0,11.4 z"
class="st14" /></g><g
transform="translate(-356.5,-160.5)"
id="g623"><path
id="rect625"
d="m 675.70001,1615.5 0.9,0 0,9.1 -0.9,0 z"
style="fill:#33393b" /></g><g
transform="translate(-356.5,-160.5)"
id="g627"><path
id="rect629"
d="m 649.20001,1624.2 55.5,0 0,0.9 -55.5,0 z"
style="fill:#33393b" /></g><g
transform="translate(-356.5,-160.5)"
id="g631"><path
id="circle633"
d="m 677.99998,1624.6 a 1.9,1.9 0 0 1 -1.9,1.9 1.9,1.9 0 0 1 -1.9,-1.9 1.9,1.9 0 0 1 1.9,-1.9 1.9,1.9 0 0 1 1.9,1.9 z"
style="fill:#33393b" /></g><g
transform="translate(-356.5,-160.5)"
id="g635"><path
id="circle637"
d="m 655.3,1569.4 a 1.8,1.8 0 0 1 -1.8,1.8 1.8,1.8 0 0 1 -1.8,-1.8 1.8,1.8 0 0 1 1.8,-1.8 1.8,1.8 0 0 1 1.8,1.8 z"
style="fill:#33393b" /></g><g
transform="translate(-356.5,-160.5)"
id="g639"><path
id="circle641"
d="m 661.39998,1569.4 a 1.8,1.8 0 0 1 -1.8,1.8 1.8,1.8 0 0 1 -1.8,-1.8 1.8,1.8 0 0 1 1.8,-1.8 1.8,1.8 0 0 1 1.8,1.8 z"
style="fill:#33393b" /></g><g
transform="translate(-356.5,-160.5)"
id="g643"><path
id="circle645"
d="m 667.39998,1569.4 a 1.8,1.8 0 0 1 -1.8,1.8 1.8,1.8 0 0 1 -1.8,-1.8 1.8,1.8 0 0 1 1.8,-1.8 1.8,1.8 0 0 1 1.8,1.8 z"
style="fill:#33393b" /></g><g
transform="translate(-356.5,-160.5)"
id="g647"><path
id="circle649"
d="m 700.50001,1569.4 a 1.8,1.8 0 0 1 -1.8,1.8 1.8,1.8 0 0 1 -1.8,-1.8 1.8,1.8 0 0 1 1.8,-1.8 1.8,1.8 0 0 1 1.8,1.8 z"
style="fill:#ff3b4a" /></g><g
transform="translate(-356.5,-160.5)"
id="g651"><path
id="circle653"
d="m 655.3,1586.4 a 1.8,1.8 0 0 1 -1.8,1.8 1.8,1.8 0 0 1 -1.8,-1.8 1.8,1.8 0 0 1 1.8,-1.8 1.8,1.8 0 0 1 1.8,1.8 z"
style="fill:#33393b" /></g><g
transform="translate(-356.5,-160.5)"
id="g655"><path
id="circle657"
d="m 661.39998,1586.4 a 1.8,1.8 0 0 1 -1.8,1.8 1.8,1.8 0 0 1 -1.8,-1.8 1.8,1.8 0 0 1 1.8,-1.8 1.8,1.8 0 0 1 1.8,1.8 z"
style="fill:#33393b" /></g><g
transform="translate(-356.5,-160.5)"
id="g659"><path
id="circle661"
d="m 667.39998,1586.4 a 1.8,1.8 0 0 1 -1.8,1.8 1.8,1.8 0 0 1 -1.8,-1.8 1.8,1.8 0 0 1 1.8,-1.8 1.8,1.8 0 0 1 1.8,1.8 z"
style="fill:#33393b" /></g><g
transform="translate(-356.5,-160.5)"
id="g663"><path
id="circle665"
d="m 700.50001,1586.4 a 1.8,1.8 0 0 1 -1.8,1.8 1.8,1.8 0 0 1 -1.8,-1.8 1.8,1.8 0 0 1 1.8,-1.8 1.8,1.8 0 0 1 1.8,1.8 z"
style="fill:#ff3b4a" /></g><g
transform="translate(-356.5,-160.5)"
id="g667"><path
id="circle669"
d="m 655.3,1603.6 a 1.8,1.8 0 0 1 -1.8,1.8 1.8,1.8 0 0 1 -1.8,-1.8 1.8,1.8 0 0 1 1.8,-1.8 1.8,1.8 0 0 1 1.8,1.8 z"
style="fill:#33393b" /></g><g
transform="translate(-356.5,-160.5)"
id="g671"><path
id="circle673"
d="m 651.00001,1624.6 a 1.8,1.8 0 0 1 -1.8,1.8 1.8,1.8 0 0 1 -1.8,-1.8 1.8,1.8 0 0 1 1.8,-1.8 1.8,1.8 0 0 1 1.8,1.8 z"
style="fill:#33393b" /></g><g
transform="translate(-356.5,-160.5)"
id="g675"><path
id="circle677"
d="m 706.50001,1624.6 a 1.8,1.8 0 0 1 -1.8,1.8 1.8,1.8 0 0 1 -1.8,-1.8 1.8,1.8 0 0 1 1.8,-1.8 1.8,1.8 0 0 1 1.8,1.8 z"
style="fill:#33393b" /></g><g
transform="translate(-356.5,-160.5)"
id="g679"><path
id="circle681"
d="m 677.89998,1615.5 a 1.8,1.8 0 0 1 -1.8,1.8 1.8,1.8 0 0 1 -1.8,-1.8 1.8,1.8 0 0 1 1.8,-1.8 1.8,1.8 0 0 1 1.8,1.8 z"
style="fill:#33393b" /></g><g
transform="translate(-356.5,-160.5)"
id="g683"><path
id="circle685"
d="m 661.39998,1603.6 a 1.8,1.8 0 0 1 -1.8,1.8 1.8,1.8 0 0 1 -1.8,-1.8 1.8,1.8 0 0 1 1.8,-1.8 1.8,1.8 0 0 1 1.8,1.8 z"
style="fill:#33393b" /></g><g
transform="translate(-356.5,-160.5)"
id="g687"><path
id="circle689"
d="m 667.39998,1603.6 a 1.8,1.8 0 0 1 -1.8,1.8 1.8,1.8 0 0 1 -1.8,-1.8 1.8,1.8 0 0 1 1.8,-1.8 1.8,1.8 0 0 1 1.8,1.8 z"
style="fill:#33393b" /></g><g
transform="translate(-356.5,-160.5)"
id="g691"><path
id="circle693"
d="m 700.50001,1603.6 a 1.8,1.8 0 0 1 -1.8,1.8 1.8,1.8 0 0 1 -1.8,-1.8 1.8,1.8 0 0 1 1.8,-1.8 1.8,1.8 0 0 1 1.8,1.8 z"
style="fill:#ff3b4a" /></g><line
style="fill:none;stroke:#00b4f0;stroke-miterlimit:10"
id="line695"
y2="496.40002"
x2="1258.2"
y1="197.60001"
x1="1258.2"
class="st9" /><line
style="fill:none;stroke:#ff3a4b;stroke-miterlimit:10"
id="line927"
y2="572.90002"
x2="455.5"
y1="572.90002"
x1="397.79999"
class="st0" /><line
style="fill:none;stroke:#ff3a4b;stroke-miterlimit:10"
id="line929"
y2="706.79999"
x2="589.70001"
y1="649.20001"
x1="589.70001"
class="st0" /><line
style="fill:none;stroke:#ff3a4b;stroke-miterlimit:10"
id="line931"
y2="917.5"
x2="589.70001"
y1="859.79999"
x1="589.70001"
class="st0" /><polygon
transform="translate(-356.5,-160.5)"
style="fill:#33393b"
id="polygon933"
points="637,634.3 618.2,659.2 599.3,634.3 "
class="st14" /><polygon
transform="translate(-356.5,-160.5)"
style="fill:#33393b"
id="polygon935"
points="602.8,1247.3 614.2,1232.3 625.6,1247.3 "
class="st14" /><line
style="fill:none;stroke:#33393b;stroke-miterlimit:10"
id="line937"
y2="1086.8"
x2="257.70001"
y1="1126.5"
x1="257.70001"
class="st17" /><polygon
transform="translate(-356.5,-160.5)"
style="fill:#33393b"
id="polygon939"
points="625.6,1482.6 614.2,1497.6 602.8,1482.6 "
class="st14" /><line
style="fill:none;stroke:#33393b;stroke-miterlimit:10"
id="line941"
y2="1322.1"
x2="257.70001"
y1="1282.4"
x1="257.70001"
class="st17" /><polygon
transform="translate(-356.5,-160.5)"
style="fill:#33393b"
id="polygon943"
points="955.6,1484.1 944.2,1499.1 932.8,1484.1 "
class="st14" /><line
style="fill:none;stroke:#33393b;stroke-miterlimit:10"
id="line945"
y2="1323.6"
x2="587.70001"
y1="1283.9"
x1="587.70001"
class="st17" /><polygon
transform="translate(-356.5,-160.5)"
style="fill:#33393b"
id="polygon947"
points="932.8,1247.3 944.2,1232.3 955.6,1247.3 "
class="st14" /><polygon
transform="translate(-356.5,-160.5)"
style="fill:#33393b"
id="polygon949"
points="955.6,1272 944.2,1287 932.8,1272 "
class="st14" /><line
style="fill:none;stroke:#33393b;stroke-miterlimit:10"
id="line951"
y2="1086.8"
x2="587.70001"
y1="1126.5"
x1="587.70001"
class="st17" /><g
transform="translate(-356.5,-160.5)"
id="g953"><path
id="path955"
d="m 776.4,714.9 5.5,0 0,-13.9 -4.2,0 0,-2 c 2.2,-0.3 3.7,-0.8 5.1,-1.6 l 2.3,0 0,17.4 5.1,0 0,2.5 -13.6,0 0,-2.4 z" /></g><g
transform="translate(-356.5,-160.5)"
id="g957"><path
id="path959"
d="m 641.7,1059.4 5.5,0 0,-13.9 -4.2,0 0,-1.9 c 2.2,-0.3 3.7,-0.8 5.1,-1.6 l 2.3,0 0,17.4 5.1,0 0,2.5 -13.6,0 0,-2.5 z" /></g><g
transform="translate(-356.5,-160.5)"
id="g961"><path
id="path963"
d="m 639.7,833.6 2.5,0 0.3,2.5 0.1,0 c 1.5,-1.6 3.3,-2.9 5.6,-2.9 3.6,0 5.2,2.2 5.2,6.2 l 0,9.5 -3.1,0 0,-9.1 c 0,-2.7 -0.9,-3.9 -3.2,-3.9 -1.6,0 -2.8,0.8 -4.4,2.4 l 0,10.6 -3.1,0 0,-15.3 z" /></g><line
style="fill:none;stroke:#ff3a4b;stroke-miterlimit:10"
id="line965"
y2="706.79999"
x2="261.70001"
y1="649.40002"
x1="261.70001"
class="st0" /><line
style="fill:none;stroke:#ff3a4b;stroke-miterlimit:10"
id="line967"
y2="917.40002"
x2="259.70001"
y1="859.90002"
x1="259.70001"
class="st0" /></svg>

BIN
documentation/application/img/ui-architecture-hierarchical.png View File


+ 1
- 1
documentation/architecture/architecture-client-side.asciidoc View File

@@ -12,7 +12,7 @@ Engine")))
The user interface of a server-side Vaadin application is rendered in the
browser by the Vaadin Client-Side Engine. It is loaded in the browser when the
page with the Vaadin UI is opened. The server-side UI components are rendered
using __widgets__ (as they are called in Google Web Toolkit) on the client-side.
using __widgets__ (as they are called in GWT) on the client-side.
The client-side engine is illustrated in <<figure.architecture.client-side>>.

[[figure.architecture.client-side]]

+ 8
- 28
documentation/architecture/architecture-events.asciidoc View File

@@ -7,17 +7,17 @@ layout: page
[[architecture.events]]
= Events and Listeners

Vaadin offers an event-driven programming model for handling user interaction.
Vaadin Framework offers an event-driven programming model for handling user interaction.
When a user does something in the user interface, such as clicks a button or
selects an item, the application needs to know about it. Many Java-based user
interface frameworks follow the __Event-Listener pattern__ (also known as the
Observer design pattern) to communicate user input to the application logic. So
does Vaadin. The design pattern involves two kinds of elements: an object that
does Vaadin Framework. The design pattern involves two kinds of elements: an object that
generates ("fires" or "emits") events and a number of listeners that listen for
the events. When such an event occurs, the object sends a notification about it
to all the listeners. In a typical case, there is only one listener.

Events can serve many kinds of purposes. In Vaadin, the usual purpose of events
Events can serve many kinds of purposes. In Vaadin Framework, the usual purpose of events
is handling user interaction in a user interface. Session management can require
special events, such as time-out, in which case the event would actually be the
lack of user interaction. Time-out is a special case of timed or scheduled
@@ -32,28 +32,23 @@ listener).
Most components that have related events define their own event class and the
corresponding listener class. For example, the [classname]#Button# has
[classname]#Button.ClickEvent# events, which can be listened to through the
[classname]#Button.ClickListener# interface.
[classname]#Button.ClickListener# functional interface.

In the following, we handle button clicks with a listener implemented as an
anonymous class:
In the following, we assign a button click listener using a lambda expression.

[source, java]
----
final Button button = new Button("Push it!");

button.addClickListener(new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
button.setCaption("You pushed it!");
}
});
button.addClickListener(event ->
button.setCaption("You pushed it!"));
----

<<figure.eventlistenerdiagram>> illustrates the case where an
application-specific class inherits the [classname]#Button.ClickListener#
interface to be able to listen for button click events. The application must
instantiate the listener class and register it with
[methodname]#addClickListener()#. It can be an anonymous class, such as the one
above. When an event occurs, an event object is instantiated, in this case a
[methodname]#addClickListener()#. When an event occurs, an event object is instantiated, in this case a
[classname]#Button.ClickEvent#. The event object knows the related UI component,
in this case the [classname]#Button#.

@@ -61,19 +56,4 @@ in this case the [classname]#Button#.
.Class Diagram of a Button Click Listener
image::img/events-classdiagram-hi.png[width=80%, scaledwidth=100%]

In Java 8, you can implement such functional interfaces with a lambda expression:

[source, java]
----
Button button = new Button("Push it!");

button.addClickListener(event ->
button.setCaption("You pushed it!"));
----

In the ancient times of C programming, __callback functions__ filled largely the
same need as listeners do now. In object-oriented languages, we usually only
have classes and methods, not functions, so the application has to give a class
interface instead of a callback function pointer to the framework.

<<dummy/../../../framework/application/application-events#application.events,"Handling Events with Listeners">> goes into details of handling events in practice.

+ 1
- 1
documentation/architecture/architecture-overview.asciidoc View File

@@ -7,7 +7,7 @@ layout: page
[[architecture.overview]]
= Overview

Vaadin provides two development models for web applications: for the client-side
Vaadin Framework provides two development models for web applications: for the client-side
(the browser) and for the server-side. The server-driven development model is
the more powerful one, allowing application development solely on the
server-side, by utilizing an AJAX-based Vaadin Client-Side Engine that renders

+ 15
- 21
documentation/architecture/architecture-technology.asciidoc View File

@@ -12,8 +12,8 @@ Toolkit")))
((("Google Web
Toolkit")))
This section provides an introduction to the various technologies and designs,
which Vaadin is based on. This knowledge is not necessary for using Vaadin, but
provides some background if you need to make low-level extensions to Vaadin.
which Vaadin Framework is based on. This knowledge is not necessary for using Vaadin Framework, but
provides some background if you need to make low-level extensions to the framework.

[[architecture.technology.html]]
== HTML and JavaScript
@@ -24,7 +24,7 @@ The World Wide Web, with all its websites and most of the web applications, is
based on the use of the Hypertext Markup Language (HTML). HTML defines the
structure and formatting of web pages, and allows inclusion of graphics and
other resources. It is based on a hierarchy of elements marked with start and
end tags, such as [literal]#++<div> ... </div>++#. Vaadin uses HTML version 5,
end tags, such as [literal]#++<div> ... </div>++#. Vaadin Framework uses HTML version 5,
although conservatively, to the extent supported by the major browsers, and
their currently most widely used versions.

@@ -32,11 +32,11 @@ their currently most widely used versions.
JavaScript, on the other hand, is a programming language for embedding programs
in HTML pages. JavaScript programs can manipulate a HTML page through the
Document Object Model (DOM) of the page. They can also handle user interaction
events. The Client-Side Engine of Vaadin and its client-side widgets do exactly
events. The Client-Side Engine of the framework and its client-side widgets do exactly
this, although it is actually programmed in Java, which is compiled to
JavaScript with the Vaadin Client Compiler.

Vaadin largely hides the use of HTML, allowing you to concentrate on the UI
Vaadin Framework largely hides the use of HTML, allowing you to concentrate on the UI
component structure and logic. In server-side development, the UI is developed
in Java using UI components and rendered by the client-side engine as HTML, but
it is possible to use HTML templates for defining the layout, as well as HTML
@@ -74,7 +74,7 @@ syntax, which is more concise. The Vaadin Sass compiler supports the SCSS
syntax.

((("themes")))
Vaadin handles styling with __themes__ defined with CSS or Sass, and associated
Vaadin Framework handles styling with __themes__ defined with CSS or Sass, and associated
images, fonts, and other resources. Vaadin themes are specifically written in
Sass. In development mode, Sass files are compiled automatically to CSS. For
production use, you compile the Sass files to CSS with the included compiler.
@@ -119,11 +119,11 @@ serialization of RPC calls between the widgets and the server-side components.


[[architecture.technology.gwt]]
== Google Web Toolkit
== GWT

((("Google Web
Toolkit")))
The client-side framework of Vaadin is based on the Google Web Toolkit (GWT).
The client-side of Vaadin Framework is based on GWT.
Its purpose is to make it possible to develop web user interfaces that run in
the browser easily with Java instead of JavaScript. Client-side modules are
developed with Java and compiled into JavaScript with the Vaadin Compiler, which
@@ -133,10 +133,10 @@ of the HTML DOM manipulation and enables handling browser events in Java.
GWT is essentially a client-side technology, normally used to develop user
interface logic in the web browser. Pure client-side modules still need to
communicate with a server using RPC calls and by serializing any data. The
server-driven development mode in Vaadin effectively hides all the client-server
server-driven development mode in the framework effectively hides all the client-server
communications and allows handling user interaction logic in a server-side
application. This makes the architecture of an AJAX-based web application much
simpler. Nevertheless, Vaadin also allows developing pure client-side
simpler. Nevertheless, Vaadin Framework also allows developing pure client-side
applications, as described in
<<dummy/../../../framework/clientsideapp/clientsideapp-overview.asciidoc#clientsideapp.overview,"Client-Side
Applications">>.
@@ -144,7 +144,7 @@ Applications">>.
See
<<dummy/../../../framework/architecture/architecture-client-side#architecture.client-side,"Client-Side
Engine">> for a description of how the client-side framework based on GWT is
used in the Client-Side Engine of Vaadin.
used in the Client-Side Engine of Vaadin Framework.
<<dummy/../../../framework/clientside/clientside-overview.asciidoc#clientside.overview,"Client-Side
Vaadin Development">> provides information about the client-side development,
and
@@ -170,14 +170,8 @@ image::img/java-servlet-hi.png[width=80%, scaledwidth=100%]
Web applications are usually packaged and deployed to a server as __WAR__ (
__Web application ARchive__) files, which are Java JAR packages, which in turn
are ZIP compressed packages. The web application is defined in a
[filename]#WEB-INF/web.xml# deployment descriptor, which defines the servlet
classes and also the mappings from request URL paths to the servlets. This is
described in more detail in
<<dummy/../../../framework/application/application-environment#application.environment.web-xml,"Using
a web.xml Deployment Descriptor">>. The class path for the servlets and their
dependencies includes the [filename]#WEB-INF/classes# and
[filename]#WEB-INF/lib# folders. The [filename]#WEB-INF# is a special hidden
folder that can not be accessed by its URL path.
deployment descriptor, which defines the servlet
classes and also the mappings from request URL paths to the servlets.

The servlets are Java classes that handle HTTP requests passed to them by the
server through the __Java Servlet API__. They can generate HTML or other content
@@ -194,8 +188,8 @@ UIs are implemented as classes extending the [classname]#UI# class, as described
in
<<dummy/../../../framework/application/application-overview.asciidoc#application.overview,"Writing
a Server-Side Web Application">>. The class is given as a parameter to the
Vaadin Servlet in the [filename]#web.xml# deployment descriptor.
Vaadin Servlet in the deployment descriptor.

The Vaadin Client-Side Engine as well as client-side Vaadin applications are loaded to the browser as static JavaScript files.
The Client-Side Engine of Vaadin Framework as well as any client-side extension are loaded to the browser as static JavaScript files.
The client-side engine, or widget set in technical terms, needs to be located under the [filename]#VAADIN/widgetsets# path in the web application.
It is normally automatically compiled to include the default widget set, as well as any installed add-ons and custom widgets.

BIN
documentation/architecture/img/datamodel.png View File


+ 0
- 2879
documentation/architecture/original-drawings/clientside-arch.svg.2012_10_09_18_20_24.0.svg
File diff suppressed because it is too large
View File


+ 0
- 2735
documentation/architecture/original-drawings/clientside-arch.svg.2012_10_12_17_35_17.0.svg
File diff suppressed because it is too large
View File


+ 4
- 9
documentation/getting-started/getting-started-archetypes.asciidoc View File

@@ -11,24 +11,19 @@ Vaadin currently offers the following Maven archetypes for different kinds of pr

`vaadin-archetype-application`::
This is a single-module project for simple applications.
It is good for quick demos and trying out Vaadin.
It is also useful when you are experienced with Vaadin and want to build all the aspects of the application yourself.
It is good for quick demos and trying out Vaadin Framework.
It is also useful when you are experienced with the framework and want to build all the aspects of the application yourself.

`vaadin-archetype-application-multimodule`::
A complete Vaadin application development setup.
A complete Vaadin Framework application development setup.
It features separate production and development profiles.

`vaadin-archetype-application-example`::
An example CRUD web application using multi-module project setup.

`vaadin-archetype-widget`::
A multi-module project for a new Vaadin add-on.
A multi-module project for a new Vaadin Framework add-on.
It has two modules: one for the add-on and another for a demo application.

`vaadin-archetype-touchkit`::
A mobile development starter project using Vaadin TouchKit.
See <<dummy/../../../touchkit/mobile-overview#mobile.overview,"Vaadin TouchKit">>.
Notice that this archetype uses the AGPL-licensed version of TouchKit, which requires that your project must also be licensed under the AGPL license.

`vaadin-archetype-liferay-portlet`::
A portlet development setup for the open-source Liferay portal.

+ 7
- 285
documentation/getting-started/getting-started-first-project.asciidoc View File

@@ -18,220 +18,20 @@ Vaadin Plugin. The task will include the following steps:

. Open a web browser to use the web application


We also show how you can debug the application in the debug mode in Eclipse.

This walkthrough assumes that you have already installed the Eclipse IDE, the Vaadin Plugin, and a development server, as instructed in
<<dummy/../../../framework/installing/installing-eclipse#installing.eclipse, "Installing the Eclipse IDE and Plugin">>.

ifdef::web[]
[[getting-started.first-project.ivy]]
== Creating an Ivy Project
endif::web[]

ifdef::web[]
NOTE: The following describes the creation of an Ivy project. The upcoming version of the Eclipse plug-in creates Maven projects. For that, see <<getting-started.first-project.creation>>.
endif::web[]

ifdef::web[]
Let us create the first application project with the tools installed in the
previous section. First, launch Eclipse and follow the following steps:

. Start creating a new project by selecting from the menu "File > New > Project...".
. In the [guilabel]#New Project# window that opens, select "Vaadin > Vaadin 7
Project" and click [guibutton]#Next#.
+
image::img/myproject-ivy-new-vaadin.png[width=70%, scaledwidth=100%]

. In the [guilabel]#Vaadin Project# step, you need to set the basic web project
settings. You need to give at least the __project name__ and the runtime; the
default values should be good for the other settings.
+
image::img/myproject-ivy-settings.png[width=70%, scaledwidth=100%]

[guilabel]#Project name#:: Give the project a name. The name should be a valid identifier usable
cross-platform as a filename and inside a URL, so using only lower-case
alphanumerics, underscore, and minus sign is recommended.

[guilabel]#Use default location#:: Define the directory under which the project is created. The default is under
your workspace folder, and you should normally leave it as it is. You may need
to set the directory, for example, if you are creating an Eclipse project on top
of a version-controlled source tree.

[guilabel]#Target runtime#:: Define the application server to use for deploying the application. The server
that you have installed, for example Apache Tomcat, should be selected
automatically. If not, click [guibutton]#New# to configure a new server under
Eclipse.

[guilabel]#Configuration#:: Select the configuration to use; you should normally use the default
configuration for the application server. If you need to modify the project
facets, click [guibutton]#Modify#. The recommended Servlet 3.0 configuration
uses the @WebServlet deployment, while Servlet 2.4 uses the old
[filename]#web.xml# deployment.

[guilabel]#Deployment configuration#:: This setting defines the environment to which the application will be deployed,
to generate the appropriate project directory layout and configuration files.
The choises are:

*** [guilabel]#Servlet# (default)
*** [guilabel]#Google App Engine Servlet#
*** [guilabel]#Generic Portlet (Portlet 2.0)#

+
The further steps in the New Project Wizard depend on the selected deployment
configuration; the steps listed in this section are for the default servlet
configuration.
ifdef::web[]
See <<dummy/../../../framework/portal/portal-overview.asciidoc#portal.overview,"Portal Integration">> for instructions regarding the use of Vaadin with portals.
endif::web[]

[guilabel]#Vaadin version#:: Select the Vaadin version to use. The drop-down list shows, by default, the
latest available version of Vaadin. The selection includes nightly
[literal]#++SNAPSHOT++# builds, if you want to keep up with the absolutely
latest unstable versions.

+
You can change the version later in the [filename]#ivy.xml#.

[guilabel]#Create TestBench test#:: When enabled, the application stub will include a test case for testing the UI
with Vaadin TestBench, as described in
<<dummy/../../../testbench/testbench-overview.asciidoc#testbench.overview,"Vaadin TestBench">>.
Vaadin TestBench API library will be included in [filename]#ivy.xml# as a dependency.
Vaadin version 7.3 or later is required to create the stub.

+
You can click [guibutton]#Finish# here to use the defaults for the rest of the
settings, or click [guibutton]#Next#.

. The settings in the [guilabel]#Web Module# step define the basic web application
(WAR) deployment settings and the structure of the web application project. All
the settings are pre-filled, and you should normally accept them as they are.

+
image::img/myproject-ivy-web.png[scaledwidth=100%]

[guilabel]#Context Root#:: The context root (of the application) identifies the application in the URL used
for accessing it. For example, if the project has a [literal]#++myproject++#
context and a single UI at the context root, the URL would be
http://example.com/myproject. The wizard will suggest the project name given in
the first step as the context name. You can change the context root later in the
Eclipse project properties.

[guilabel]#Content Directory#:: The directory containing all the content to be included in the web application
(WAR) that is deployed to the web server. The directory is relative to the root
directory of the project.

+
You can just accept the defaults and click [guibutton]#Next#.

. The [guilabel]#Vaadin project# step page has various Vaadin-specific application settings.
If you are trying out Vaadin for the first time, you should not need
to change anything. You can set most of the settings afterwards, except the
creation of the portlet configuration.
+
image::img/myproject-vaadin.png[scaledwidth=100%]

[guilabel]#Create project template#:: Make the wizard create an UI class stub.

[guilabel]#Application Name#:: A name for the application UI, shown in the title bar of the browser window.

[guilabel]#Base package name#:: The name of the Java package under which the UI class of the application is to
be placed.

[guilabel]#Application/UI class name#:: The name of the UI class for the application, in which the user interface is
developed.

[guilabel]#Portlet version#:: When a portlet version is selected (only Portlet 2.0 is supported), the wizard
will create the files needed for running the application in a portal. See
<<dummy/../../../framework/portal/portal-overview.asciidoc#portal.overview,"Portal
Integration">> for more information on portlets.

+
Finally, click [guibutton]#Finish# to create the project.

[[getting-started.first-project.exploring]]
== Exploring the Project

After the [guilabel]#New Project# wizard exits, it has done all the work for
you: an UI class skeleton has been written to [filename]#src# directory and the
[filename]#WebContent/WEB-INF/web.xml# contains a deployment descriptor. The
project hierarchy shown in the Project Explorer is shown in
<<figure.getting-started.first-project.exploring>>.

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

The Vaadin libraries and other dependencies are managed by Ivy. Notice that the
libraries are not stored under the project folder, even though they are listed
in the "Java Resources > Libraries > ivy.xml" virtual folder.

[[getting-started.first-project.exploring.ui]]
=== The UI Class

The UI class created by the plugin contains the following code:

[source, java]
----
package com.example.myproject;

import com.vaadin.ui.UI;
...

@SuppressWarnings("serial")
@Theme("myproject")
public class MyprojectUI extends UI {

@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(
productionMode = false,
ui = MyprojectUI.class)
public static class Servlet extends VaadinServlet {
}

@Override
protected void init(VaadinRequest request) {
final VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
setContent(layout);

Button button = new Button("Click Me");
button.addClickListener(new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
layout.addComponent(
new Label("Thank you for clicking"));
}
});
layout.addComponent(button);
}
}
----

In a Servlet 3.0 project, the deployment is configured with servlet class and a
[literal]#++@WebServlet++# annotation. The stub includes the servlet class as a
static inner class. You may want to refactor it to a separate normal class.

In a Servlet 2.3 project, you would have a [filename]#web.xml# deployment
descriptor.

For a more detailed treatment of the deployment, see
<<dummy/../../../framework/application/application-environment#application.environment.web-xml,"Using a web.xml Deployment Descriptor">>.
endif::web[]

[[getting-started.first-project.creation]]
== Creating a Maven Project

ifdef::web[]
NOTE: The following describes project creation in the upcoming version of the Eclipse plug-in, which creates Maven rather than Ivy projects.
To use it, you must have installed the experimental version of the plug-in.
endif::web[]

Let us create the first application project with the tools installed in the previous section.
First, launch Eclipse and follow the following steps:

. Start creating a new project by selecting from the menu "File > New > Project...".

. In the [guilabel]#New Project# window that opens, select "Vaadin > Vaadin 7
. In the [guilabel]#New Project# window that opens, select "Vaadin > Vaadin 8
Project (Maven)" and click [guibutton]#Next#.
+
image::img/myproject-new-vaadin.png[width=70%, scaledwidth=90%]
@@ -304,14 +104,11 @@ public class MyUI extends UI {
name.setCaption("Type your name here:");

Button button = new Button("Click Me");
button.addClickListener( e -> {
button.addClickListener(e ->
layout.addComponent(new Label("Thanks " + name.getValue()
+ ", it works!"));
});
+ ", it works!")));

layout.addComponents(name, button);
layout.setMargin(true);
layout.setSpacing(true);

setContent(layout);
}
@@ -377,36 +174,16 @@ Follow the following steps:
. Switch to the [guilabel]#Servers# tab in the lower panel in Eclipse.
List of servers should be empty after Eclipse is installed.
Right-click on the empty area in the panel and select "New > Server".
ifdef::web[]
+
image::img/tomcat-startserver-1.png[width=60%, scaledwidth=100%]
endif::web[]

. Select "Apache > Tomcat v7.0 Server" and set [guilabel]#Server's host name# as [literal]#++localhost++#, which should be the default. If you have only one Tomcat installed, [guilabel]#Server runtime# has only one choice. Click [guibutton]#Next#.
ifdef::web[]
+
image::img/tomcat-startserver-2.png[width=60%, scaledwidth=100%]
endif::web[]
. Select "Apache > Tomcat v8.0 Server" and set [guilabel]#Server's host name# as [literal]#++localhost++#, which should be the default. If you have only one Tomcat installed, [guilabel]#Server runtime# has only one choice. Click [guibutton]#Next#.

. Add your project to the server by selecting it on the left and clicking [guibutton]#Add# to add it to the configured projects on the right. Click [guibutton]#Finish#.
ifdef::web[]
+
image::img/tomcat-startserver-3.png[width=60%, scaledwidth=100%]
endif::web[]

. The server and the project are now installed in Eclipse and are shown in the [guilabel]#Servers# tab.
To start the server, right-click on the server and select [guilabel]#Debug#.
To start the server in non-debug mode, select [guilabel]#Start#.
ifdef::web[]
+
image::img/tomcat-startserver-4.png[width=60%, scaledwidth=100%]
endif::web[]

. The server starts and the WebContent directory of the project is published to the server on http://localhost:8080/myproject/.
ifdef::web[]
+
image::img/tomcat-startserver-5.png[width=60%, scaledwidth=100%]
endif::web[]

[[getting-started.first-project.run]]
== Running and Debugging
@@ -415,13 +192,6 @@ Starting your application is as easy as selecting [guilabel]#myproject# from the
[guilabel]#Project Explorer# and then "Run > Debug As > Debug on Server".
Eclipse then opens the application in built-in web browser.

////
// This is rather irrelevant
//
.Running a Vaadin Application
image::img/runningMyProject.png[width=60%, scaledwidth=80%]
////

You can insert break points in the Java code by double-clicking on the left
margin bar of the source code window. For example, if you insert a breakpoint in
the [methodname]#buttonClick()# method and click the [guibutton]#What is the
@@ -438,15 +208,9 @@ Debugging client-side applications and widgets is described in
<<dummy/../../../framework/clientside/clientside-debugging#clientside.debugging,"Debugging Client-Side Code">>.

[[getting-started.eclipse.mavenlibraryupdate]]
ifdef::web[]
== Updating the Vaadin Libraries in Maven Projects
endif::web[]
// The book only describes Maven projects
ifndef::web[]
== Updating the Vaadin Libraries
endif::web[]

Updating the Vaadin plugin does not update Vaadin libraries. The libraries are
== Updating the Vaadin Framework Libraries

Updating the Vaadin plugin does not update Vaadin Framework libraries. The libraries are
project specific, as a different version might be required for different
projects, so you have to update them separately for each project.

@@ -468,45 +232,3 @@ right-clicking the server and selecting [guilabel]#Clean# as well as

If you experience problems after updating the libraries, you can try using
"Maven > Update Project".

ifdef::web[]
[[getting-started.eclipse.libraryupdate]]
== Updating the Vaadin Libraries in Ivy Projects

Updating the Vaadin plugin does not update Vaadin libraries.
The libraries are project specific, as a different version might be required for different projects, so you have to update them separately for each project.

. Open the [filename]#ivy.xml# in an editor in Eclipse.

. Edit the entity definition at the beginning of the file to set the Vaadin
version.
+
[subs="normal"]
----
&lt;!ENTITY vaadin.version "**8.x.x**"&gt;
----
+
You can specify either a fixed version number, as shown in the above example, or
a dynamic revision tag such as [literal]#++latest.release++#.
You can find more information about the dependency declarations in Ivy documentation.

. Right-click the project and select "Ivy > Resolve".
+
Updating the libraries can take several minutes. You can see the progress in the
Eclipse status bar. You can get more details about the progress by clicking the
indicator.

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

. Stop the integrated Tomcat (or other server) in Eclipse, clear its caches by
right-clicking the server and selecting Clean as well as Clean Tomcat Work
Directory, and restart it.

If you experience problems after updating the libraries, you can try clearing
the Ivy resolution caches by right-clicking the project and selecting "Ivy >
Clean all caches".
Then, do the "Ivy > Resolve" and other tasks again.

endif::web[]

+ 1
- 37
documentation/getting-started/getting-started-idea.asciidoc View File

@@ -11,13 +11,6 @@ The Ultimate Edition of IntelliJ IDEA includes support for creating Vaadin appli

With the Community Edition, you can create a Vaadin application most easily with a Maven archetype and deploy it to a server with a Maven run/debug configuration.

ifdef::web[]
For more information, see the article "
link:http://wiki.jetbrains.net/intellij/Creating_a_simple_Web_application_and_deploying_it_to_Tomcat[Creating
a simple Web application and deploying it to Tomcat]" in the IntelliJ IDEA
Encyclopedia wiki.
endif::web[]

[[getting-started.idea.project]]
== Creating a Vaadin Web Application Project

@@ -39,7 +32,7 @@ image::img/idea-newproject-1.png[scaledwidth=100%]
+
Click [guibutton]#Next#.

. Select "Web Application > Vaadin" to add Vaadin technology to the project.
. Select "Web Application > Vaadin" to add Vaadin Framework to the project.

. Select Vaadin [guilabel]#Version# and [guilabel]#Distribution# installation
path. You probably also want an application stub, so select [guilabel]#Create
@@ -52,11 +45,6 @@ Do __not__ click [guibutton]#Finish# yet.
. Select [guilabel]#Application Server# in the same window.
Set it as an integrated server that you have configured in IntelliJ IDEA, as described previously in <<DUMMY/../../../framework/installing/installing-idea#installing.idea.ultimate.server, "Configuring an Application Server">>.

ifdef::web[]
+
image::img/idea-newproject-3.png[scaledwidth=100%]
endif::web[]

. Click [guibutton]#Finish#.

The project is created with the UI class stub and a [filename]#web.xml#
@@ -111,22 +99,12 @@ enter [guilabel]#GroupId# [literal]#++com.vaadin++#, [guilabel]#ArtifactId#
[literal]#++vaadin-archetype-application++#, and [guilabel]#Version#
[literal]#++LATEST++# (or a specific version number).

ifdef::web[]
+
image::img/idea-maven-newproject-3.png[]
endif::web[]

+
Click [guibutton]#OK# in the dialog.
//&lt;?dbfo-need height="8cm" ?&gt;

. Select the [literal]#++com.vaadin:vaadin-archetype-application++#.

ifdef::web[]
+
image::img/idea-maven-newproject-4.png[]
endif::web[]

+
Click [guibutton]#Next#.
//&lt;?dbfo-need height="8cm" ?&gt;
@@ -134,10 +112,6 @@ Click [guibutton]#Next#.
. Review the general Maven settings and settings for the new project.
You may need to override the settings, especially if you are creating a Maven project for the first time.

ifdef::web[]
+
image::img/idea-maven-newproject-5.png[]
endif::web[]
+
Click [guibutton]#Finish#.

@@ -179,22 +153,12 @@ launch a Vaadin Maven application on the light-weight Jetty web server.
. Enter a [guilabel]#Name# for the run configuration.
For the [guilabel]#Command line#, enter "`package jetty:run`# to first compile and package the project, and then launch Jetty to run it.

ifdef::web[]
+
image::img/idea-maven-run-1.png[]
endif::web[]

+
Click [guibutton]#OK#.

. Select the run configuration in the toolbar and click the [guibutton]#Run#
button beside it.

ifdef::web[]
+
image::img/idea-maven-run-2.png[]
endif::web[]


Compiling the project takes some time on the first time, as it compiles the
widget set and theme. Once the run console pane informs that Jetty Server has

+ 18
- 16
documentation/getting-started/getting-started-libraries.asciidoc View File

@@ -7,7 +7,7 @@ layout: page
[[getting-started.libraries]]
= Vaadin Libraries

Vaadin comes as a set of library JARs, of which some are optional or alternative
Vaadin Framework comes as a set of library JARs, of which some are optional or alternative
ones, depending on whether you are developing server-side or client-side
applications, whether you use add-on components, or use CSS or Sass themes.

@@ -17,12 +17,24 @@ The main library for developing server-side Vaadin applications, as described in
It requires the [filename]#vaadin-shared# and the [filename]#vaadin-themes# libraries.
You can use the pre-built [filename]#vaadin-client-compiled# for server-side development, unless you need add-on components or custom widgets.

[filename]#vaadin-themes-8.x.x.jar#::
Vaadin Framework built-in themes both as SCSS source files and precompiled CSS files.
The library is required both for basic use with CSS themes and for compiling custom Sass themes.

[filename]#vaadin-push-8.x.x.jar#::
The implementation of server push for Vaadin Framework.
This is needed for web applications which use server push (e.g. using the @Push annotation in a Servlet class).

[filename]#vaadin-shared-8.x.x.jar#::
A shared library for server-side and client-side development.
It is always needed.

[filename]#vaadin-client-compiled-8.x.x.jar#::
A pre-compiled Vaadin Client-Side Engine (widget set) that includes all the basic built-in widgets in Vaadin.
This library is not needed if you compile the application widget set with the Vaadin Client Compiler.

[filename]#vaadin-client-8.x.x.jar#::
The client-side Vaadin framework, including the basic GWT API and Vaadin-specific widgets and other additions.
The client-side Vaadin Framework, including the basic GWT API and Vaadin-specific widgets and other additions.
It is required when using the [filename]#vaadin-client-compiler# to compile client-side modules.
It is not needed if you just use the server-side framework with the pre-compiled Client-Side Engine.
You should not deploy it with a web application.
@@ -31,26 +43,16 @@ You should not deploy it with a web application.
The Vaadin Client Compiler is a Java-to-JavaScript compiler that allows building client-side modules, such as the Client-Side Engine (widget set) required for server-side applications.
The compiler is needed, for example, for compiling add-on components to the application widget set, as described in <<dummy/../../../framework/addons/addons-overview.asciidoc#addons.overview,"Using Vaadin Add-ons">>.
+
//TODO There's a need for such section.
For detailed information regarding the compiler, see
<<dummy/../../../framework/clientside/clientside-compiling#clientside.compiling,"Compiling a Client-Side Module">>.
Note that you should not deploy this library with a web application.

[filename]#vaadin-client-compiled-8.x.x.jar#::
A pre-compiled Vaadin Client-Side Engine (widget set) that includes all the basic built-in widgets in Vaadin.
This library is not needed if you compile the application widget set with the Vaadin Client Compiler.

[filename]#vaadin-themes-8.x.x.jar#::
Vaadin built-in themes both as SCSS source files and precompiled CSS files.
The library is required both for basic use with CSS themes and for compiling custom Sass themes.

[filename]#vaadin-push-8.x.x.jar#::
The implementation of server push for Vaadin.
This is needed for web applications which use server push (e.g. using the @Push annotation in a Servlet class).
[filename]#vaadin-compatibility-*-8.x.x.jar#::
The Vaadin Framework 7 compatibility packages contain the components and themes that are present in framework version 7, but not in version 8. These packages exist for making it easier to migrate from version 7 to 8. There is a compatibility package for everything except [filename]#vaadin-client-compiler#.

Some of the libraries depend on each other as well as on the dependency libraries provided in the [filename]#lib# folder of the installation package, especially the [filename]#lib/vaadin-shared-deps.jar#.
Some of the libraries depend on each other, for instance [filename]#vaadin-shared# is included as a dependency of [filename]#vaadin-server#.

The different ways to install the libraries are described in the subsequent sections.

Note that the [filename]#vaadin-client-compiler# and [filename]#vaadin-client# JARs should not be deployed with the web application by including them in [filename]#WEB-INF/lib#.
Note that the [filename]#vaadin-client-compiler# and [filename]#vaadin-client# JARs should not be deployed with the web application. The Maven scope [filename]#provided# can be used.
Some other libraries, such as [filename]#vaadin-sass-compiler#, are not needed in production deployment.

+ 2
- 12
documentation/getting-started/getting-started-maven.asciidoc View File

@@ -16,8 +16,6 @@ You can then import such a project in your IDE.
In addition to regular Maven, you can use any Maven-compatible build or
dependency management system, such as Ivy or Gradle. For Gradle, see the
link:https://github.com/johndevs/gradle-vaadin-plugin[Gradle Vaadin Plugin].
Vaadin Plugin for Eclipse uses Ivy for resolving dependencies in Vaadin
projects, and it should provide you with the basic Ivy configuration.

For an interactive guide, see the instructions at link:https://vaadin.com/maven[vaadin.com/maven].
It automatically generates you the command to create a new project based on archetype selection.
@@ -50,8 +48,7 @@ See the list of available archetypes in <<dummy/../../../framework/getting-start

[parameter]#archetypeVersion#::
Version of the archetype to use.
This should be [literal]#++LATEST++# for normal Vaadin releases.
For prerelease versions it should be the exact version number, such as [literal]#++7.6.4++#.
For prerelease versions it should be the exact version number, such as [literal]#++8.0.0.beta2++#.

[parameter]#groupId#:: A Maven group ID for your project. It is normally your organization domain name
in reverse order, such as com.example. The group ID is also used as a prefix for
@@ -71,14 +68,7 @@ version numbering format.



Creating a project can take a while as Maven fetches all the dependencies. The
created project structure is shown in
<<figure.getting-started.maven.archetype.created>>.

[[figure.getting-started.maven.archetype.created]]
.A New Vaadin Project with Maven
image::img/maven-project-created.png[scaledwidth=60%]

Creating a project can take a while as Maven fetches all the dependencies.

[[getting-started.maven.compiling]]
== Compiling and Running the Application

+ 3
- 4
documentation/getting-started/getting-started-overview.adoc View File

@@ -7,16 +7,15 @@ layout: page
[[getting-started.overview]]
= Overview

Once you have installed a development environment, as described in the previous chapter, creating a Vaadin project proceeds in the IDE that you have chosen.
Once you have installed a development environment, as described in the previous chapter, creating a Vaadin Framework project proceeds in the IDE that you have chosen.

The Vaadin core library and all Vaadin add-ons are available through Maven, a commonly used build and dependency management system.
The Vaadin Framework core library and all Vaadin add-ons are available through Maven, a commonly used build and dependency management system.

The recommended way to create a Vaadin application project is to use a Maven archetype.
The archetypes contain all the needed dependencies, which Maven takes care of.
The Eclipse IDE plugin currently also supports creating a normal Eclipse web project using the Ivy dependency manager.

In this chapter, we:

* Give an overview of the Vaadin libraries
* Give an overview of the Vaadin Framework libraries
* List the available Maven archetypes
* Give step-by-step instructions for creating a project in the Eclipse IDE, NetBeans IDE, and IntelliJ IDEA, as well as with command-line.

+ 1
- 39
documentation/getting-started/getting-started-package.asciidoc View File

@@ -10,43 +10,5 @@ layout: page
While the recommended way to create a Vaadin project and install the libraries is to use an IDE plugin or a dependency management system, such as Maven, Vaadin is also available as a ZIP distribution package.

You can download the newest Vaadin installation package from the download page
at http://vaadin.com/download/. Please use a ZIP decompression utility available
at https://vaadin.com/download/. Please use a ZIP decompression utility available
in your operating system to extract the files from the ZIP package.

[[getting-started.package.contents]]
== Package Contents

[filename]#README.TXT#:: This README file gives simple instructions for installing Vaadin in your project.

[filename]#release-notes.html#:: The Release Notes contain information about the new features in the particular release, give upgrade instructions, describe compatibility, etc.
Please open the HTML file with a web browser.

[filename]#license.html#:: Apache License version 2.0.
Please open the HTML file with a web browser.

[filename]#lib# folder:: All dependency libraries required by Vaadin are contained within the [filename]#lib# folder.

[filename]#*.jar#:: Vaadin libraries, as described in <<getting-started-libraries#getting-started.libraries,"Overview of Vaadin Libraries">>.


[[getting-started.package.install]]
== Installing the Libraries

You can install the Vaadin ZIP package in a few simple steps:

. Copy the JAR files at the package root folder to the [filename]#WEB-APP/lib# web
library folder in the project. Some of the libraries are optional, as explained
in
<<dummy/../../../framework/getting-started/getting-started-libraries#getting-started.libraries,"Overview
of Vaadin Libraries">>.

. Also copy the dependency JAR files at the [filename]#lib# folder to the
[filename]#WEB-APP/lib# web library folder in the project.


The location of the [filename]#WEB-APP/lib# folder depends on the project
organization, which depends on the development environment.

* In Eclipse Dynamic Web Application projects: [filename]#WebContent/WEB-INF/lib#.

* In Maven projects: [filename]#src/main/webapp/WEB-INF/lib#.

+ 1
- 1
documentation/getting-started/getting-started-scala.asciidoc View File

@@ -34,7 +34,7 @@ of the application server. If copying outside Eclipse to a project, refresh the
project by selecting it and pressing kbd:[F5].

+
You could also get it with an Ivy or Maven dependency, just make sure that the
You could also get it with a Maven dependency, just make sure that the
version is same as what the Scala IDE uses.



BIN
documentation/getting-started/img/idea-maven-newproject-3.png View File


BIN
documentation/getting-started/img/idea-maven-newproject-4.png View File


BIN
documentation/getting-started/img/idea-maven-newproject-5.png View File


BIN
documentation/getting-started/img/idea-maven-run-1.png View File


BIN
documentation/getting-started/img/idea-maven-run-2.png View File


BIN
documentation/getting-started/img/idea-newproject-3.png View File


BIN
documentation/getting-started/img/ivyde-install-available.png View File


BIN
documentation/getting-started/img/maven-project-created.png View File


BIN
documentation/getting-started/img/myproject-ivy-created.png View File


BIN
documentation/getting-started/img/myproject-ivy-new-vaadin.png View File


BIN
documentation/getting-started/img/myproject-ivy-settings.png View File


BIN
documentation/getting-started/img/myproject-ivy-vaadin.png View File


BIN
documentation/getting-started/img/myproject-ivy-web.png View File


BIN
documentation/getting-started/img/runningMyProject.png View File


BIN
documentation/getting-started/img/tomcat-startserver-1.png View File


BIN
documentation/getting-started/img/tomcat-startserver-2.png View File


BIN
documentation/getting-started/img/tomcat-startserver-3.png View File


BIN
documentation/getting-started/img/tomcat-startserver-4.png View File


BIN
documentation/getting-started/img/tomcat-startserver-5.png View File


+ 4
- 4
documentation/installing/installing-eclipse.adoc View File

@@ -79,7 +79,7 @@ incompatibility issues with Eclipse plugins installed by the package management
of the operating system.

[[installing.eclipse.plugin]]
== Installing the Vaadin Plugin
== Installing the Vaadin Eclipse Plugin

You can install the plugin as follows:

@@ -90,9 +90,9 @@ You can install the plugin as follows:
image::img/plugin-install-addsite.png[]
+
Enter a name such as "Vaadin Update Site" and the URL of the update site:
http://vaadin.com/eclipse. If you want or need to use the latest unstable
https://vaadin.com/eclipse. If you want or need to use the latest unstable
plugin, which is usually more compatible with development and beta releases of
Vaadin, you can use http://vaadin.com/eclipse/experimental and give it a
Vaadin Framework, you can use https://vaadin.com/eclipse/experimental and give it a
distinctive name such as "Vaadin Experimental Site". Then click [guibutton]#OK#.
The Vaadin site should now appear in the [guilabel]#Available Software# window.

@@ -112,7 +112,7 @@ Then, click [guibutton]#Next#.
[guibutton]#Restart#.

More installation instructions for the Eclipse plugin can be found at
http://vaadin.com/eclipse.
https://vaadin.com/eclipse.




+ 3
- 5
documentation/installing/installing-java.adoc View File

@@ -8,7 +8,7 @@ layout: page
= Installing Java SDK

A Java SDK is required by Vaadin and also by any of the Java IDEs.
Vaadin is compatible with Java 1.6 and later editions, be we recommend using Java 8 for Vaadin development.
Vaadin Framework 8 requires Java 8.
Java EE 7 is required for proper server push support with WebSockets.

[[installing.java.windows]]
@@ -27,12 +27,10 @@ The default options are fine.

Most Linux systems either have JDK preinstalled or allow installing it through a
package management system. Notice however that they have OpenJDK as the default
Java implementation. While it is known to have worked with Vaadin and possibly
Java implementation. While it is known to have worked with Vaadin Framework and possibly
also with the development toolchain, we do not especially support it.

Regarding OS X, notice that JDK 1.6 or newer is included in OS X 10.6 and newer.

Otherwise:
Depending on your OS distribution, you may have to download Java JDK 8:

. Download Oracle Java SE 8.0 from
link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[http://www.oracle.com/technetwork/java/javase/downloads/]

+ 1
- 6
documentation/installing/installing-server.adoc View File

@@ -7,15 +7,10 @@ layout: page
[[installing.server]]
= Installing a Web Server

You can run Vaadin applications in any Java servlet container that supports at least Servlet API 2.4.
However, a server supporting Servlet API 3.0 is recommended.
It is required for using Vaadin CDI, for which also a CDI container is required, a standard feature in Java EE 6 or newer servers.
It is also required by the Vaadin Spring add-on.
You can run Vaadin applications in any Java servlet container that supports at least Servlet API 3.0.
Server push can benefit from using communication modes, such as WebSocket, enabled by features in some latest servers.
For Java EE containers, at least Wildfly, Glassfish, and Apache TomEE Web Profile are recommended.

Also, if you use Java 8 for Vaadin development, you need to make sure that the server supports it.

Some Java IDEs have server integration, so we describe installation of the server before the IDEs.

Some IDE bundles also include a development server; for example, NetBeans IDE includes GlassFish and Apache Tomcat.

+ 1
- 1
documentation/installing/installing-toolchain.adoc View File

@@ -16,7 +16,7 @@ In this example, we use the following toolchain:
* link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[Oracle Java SE 8]
* link:http://www.eclipse.org/downloads/[Eclipse IDE for Java EE Developers]
* link:http://tomcat.apache.org/[Apache Tomcat 8.0 (Core)]
* link:http://www.getfirefox.com/[Mozilla Firefox] browser
* link:https://www.google.com/chrome/[Google Chrome] browser
* link:http://vaadin.com/download/[Vaadin Framework]

The above reference toolchain is a good choice of tools, but you can use almost

+ 5
- 5
documentation/introduction/intro-background.asciidoc View File

@@ -90,12 +90,12 @@ 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.

[[intro.background.vaadin8]]
== Vaadin 8 Introduces New Data Binding API
== Vaadin Framework 8 with New Data Binding API

The biggest change in Vaadin 8 is the complete modernization of the data binding API.
Binding components to data sources is one of the core features of the Vaadin Framework, as it eliminates the need to explicitly shuffle data between Vaadin components and data objects, typically beans.
The biggest change in Vaadin Framework 8 is the complete modernization of the data binding API.
Binding components to data sources is one of the core features of the Vaadin Framework, as it eliminates the need to explicitly shuffle data between components and data objects, typically beans.
The old data model was designed in time before Java features such as generics.
While the data model was improved over the years, it was fundamentally outdated and complex to use.
The new data binding API works much more fluently in Java 8, especially with Java 8 features such as lambda expressions.
The new data binding API works much more fluently in Java 8, especially with Java 8 features such as lambda expressions and streams.
Consequently, to be able to fully use the new features of Java 8, we have raised the requirements from Java 6 to 8.
The change should make Vaadin up to date with the most current Java technologies used by developers.
The change should make Vaadin Framework up to date with the most current Java technologies used by developers.

+ 1
- 1
documentation/introduction/intro-goals.asciidoc View File

@@ -19,7 +19,7 @@ following rules.

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
advertisement demos. You may find, for example, JSP/JSF more suitable
for such purposes.



+ 0
- 23
documentation/introduction/intro-walkthrough.asciidoc View File

@@ -18,7 +18,6 @@ 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) {
@@ -69,25 +68,3 @@ 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">>.

Loading…
Cancel
Save