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



*_This section has not yet been updated to Vaadin Framework 8_* *_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 leaf components are contained within layout components and other component
containers. Building the hierarchy starts from the top (or bottom - whichever 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 way you like to think about it), from the [classname]#UI# class of the
setContent(content); // Attach to the UI setContent(content); // Attach to the UI


// Add some component // 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
} }
} }
---- ----
Application Architectures">>, which discusses layered architectures, the Application Architectures">>, which discusses layered architectures, the
Model-View-Presenter (MVP) pattern, and so forth. 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]] [[application.architecture.composition]]
== Compositing Components == Compositing Components


[source, java] [source, java]
---- ----
class MyView extends VerticalLayout { 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() { public MyView() {
addComponent(entry); addComponent(entry);
addComponent(display); addComponent(display);
addComponent(click); addComponent(click);


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


// Use it
// Create an instance of MyView
Layout myview = new 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 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 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 component used. Otherwise, the users of such a composite could begin to rely on
[source, java] [source, java]
---- ----
class MyView extends CustomComponent { 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() { public MyView() {
Layout layout = new VerticalLayout(); Layout layout = new VerticalLayout();
layout.addComponent(click); layout.addComponent(click);


setCompositionRoot(layout); setCompositionRoot(layout);

setSizeFull(); setSizeFull();
} }
} }


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



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

vertical.addComponent(new TextField("Postal code")); vertical.addComponent(new TextField("Postal code"));
layout.addComponent(vertical); 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: You could define it declaractively with the following equivalent design:


<vaadin-text-field caption="Postal code"/> <vaadin-text-field caption="Postal code"/>
</vaadin-vertical-layout> </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 Declarative designs can be crafted by hand, but are most conveniently created
with the Vaadin Designer. with the Vaadin Designer.
<vaadin-label><b>Hello!</b> - <vaadin-label><b>Hello!</b> -
How are you?</vaadin-label> 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> </vaadin-vertical-layout>
</body> </body>
</html> </html>
&lt;!-- Expands to take up all remaining vertical space --&gt; &lt;!-- Expands to take up all remaining vertical space --&gt;
&lt;vaadin-horizontal-layout size-full **:expand**&gt; &lt;vaadin-horizontal-layout size-full **:expand**&gt;
&lt;!-- Automatic width - shrinks horizontally --&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;!-- 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-horizontal-layout&gt;
&lt;/vaadin-vertical-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]] [[application.declarative.identifiers]]


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




---- ----
@DesignRoot @DesignRoot
public class MyViewDesign extends VerticalLayout { public class MyViewDesign extends VerticalLayout {
Tree mytree;
Table mytable;
RadioButtonGroup<String> myRadioButtonGroup;
Grid<String> myGrid;


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


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


// Some interaction // Some interaction
mytree.addItemClickListener(event -> // Java 8
myCheckBoxGroup.addValueChangeListener(event ->
Notification.show("Selected " + 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. 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 For example, earlier we had [literal]#++<vaadin-vertical-layout>++# element in the

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

[[application.overview]] [[application.overview]]
= 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 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 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. create and manage the user interface components that make up the user interface.
by the application server or the application itself. by the application server or the application itself.


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


<<figure.application.architecture>> illustrates the basic architecture of an <<figure.application.architecture>> illustrates the basic architecture of an
application made with the Vaadin Framework, with all the major elements, which application made with the Vaadin Framework, with all the major elements, which
are introduced below and discussed in detail in this chapter. 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 the abstract [classname]#com.vaadin.ui.UI# class and implement the
[methodname]#init()# method. A custom theme can be defined as an annotation for [methodname]#init()# method. A custom theme can be defined as an annotation for
the UI. the 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 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, 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 each having a distinct [classname]#UI# instance. The UIs of an application can
be the same UI class or different. 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 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 user interface. This, and the deployment of a UI as a Java Servlet in the


UI:: A __UI__ represents an HTML fragment in which a Vaadin application runs in a web 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. 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 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 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 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 object) is automatically created for it. All of them share the same user
session. session.


content root layout at the top of the hierarchy. User interaction with the content root layout at the top of the hierarchy. User interaction with the
components causes __events__ related to the component, which the application can components causes __events__ related to the component, which the application can
handle. __Field components__ are intended for inputting values and can be 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 interface components through either inheritance or composition. For a thorough
reference of user interface components, see reference of user interface components, see
<<dummy/../../../framework/components/components-overview.asciidoc#components.overview,"User <<dummy/../../../framework/components/components-overview.asciidoc#components.overview,"User
<<dummy/../../../framework/components/components-customcomponent#components.customcomponent,"Composition <<dummy/../../../framework/components/components-customcomponent#components.customcomponent,"Composition
with CustomComponent">>. 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 listeners that handle the events, are the basis of handling user interaction in
an application (although also server push is possible as described in an application (although also server push is possible as described in
<<dummy/../../../framework/advanced/advanced-push#advanced.push,"Server <<dummy/../../../framework/advanced/advanced-push#advanced.push,"Server
<<dummy/../../../framework/application/application-resources#application.resources.theme,"Theme <<dummy/../../../framework/application/application-resources#application.resources.theme,"Theme
Resources">>. 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 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 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 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 For a complete overview of data binding in Vaadin, please refer to
<<dummy/../../../framework/datamodel/datamodel-overview.asciidoc#datamodel.overview,"Binding <<dummy/../../../framework/datamodel/datamodel-overview.asciidoc#datamodel.overview,"Binding
Components to Data">>. Components to Data">>.

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

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

The user interface of a server-side Vaadin application is rendered in the 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 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 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>>. The client-side engine is illustrated in <<figure.architecture.client-side>>.


[[figure.architecture.client-side]] [[figure.architecture.client-side]]

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

[[architecture.events]] [[architecture.events]]
= Events and Listeners = 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 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 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 interface frameworks follow the __Event-Listener pattern__ (also known as the
Observer design pattern) to communicate user input to the application logic. So 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 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 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. 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 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 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 lack of user interaction. Time-out is a special case of timed or scheduled
Most components that have related events define their own event class and the Most components that have related events define their own event class and the
corresponding listener class. For example, the [classname]#Button# has corresponding listener class. For example, the [classname]#Button# has
[classname]#Button.ClickEvent# events, which can be listened to through the [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] [source, java]
---- ----
final Button button = new Button("Push it!"); 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 <<figure.eventlistenerdiagram>> illustrates the case where an
application-specific class inherits the [classname]#Button.ClickListener# application-specific class inherits the [classname]#Button.ClickListener#
interface to be able to listen for button click events. The application must interface to be able to listen for button click events. The application must
instantiate the listener class and register it with 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, [classname]#Button.ClickEvent#. The event object knows the related UI component,
in this case the [classname]#Button#. in this case the [classname]#Button#.


.Class Diagram of a Button Click Listener .Class Diagram of a Button Click Listener
image::img/events-classdiagram-hi.png[width=80%, scaledwidth=100%] 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. <<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

[[architecture.overview]] [[architecture.overview]]
= 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 browser) and for the server-side. The server-driven development model is
the more powerful one, allowing application development solely on the the more powerful one, allowing application development solely on the
server-side, by utilizing an AJAX-based Vaadin Client-Side Engine that renders server-side, by utilizing an AJAX-based Vaadin Client-Side Engine that renders

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

((("Google Web ((("Google Web
Toolkit"))) Toolkit")))
This section provides an introduction to the various technologies and designs, 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]] [[architecture.technology.html]]
== HTML and JavaScript == HTML and JavaScript
based on the use of the Hypertext Markup Language (HTML). HTML defines the 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 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 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 although conservatively, to the extent supported by the major browsers, and
their currently most widely used versions. their currently most widely used versions.


JavaScript, on the other hand, is a programming language for embedding programs JavaScript, on the other hand, is a programming language for embedding programs
in HTML pages. JavaScript programs can manipulate a HTML page through the 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 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 this, although it is actually programmed in Java, which is compiled to
JavaScript with the Vaadin Client Compiler. 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 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 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 it is possible to use HTML templates for defining the layout, as well as HTML
syntax. syntax.


((("themes"))) ((("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 images, fonts, and other resources. Vaadin themes are specifically written in
Sass. In development mode, Sass files are compiled automatically to CSS. For 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. production use, you compile the Sass files to CSS with the included compiler.




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


((("Google Web ((("Google Web
Toolkit"))) 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 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 the browser easily with Java instead of JavaScript. Client-side modules are
developed with Java and compiled into JavaScript with the Vaadin Compiler, which developed with Java and compiled into JavaScript with the Vaadin Compiler, which
GWT is essentially a client-side technology, normally used to develop user 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 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 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 communications and allows handling user interaction logic in a server-side
application. This makes the architecture of an AJAX-based web application much 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 applications, as described in
<<dummy/../../../framework/clientsideapp/clientsideapp-overview.asciidoc#clientsideapp.overview,"Client-Side <<dummy/../../../framework/clientsideapp/clientsideapp-overview.asciidoc#clientsideapp.overview,"Client-Side
Applications">>. Applications">>.
See See
<<dummy/../../../framework/architecture/architecture-client-side#architecture.client-side,"Client-Side <<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 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 <<dummy/../../../framework/clientside/clientside-overview.asciidoc#clientside.overview,"Client-Side
Vaadin Development">> provides information about the client-side development, Vaadin Development">> provides information about the client-side development,
and and
Web applications are usually packaged and deployed to a server as __WAR__ ( Web applications are usually packaged and deployed to a server as __WAR__ (
__Web application ARchive__) files, which are Java JAR packages, which in turn __Web application ARchive__) files, which are Java JAR packages, which in turn
are ZIP compressed packages. The web application is defined in a 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 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 server through the __Java Servlet API__. They can generate HTML or other content
in in
<<dummy/../../../framework/application/application-overview.asciidoc#application.overview,"Writing <<dummy/../../../framework/application/application-overview.asciidoc#application.overview,"Writing
a Server-Side Web Application">>. The class is given as a parameter to the 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. 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. 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



`vaadin-archetype-application`:: `vaadin-archetype-application`::
This is a single-module project for simple applications. 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`:: `vaadin-archetype-application-multimodule`::
A complete Vaadin application development setup.
A complete Vaadin Framework application development setup.
It features separate production and development profiles. It features separate production and development profiles.


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


`vaadin-archetype-widget`:: `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. 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`:: `vaadin-archetype-liferay-portlet`::
A portlet development setup for the open-source Liferay portal. A portlet development setup for the open-source Liferay portal.

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



. Open a web browser to use the web application . Open a web browser to use the web application



We also show how you can debug the application in the debug mode in Eclipse. 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 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">>. <<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]] [[getting-started.first-project.creation]]
== Creating a Maven Project == 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. Let us create the first application project with the tools installed in the previous section.
First, launch Eclipse and follow the following steps: First, launch Eclipse and follow the following steps:


. Start creating a new project by selecting from the menu "File > New > Project...". . 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#. Project (Maven)" and click [guibutton]#Next#.
+ +
image::img/myproject-new-vaadin.png[width=70%, scaledwidth=90%] image::img/myproject-new-vaadin.png[width=70%, scaledwidth=90%]
name.setCaption("Type your name here:"); name.setCaption("Type your name here:");


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


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


setContent(layout); setContent(layout);
} }
. Switch to the [guilabel]#Servers# tab in the lower panel in Eclipse. . Switch to the [guilabel]#Servers# tab in the lower panel in Eclipse.
List of servers should be empty after Eclipse is installed. List of servers should be empty after Eclipse is installed.
Right-click on the empty area in the panel and select "New > Server". 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#. . 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. . 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, right-click on the server and select [guilabel]#Debug#.
To start the server in non-debug mode, select [guilabel]#Start#. 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/. . 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]] [[getting-started.first-project.run]]
== Running and Debugging == Running and Debugging
[guilabel]#Project Explorer# and then "Run > Debug As > Debug on Server". [guilabel]#Project Explorer# and then "Run > Debug As > Debug on Server".
Eclipse then opens the application in built-in web browser. 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 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 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 the [methodname]#buttonClick()# method and click the [guibutton]#What is the
<<dummy/../../../framework/clientside/clientside-debugging#clientside.debugging,"Debugging Client-Side Code">>. <<dummy/../../../framework/clientside/clientside-debugging#clientside.debugging,"Debugging Client-Side Code">>.


[[getting-started.eclipse.mavenlibraryupdate]] [[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 project specific, as a different version might be required for different
projects, so you have to update them separately for each project. projects, so you have to update them separately for each project.




If you experience problems after updating the libraries, you can try using If you experience problems after updating the libraries, you can try using
"Maven > Update Project". "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



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. 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]] [[getting-started.idea.project]]
== Creating a Vaadin Web Application Project == Creating a Vaadin Web Application Project


+ +
Click [guibutton]#Next#. 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 . Select Vaadin [guilabel]#Version# and [guilabel]#Distribution# installation
path. You probably also want an application stub, so select [guilabel]#Create path. You probably also want an application stub, so select [guilabel]#Create
. Select [guilabel]#Application Server# in the same window. . 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">>. 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#. . Click [guibutton]#Finish#.


The project is created with the UI class stub and a [filename]#web.xml# The project is created with the UI class stub and a [filename]#web.xml#
[literal]#++vaadin-archetype-application++#, and [guilabel]#Version# [literal]#++vaadin-archetype-application++#, and [guilabel]#Version#
[literal]#++LATEST++# (or a specific version number). [literal]#++LATEST++# (or a specific version number).


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

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


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


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

+ +
Click [guibutton]#Next#. Click [guibutton]#Next#.
//&lt;?dbfo-need height="8cm" ?&gt; //&lt;?dbfo-need height="8cm" ?&gt;
. Review the general Maven settings and settings for the new project. . 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. 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#. Click [guibutton]#Finish#.


. Enter a [guilabel]#Name# for the run configuration. . 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. 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#. Click [guibutton]#OK#.


. Select the run configuration in the toolbar and click the [guibutton]#Run# . Select the run configuration in the toolbar and click the [guibutton]#Run#
button beside it. 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 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 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

[[getting-started.libraries]] [[getting-started.libraries]]
= Vaadin 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 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. applications, whether you use add-on components, or use CSS or Sass themes.


It requires the [filename]#vaadin-shared# and the [filename]#vaadin-themes# libraries. 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. 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#:: [filename]#vaadin-shared-8.x.x.jar#::
A shared library for server-side and client-side development. A shared library for server-side and client-side development.
It is always needed. 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#:: [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 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. 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. 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 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">>. 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 For detailed information regarding the compiler, see
<<dummy/../../../framework/clientside/clientside-compiling#clientside.compiling,"Compiling a Client-Side Module">>. <<dummy/../../../framework/clientside/clientside-compiling#clientside.compiling,"Compiling a Client-Side Module">>.
Note that you should not deploy this library with a web application. 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. 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. 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

In addition to regular Maven, you can use any Maven-compatible build or 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 dependency management system, such as Ivy or Gradle. For Gradle, see the
link:https://github.com/johndevs/gradle-vaadin-plugin[Gradle Vaadin Plugin]. 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]. 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. It automatically generates you the command to create a new project based on archetype selection.


[parameter]#archetypeVersion#:: [parameter]#archetypeVersion#::
Version of the archetype to use. 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 [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 in reverse order, such as com.example. The group ID is also used as a prefix for






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]] [[getting-started.maven.compiling]]
== Compiling and Running the Application == Compiling and Running the Application

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

[[getting-started.overview]] [[getting-started.overview]]
= 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 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 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: In this chapter, we:


* Give an overview of the Vaadin libraries
* Give an overview of the Vaadin Framework libraries
* List the available Maven archetypes * 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. * 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

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

project by selecting it and pressing kbd:[F5]. 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. 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

of the operating system. of the operating system.


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


You can install the plugin as follows: You can install the plugin as follows:


image::img/plugin-install-addsite.png[] image::img/plugin-install-addsite.png[]
+ +
Enter a name such as "Vaadin Update Site" and the URL of the update site: 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 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#. distinctive name such as "Vaadin Experimental Site". Then click [guibutton]#OK#.
The Vaadin site should now appear in the [guilabel]#Available Software# window. The Vaadin site should now appear in the [guilabel]#Available Software# window.


[guibutton]#Restart#. [guibutton]#Restart#.


More installation instructions for the Eclipse plugin can be found at 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

= Installing Java SDK = Installing Java SDK


A Java SDK is required by Vaadin and also by any of the Java IDEs. 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. Java EE 7 is required for proper server push support with WebSockets.


[[installing.java.windows]] [[installing.java.windows]]


Most Linux systems either have JDK preinstalled or allow installing it through a 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 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. 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 . 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/] 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

[[installing.server]] [[installing.server]]
= Installing a Web 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. 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. 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 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. 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

* link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[Oracle Java SE 8] * 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://www.eclipse.org/downloads/[Eclipse IDE for Java EE Developers]
* link:http://tomcat.apache.org/[Apache Tomcat 8.0 (Core)] * 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] * link:http://vaadin.com/download/[Vaadin Framework]


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

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

success of GWT as a foundation of the Java web development community. success of GWT as a foundation of the Java web development community.


[[intro.background.vaadin8]] [[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. 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. 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. 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



Because our goals are high, the focus must be clear. Vaadin is designed for 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 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. for such purposes.





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

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


@Title("My UI") @Title("My UI")
@Theme("valo")
public class HelloWorld extends UI { public class HelloWorld extends UI {
@Override @Override
protected void init(VaadinRequest request) { protected void init(VaadinRequest request) {
<<dummy/../../../framework/application/application-environment#application.environment,"Deploying <<dummy/../../../framework/application/application-environment#application.environment,"Deploying
an Application">>. During development, you typically deploy to an application an Application">>. During development, you typically deploy to an application
server integrated with the IDE. 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