////
[[advanced.windows.popup]]
-== Opening Popup Windows
+== Opening Pop-up Windows
((("popup windows")))
((("windows", "popup")))
-Popup windows are native browser windows or tabs opened by user interaction with
-an existing window. Due to browser security reasons, it is made incovenient for
+Pop-up windows are native browser windows or tabs opened by user interaction with
+an existing window. Due to browser security reasons, it is made inconvenient for
a web page to open popup windows using JavaScript commands. At the least, the
browser will ask for a permission to open the popup, if it is possible at all.
This limitation can be circumvented by letting the browser open the new window
causes the browser to open a window or tab when the component is clicked.
[[advanced.windows.popup.ui]]
-=== The Popup Window UI
+=== The Pop-up Window UI
A popup Window displays an [classname]#UI#. The UI of a popup window is defined
just like a main UI in a Vaadin application, and it can have a theme, title, and
application. You normally set a layout component as the content of the UI and
fill it with other components.
-
[source, java]
----
public class MyHierarchicalUI extends UI {
VerticalLayout content = new VerticalLayout();
content.setSizeFull(); // Use entire window
setContent(content); // Attach to the UI
-
+
// Add some component
content.addComponent(new Label("Hello!"));
-
+
// Layout inside layout
HorizontalLayout hor = new HorizontalLayout();
hor.setSizeFull(); // Use all available space
The result is shown in <<figure.application.architecture.example>>.
[[figure.application.architecture.example]]
-.Simple Hierarchical UI
-image::img/ui-architecture-hierarchical.png[]
+.Simple hierarchical UI
+image::img/ui-architecture-hierarchical.png[width=70%, scaledwidth=90%]
Instead of building the layout in Java, you can also use a declarative design,
as described later in
addComponent(entry);
addComponent(display);
addComponent(click);
-
+
// Configure it a bit
setSizeFull();
addStyleName("myview");
public MyView() {
Layout layout = new VerticalLayout();
-
+
layout.addComponent(entry);
layout.addComponent(display);
layout.addComponent(click);
-
+
setCompositionRoot(layout);
-
+
setSizeFull();
}
}
// Set the page title (window or tab caption)
Page.getCurrent().setTitle("My Page");
-
+
// Set a session attribute
VaadinSession.getCurrent().setAttribute("myattrib", "hello");
<<dummy/../../../framework/advanced/advanced-global#advanced.global.threadlocal,"ThreadLocal
Pattern">>.
endif::web[]
-
-
-
-
[[figure.application.architecture]]
.Server-Side Application Architecture
-image::img/application-architecture-hi.png[]
+image::img/application-architecture-hi.png[width=70%, scaledwidth=100%]
<<figure.application.architecture>> illustrates the basic architecture of an
application made with the Vaadin Framework, with all the major elements, which
Vaadin, please refer to
<<dummy/../../../framework/datamodel/datamodel-overview.asciidoc#datamodel.overview,"Binding
Components to Data">>.
-
-
-
-
-
[[figure.resource.classdiagram]]
.Resource Interface and Class Diagram
-image::img/resource_classdiagram-hi.png[]
-
+image::img/resource_classdiagram-hi.png[width=70%, scaledwidth=90%]
[[application.resources.file]]
== File Resources
the other folders of a web application. This is a security solution - another
would be to store the resource elsewhere in the file system.
-
[source, java]
----
// Find the application directory
// Show the image in the application
Image image = new Image("Image from file", resource);
-
+
// Let the user view the file in browser or download it
Link link = new Link("Link to the image file", resource);
----
[[figure.application.resources.file]]
.File Resource
-image::img/resource-fileresource.png[]
+image::img/resource-fileresource.png[width=50%, scaledwidth=80%]
[[application.resources.class]]
[[figure.application.resources.theme]]
.Theme Resources
-image::img/resource-themeimage.png[]
+image::img/resource-themeimage.png[width=40%, scaledwidth=70%]
To use theme resources, you must set the theme for the UI. See
<<dummy/../../../framework/themes/themes-overview.asciidoc#themes.overview,"Themes">>
implements StreamResource.StreamSource {
ByteArrayOutputStream imagebuffer = null;
int reloads = 0;
-
+
/* We need to implement this method that returns
* the resource as a stream. */
public InputStream getStream () {
/* Write the image to a buffer. */
imagebuffer = new ByteArrayOutputStream();
ImageIO.write(image, "png", imagebuffer);
-
+
/* Return a stream from the buffer. */
return new ByteArrayInputStream(
imagebuffer.toByteArray());
----
// Create an instance of our stream source.
StreamResource.StreamSource imagesource = new MyImageSource ();
-
+
// Create a resource that uses the stream source and give it a name.
// The constructor will automatically register the resource in
// the application.
StreamResource resource =
new StreamResource(imagesource, "myimage.png");
-
+
// Create an image component that gets its contents
// from the resource.
layout.addComponent(new Image("Image title", resource));
Another way to create dynamic content is a request handler, described in
<<dummy/../../../framework/advanced/advanced-requesthandler#advanced.requesthandler,"Request
Handlers">>.
-
-
-
-
[[figure.architecture.client-side]]
.Vaadin Client-Side Engine
-image::img/clientside-arch-hi.png[]
+image::img/clientside-arch-hi.png[width=60%, scaledwidth=90%]
The client-side framework includes two kinds of built-in widgets: GWT widgets
and Vaadin-specific widgets. The two widget collections have significant
components is described in
<<dummy/../../../framework/gwt/gwt-overview.asciidoc#gwt.overview,"Integrating
with the Server-Side">>.
-
-
-
In the following, we handle button clicks with a listener implemented as an
anonymous class:
-
[source, java]
----
final Button button = new Button("Push it!");
[[figure.eventlistenerdiagram]]
.Class Diagram of a Button Click Listener
-image::img/events-classdiagram-hi.png[]
+image::img/events-classdiagram-hi.png[width=50%, scaledwidth=75%]
+
+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.
[[figure.architecture.detailed]]
.Vaadin Runtime Architecture
-image::img/architecture-detailed-hi.png[]
+image::img/architecture-detailed-hi.png[width=70%, scaledwidth=100%]
<<figure.architecture.detailed>> gives a basic illustration of the client-side
and server-side communications, in a running situation where the page with the
[[figure.architecture.technology.servlet]]
.Java Web Applications and Servlets
-image::img/java-servlet-hi.png[]
+image::img/java-servlet-hi.png[width=40%, scaledwidth=70%]
Web applications are usually packaged and deployed to a server as __WAR__ (
__Web application ARchive__) files, which are Java JAR packages, which in turn
[filename]#VAADIN/widgetsets# path in the web application. The precompiled
default widget set is served from the [filename]#vaadin-client-compiled# JAR by
the Vaadin Servlet.
-
-
-
-
client-side module or a Vaadin widget set, that is, the Vaadin Client-Side
Engine that includes the widgets used in the application. The client module is
defined with a module descriptor, which was described in
-<<dummy/../../../framework/clientside/clientside-module#clientside.module,"Client-Side
-Module Descriptor">>.
+<<clientside-module#clientside.module, "Client-Side Module Descriptor">>.
The compiler writes the compilation result to a target folder that will include
the compiled JavaScript with any static resources included in the module.
== Compiling in Eclipse
When the Vaadin Plugin is installed in Eclipse, you can simply click the
-[guibutton]#Compile Vaadin widgets# button in the toolbar. It will compile the
-widget set it finds from the project. If the project has multiple widget sets,
-such as one for custom widgets and another one for the project, you need to
-select the module descriptor of the widget set to compile before clicking the
-button.
+button in the toolbar.
+It will compile the widget set it finds from the project.
+If the project has multiple widget sets, such as one for custom widgets and another one for the project, you need to select the module descriptor of the widget set to compile before clicking the button.
The compilation with Vaadin Plugin for Eclipse currently requires that the
module descriptor has suffix [filename]#Widgetset.gwt.xml#, although you can use
== Compiling with Ant
You can find a script template for compiling widget sets with Ant and Ivy at the
-link:http://vaadin.com/download/[Vaadin download page]. You can copy the build
-script to your project and, once configured, run it with Ant.
-
+link:http://vaadin.com/download/[Vaadin download page].
+You can copy the build script to your project and, once configured, run it with Ant.
[[clientside.compiling.maven]]
== Compiling with Maven
Notification.show("Do not press this button again");
}
});
+
+// Java 8
+button.addClickListener(click ->
+ Notification.show("Do not press this button again"));
----
See the http://demo.vaadin.com/book-examples-vaadin7/book#component.button.basic[on-line example, window="_blank"].
-The result is shown in <<figure.component.button.basic>>. The listener can also
-be given in the constructor, which is often perhaps simpler.
+The listener can also be given in the constructor, which is often perhaps simpler.
+
+The button component can be styled in many ways, as illustrated in <<figure.component.button.basic>>.
[[figure.component.button.basic]]
.Button in Different Styles of Valo Theme
-image::img/button-example1.png[]
+image::img/button-example1.png[width=70%, scaledwidth=100%]
If you handle several buttons in the same listener, you can differentiate
between them either by comparing the [classname]#Button# object reference
returned by the [methodname]#getButton()# method of
[classname]#Button.ClickEvent# to a kept reference. For a detailed description
of these patterns together with some examples, please see
-<<dummy/../../../framework/architecture/architecture-events#architecture.events,"Events
-and Listeners">>.
+<<dummy/../../../framework/architecture/architecture-events#architecture.events,"Events and Listeners">>.
== CSS Style Rules
Some built-in themes contain a small style, which you can enable by adding
[parameter]#Reindeer.BUTTON_SMALL#, etc. The [classname]#BaseTheme# also has a
[parameter]#BUTTON_LINK# style, which makes the button look like a hyperlink.
-
-
-
-
selections, event dragging, and event resizing can be listened by the server.
The weekly view has navigation buttons to navigate forward and backward in time.
These actions are also listened by the server. Custom navigation can be
-implemented using event handlers
-
-ifdef::web[]
-, as described in
-<<components.calendar.customizing>>
-endif::web[]
-.
+implemented using event
+ifdef::web[handlers, as described in <<components.calendar.customizing>>.]
+ifndef::web[handlers.]
The data source of a calendar can be practically anything, as its events are
queried dynamically by the component. You can bind the calendar to a Vaadin
[[figure.components.calendar.daterange.monthly]]
.Monthly view with All-Day and Normal Events
-image::img/calendar-monthly.png[]
+image::img/calendar-monthly.png[width=60%, scaledwidth=100%]
The monthly view, shown in <<figure.components.calendar.daterange.monthly>>, can
easily be used to control all types of events, but it is best suited for events
[[figure.components.calendar.daterange.weekly]]
.Weekly View
-image::img/calendar-weekly.png[]
+image::img/calendar-weekly.png[width=60%, scaledwidth=100%]
In <<figure.components.calendar.daterange.weekly>>, you can see four normal day
events and also all-day events at the top of the time line grid.
[[figure.components.checkbox.basic]]
.An Example of a Check Box
-image::img/checkbox-example1.png[]
+image::img/checkbox-example1.png[width=35%, scaledwidth=50%]
For an example on the use of check boxes in a table, see
<<dummy/../../../framework/components/components-table#components.table,"Table">>.
The top-level element of a [classname]#CheckBox# has the
[literal]#++v-checkbox++# style. It contains two sub-elements: the actual check
box [literal]#++input++# element and the [literal]#++label++# element. If you
-want to have the label on the left, you can change the positions with "
-[literal]#++direction: rtl++#" for the top element.
-
-
-
-
+want to have the label on the left, you can change the positions with "[literal]#++direction: rtl++#" for the top element.
Components">>.
.The [classname]#ComboBox# Component
-image::img/combobox-basic.png[]
+image::img/combobox-basic.png[width=35%, scaledwidth=50%]
[classname]#ComboBox# supports adding new items when the user presses
kbd:[Enter].
[[figure.components.combobox.filter]]
.Filtered Selection in [classname]#ComboBox#
-image::img/combobox-filtering.png[]
+image::img/combobox-filtering.png[width=35%, scaledwidth=50%]
Pressing kbd:[Enter] will complete the item in the input box. Pressing kbd:[Up] and kbd:[Down] arrow keys can be used for selecting an item from the drop-down list. The
drop-down list is paged and clicking on the scroll buttons will change to the
[parameter]#STARTSWITH#:: Matches only items that begin with the given string.
-[parameter]#OFF#(default):: Filtering is by default off and all items are shown all the time.
+[parameter]#OFF# (default):: Filtering is by default off and all items are shown all the time.
For example:
-
[source, java]
----
class MyComposite extends CustomComponent {
VerticalLayout panelContent = new VerticalLayout();
panelContent.setMargin(true); // Very useful
panel.setContent(panelContent);
-
+
// Compose from multiple components
Label label = new Label(message);
label.setSizeUndefined(); // Shrink
You can use the component as follows:
-
[source, java]
----
MyComposite mycomposite = new MyComposite("Hello");
The rendered component is shown in <<figure.components.customcomponent>>.
[[figure.components.customcomponent]]
-.A Custom Composite Component
-image::img/customcomponent-example1.png[]
+.A custom composite component
+image::img/customcomponent-example1.png[width=25%, scaledwidth=40%]
You can also inherit any other components, such as layouts, to attain similar
-composition. ((("Google Web
-Toolkit")))
+composition.
+((("Google Web Toolkit")))
Even further, you can create entirely new low-level components, by integrating
pure client-side components or by extending the client-side functionality of
built-in components. Development of new components is covered in
<<dummy/../../../framework/gwt/gwt-overview.asciidoc#gwt.overview,"Integrating
with the Server-Side">>.
-
-
-
[[components.customfield]]
= Composite Fields with [classname]#CustomField#
-The [classname]#CustomField# is a way to create composite components like with
-[classname]#CustomComponent#, except that it implements the
-[interfacename]#Field# interface and inherit [classname]#AbstractField#,
-described in
-<<dummy/../../../framework/components/components-fields#components.fields,"Field
-Components">>. A field allows editing a property value in the Vaadin data model,
-and can be bound to data with field groups, as described in
-<<dummy/../../../framework/datamodel/datamodel-itembinding#datamodel.itembinding,"Creating
-Forms by Binding Fields to Items">>. The field values are buffered and can be
-validated with validators.
-
-A composite field class must implement the [methodname]#getType()# and
-[methodname]#initContent()# methods. The latter should return the content
-composite of the field. It is typically a layout component, but can be any
-component.
+The [classname]#CustomField# is a way to create composite components as with [classname]#CustomComponent#, except that it implements the [interfacename]#Field# interface and inherits [classname]#AbstractField#, described in <<dummy/../../../framework/components/components-fields#components.fields,"Field Components">>.
+A field allows editing a property value in the Vaadin data model, and can be bound to data with field groups, as described in <<dummy/../../../framework/datamodel/datamodel-itembinding#datamodel.itembinding, "Creating Forms by Binding Fields to Items">>.
+The field values are buffered and can be validated with validators.
+
+A composite field class must implement the [methodname]#getType()# and [methodname]#initContent()# methods.
+The latter should return the content composite of the field.
+It is typically a layout component, but can be any component.
It is also possible to override [methodname]#validate()#,
[methodname]#setInternalValue()#, [methodname]#commit()#,
to implement different functionalities in the field. Methods overriding
[methodname]#setInternalValue()# should call the superclass method.
+[[components.customfield.basic]]
+== Basic Use
+
+Let us consider a simple custom switch button component that allows you to click a button to switch it "on" and "off", as illustrated in <<figure.components.customfield.basic>>.
+
+[[figure.components.customfield.basic]]
+.A custom switch button field
+image::img/customfield-basic.png[width=25%, scaledwidth=40%]
+
+The field has [classname]#Boolean# value type, which the [methodname]#getType()# returns.
+In [methodname]#initContent()#, we initialize the button and the layout.
+Notice how we handle user interaction with the button to change the field value.
+We customize the [methodname]#setValue()# method to reflect the state back to the user.
+
+[source, Java]
+----
+public class BooleanField extends CustomField<Boolean> {
+ Button button = new Button();
+
+ public BooleanField() {
+ setValue(true); // On by default
+ }
+
+ @Override
+ protected Component initContent() {
+ // Flip the field value on click
+ button.addClickListener(click ->
+ setValue(! (Boolean) getValue()));
+
+ return new VerticalLayout(
+ new Label("Click the button"), button);
+ }
+
+ @Override
+ public Class<Boolean> getType() {
+ return Boolean.class;
+ }
+
+ @Override
+ public void setValue(Boolean newFieldValue)
+ throws com.vaadin.data.Property.ReadOnlyException,
+ ConversionException {
+ button.setCaption(newFieldValue? "On" : "Off");
+ super.setValue(newFieldValue);
+ }
+}
+----
+
+We can now use the field in all the normal ways for a field:
+
+[source, Java]
+----
+// Create it
+BooleanField field = new BooleanField();
+
+// It's a field so we can set its value
+field.setValue(new Boolean(true));
+// ...and read the value
+Label value = new Label(field.getValue()?
+ "Initially on" : "Initially off");
+// ...and handle value changes
+field.addValueChangeListener(event ->
+ value.setValue(field.getValue()?
+ "It's now on" : "It's now off"));
+----
----
// Create a DateField with the default style
DateField date = new DateField();
-
+
// Set the date and time to present
date.setValue(new Date());
----
[[figure.components.datefield.basic]]
.[classname]#DateField# ([classname]#PopupDateField#) for Selecting Date and Time
-image::img/datefield-example1.png[]
+image::img/datefield-example1.png[width=35%, scaledwidth=60%]
[[components.datefield.popupdatefield]]
== [classname]#PopupDateField#
[[figure.components.datefield.popupdatefield.format]]
.Custom Date Format for [classname]#PopupDateField#
-image::img/datefield-formatting.png[]
+image::img/datefield-formatting.png[width=35%, scaledwidth=60%]
The same format specification is also used for parsing user-input date and time,
as described later.
ConversionException("Not a number");
}
}
-
+
// Bad date
throw new Property.
ConversionException("Your date needs two slashes");
}
};
-
+
// Display only year, month, and day in slash-delimited format
date.setDateFormat("yyyy/MM/dd");
Notification.show(
"Your date needs two slashes",
Notification.TYPE_WARNING_MESSAGE);
-
+
// A failure must always also throw an exception
throw new Property.ConversionException("Bad date");
}
// Set the prompt
date.setInputPrompt("Select a date");
-
+
// Set width explicitly to accommodate the prompt
date.setWidth("10em");
----
[literal]#++.v-datefield-popup++# style. Observe that the popup frame is outside
the HTML structure of the component, hence it is not enclosed in the
[literal]#++v-datefield++# element and does not include any custom styles.
-//NOTE: May be changed in
-#5752.
+// NOTE: May be changed in #5752.
The content in the [literal]#++v-datefield-calendarpanel++# is the same as in
[classname]#InlineDateField#, as described in <<components.datefield.calendar>>.
-
-
[[components.datefield.calendar]]
== [classname]#InlineDateField#
The [classname]#InlineDateField# provides a date picker component with a month
view. The user can navigate months and years by clicking the appropriate arrows.
-Unlike with the popup variant, the month view is always visible in the inline
+Unlike with the pop-up variant, the month view is always visible in the inline
field.
----
// Create a DateField with the default style
InlineDateField date = new InlineDateField();
-
+
// Set the date and time to present
date.setValue(new java.util.Date());
----
[[figure.components.datefield.inlinedatefield]]
.Example of the [classname]#InlineDateField#
-image::img/datefield-inlinedatefield.png[]
+image::img/datefield-inlinedatefield.png[width=35%, scaledwidth=60%]
The user can also navigate the calendar using the cursor keys.
[literal]#++v-first++# and [literal]#++v-last++# styles allow making rounded
endings for the weekday bar.
-
-
[[components.datefield.resolution]]
== Date and Time Resolution
begins on Saturday. In such locales, the week numbers are not displayed.
endif::web[]
-
-
-
You can embed images in Vaadin UIs with the [classname]#Image# component, Adobe
Flash graphics with [classname]#Flash#, and other web content with
[classname]#BrowserFrame#. There is also a generic [classname]#Embedded#
-component for embedding other object types. The embedded content is referenced
-as __resources__, as described in
-<<dummy/../../../framework/application/application-resources#application.resources,"Images
-and Other Resources">>.
+component for embedding other object types.
+The embedded content is referenced as _resources_, as described in <<dummy/../../../framework/application/application-resources#application.resources,"Images and Other Resources">>.
The following example displays an image as a class resource loaded with the
class loader:
-
[source, java]
----
Image image = new Image("Yes, logo:",
empty caption which takes a bit space. The caption is managed by the containing
layout.
-You can set an altenative text for an embedded resource with
+You can set an alternative text for an embedded resource with
[methodname]#setAlternateText()#, which can be shown if images are disabled in
the browser for some reason. The text can be used for accessibility purposes,
such as for text-to-speech generation.
can cause a reload easiest by renaming the filename of the resource with a
unique name, such as one including a timestamp. You should set cache time to
zero with [methodname]#setCacheTime()# for the resource object when you create
-it.//BUG
-#2470.
+it.
+// BUG #2470.
[source, java]
== [classname]#BrowserFrame#
The [classname]#BrowserFrame# allows embedding web content inside an HTML
-<iframe> element. You can refer to an external URL with
+`<iframe>` element. You can refer to an external URL with
[classname]#ExternalResource#.
As the [classname]#BrowserFrame# has undefined size by default, it is critical
Some embeddable object types may require special support in the browser. You
should make sure that there is a proper fallback mechanism if the browser does
not support the embedded type.
-
-
-
-
The caption text can usually be given as the first parameter of a constructor of
a component or with [methodname]#setCaption()#.
-
[source, java]
----
// New text field with caption "Name"
[[figure.components.features.caption.layoutmanaged]]
.Caption Management by [classname]#VerticalLayout# and [classname]#FormLayout#.
-image::img/features-caption-layoutmanaged.png[]
+image::img/features-caption-layoutmanaged.png[width=50%,scaledwidth=65%]
Some components, such as [classname]#Button# and [classname]#Panel#, manage the
caption themselves and display it inside the component.
[[figure.components.tooltip.plain]]
.Component Description as a Tooltip
-image::img/tooltip-plain-withpointer-hi.png[]
+image::img/tooltip-plain-withpointer-hi.png[width=30%, scaledwidth=100%]
A description is rendered as a tooltip in most components.
When a component error has been set with [methodname]#setComponentError()#, the
error is usually also displayed in the tooltip, below the description.
Components that are in error state will also display the error indicator. See
-<<dummy/../../../framework/application/application-errors#application.errors.error-indicator,"Error
-Indicator and Message">>.
+<<dummy/../../../framework/application/application-errors#application.errors.error-indicator, "Error Indicator and Message">>.
The description is actually not plain text, but you can use HTML tags to format
it. Such a rich text description can contain any HTML elements, including
[source, java]
----
button.setDescription(
- "<h2><img src=\"../VAADIN/themes/sampler/icons/comment_yellow.gif\"/>"+
+ "<h2><img src=\"../VAADIN/themes/sampler/"+
+ "icons/comment_yellow.gif\"/>"+
"A richtext tooltip</h2>"+
"<ul>"+
" <li>Use rich formatting with HTML</li>"+
[[figure.components.tooltip.richtext]]
.A Rich Text Tooltip
-image::img/tooltip-richtext-withpointer-hi.png[]
+image::img/tooltip-richtext-withpointer-hi.png[width=40%, scaledwidth=75%]
Notice that the setter and getter are defined for all fields in the
[classname]#Field# interface, not for all components in the
[[figure.components.features.enabled.simple]]
.An Enabled and Disabled [classname]#Button#
-image::img/features-enabled-simple.png[]
+image::img/features-enabled-simple.png[width=30%, scaledwidth=50%]
A disabled component is automatically put in read-only state. No client
interaction with such a component is sent to the server and, as an important
This would make the border of all disabled text fields dotted.
-
-//TODO This may change to
-$v-button-disabled-opacity
-In Valo theme, the opacity of disabled components is specified with the
-$v-disabled-opacity parameter
-
-ifdef::web[]
-, as described in
-<<dummy/../../../framework/themes/themes-valo#themes.valo.variables,"Common
-Settings">>
-endif::web[]
-.
-
+// TODO This may change to $v-button-disabled-opacity
+In the Valo theme, the opacity of disabled components is specified with the
+`$v-disabled-opacity`
+ifndef::web[parameter.]
+ifdef::web[parameter, as described in <<dummy/../../../framework/themes/themes-valo#themes.valo.variables,"Common Settings">>]
[[components.features.icon]]
== Icon
[[figure.components.features.icon]]
.Displaying an Icon from a Theme Resource.
-image::img/features-icon.png[]
+image::img/features-icon.png[width=40%, scaledwidth=60%]
Some components, such as [classname]#Button# and [classname]#Panel#, manage the
icon themselves and display it inside the component.
----
See the http://demo.vaadin.com/book-examples-vaadin7/book#component.features.locale.simple[on-line example, window="_blank"].
-The resulting date field is shown in
-<<figure.components.features.locale.simple>>.
+The resulting date field is shown in <<figure.components.features.locale.simple>>.
[[figure.components.features.locale.simple]]
-.Set Locale for [classname]#InlineDateField#
-image::img/features-locale-simple.png[]
+.Set locale for [classname]#InlineDateField#
+image::img/features-locale-simple.png[width=40%, scaledwidth=60%]
ifdef::web[]
[[components.features.locale.get]]
awkward to use it for internationalization. You can get the locale in
[methodname]#attach()#, as shown in the following example:
-
[source, java]
----
Button cancel = new Button() {
However, it is normally a better practice to use the locale of the current UI to
get the localized resource right when the component is created.
-
[source, java]
----
// Captions are stored in MyAppCaptions resource bundle
layout.addComponent(cancel);
----
See the http://demo.vaadin.com/book-examples-vaadin7/book#component.features.locale.get-ui[on-line example, window="_blank"].
-
endif::web[]
ifdef::web[]
The user interface is shown in <<figure.components.features.locale.selection>>.
[[figure.components.features.locale.selection]]
-.Selecting a Locale
+.Selecting a locale
image::img/features-locale-selection.png[]
endif::web[]
property is mainly applicable to [classname]#Field# components, as they have a
value that can be edited by the user.
-
[source, java]
----
TextField readwrite = new TextField("Read-Write");
<<figure.components.features.readonly.simple>>.
[[figure.components.features.readonly.simple]]
-.A Read-Only Component.
-image::img/features-readonly-simple.png[]
+.A read-only component
+image::img/features-readonly-simple.png[width=50%, scaledwidth=80%]
Setting a layout or some other component container as read-only does not usually
make the contained components read-only recursively. This is different from, for
The following CSS rule would apply the style to any component that has the
[literal]#++mystyle++# style.
-
[source, css]
----
.mystyle {
}
----
-The resulting styled component is shown in
-<<figure.components.features.stylename>>
+The resulting styled component is shown in <<figure.components.features.stylename>>
[[figure.components.features.stylename]]
-.Component with a Custom Style
-image::img/features-stylename-simple.png[]
-
+.Component with a custom style
+image::img/features-stylename-simple.png[width=50%, scaledwidth=75%]
[[components.features.visible]]
== Visible
contain security-critical information that must only be shown in specific
application states.
-
[source, java]
----
TextField invisible = new TextField("No-see-um");
<<figure.components.features.visible.simple>>.
[[figure.components.features.visible.simple]]
-.An Invisible Component.
+.An invisible component
image::img/features-visible-simple.png[]
Beware that invisible beings can leave footprints. The containing layout cell
mycomponent.setHeight("400px");
----
-The " [literal]#++100%++#" percentage value makes the component take all
+The "[literal]#++100%++#" percentage value makes the component take all
available size in the particular direction (see the description of
[parameter]#Sizeable.UNITS_PERCENTAGE# in the table below). You can also use the
shorthand method [methodname]#setSizeFull()# to set the size to 100% in both
[parameter]#Sizeable.SIZE_UNDEFINED# parameter for [methodname]#setWidth()# and
[methodname]#setHeight()#.
-You always need to keep in mind that __a layout with undefined size may not
-contain components with defined relative size__, such as "full size". See
-<<dummy/../../../framework/layout/layout-settings#layout.settings.size,"Layout
-Size">> for details.
+Always keep in mind that _a layout with undefined size may not contain components with defined relative size_, such as "full size", except in some special cases.
+See <<dummy/../../../framework/layout/layout-settings#layout.settings.size,"Layout Size">> for details.
-The <<components.features.sizeable.units.table>> lists the available units and
-their codes defined in the [classname]#Sizeable# interface.
+The <<components.features.sizeable.units.table>> table lists the available units and their codes defined in the [interfacename]#Sizeable# interface.
[[components.features.sizeable.units.table]]
-.Size Units
-
+.Size units
+[cols="5,2,10", options="header"]
|===============
-|[parameter]#Unit.PIXELS#|px|The__pixel__is the basic hardware-specific measure of one physical display pixel.
-|[parameter]#Unit.POINTS#|pt|The__point__is a typographical unit, which is usually defined as 1/72 inches or about 0.35 mm. However, on displays the size can vary significantly depending on display metrics.
-|[parameter]#Unit.PICAS#|pc|The__pica__is a typographical unit, defined as 12 points, or 1/7 inches or about 4.233 mm. On displays, the size can vary depending on display metrics.
+|Constant|Unit|Description
+|[parameter]#Unit.PIXELS#|px|The _pixel_ is the basic hardware-specific measure of one physical display pixel.
+|[parameter]#Unit.POINTS#|pt|The _point_ is a typographical unit, which is usually defined as 1/72 inches or about 0.35 mm. However, on displays the size can vary significantly depending on display metrics.
+|[parameter]#Unit.PICAS#|pc|The _pica_ is a typographical unit, defined as 12 points, or 1/7 inches or about 4.233 mm. On displays, the size can vary depending on display metrics.
|[parameter]#Unit.EM#|em|A unit relative to the used font, the width of the upper-case "M" letter.
|[parameter]#Unit.EX#|ex|A unit relative to the used font, the height of the lower-case "x" letter.
|[parameter]#Unit.MM#|mm|A physical length unit, millimeters on the surface of a display device. However, the actual size depends on the display, its metrics in the operating system, and the browser.
-|[parameter]#Unit.CM#|cm|A physical length unit,__centimeters__on the surface of a display device. However, the actual size depends on the display, its metrics in the operating system, and the browser.
-|[parameter]#Unit.INCH#|in|A physical length unit,__inches__on the surface of a display device. However, the actual size depends on the display, its metrics in the operating system, and the browser.
-|[parameter]#Unit.PERCENTAGE#|%|A relative percentage of the available size. For example, for the top-level layout[parameter]#100%#would be the full width or height of the browser window. The percentage value must be between 0 and 100.
-
+|[parameter]#Unit.CM#|cm|A physical length unit, _centimeters_ on the surface of a display device. However, the actual size depends on the display, its metrics in the operating system, and the browser.
+|[parameter]#Unit.INCH#|in|A physical length unit, _inches_ on the surface of a display device. However, the actual size depends on the display, its metrics in the operating system, and the browser.
+|[parameter]#Unit.PERCENTAGE#|%|A relative percentage of the available size. For example, for the top-level layout [parameter]#100%# would be the full width or height of the browser window. The percentage value must be between 0 and 100.
|===============
-
-
-If a component inside [classname]#HorizontalLayout# or
-[classname]#VerticalLayout# has full size in the namesake direction of the
-layout, the component will expand to take all available space not needed by the
-other components. See
-<<dummy/../../../framework/layout/layout-settings#layout.settings.size,"Layout
-Size">> for details.
-
+If a component inside [classname]#HorizontalLayout# or [classname]#VerticalLayout# has full size in the namesake direction of the layout, the component will expand to take all available space not needed by the other components.
+See <<dummy/../../../framework/layout/layout-settings#layout.settings.size,"Layout Size">> for details.
== Managing Input Focus
a cursor. Pressing the Tab key moves the focus to the component next in the
__focus order__.
-Focusing is supported by all [classname]#Field# components and also by
-[classname]#Upload#.
+Focusing is supported by all [classname]#Field# components and also by the [classname]#Upload# component.
The focus order or __tab index__ of a component is defined as a positive integer
value, which you can set with [methodname]#setTabIndex()# and get with
relationships and the important interfaces and base classes.
[[figure.components.fields]]
-.Field Components
-image::img/field-diagram-hi.png[]
+.Field components
+image::img/field-diagram-hi.png[width=60%, scaledwidth=100%]
Field components are built upon the framework defined in the [classname]#Field#
interface and the [classname]#AbstractField# base class.
following sections.
[[components.fields.field]]
-== [classname]#Field# Interface
+== The [classname]#Field# Interface
The [classname]#Field# interface inherits the [classname]#Component#
superinterface and also the [classname]#Property# interface to have a value for
<<figure.components.fields.field>>.
[[figure.components.fields.field]]
-.[classname]#Field# Interface Inheritance Diagram
-image::img/field-interface-hi.png[]
+.[classname]#Field# interface inheritance
+image::img/field-interface-hi.png[width=60%, scaledwidth=100%]
You can set the field value with the [methodname]#setValue()# and read with the
[methodname]#getValue()# method defined in the [classname]#Property# interface.
The error message is set as the component error for the field and is usually
displayed in a tooltip when the mouse pointer hovers over the error indicator.
-
-
-
[[components.fields.databinding]]
== Data Binding and Conversions
Vaadin includes the following built-in validators. The property value type is
indicated.
-[classname]#BeanValidator#:: Validates a bean property according to annotations defined in the Bean
-Validation API 1.0 (JSR-303). This validator is usually not used explicitly, but
-they are created implicitly when binding fields in a
-[classname]#BeanFieldGroup#. Using bean validation requires an implementation
-library of the API. See
-<<dummy/../../../framework/datamodel/datamodel-itembinding#datamodel.itembinding.beanvalidation,"Bean
-Validation">> for details.
-
-[classname]#CompositeValidator#:: Combines validators using logical AND and OR operators.
+[classname]#BeanValidator#::
+Validates a bean property according to annotations defined in the Bean Validation API 1.0 (JSR-303).
+This validator is usually not used explicitly, but they are created implicitly when binding fields in a [classname]#BeanFieldGroup#.
+Using bean validation requires an implementation library of the API.
+See <<dummy/../../../framework/datamodel/datamodel-itembinding#datamodel.itembinding.beanvalidation,"Bean Validation">> for details.
-[classname]#DateRangeValidator#:[classname]#Date#:: Checks that the date value is within the range at or between two given
-dates/times.
+[classname]#CompositeValidator#::
+Combines validators using logical AND and OR operators.
-[classname]#DoubleRangeValidator#:[classname]#Double#:: Checks that the double value is at or between two given values.
+[classname]#DateRangeValidator#: [classname]#Date#::
+Checks that the date value is within the range at or between two given dates/times.
-[classname]#EmailValidator#:[classname]#String#:: Checks that the string value is a syntactically valid email address. The
-validated syntax is close to the RFC 822 standard regarding email addresses.
+[classname]#DoubleRangeValidator#: [classname]#Double#::
+Checks that the double value is at or between two given values.
-[classname]#IntegerRangeValidator#:[classname]#Integer#:: Checks that the integer value is at or between two given values.
+[classname]#EmailValidator#: [classname]#String#::
+Checks that the string value is a syntactically valid email address.
+The validated syntax is close to the RFC 822 standard regarding email addresses.
-[classname]#NullValidator#:: Checks that the value is or is not a null value.
+[classname]#IntegerRangeValidator#: [classname]#Integer#::
+Checks that the integer value is at or between two given values.
+[classname]#NullValidator#::
+Checks whether the value is or is not a null value.
+
For the validator to be meaningful, the component must support inputting null
values. For example, for selection components and [classname]#TextField#,
enables an indicator to indicate that a value is required.
endif::web[]
-[classname]#RegexpValidator#:[classname]#String#:: Checks that the value matches with the given regular expression.
+[classname]#RegexpValidator#: [classname]#String#::
+Checks that the value matches with the given regular expression.
-[classname]#StringLengthValidator#:[classname]#String#:: Checks that the length of the input string is at or between two given lengths.
+[classname]#StringLengthValidator#: [classname]#String#::
+Checks that the length of the input string is at or between two given lengths.
ifdef::web[]
+
Allowing null value is meaningful only if inputting null values is enabled with
[methodname]#setNullSettingAllowed(true)#, and typically in such case, you want
to set the null representation to empty string with
-[methodname]#setNullRepresentation("")#. Note that __this parameter is
-deprecated__ and should normally be [parameter]#true#; then you can use
+[methodname]#setNullRepresentation("")#. Note that _this parameter is
+deprecated_ and should normally be [parameter]#true#; then you can use
[methodname]#setRequired()# (for the false case) or [classname]#NullValidator#.
endif::web[]
-
-
Please see the API documentation for more details.
-
[[components.fields.validation.automatic]]
=== Automatic Validation
field.setNullRepresentation("");
field.setNullSettingAllowed(true);
layout.addComponent(field);
-
+
// Define validation as usual
field.addValidator(new StringLengthValidator(
"The name must be 1-10 letters (was {0})",
1, 10, true));
-
+
// Run validation explicitly
Button validate = new Button("Validate");
validate.addClickListener(new ClickListener() {
}
}
-final TextField field = new TextField("Say hello");
+TextField field = new TextField("Say hello");
field.addValidator(new MyValidator());
field.setImmediate(true);
layout.addComponent(field);
group runs the validation for all the fields in the group, and if successful,
writes the input values to the data source.
-
-
(((range="endofrange", startref="term.components.fields")))
-
-
shift-clicking a column header enables secondary sorting criteria.
[[figure.components.grid.features]]
-.A [classname]#Grid# Component
-image::img/grid-features.png[]
+.A [classname]#Grid#
+image::img/grid-features.png[width=70%, scaledwidth=100%]
The data area can be scrolled both vertically and horizontally. The leftmost
columns can be frozen, so that they are never scrolled out of the view. The data
[[figure.components.grid.selection.multi]]
.Multiple Selection in [classname]#Grid#
-image::img/grid-selection-multi.png[]
+image::img/grid-selection-multi.png[width=50%, scaledwidth=75%]
The selection is managed through the [classname]#MultiSelectionMode# class. The
currently selected rows can be set with [methodname]#setSelected()# by a
// Delete all selected data items
for (Object itemId: selection.getSelectedRows())
grid.getContainerDataSource().removeItem(itemId);
-
+
// Otherwise out of sync with container
grid.getSelectionModel().reset();
sorting on the generated properties requires special handling. In such cases,
generated properties or the entire container might not actually be sortable.
-
[[components.grid.renderer]]
== Column Renderers
value. This allows having images, HTML, and buttons in grid cells.
[[figure.components.grid.renderer]]
-.Column Renderers: Image, Date, HTML, and Button
-image::img/grid-renderers.png[]
-
-Renderers implement the [interfacename]#Renderer# interface. You set the column
-renderer in the [classname]#Grid.Column# object as follows:
+.Column renderers: image, date, HTML, and button
+image::img/grid-renderers.png[width=75%, scaledwidth=100%]
+Renderers implement the [interfacename]#Renderer# interface.
+You set the column renderer in the [classname]#Grid.Column# object as follows:
[source, java]
----
The following renderers are available, as defined in the server-side
[package]#com.vaadin.ui.renderers# package:
-[classname]#ButtonRenderer#:: Renders the data value as the caption of a button. A
-[interfacename]#RendererClickListener# can be given to handle the button clicks.
+[classname]#ButtonRenderer#:: Renders the data value as the caption of a button. A [interfacename]#RendererClickListener# can be given to handle the button clicks.
ifdef::web[]
++
Typically, a button renderer is used to display buttons for operating on a data
item, such as edit, view, delete, etc. It is not meaningful to store the button
captions in the data source, rather you want to generate them, and they are
usually all identical.
-
-
+
[source, java]
----
.removeItem(e.getItemId())));
----
endif::web[]
-[classname]#ImageRenderer#:: Renders the cell as an image. The column type must be a
-[interfacename]#Resource#, as described in
-<<dummy/../../../framework/application/application-resources#application.resources,"Images
-and Other Resources">>; only [classname]#ThemeResource# and
+
+[classname]#ImageRenderer#:: Renders the cell as an image.
+The column type must be a [interfacename]#Resource#, as described in
+<<dummy/../../../framework/application/application-resources#application.resources,"Images and Other Resources">>; only [classname]#ThemeResource# and
[classname]#ExternalResource# are currently supported for images in
[classname]#Grid#.
ifdef::web[]
-
++
[source, java]
----
grid.addColumn("picture", Resource.class)
could generate them dynamically from file name strings using a
[interfacename]#Converter# for the column.
-
+
[source, java]
----
}
----
endif::web[]
+
[classname]#DateRenderer#:: Formats a column with a [classname]#Date# type using string formatter. The
format string is same as for [methodname]#String.format()# in Java API. The date
is passed in the parameter index 1, which can be omitted if there is only one
-format specifier, such as " [literal]#++%tF++#".
+format specifier, such as "[literal]#++%tF++#".
ifdef::web[]
-
++
[source, java]
----
Grid.Column bornColumn = grid.getColumn("born");
component tree) is used.
endif::web[]
+
[classname]#HTMLRenderer#:: Renders the cell as HTML. This allows formatting cell content, as well as using
HTML features such as hyperlinks.
ifdef::web[]
++
First, set the renderer in the [classname]#Grid.Column# object:
-
-
+
[source, java]
----
Then, in the grid data, give the cell content:
endif::web[]
-
+
[source, java]
----
+
You could also use a [interfacename]#PropertyFormatter# or a generated column to
generate the HTML for the links.
-
endif::web[]
+
[classname]#NumberRenderer#:: Formats column values with a numeric type extending [classname]#Number#:
[classname]#Integer#, [classname]#Double#, etc. The format can be specified
either by the subclasses of [classname]#java.text.NumberFormat#, namely
[methodname]#String.format()#.
ifdef::web[]
++
For example:
-
-
+
[source, java]
----
must be between 0.0 and 1.0.
ifdef::web[]
++
For example:
-
-
+
[source, java]
----
[[figure.components.grid.filtering]]
.Filtering Grid
-image::img/grid-filtering.png[]
+image::img/grid-filtering.png[width=50%, scaledwidth=80%]
The filtering illustrated in <<figure.components.grid.filtering>> can be created
as follows:
for (Object pid: grid.getContainerDataSource()
.getContainerPropertyIds()) {
HeaderCell cell = filterRow.getCell(pid);
-
+
// Have an input field to use for filter
TextField filterField = new TextField();
filterField.setColumns(8);
-
+
// Update filter When the filter input is changed
filterField.addTextChangeListener(change -> {
// Can't modify filters so need to replace
container.removeContainerFilters(pid);
-
+
// (Re)create the filter if necessary
if (! change.getText().isEmpty())
container.addContainerFilter(
[[figure.components.grid.sorting]]
.Sorting Grid on Multiple Columns
-image::img/grid-sorting.png[]
+image::img/grid-sorting.png[width=50%, scaledwidth=75%]
Defining sort criteria programmatically can be done with the various
alternatives of the [methodname]#sort()# method. You can sort on a specific
[source, java]
----
-// Sort first by city and then by name
+// Sort first by city and then by name
grid.sort(Sort.by("city", SortDirection.ASCENDING)
.then("name", SortDirection.DESCENDING));
----
[[figure.components.grid.editing]]
.Editing a Grid Row
-image::img/grid-editor-basic.png[]
+image::img/grid-editor-basic.png[width=50%, scaledwidth=75%]
[[components.grid.editing.unbuffered]]
=== Unbuffered Mode
@NotNull
@Size(min=2, max=10)
private String name;
-
+
@Min(1)
- @Max(130)
+ @Max(130)
private int age;
...]
----
[[figure.components.grid.errors]]
.Editing a Grid Row
-image::img/grid-editor-errors.png[]
+image::img/grid-editor-errors.png[width=50%, scaledwidth=75%]
You can modify the error handling by implementing a custom
[interfacename]#EditorErrorHandler# or by extending the
((()))
-
-
the following. Label has 100% default width, so the containing layout must also
have defined width.
-
[source, java]
----
// A container that is 100% wide by default
accessing the text value, so you can get and set the text with
[methodname]#getValue()# and [methodname]#setValue()#.
-
[source, java]
----
// Get the label's text to initialize a field
TextField editor = new TextField(null, // No caption
label.getValue());
-
+
// Change the label's text
editor.addValueChangeListener(event -> // Java 8
label.setValue(editor.getValue()));
[[figure.components.label]]
.The Label Component
-image::img/label-example1.png[]
+image::img/label-example1.png[width=50%, scaledwidth=75%]
Setting [classname]#Label# to undefined width will cause it to not wrap at the
end of the line, as the width of the content defines the width. If placed inside
Label preLabel = new Label(
"Preformatted text is shown in an HTML <pre> tag.\n" +
"Formatting such as\n" +
- " * newlines\n" +
+ " * newlines\n" +
" * whitespace\n" +
"and such are preserved. HTML tags, \n"+
"such as <b>bold</b>, are quoted.",
[[figure.components.label.content-mode]]
.Label Content Modes
-image::img/label-modes.png[]
+image::img/label-modes.png[width=75%, scaledwidth=100%]
ifdef::web[]
// Some property
ObjectProperty<String> property =
new ObjectProperty<String>("some value");
-
+
// Label that is bound to the property
Label label = new Label(property);
----
The [classname]#Label# component has a [literal]#++v-label++# overall style. In
the [parameter]#PREFORMATTED# content mode, the text is wrapped inside a
[literal]#++<pre>++# element.
-
-
-
-
[[figure.components.link.basic]]
.[classname]#Link# Example
-image::img/link.png[]
+image::img/link.png[width=30%, scaledwidth=70%]
+
+[[components.link.new-window]]
+== Opening a New Window
With the simple constructor used in the above example, the resource is opened in
the current window. Using the constructor that takes the target window as a
application itself. You can use the special underscored target names, such as
[literal]#++_blank++# to open the link to a new browser window or tab.
-
[source, java]
----
// Hyperlink to a given URL
// Open the URL in a new window/tab
link.setTargetName("_blank");
-
+
// Indicate visually that it opens in a new window/tab
link.setIcon(new ThemeResource("icons/external-link.png"));
link.addStyleName("icon-after-caption");
----
See the http://demo.vaadin.com/book-examples-vaadin7/book#component.link.target[on-line example, window="_blank"].
-Normally, the link icon is before the caption. You can have it right of the
-caption by reversing the text direction in the containing element.
-
-
-[source, css]
-----
-/* Position icon right of the link caption. */
-.icon-after-caption {
- direction: rtl;
-}
-/* Add some padding around the icon. */
-.icon-after-caption .v-icon {
- padding: 0 3px;
-}
-----
-See the http://demo.vaadin.com/book-examples-vaadin7/book#component.link.target[on-line example, window="_blank"].
-
-The resulting link is shown in <<figure.components.link.new-window>>.
-
-[[figure.components.link.new-window]]
-.Link That Opens a New Window
-image::img/link-new.png[]
+[[components.link.pop-up]]
+== Opening as a Pop-Up Window
With the [literal]#++_blank++# target, a normal new browser window is opened. If
you wish to open it in a popup window (or tab), you need to give a size for the
[parameter]#TARGET_BORDER_MINIMAL#, and [parameter]#TARGET_BORDER_NONE#. The
exact result depends on the browser.
-
[source, java]
----
// Open the URL in a popup
----
See the http://demo.vaadin.com/book-examples-vaadin7/book#component.link.target[on-line example, window="_blank"].
-In addition to the [classname]#Link# component, Vaadin allows alternative ways
-to make hyperlinks. The [classname]#Button# component has a
-[parameter]#Reindeer.BUTTON_LINK# style name that makes it look like a
-hyperlink, while handling clicks in a server-side click listener instead of in
-the browser. Also, you can make hyperlinks (or any other HTML) in a
-[classname]#Label# in HTML content mode.
+== Alternatives
-== CSS Style Rules
+In addition to the [classname]#Link# component, Vaadin allows alternative ways to make hyperlinks.
+Also, you can make hyperlinks (or any other HTML) in a [classname]#Label# in HTML content mode.
+The [classname]#Button# component has a [parameter]#Reindeer.BUTTON_LINK# style name that makes it look like a hyperlink, while handling clicks in a server-side click listener instead of in the browser.
+However, browsers do not generally allow opening new windows from with browser code, so for such tasks you need to use the [classname]#BrowserWindowOpener# extension described in <<dummy/../../../framework/advanced/advanced-windows#advanced.windows.popup, "Opening Pop-up Windows">>
+
+
+== CSS Style Rules
[source, css]
----
[literal]#++a:link++# and [literal]#++a:visited++#, and [literal]#++a:active++#
after the [literal]#++a:hover++#.
+ifdef::web[]
+=== Icon Position
+Normally, the link icon is before the caption.
+You can have it right of the caption by reversing the text direction in the containing element.
+[source, css]
+----
+/* Position icon right of the link caption. */
+.icon-after-caption {
+ direction: rtl;
+}
+/* Add some padding around the icon. */
+.icon-after-caption .v-icon {
+ padding: 0 3px;
+}
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.link.target[on-line example, window="_blank"].
+
+The resulting link is shown in <<figure.components.link.new-window>>.
+
+[[figure.components.link.new-window]]
+.Link That Opens a New Window
+image::img/link-new.png[width=25%, scaledwidth=50%]
+
+endif::web[]
----
// Create the selection component
ListSelect select = new ListSelect("The List");
-
+
// Add some items (here by the item ID as the caption)
select.addItems("Mercury", "Venus", "Earth", ...);
[[figure.components.listselect.basic]]
.The [classname]#ListSelect# Component
-image::img/listselect-basic.png[]
+image::img/listselect-basic.png[width=35%, scaledwidth=50%]
Common selection component features are described in
-<<dummy/../../../framework/components/components-selection#components.selection,"Selection
-Components">>.
+<<dummy/../../../framework/components/components-selection#components.selection,"Selection Components">>.
== CSS Style Rules
The component has an overall [literal]#++v-select++# style. The native
[literal]#++<select>++# element has [literal]#++v-select-select++# style. The
items are represented as [literal]#++<option>++# elements.
-
-
-
-
image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/interaction/menu-bar"]
endif::web[]
-The [classname]#MenuBar# component allows creating horizontal dropdown menus,
-much like the main menu in desktop applications.
+The [classname]#MenuBar# component allows creating horizontal drop-down menus, much like the main menu in desktop applications.
[[figure.components.menubar]]
.Menu Bar
-image::img/menubar-example1.png[]
+image::img/menubar-example1.png[width=40%, scaledwidth=60%]
+
+The menu items open as the user navigates them by hovering or clicking with the mouse.
+Menus can have separators to divide items into sub-sections.
+Menu items can have an icon and styling.
+They can also be checkable, so that the user can click on them to toggle between checked and unchecked.
[[components.menubar.creation]]
== Creating a Menu
The actual menu bar component is first created as follows:
-
[source, java]
----
MenuBar barmenu = new MenuBar();
snacks.addItem("Weisswurst", null, mycommand);
snacks.addItem("Bratwurst", null, mycommand);
snacks.addItem("Currywurst", null, mycommand);
-
+
// Yet another top-level item
MenuItem servs = barmenu.addItem("Services", null, null);
servs.addItem("Car Service", null, mycommand);
selection.setValue("Ordered a " +
selectedItem.getText() +
" from menu.");
- }
+ }
};
----
style for menu items, that is, [literal]#++v-menubar-menuitem-selected++#, is
reserved for mouse-hover indication.
-
[source, java]
----
MenuBar barmenu = new MenuBar();
barmenu.addStyleName("mybarmenu");
layout.addComponent(barmenu);
-
+
// A feedback component
final Label selection = new Label("-");
layout.addComponent(selection);
previous.setStyleName(null);
selectedItem.setStyleName("highlight");
previous = selectedItem;
- }
+ }
};
-
+
// Put some items in the menu
barmenu.addItem("Beverages", null, mycommand);
barmenu.addItem("Snacks", null, mycommand);
You could then style the highlighting in CSS as follows:
-
[source, css]
----
.mybarmenu .v-menubar-menuitem-highlight {
----
endif::web[]
-
-
-
-
----
// Create the selection component
NativeSelect select = new NativeSelect("Native Selection");
-
+
// Add some items
select.addItems("Mercury", "Venus", ...);
----
[[figure.components.nativeselect.basic]]
.The [classname]#NativeSelect# Component
-image::img/nativeselect-basic.png[]
+image::img/nativeselect-basic.png[width=20%, scaledwidth=40%]
Common selection component features are described in
-<<dummy/../../../framework/components/components-selection#components.selection,"Selection
-Components">>.
+<<dummy/../../../framework/components/components-selection#components.selection,"Selection Components">>.
== CSS Style Rules
The component has a [literal]#++v-select++# overall style. The native
[literal]#++select++# element has [literal]#++v-select-select++# style.
-
-
-
-
group of radio buttons in single selection mode. In multiple selection mode, the
items show up as check boxes. The common selection component features are
described in
-<<dummy/../../../framework/components/components-selection#components.selection,"Selection
-Components">>.
+<<dummy/../../../framework/components/components-selection#components.selection,"Selection Components">>.
[[figure.components.optiongroup]]
.Option Button Group in Single and Multiple Selection Mode
-image::img/optiongroup-basic.png[]
+image::img/optiongroup-basic.png[width=45%, scaledwidth=70%]
Option group is by default in single selection mode. Multiple selection is
enabled with [methodname]#setMultiSelect()#.
currently selected items easily, and that you can easily change the appearance
of a single component.
+ifdef::web[]
[[components.optiongroup.disabling]]
== Disabling Items
The [methodname]#setItemEnabled()# identifies the item to be disabled by its
item ID.
-
[source, java]
----
// Have an option group with some items
[[figure.components.optiongroup.disabling]]
.[classname]#OptionGroup# with a Disabled Item
-image::img/optiongroup-disabling.png[]
+image::img/optiongroup-disabling.png[width=25%, scaledwidth=50%]
Setting an item as disabled turns on the [literal]#++v-disabled++# style for it.
-
+endif::web[]
[[components.optiongroup.css]]
== CSS Style Rules
regardless of the option type. Disabled items have additionally the
[literal]#++v-disabled++# style.
+ifdef::web[]
+
[[components.optiongroup.css.horizontal]]
=== Horizontal Layout
[[figure.components.optiongroup.horizontal]]
.Horizontal [classname]#OptionGroup#
-image::img/optiongroup-horizontal.png[]
-
-
-
-
+image::img/optiongroup-horizontal.png[width=35%, scaledwidth=50%]
+endif::web[]
[[figure.components.passwordfield.basic]]
.[classname]#PasswordField#
-image::img/passwordfield-basic.png[]
+image::img/passwordfield-basic.png[width=40%, scaledwidth=50%]
You should note that the [classname]#PasswordField# hides the input only from
"over the shoulder" visual observation. Unless the server connection is
[[components.passwordfield.css]]
== CSS Style Rules
-
[source, css]
----
.v-textfield { }
The [classname]#PasswordField# does not have its own CSS style name but uses the
same [literal]#++v-textfield++# style as the regular [classname]#TextField#. See
-<<dummy/../../../framework/components/components-textfield#components.textfield.css,"CSS
-Style Rules">> for information on styling it.
-
-CSS Styling
-
-
+<<dummy/../../../framework/components/components-textfield#components.textfield.css,"CSS Style Rules">> for information on styling it.
image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/interaction/progress-bar"]
endif::web[]
-The [classname]#ProgressBar# component allows displaying the progress of a task
-graphically. The progress is specified as a floating-point value between 0.0 and
-1.0.
+The [classname]#ProgressBar# component allows visualizing progress of a task.
+The progress is specified as a floating-point value between 0.0 and 1.0.
[[figure.components.progressbar.basic]]
-.The Progress Bar Component
-image::img/progressbar-basic.png[]
+.The [classname]#ProgressBar# component
+image::img/progressbar-basic.png[width=30%, scaledwidth=70%]
To display upload progress with the [classname]#Upload# component, you can
update the progress bar in a [interfacename]#ProgressListener#.
UI, it is important to lock the user session by modifying the progress bar value
inside [methodname]#access()# call, as illustrated in the following example and
described in
-<<dummy/../../../framework/advanced/advanced-push#advanced.push.running,"Accessing
-UI from Another Thread">>.
-
+<<dummy/../../../framework/advanced/advanced-push#advanced.push.running,"Accessing UI from Another Thread">>.
[source, java]
----
final ProgressBar bar = new ProgressBar(0.0f);
layout.addComponent(bar);
-
+
layout.addComponent(new Button("Increase",
new ClickListener() {
@Override
----
[[figure.components.progressbar.indeterminate]]
-.Indeterminate Progress Bar
-image::img/progressbar-indeterminate.png[]
-
+.Indeterminate progress bar
+image::img/progressbar-indeterminate.png[width=15%, scaledwidth=40%]
ifdef::web[]
[[components.progressbar.thread]]
== Doing Heavy Computation
-The progress indicator is often used to display the progress of a heavy
+The progress bar is typically used to display the progress of a heavy
server-side computation task, often running in a background thread. The UI,
including the progress bar, can be updated either with polling or by using
server push. When doing so, you must ensure thread-safety, most easily by
----
HorizontalLayout barbar = new HorizontalLayout();
layout.addComponent(barbar);
-
-// Create the indicator, disabled until progress is started
+
+// Create the bar, disabled until progress is started
final ProgressBar progress = new ProgressBar(new Float(0.0));
progress.setEnabled(false);
barbar.addComponent(progress);
-
+
final Label status = new Label("not running");
barbar.addComponent(status);
}
});
}
-
+
// Show the "all done" for a while
try {
sleep(2000); // Sleep for 2 seconds
// Restore the state to initial
progress.setValue(new Float(0.0));
progress.setEnabled(false);
-
+
// Stop polling
UI.getCurrent().setPollInterval(-1);
-
+
button.setEnabled(true);
status.setValue("not running");
}
The example is illustrated in <<figure.components.progressbar.thread>>.
[[figure.components.progressbar.thread]]
-.Doing Heavy Work
-image::img/progressbar-thread.png[]
+.Doing heavy work
+image::img/progressbar-thread.png[width=40%, scaledwidth=70%]
endif::web[]
.v-progressbar-indicator {}
----
-The progress bar has a [literal]#++v-progressbar++# base style. The animation is
-the background of the element with [literal]#++v-progressbar-wrapper++# style,
-by default an animated GIF image. The progress is an element with
-[literal]#++v-progressbar-indicator++# style inside the wrapper, and therefore
-displayed on top of it. When the progress element grows, it covers more and more
-of the animated background.
-
-In the indeterminate mode, the top element also has the
-[literal]#++v-progressbar-indeterminate++# style. The built-in themes simply
-display the animated GIF in the top element and have the inner elements
-disabled.
-
-
+The progress bar has a [literal]#++v-progressbar++# base style.
+The progress is an element with [literal]#++v-progressbar-indicator++# style inside the wrapper, and therefore displayed on top of it.
+When the progress element grows, it covers more and more of the animated background.
+The progress bar can be animated (some themes use that).
+Animation is done in the element with the [literal]#v-progressbar-wrapper# style, by having an animated GIF as the background image.
+In the indeterminate mode, the top element also has the
+[literal]#++v-progressbar-indeterminate++# style.
+The built-in themes simply display the animated GIF in the top element and have the inner elements disabled.
----
.Rich Text Area Component
-image::img/richtextarea-example1.png[]
+image::img/richtextarea-example1.png[width=60%, scaledwidth=90%]
Above, we used context-specific tags such as [literal]#++<h1>++# in the initial
HTML content. The rich text area component does not allow creating such tags,
====
-
-
ifdef::web[]
[[components.richtextarea.localization]]
== Localizing RichTextArea Toolbars
.gwt-ToggleButton { }
.gwt-ListBox { }
----
-
-
-
-
library includes the following selection components, all based on the
[classname]#AbstractSelect# class:
-[classname]#ComboBox# (Section <<dummy/../../../framework/components/components-combobox#components.combobox,"ComboBox">>):: A drop-down list with a text box, where the user can type text to find matching items. The component also provides an input prompt and the user can enter new items.
-[classname]#ListSelect# (Section <<dummy/../../../framework/components/components-listselect#components.listselect,"ListSelect">>):: A vertical list box for selecting items in either single or multiple selection mode.
-[classname]#NativeSelect# (Section<<dummy/../../../framework/components/components-nativeselect#components.nativeselect,"NativeSelect">>):: Provides selection using the native selection component of the browser, typically a drop-down list for single selection and a multi-line list in multiselect mode. This uses the [literal]#++<select>++# element in HTML.
-[classname]#OptionGroup# (Section <<dummy/../../../framework/components/components-optiongroup#components.optiongroup,"OptionGroup">>):: Shows the items as a vertically arranged group of radio buttons in the single selection mode and of check boxes in multiple selection mode.
-[classname]#TwinColSelect# (Section <<dummy/../../../framework/components/components-twincolselect#components.twincolselect,"TwinColSelect">>):: Shows two list boxes side by side where the user can select items from a list of available items and move them to a list of selected items using control buttons.
+// TODO Only use section numbers here, prefixed with "Section", not include section title
+[classname]#ComboBox# (<<components-combobox#components.combobox,"ComboBox">>)::
+A drop-down list with a text box, where the user can type text to find matching items.
+The component also provides an input prompt and the user can enter new items.
-In addition, the [classname]#Tree#, [classname]#Table#, and
-[classname]#TreeTable# components allow special forms of selection. They also
-inherit the [classname]#AbstractSelect#.
+[classname]#ListSelect# (<<components-listselect#components.listselect,"ListSelect">>)::
+A vertical list box for selecting items in either single or multiple selection mode.
+
+[classname]#NativeSelect# (<<components-nativeselect#components.nativeselect, "NativeSelect">>)::
+Provides selection using the native selection component of the browser, typically a drop-down list for single selection and a multi-line list in multiselect mode.
+This uses the [literal]#++<select>++# element in HTML.
+
+[classname]#OptionGroup# (<<components-optiongroup#components.optiongroup,"OptionGroup">>)::
+Shows the items as a vertically arranged group of radio buttons in the single selection mode and of check boxes in multiple selection mode.
+
+[classname]#TwinColSelect# (<<components-twincolselect#components.twincolselect, "TwinColSelect">>)::
+Shows two list boxes side by side where the user can select items from a list of available items and move them to a list of selected items using control buttons.
+
+In addition, the [classname]#Tree#, [classname]#Table#, and [classname]#TreeTable# components allow special forms of selection.
+They also inherit [classname]#AbstractSelect#.
[[components.selection.databinding]]
== Binding Selection Components to Data
----
// Create a selection component
ComboBox select = new ComboBox("Moons of Mars");
-select.setItemCaptionMode(ItemCaptionMode.EXPLICIT_DEFAULTS_ID);
+select.setItemCaptionMode(
+ ItemCaptionMode.EXPLICIT_DEFAULTS_ID);
-// Use the item ID also as the caption of this item
+// The given item ID is also used as the caption
select.addItem(new Integer(1));
// Set item caption for this item explicitly
useful when the identifier is a string, and also when the identifier is an
complex object that has a string representation. For example:
-
+
[source, java]
----
select.setItemCaptionMode(ItemCaptionMode.ID);
// A class that implements toString()
-class PlanetId extends Object implements Serializable {
+class PlanetId extends Object
+ implements Serializable {
String planetName;
PlanetId (String name) {
}
// Use such objects as item identifiers
-String planets[] = {"Mercury", "Venus", "Earth", "Mars"};
+String planets[] = {"Mercury", "Venus",
+ "Earth", "Mars"};
for (int i=0; i<planets.length; i++)
select.addItem(new PlanetId(planets[i]));
----
-INDEX:: Index number of item is used as caption. This caption mode is applicable only to
-data sources that implement the [classname]#Container.Indexed# interface. If the
-interface is not available, the component will throw a
-[classname]#ClassCastException#. The [classname]#AbstractSelect# itself does not
-implement this interface, so the mode is not usable without a separate data
-source. An [classname]#IndexedContainer#, for example, would work.
+
+INDEX::
+Index number of item is used as caption.
+This caption mode is applicable only to data sources that implement the [interfacename]#Container.Indexed# interface.
+If the interface is not available, the component will throw a
+[classname]#ClassCastException#.
+The [classname]#AbstractSelect# itself does not implement this interface, so the mode is not usable without a separate data source.
+An [classname]#IndexedContainer#, for example, would work.
ITEM:: [classname]#String# representation of item, acquired with
[methodname]#toString()#, is used as the caption. This is applicable mainly when
In the example below, we bind a selection component to a bean container and use
a property of the bean as the caption.
-
+
[source, java]
----
... setters and getters ...
}
-public void captionproperty(VerticalLayout layout) {
+public void captionproperty(
+ VerticalLayout layout) {
// Have a bean container to put the beans in
BeanItemContainer<Planet> container =
- new BeanItemContainer<Planet>(Planet.class);
+ new BeanItemContainer<Planet>(
+ Planet.class);
// Put some example data in it
- container.addItem(new Planet(1, "Mercury"));
+ container.addItem(
+ new Planet(1, "Mercury"));
container.addItem(new Planet(2, "Venus"));
container.addItem(new Planet(3, "Earth"));
container.addItem(new Planet(4, "Mars"));
- // Create a selection component bound to the container
- ComboBox select = new ComboBox("Planets", container);
+ // Create a selection component bound
+ // to the container
+ ComboBox select = new ComboBox("Planets",
+ container);
- // Set the caption mode to read the caption directly
- // from the 'name' property of the bean
- select.setItemCaptionMode(ItemCaptionMode.PROPERTY);
+ // Set the caption mode to read the
+ // caption directly from the 'name'
+ // property of the bean
+ select.setItemCaptionMode(
+ ItemCaptionMode.PROPERTY);
select.setItemCaptionPropertyId("name");
...
----
-
-
[[components.selection.getset]]
== Getting and Setting Selection
[[figure.components.selection.valuechange]]
.Selected Item
-image::img/select-selected1.png[]
+image::img/select-selected1.png[width=30%, scaledwidth=40%]
[[components.selection.newitems]]
numeric value within a defined range by dragging a bar handle with the mouse.
The value is shown when dragging the handle.
-[classname]#Slider# has a number of different constructors that take a
-combination of the caption, __minimum__ and __maximum__ value, __resolution__,
-and the __orientation__ of the slider.
+[[figure.components.slider.example1]]
+.Vertical and horizontal [classname]#Slider# components
+image::img/slider-example1-hi.png[width=40%, scaledwidth=70%]
+[classname]#Slider# has a number of different constructors that take a
+combination of the caption, _minimum_ and _maximum_ value, _resolution_,
+and the _orientation_ of the slider.
[source, java]
----
// Create a vertical slider
-final Slider vertslider = new Slider(1, 100);
+Slider vertslider = new Slider(1, 100);
vertslider.setOrientation(SliderOrientation.VERTICAL);
----
__resolution__:: The number of digits after the decimal point. The default is 0.
-__orientation__:: The orientation can be either horizontal (
-[parameter]#SliderOrientation.HORIZONTAL#) or vertical (
-[parameter]#SliderOrientation.VERTICAL#). The default is horizontal.
-
-
+__orientation__:: The orientation can be either horizontal ([parameter]#SliderOrientation.HORIZONTAL#) or vertical ([parameter]#SliderOrientation.VERTICAL#). The default is horizontal.
As the [classname]#Slider# is a field component, you can handle value changes
with a [classname]#ValueChangeListener#. The value of the [classname]#Slider#
field is a [classname]#Double# object.
-
[source, java]
----
// Shows the value of the vertical slider
[classname]#Slider# that takes the value as a native double value. The setter
can throw a [classname]#ValueOutOfBoundsException#, which you must handle.
-
[source, java]
----
// Set the initial value. This has to be set after the
// listener is added if we want the listener to handle
// also this value change.
try {
- vertslider.setValue(50.0);
+ vertslider.setValue(50.0);
} catch (ValueOutOfBoundsException e) {
}
----
examples) and horizontal sliders that control the size of a box. The slider
values are displayed also in separate labels.
-[[figure.components.slider.example1]]
-.The [classname]#Slider# Component
-image::img/slider-example1-hi.png[]
-
== CSS Style Rules
handle element is nevertheless contained within the slider bar element. The
appearance of the handle comes from a background image defined in the
__background__ CSS property.
-
-
-
-
components. You can easily implement editing of the table data, for example
clicking on a cell could change it to a text field for editing.
-The data contained in a [classname]#Table# is managed using the Data Model of
-Vaadin (see
-<<dummy/../../../framework/datamodel/datamodel-overview.asciidoc#datamodel.overview,"Binding
-Components to Data">>), through the [classname]#Container# interface of the
-[classname]#Table#. This makes it possible to bind a table directly to a data
-source, such as a database query. Only the visible part of the table is loaded
+The data contained in a [classname]#Table# is managed using the Vaadin data model (see <<dummy/../../../framework/datamodel/datamodel-overview.asciidoc#datamodel.overview,"Binding Components to Data">>), through the [classname]#Container# interface of the [classname]#Table#.
+This makes it possible to bind a table directly to a data source, such as a database query.
+Only the visible part of the table is loaded
into the browser and moving the visible window with the scrollbar loads content
from the server. While the data is being loaded, a tooltip will be displayed
that shows the current range and total number of items in the table. The rows of
in the missing values. (This default has no meaning in the usual case, such as
below, where we add items after defining the properties.)
-
[source, java]
----
Table table = new Table("The Brightest Stars");
the [methodname]#addContainerProperty()# calls.
.Basic Table Example
-image::img/table-example1.png[]
+image::img/table-example1.png[width=35%, scaledwidth=50%]
Scalability of the [classname]#Table# is largely dictated by the container. The
default [classname]#IndexedContainer# is relatively heavy and can cause
of around 500 000 rows, depending on the browser and the pixel height of rows.
Common selection component features are described in
-<<dummy/../../../framework/components/components-selection#components.selection,"Selection
-Components">>.
+<<dummy/../../../framework/components/components-selection#components.selection,"Selection Components">>.
[[components.table.selecting]]
== Selecting Items in a Table
});
----
-.Table Selection Example
-image::img/table-example2.png[]
+.Table selection example
+image::img/table-example2.png[width=35%, scaledwidth=80%]
If the user clicks on an already selected item, the selection will deselected
and the table property will have [parameter]#null# value. You can disable this
[[figure.component.table.columnresize]]
.Resizing Columns
-image::img/table-column-resize.png[]
+image::img/table-column-resize.png[width=50%, scaledwidth=80%]
[[components.table.features.reordering]]
[[figure.component.table.columncollapsing]]
.Collapsing Columns
-image::img/table-column-collapsing.png[]
+image::img/table-column-collapsing.png[width=40%, scaledwidth=80%]
If the table has undefined width, it minimizes its width to fit the width of the
visible columns. If some columns are initially collapsed, the width of the table
[source, java]
----
-// Create a table and add a style to allow setting the row height in theme.
-final Table table = new Table();
+// Create a table and add a style to
+// allow setting the row height in theme.
+Table table = new Table();
table.addStyleName("components-inside");
/* Define the names and data types of columns.
[[figure.components.table.components-inside]]
.Components in a Table
-image::img/table-components.png[]
+image::img/table-components.png[width=70%, scaledwidth=100%]
[[components.table.features.iterating]]
[[figure.component.table.editable]]
.A Table in Normal and Editable Mode
-image::img/table-editable3.png[]
+image::img/table-editable3.png[width=100%, scaledwidth=100%]
[[components.table.editing.fieldfactories]]
=== Field Factories
[classname]#DefaultFieldFactory#, which offers the following crude mappings:
.Type to Field Mappings in [classname]#DefaultFieldFactory#
-[options="header"]
+[options="header",cols="2,5"]
|===============
|Property Type|Mapped to Field Class
-|[classname]#Date#|A[classname]#DateField#.
-|[classname]#Boolean#|A[classname]#CheckBox#.
-|[classname]#Item#|A[classname]#Form#(deprecated in Vaadin 7). The fields of the form are automatically created from the item's properties using a[classname]#FormFieldFactory#. The normal use for this property type is inside a[classname]#Form#and is less useful inside a[classname]#Table#.
-|__other__|A[classname]#TextField#. The text field manages conversions from the basic types, if possible.
+|[classname]#Date#|A [classname]#DateField#.
+|[classname]#Boolean#|A [classname]#CheckBox#.
+|[classname]#Item#|A [classname]#Form# (deprecated in Vaadin 7). The fields of the form are automatically created from the item's properties using a [classname]#FormFieldFactory#. The normal use for this property type is inside a [classname]#Form# and is less useful inside a [classname]#Table#.
+|__other__|A [classname]#TextField#. The text field manages conversions from the basic types, if possible.
|===============
[[figure.components.table.headersfooters.footer]]
.A Table with a Footer
-image::img/table-footer.png[]
+image::img/table-footer.png[width=25%, scaledwidth=40%]
[[components.table.headersfooters.clicks]]
simply formatted (black) with column generators.
[[figure.ui.table.generated]]
-.Table with Generated Columns in Normal and Editable Mode
-image::img/table-generatedcolumns1.png[]
+.Table with generated columns
+image::img/table-generatedcolumns1.png[width=90%, scaledwidth=100%]
endif::web[]
<<figure.components.table.columnformatting>>.
[[figure.components.table.columnformatting]]
-.Formatted Table Columns
-image::img/table-columnformatting.png[]
-
-You can use CSS for further styling of table rows, columns, and individual cells
-by using a [classname]#CellStyleGenerator#. It is described in
-<<components.table.css>>.
+.Formatted Table columns
+image::img/table-columnformatting.png[width=40%, scaledwidth=50%]
+You can use CSS for further styling of table rows, columns, and individual cells by using a [classname]#CellStyleGenerator#.
+ifdef::web[It is described in <<components.table.css>>.]
[[components.table.css]]
== CSS Style Rules
-Styling the overall style of a [classname]#Table# can be done with the following
-CSS rules.
-
-
[source, css]
----
.v-table {}
The table will look as shown in <<figure.components.table.cell-style>>.
[[figure.components.table.cell-style]]
-.Cell Style Generator for a Table
-image::img/table-cellstylegenerator1.png[]
+.Cell style generator for a Table
+image::img/table-cellstylegenerator1.png[width=50%, scaledwidth=80%]
endif::web[]
----
// Create the area
TextArea area = new TextArea("Big Area");
-
+
// Put some content in it
area.setValue("A row\n"+
"Another row\n"+
[[figure.components.textarea]]
.[classname]#TextArea# Example
-image::img/textarea-basic.png[]
+image::img/textarea-basic.png[width=40%, scaledwidth=50%]
You can set the number of visible rows with [methodname]#setRows()# or use the
regular [methodname]#setHeight()# to define the height in other units. If the
[[figure.components.textarea.wordwrap]]
.Word Wrap in [classname]#TextArea#
-image::img/textarea-wordwrap.png[]
+image::img/textarea-wordwrap.png[width=60%, scaledwidth=100%]
[[components.textarea.css]]
The HTML structure of [classname]#TextArea# is extremely simple, consisting only
of an element with [literal]#++v-textarea++# style.
-
-CSS Styling
-
-
((("[classname]#TextField#", id="term.components.textfield", range="startofrange")))
-[classname]#TextField# is one of the most commonly used user interface
-components. It is a [classname]#Field# component that allows entering textual
-values using keyboard.
+[classname]#TextField# is one of the most commonly used user interface components.
+It is a [classname]#Field# component that allows entering textual values with keyboard.
The following example creates a simple text field:
----
// Create a text field
TextField tf = new TextField("A Field");
-
+
// Put some initial content in it
tf.setValue("Stuff in the field");
----
[[figure.components.textfield.basic]]
.[classname]#TextField# Example
-image::img/textfield-example.png[]
+image::img/textfield-example.png[width=40%, scaledwidth=50%]
Value changes are handled with a [classname]#Property.ValueChangeListener#, as
in most other fields. The value can be acquired with [methodname]#getValue()#
[[figure.components.textfield.api]]
.Text Field Class Relationships
-image::img/textfield-diagram-hi.png[width=50%]
+image::img/textfield-diagram-hi.png[width=40%, scaledwidth=70%]
[[components.textfield.databinding]]
== Data Binding
// doesn't support assignment from String, the object is
// reconstructed in the wrapper when the value is changed.
Double trouble = 42.0;
-
+
// Wrap it in a property data source
final ObjectProperty<Double> property =
new ObjectProperty<Double>(trouble);
-
+
// Create a text field bound to it
// (StringToDoubleConverter is used automatically)
TextField tf = new TextField("The Answer", property);
null value. You can set the null representation with the
[methodname]#setNullRepresentation()# method. Most typically, you use an empty
string for the null representation, unless you want to differentiate from a
-string that is explicitly empty. The default null representation is "
-[literal]#++null++#", which essentially warns that you may have forgotten to
+string that is explicitly empty. The default null representation is "[literal]#null#", which essentially warns that you may have forgotten to
initialize your data objects properly.
((("[methodname]#setNullSettingAllowed()#")))
[[figure.components.textfield.nullvalues]]
.Null Value Representation
-image::img/textfield-nullrepresentation.png[]
+image::img/textfield-nullrepresentation.png[width=35%, scaledwidth=50%]
(((range="endofrange", startref="term.components.textfield.nullvalues")))
[[figure.components.textfield.textchangeevents]]
.Text Change Events
-image::img/textfield-textchangeevents.png[]
+image::img/textfield-textchangeevents.png[width=35%, scaledwidth=50%]
The __text change event mode__ defines how quickly the changes are transmitted
to the server and cause a server-side event. Lazier change events allow sending
image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/grids-and-trees/tree"]
endif::web[]
-The [classname]#Tree# component allows a natural way to represent data that has
-hierarchical relationships, such as filesystems or message threads. The
-[classname]#Tree# component in Vaadin works much like the tree components of
-most modern desktop user interface toolkits, for example in directory browsing.
+The [classname]#Tree# component allows a natural way to represent data that has hierarchical relationships.
+The user can drill down in the hierarchy by expanding items by clicking on the expand arrow, and likewise collapse items.
+[classname]#Tree# is a selection component that allows selecting items.
+It also supports drag and drop, so you can drag items to and from a tree, and drop them in the hierarchy.
-The typical use of the [classname]#Tree# component is for displaying a
-hierachical menu, like a menu on the left side of the screen, as in
-<<figure.components.tree>>, or for displaying filesystems or other hierarchical
-datasets. The [parameter]#menu# style makes the appearance of the tree more
-suitable for this purpose.
+A typical use of the [classname]#Tree# component is for displaying a hierarchical menu, as illustrated in <<figure.components.tree>>, or for displaying file systems or hierarchical datasets.
+[[figure.components.tree]]
+.A [classname]#Tree# component as a menu
+image::img/tree-example1.png[width=25%, scaledwidth=50%]
+
+The data is managed in a container implementing the [interfacename]#Hierarchical# interface, such as [classname]#HierarchicalContainer# or [classname]#FilesystemContainer#.
+You can use [classname]#ContainerHierarchicalWrapper# to add hierarchical capability to any other container. [classname]#Tree# itself implements the interface and delegates operations to the underlying container.
[source, java]
----
-final Object[][] planets = new Object[][]{
- new Object[]{"Mercury"},
- new Object[]{"Venus"},
- new Object[]{"Earth", "The Moon"},
- new Object[]{"Mars", "Phobos", "Deimos"},
- new Object[]{"Jupiter", "Io", "Europa", "Ganymedes",
- "Callisto"},
- new Object[]{"Saturn", "Titan", "Tethys", "Dione",
- "Rhea", "Iapetus"},
- new Object[]{"Uranus", "Miranda", "Ariel", "Umbriel",
- "Titania", "Oberon"},
- new Object[]{"Neptune", "Triton", "Proteus", "Nereid",
- "Larissa"}};
-
-Tree tree = new Tree("The Planets and Major Moons");
-
-/* Add planets as root items in the tree. */
-for (int i=0; i<planets.length; i++) {
- String planet = (String) (planets[i][0]);
- tree.addItem(planet);
-
- if (planets[i].length == 1) {
- // The planet has no moons so make it a leaf.
- tree.setChildrenAllowed(planet, false);
- } else {
- // Add children (moons) under the planets.
- for (int j=1; j<planets[i].length; j++) {
- String moon = (String) planets[i][j];
-
- // Add the item as a regular item.
- tree.addItem(moon);
-
- // Set it to be a child.
- tree.setParent(moon, planet);
-
- // Make the moons look like leaves.
- tree.setChildrenAllowed(moon, false);
- }
-
- // Expand the subtree.
- tree.expandItemsRecursively(planet);
+// A menu tree
+Tree menu = new Tree();
+
+// Couple of childless root items
+menu.addItem("Mercury");
+menu.setChildrenAllowed("Mercury", false);
+menu.addItem("Venus");
+menu.setChildrenAllowed("Venus", false);
+
+// An item with hierarchy
+menu.addItem("Earth");
+menu.addItem("The Moon");
+menu.setChildrenAllowed("The Moon", false);
+menu.setParent("The Moon", "Earth");
+menu.expandItem("Earth"); // Expand programmatically
+...
+----
+
+The result was shown in <<figure.components.tree>> in a practical situation, with the [classname]`Tree` wrapped inside a [classname]`Panel`.
+[classname]`Tree` itself does not have scrollbar, but [classname]`Panel` can be used for the purpose.
+
+The caption of tree items is by default the item ID.
+You can define how the item captions are determined with [methodname]#setItemCaptionMode()#, as explained <<components-selection#components.selection.captions, "Selection Component Item Captions">>.
+
+[[components.tree.selection]]
+== Handling Selection and Clicks
+
+[classname]#Tree# is a selection component, which are described in <<components-selection#components.selection, "Selection Components">>.
+You can thereby get or set the currently selected item by the value property of the tree, that is, with [methodname]#getValue()# and [methodname]#setValue()#.
+When the user selects an item, the tree will receive an [classname]#ValueChangeEvent#, which you can catch with a [classname]#ValueChangeListener#.
+
+[source, Java]
+----
+// Handle selection changes
+menu.addValueChangeListener(event -> { // Java 8
+ if (event.getProperty() != null &&
+ event.getProperty().getValue() != null) {
+ location.setValue("The cat is in " +
+ event.getProperty().getValue());
}
-}
+});
+----
+
+[classname]#Tree# is selectable by default; you can disallow selection with [methodname]#setSelectable(false)#.
-main.addComponent(tree);
+[classname]#Tree# also emits [classname]##ItemClickEvent##s when items are clicked.
+This way you can handle item clicks also when selection is not enabled or you want special user interaction specifically on clicks.
+
+[source, Java]
+----
+tree.addItemClickListener(
+ new ItemClickEvent.ItemClickListener() {
+ public void itemClick(ItemClickEvent event) {
+ // Pick only left mouse clicks
+ if (event.getButton() == ItemClickEvent.BUTTON_LEFT)
+ Notification.show("Left click",
+ Notification.Type.HUMANIZED_MESSAGE);
+ }
+ });
----
-<<figure.components.tree>> below shows the tree from the code example in a
-practical situation.
+[[components.tree.expand-collapse]]
+== Expanding and Collapsing Items
-[[figure.components.tree]]
-.A [classname]#Tree# Component as a Menu
-image::img/tree-example1.png[]
+An item can have children only if the [propertyname]#childrenAllowed# property is set as true.
+The expand indicator is shown when and only when the property is true.
+The property is defined in the container and can be set with [methodname]#setChildrenAllowed()#.
+
+Expanding an item fires an [classname]#Tree.ExpandEvent# and collapsing an [classname]#Tree.CollapseEvent#, which you can handle with respective listeners.
+
+[source, Java]
+----
+tree.addExpandListener(new Tree.ExpandListener() {
+ public void nodeExpand(ExpandEvent event) {
+ Notification.show("Expand!");
+ }
+});
+----
+
+You can expand and collapse items programmatically with [methodname]#expandItem()# or [methodname]#expandItemRecursively()#.
+
+[source, Java]
+----
+// Expand all items that can be
+for (Object itemId: tree.getItemIds())
+ tree.expandItem(itemId);
+----
+
+TIP: [classname]#Tree# itself does not support lazy loading, which makes it impractical for huge hierarchies.
+You can implement one kind of lazy loading by adding items in an expand listener and removing them in a collapse listener.
+For more proper lazy loading, you can use [classname]#TreeTable# or hierarchical support extension for [classname]#Grid#.
+
+[[components.tree.css]]
+== CSS Style Rules
-You can read or set the currently selected item by the value property of the
-[classname]#Tree# component, that is, with [methodname]#getValue()# and
-[methodname]#setValue()#. When the user clicks an item on a tree, the tree will
-receive an [classname]#ValueChangeEvent#, which you can catch with a
-[classname]#ValueChangeListener#. To receive the event immediately after the
-click, you need to set the tree as [classname]#setImmediate(true)#.
+[source, css]
+----
+.v-tree {}
+ .v-tree-node {} /* A node (item) */
+ .v-tree-node-caption {} /* Caption of the node */
+ .v-tree-node-children {} /* Contains child nodes */
+ .v-tree-node-root {} /* If node is a root node */
+ .v-tree-node-leaf {} /* If node has no children */
+----
-The [classname]#Tree# component uses [classname]#Container# data sources much
-like the [classname]#Table# component, with the addition that it also utilizes
-hierarchy information maintained by a [classname]#HierarchicalContainer#. The
-contained items can be of any item type supported by the container. The default
-container and its [methodname]#addItem()# assume that the items are strings and
-the string value is used as the item ID.
+[[components.tree.css.itemstyles]]
+=== Generating Item Styles
+You can style each tree item individually by generating a style name for them with a [interfacename]#Tree.ItemStyleGenerator#, which you assign to a tree with [methodname]#setItemStyleGenerator()#.
+The generator should return a style name for each item or `null`.
+[source, Java]
+----
+// Show all leaf nodes as disabled
+tree.setItemStyleGenerator(new Tree.ItemStyleGenerator() {
+ @Override
+ public String getStyle(Tree source, Object itemId) {
+ if (! tree.hasChildren(itemId))
+ return "disabled";
+ return null;
+ }
+});
+----
+The style names are prefixed with `v-tree-node-caption-`.
+You could thereby define the item styling as follows:
+
+[source, CSS]
+----
+.v-tree-node-caption-disabled {
+ color: graytext;
+ font-style: italic;
+}
+----
[classname]#TreeTable# to any container implementing the interface.
[[figure.components.treetable.basic]]
-.[classname]#TreeTable# Component
-image::img/treetable-basic.png[]
+.The [classname]#TreeTable# component
+image::img/treetable-basic.png[width=40%, scaledwidth=60%]
As with [classname]#Tree#, you can define the parent-child relationships with
[methodname]#setParent()#, as is shown in the following example with numeric
item IDs:
-
[source, java]
----
TreeTable ttable = new TreeTable("My TreeTable");
ttable.addContainerProperty("Name", String.class, null);
ttable.addContainerProperty("Number", Integer.class, null);
-
+
// Create the tree nodes and set the hierarchy
ttable.addItem(new Object[]{"Menu", null}, 0);
ttable.addItem(new Object[]{"Beverages", null}, 1);
hierarchical column, both when the property type is a component type and when
the tree table is in editable mode.
-For other features, we refer you to documentation for [classname]#Table#, as
-given in
-<<dummy/../../../framework/components/components-table#components.table,"Table">>.
+For other features, we refer you to documentation for [classname]#Table# in
+<<dummy/../../../framework/components/components-table#components.table,"Table">> and [classname]#Tree# in <<dummy/../../../framework/components/components-tree#components.tree,"Tree">>.
+ifdef::web[]
[[components.treetable.collapsed]]
== Expanding and Collapsing Items
for (Object itemId: ttable.getContainerDataSource()
.getItemIds()) {
ttable.setCollapsed(itemId, false);
-
+
// As we're at it, also disallow children from
// the current leaves
if (! ttable.hasChildren(itemId))
are no built-in collapsible containers in the Vaadin core framework, so you
either need to use an add-on container or implement it yourself.
-
-
-
+endif::web[]
[[figure.components.twincolselect.basic]]
.Twin Column Selection
-image::img/twincolselect-basic.png[]
+image::img/twincolselect-basic.png[width=50%, scaledwidth=80%]
[classname]#TwinColSelect# is always in multi-select mode, so its property value
is always a collection of the item IDs of the selected items, that is, the items
the actual buttons reuse the styles for the [classname]#Button# component.
Between the buttons is a divider element with
[literal]#++v-select-twincol-deco++# style.
-
-
-
-
Uploading requires a receiver that implements [interfacename]#Upload.Receiver#
to provide an output stream to which the upload is written by the server.
-
[source, java]
----
Upload upload = new Upload("Upload it here", receiver);
----
[[figure.ui.upload]]
-.Upload Component
-image::img/upload.png[]
+.The [classname]#Upload# component
+image::img/upload.png[width=60%, scaledwidth=80%]
You can set the text of the upload button with [methodname]#setButtonCaption()#.
Note that it is difficult to change the caption or look of the
you wish to have the language of the [classname]#Upload# component consistent,
you will have to use the same language in your application.
-
[source, java]
----
upload.setButtonCaption("Upload Now");
(UNIX) filesystem (the directory must exist or the upload fails). The component
displays the uploaded image in an [classname]#Image# component.
-
[source, java]
----
// Show uploaded file in this placeholder
// listener for successful upload
class ImageUploader implements Receiver, SucceededListener {
public File file;
-
+
public OutputStream receiveUpload(String filename,
String mimeType) {
// Create upload stream
image.setSource(new FileResource(file));
}
};
-ImageUploader receiver = new ImageUploader();
+ImageUploader receiver = new ImageUploader();
// Create the upload with a caption and set receiver later
Upload upload = new Upload("Upload Image Here", receiver);
upload.setButtonCaption("Start Upload");
upload.addSucceededListener(receiver);
-
+
// Put the components in a panel
Panel panel = new Panel("Cool Image Storage");
Layout panelContent = new VerticalLayout();
[[figure.ui.upload.example]]
.Image Upload Example
-image::img/upload-example.png[]
-
+image::img/upload-example.png[width=60%, scaledwidth=80%]
[[components.upload.css]]
== CSS Style Rules
The [classname]#Upload# component has an overall [literal]#++v-upload++# style.
The upload button has the same structure and style as a regular
[classname]#Button# component.
-
-
-
-
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>\r
-<!-- Created with Inkscape (http://www.inkscape.org/) -->\r
-\r
-<svg\r
- xmlns:dc="http://purl.org/dc/elements/1.1/"\r
- xmlns:cc="http://creativecommons.org/ns#"\r
- xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"\r
- xmlns:svg="http://www.w3.org/2000/svg"\r
- xmlns="http://www.w3.org/2000/svg"\r
- xmlns:xlink="http://www.w3.org/1999/xlink"\r
- xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"\r
- xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"\r
- width="210mm"\r
- height="297mm"\r
- id="svg1901"\r
- sodipodi:version="0.32"\r
- inkscape:version="0.48.4 r9939"\r
- sodipodi:docname="slider-example1.svg"\r
- inkscape:output_extension="org.inkscape.output.svg.inkscape"\r
- version="1.1">\r
- <defs\r
- id="defs1903">\r
- <inkscape:perspective\r
- sodipodi:type="inkscape:persp3d"\r
- inkscape:vp_x="0 : 526.18109 : 1"\r
- inkscape:vp_y="0 : 1000 : 0"\r
- inkscape:vp_z="744.09448 : 526.18109 : 1"\r
- inkscape:persp3d-origin="372.04724 : 350.78739 : 1"\r
- id="perspective7" />\r
- <inkscape:perspective\r
- id="perspective2461"\r
- inkscape:persp3d-origin="372.04724 : 350.78739 : 1"\r
- inkscape:vp_z="744.09448 : 526.18109 : 1"\r
- inkscape:vp_y="0 : 1000 : 0"\r
- inkscape:vp_x="0 : 526.18109 : 1"\r
- sodipodi:type="inkscape:persp3d" />\r
- <inkscape:perspective\r
- id="perspective2579"\r
- inkscape:persp3d-origin="372.04724 : 350.78739 : 1"\r
- inkscape:vp_z="744.09448 : 526.18109 : 1"\r
- inkscape:vp_y="0 : 1000 : 0"\r
- inkscape:vp_x="0 : 526.18109 : 1"\r
- sodipodi:type="inkscape:persp3d" />\r
- <linearGradient\r
- id="linearGradient7607"\r
- y2="471.38"\r
- spreadMethod="reflect"\r
- gradientUnits="userSpaceOnUse"\r
- y1="45.132999"\r
- gradientTransform="matrix(0.75592,0,0,1.3229,-36,0)"\r
- x2="1370.6"\r
- x1="-526.85999"\r
- inkscape:collect="always">\r
- <stop\r
- id="stop7603"\r
- style="stop-color:#000000"\r
- offset="0" />\r
- <stop\r
- id="stop7605"\r
- style="stop-color:#000000;stop-opacity:0"\r
- offset="1" />\r
- </linearGradient>\r
- </defs>\r
- <sodipodi:namedview\r
- id="base"\r
- pagecolor="#ffffff"\r
- bordercolor="#666666"\r
- borderopacity="1.0"\r
- inkscape:pageopacity="0.0"\r
- inkscape:pageshadow="2"\r
- inkscape:zoom="1.979899"\r
- inkscape:cx="258.73755"\r
- inkscape:cy="889.25792"\r
- inkscape:document-units="px"\r
- inkscape:current-layer="layer1"\r
- gridtolerance="10000"\r
- inkscape:window-width="877"\r
- inkscape:window-height="739"\r
- inkscape:window-x="1039"\r
- inkscape:window-y="153"\r
- showgrid="false"\r
- inkscape:window-maximized="0" />\r
- <metadata\r
- id="metadata1906">\r
- <rdf:RDF>\r
- <cc:Work\r
- rdf:about="">\r
- <dc:format>image/svg+xml</dc:format>\r
- <dc:type\r
- rdf:resource="http://purl.org/dc/dcmitype/StillImage" />\r
- </cc:Work>\r
- </rdf:RDF>\r
- </metadata>\r
- <g\r
- inkscape:label="Taso 1"\r
- inkscape:groupmode="layer"\r
- id="layer1"\r
- style="opacity:1">\r
- <image\r
- y="56.505013"\r
- x="74.071419"\r
- id="image2463"\r
- height="236"\r
- width="249"\r
- sodipodi:absref="/home/magi/itmill/book-7/manual/img/components/slider-orig.png"\r
- xlink:href="/home/magi/itmill/book-7/manual/img/components/slider-orig.png" />\r
- <g\r
- transform="matrix(0.04895833,0,0,0.04895833,85.307423,133.89853)"\r
- id="g1317">\r
- <path\r
- id="path6080"\r
- style="fill:url(#linearGradient7607)"\r
- inkscape:connector-curvature="0"\r
- d="m 70.29,24.826 v 602.34 h 35.44 v -35.44 h 35.44 v -35.4 h 35.4 v -35.44 h 70.88 v 70.84 h 35.43 v 70.88 h 35.44 v 70.87 h 35.44 v 35.44 h 70.84 v -35.44 h 35.44 v -70.87 H 424.6 v -70.88 h -35.4 v -70.84 h -35.44 v -70.88 h 141.72 v -35.43 h -35.44 v -35.44 H 424.6 v -35.44 h -35.4 v -35.41 h -35.44 v -35.43 h -35.44 v -35.44 h -35.44 v -35.44 h -35.43 v -35.44 h -35.44 v -35.43 h -35.44 v -35.44 h -35.4 V 60.256 H 105.73 V 24.818 H 70.29 z" />\r
- <path\r
- id="rect1430"\r
- style="fill:#000000;fill-rule:evenodd"\r
- inkscape:connector-curvature="0"\r
- d="m 35.438,24.812 v 602.35 h 35.437 v -35.44 h 35.435 v -35.41 H 70.875 V 95.662 L 106.31,95.66 V 60.254 H 70.875 V 24.816 H 35.438 z m 70.872,70.844 v 35.434 h 35.41 V 95.656 h -35.41 z m 35.41,35.434 v 35.44 h 35.44 v -35.44 h -35.44 z m 35.44,35.44 v 35.44 h 35.43 v -35.44 h -35.43 z m 35.43,35.44 v 35.44 h 35.44 v -35.44 h -35.44 z m 35.44,35.44 v 35.43 h 35.44 v -35.43 h -35.44 z m 35.44,35.43 v 35.44 h 35.44 v -35.44 h -35.44 z m 35.44,35.44 v 35.41 h 35.43 v -35.41 h -35.43 z m 35.43,35.41 v 35.43 h 35.41 v -35.43 h -35.41 z m 35.41,35.43 v 35.44 H 283.47 v 106.32 h 35.44 V 450 h 141.71 v -35.44 h -35.43 v -35.44 h -35.44 z m -70.84,141.76 v 70.84 h 35.43 v -70.84 h -35.43 z m 35.43,70.84 v 70.87 h 35.41 v -70.87 h -35.41 z m 35.41,70.87 v 70.88 h 35.44 v -70.88 h -35.44 z m 0,70.88 h -70.84 v 35.44 h 70.84 v -35.44 z m -70.84,0 v -70.88 h -35.44 v 70.88 h 35.44 z m -35.44,-70.88 v -70.87 h -35.44 v 70.87 h 35.44 z m -35.44,-70.87 v -70.84 h -35.44 v 70.84 h 35.44 z M 212.59,520.88 V 450 h -35.43 v 35.44 h -35.44 v 35.44 h 70.87 z m -70.87,0 h -35.41 v 35.43 h 35.41 v -35.43 z" />\r
- <path\r
- id="rect3779"\r
- style="fill:#ffffff"\r
- inkscape:connector-curvature="0"\r
- d="m 70.875,95.656 v 460.65 h 35.435 v -35.43 h 35.41 v -35.44 h 35.44 v -35.44 h 35.43 v 70.88 h 35.44 v 70.84 h 35.44 v 70.87 h 35.44 v 70.88 h 70.84 v -70.88 h -35.41 v -70.87 h -35.43 v -70.84 h -35.44 v -106.32 h 106.28 v -35.44 h -35.41 v -35.43 h -35.43 v -35.41 h -35.44 v -35.44 h -35.44 v -35.43 h -35.44 v -35.44 h -35.43 v -35.44 h -35.44 v -35.44 H 106.31 V 95.648 H 70.875 z" />\r
- </g>\r
- </g>\r
-</svg>\r
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="210mm"
+ height="297mm"
+ id="svg1901"
+ sodipodi:version="0.32"
+ inkscape:version="0.91 r"
+ sodipodi:docname="slider-example1.svg"
+ inkscape:output_extension="org.inkscape.output.svg.inkscape"
+ version="1.1">
+ <defs
+ id="defs1903">
+ <inkscape:perspective
+ sodipodi:type="inkscape:persp3d"
+ inkscape:vp_x="0 : 526.18109 : 1"
+ inkscape:vp_y="0 : 1000 : 0"
+ inkscape:vp_z="744.09448 : 526.18109 : 1"
+ inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
+ id="perspective7" />
+ <inkscape:perspective
+ id="perspective2461"
+ inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
+ inkscape:vp_z="744.09448 : 526.18109 : 1"
+ inkscape:vp_y="0 : 1000 : 0"
+ inkscape:vp_x="0 : 526.18109 : 1"
+ sodipodi:type="inkscape:persp3d" />
+ <inkscape:perspective
+ id="perspective2579"
+ inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
+ inkscape:vp_z="744.09448 : 526.18109 : 1"
+ inkscape:vp_y="0 : 1000 : 0"
+ inkscape:vp_x="0 : 526.18109 : 1"
+ sodipodi:type="inkscape:persp3d" />
+ <linearGradient
+ id="linearGradient7607"
+ y2="471.38"
+ spreadMethod="reflect"
+ gradientUnits="userSpaceOnUse"
+ y1="45.132999"
+ gradientTransform="matrix(0.75592,0,0,1.3229,-36,0)"
+ x2="1370.6"
+ x1="-526.85999"
+ inkscape:collect="always">
+ <stop
+ id="stop7603"
+ style="stop-color:#000000"
+ offset="0" />
+ <stop
+ id="stop7605"
+ style="stop-color:#000000;stop-opacity:0"
+ offset="1" />
+ </linearGradient>
+ </defs>
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="0.0"
+ inkscape:pageshadow="2"
+ inkscape:zoom="1.4"
+ inkscape:cx="212.24603"
+ inkscape:cy="847.82098"
+ inkscape:document-units="px"
+ inkscape:current-layer="layer1"
+ gridtolerance="10000"
+ inkscape:window-width="1116"
+ inkscape:window-height="882"
+ inkscape:window-x="800"
+ inkscape:window-y="153"
+ showgrid="false"
+ inkscape:window-maximized="0" />
+ <metadata
+ id="metadata1906">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Taso 1"
+ inkscape:groupmode="layer"
+ id="layer1"
+ style="opacity:1">
+ <rect
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="rect3344"
+ width="249"
+ height="236"
+ x="67.505424"
+ y="64.081154" />
+ <image
+ sodipodi:absref="/home/magi/itmill/vaadin/documentation/components/original-drawings/../img/slider-orig.png"
+ xlink:href="../img/slider-orig.png"
+ y="64.081154"
+ x="67.505424"
+ id="image2463"
+ height="236"
+ width="249" />
+ <g
+ transform="matrix(0.04895833,0,0,0.04895833,85.307423,133.89853)"
+ id="g1317">
+ <path
+ id="path6080"
+ style="fill:url(#linearGradient7607)"
+ inkscape:connector-curvature="0"
+ d="m 70.29,24.826 v 602.34 h 35.44 v -35.44 h 35.44 v -35.4 h 35.4 v -35.44 h 70.88 v 70.84 h 35.43 v 70.88 h 35.44 v 70.87 h 35.44 v 35.44 h 70.84 v -35.44 h 35.44 v -70.87 H 424.6 v -70.88 h -35.4 v -70.84 h -35.44 v -70.88 h 141.72 v -35.43 h -35.44 v -35.44 H 424.6 v -35.44 h -35.4 v -35.41 h -35.44 v -35.43 h -35.44 v -35.44 h -35.44 v -35.44 h -35.43 v -35.44 h -35.44 v -35.43 h -35.44 v -35.44 h -35.4 V 60.256 H 105.73 V 24.818 H 70.29 z" />
+ <path
+ id="rect1430"
+ style="fill:#000000;fill-rule:evenodd"
+ inkscape:connector-curvature="0"
+ d="m 35.438,24.812 v 602.35 h 35.437 v -35.44 h 35.435 v -35.41 H 70.875 V 95.662 L 106.31,95.66 V 60.254 H 70.875 V 24.816 H 35.438 z m 70.872,70.844 v 35.434 h 35.41 V 95.656 h -35.41 z m 35.41,35.434 v 35.44 h 35.44 v -35.44 h -35.44 z m 35.44,35.44 v 35.44 h 35.43 v -35.44 h -35.43 z m 35.43,35.44 v 35.44 h 35.44 v -35.44 h -35.44 z m 35.44,35.44 v 35.43 h 35.44 v -35.43 h -35.44 z m 35.44,35.43 v 35.44 h 35.44 v -35.44 h -35.44 z m 35.44,35.44 v 35.41 h 35.43 v -35.41 h -35.43 z m 35.43,35.41 v 35.43 h 35.41 v -35.43 h -35.41 z m 35.41,35.43 v 35.44 H 283.47 v 106.32 h 35.44 V 450 h 141.71 v -35.44 h -35.43 v -35.44 h -35.44 z m -70.84,141.76 v 70.84 h 35.43 v -70.84 h -35.43 z m 35.43,70.84 v 70.87 h 35.41 v -70.87 h -35.41 z m 35.41,70.87 v 70.88 h 35.44 v -70.88 h -35.44 z m 0,70.88 h -70.84 v 35.44 h 70.84 v -35.44 z m -70.84,0 v -70.88 h -35.44 v 70.88 h 35.44 z m -35.44,-70.88 v -70.87 h -35.44 v 70.87 h 35.44 z m -35.44,-70.87 v -70.84 h -35.44 v 70.84 h 35.44 z M 212.59,520.88 V 450 h -35.43 v 35.44 h -35.44 v 35.44 h 70.87 z m -70.87,0 h -35.41 v 35.43 h 35.41 v -35.43 z" />
+ <path
+ id="rect3779"
+ style="fill:#ffffff"
+ inkscape:connector-curvature="0"
+ d="m 70.875,95.656 v 460.65 h 35.435 v -35.43 h 35.41 v -35.44 h 35.44 v -35.44 h 35.43 v 70.88 h 35.44 v 70.84 h 35.44 v 70.87 h 35.44 v 70.88 h 70.84 v -70.88 h -35.41 v -70.87 h -35.43 v -70.84 h -35.44 v -106.32 h 106.28 v -35.44 h -35.41 v -35.43 h -35.43 v -35.41 h -35.44 v -35.44 h -35.44 v -35.43 h -35.44 v -35.44 h -35.43 v -35.44 h -35.44 v -35.44 H 106.31 V 95.648 H 70.875 z" />
+ </g>
+ </g>
+</svg>
The instructions are given separately for the Eclipse IDE, NetBeans, and IntelliJ IDEA.
-
include::getting-started-overview.adoc[leveloffset=+2]
include::getting-started-libraries.asciidoc[leveloffset=+2]
include::getting-started-first-project.asciidoc[leveloffset=+2]
-include::getting-started-maven.asciidoc[leveloffset=+2]
-
include::getting-started-netbeans.asciidoc[leveloffset=+2]
include::getting-started-idea.asciidoc[leveloffset=+2]
+include::getting-started-maven.asciidoc[leveloffset=+2]
+
include::getting-started-package.asciidoc[leveloffset=+2]
include::getting-started-scala.asciidoc[leveloffset=+2]
. Write the source code
-. Configure and start Tomcat (or some other web server)
+. Configure and start web server
. Open a web browser to use the web application
. 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%]
+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%]
+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
the settings are pre-filled, and you should normally accept them as they are.
+
-image::img/myproject-ivy-web.png[]
+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++#
to change anything. You can set most of the settings afterwards, except the
creation of the portlet configuration.
+
-image::img/myproject-vaadin.png[]
+image::img/myproject-vaadin.png[scaledwidth=100%]
[guilabel]#Create project template#:: Make the wizard create an UI class stub.
. In the [guilabel]#New Project# window that opens, select "Vaadin > Vaadin 7
Project (Maven)" and click [guibutton]#Next#.
+
-image::img/myproject-new-vaadin.png[width=70%]
+image::img/myproject-new-vaadin.png[width=70%, scaledwidth=90%]
. In the [guilabel]#Select a Maven archetype# step, you need to select the project type.
To create a simple test project, select the [guilabel]#Single-module Application Project#.
+
-image::img/myproject-archetype-selection.png[width=70%]
+image::img/myproject-archetype-selection.png[width=70%, scaledwidth=90%]
. In the [guilabel]#Specify archetype parameters# step, you need to give at least the [guilabel]#Group Id# and the [guilabel]#Artifact Id#.
The default values should be good for the other settings.
+
-image::img/myproject-settings.png[width=70%]
+image::img/myproject-settings.png[width=70%, scaledwidth=90%]
[guilabel]#Group Id#::
Give the project an organization-level identifier, for example, [packagename]#com.example#.
[[figure.getting-started.first-project.exploring]]
.A new Vaadin Project
-image::img/myproject-created-annotated-hi.png[width=80%]
+image::img/myproject-created-annotated-hi.png[width=80%, scaledwidth=90%]
The Vaadin libraries and other dependencies are managed by Maven.
Notice that the libraries are not stored under the project folder, even though they are listed in the "Java Resources > Libraries > Maven Dependencies" virtual folder.
[[getting-started.first-project.coding]]
== Coding Tips for Eclipse
+=== Code Completion
+
One of the most useful features in Eclipse is __code completion__. Pressing
kbd:[Ctrl+Space] in the editor will display a pop-up list of possible class name and
method name completions, as shown in
[[figure.getting-started.first-project.coding.codecompletion]]
.Java Code Completion in Eclipse
-image::img/codingtips-codecompletion.png[]
-
-To add an [literal]#++import++# statement for a class, such as
-[classname]#Button#, simply press kbd:[Ctrl+Shift+O] or click the red error indicator on
-the left side of the editor window. If the class is available in multiple
-packages, a list of the alternatives is displayed, as shown in
-<<figure.getting-started.first-project.coding.import>>. For server-side
-development, you should normally use the classes under the
-[package]#com.vaadin.ui# or [package]#com.vaadin.server# packages. You can not
-use client-side classes (under [package]#com.vaadin.client#) or GWT classes for
-server-side development.
+image::img/codingtips-codecompletion.png[scaledwidth=100%]
+
+=== Generating Imports
+
+To automatically add an [literal]#++import++# statement for a class, such as
+[classname]#Button#, simply press kbd:[Ctrl+Shift+O] or click the red error indicator on the left side of the editor window.
+If the class is available in multiple packages, a list of the alternatives is displayed, as shown in <<figure.getting-started.first-project.coding.import>>.
[[figure.getting-started.first-project.coding.import]]
-.Importing Classes Automatically
-image::img/codingtips-automaticimports.png[scaledwidth=80%]
+.Importing classes automatically
+image::img/codingtips-automaticimports.png[scaledwidth=70%]
+
+For server-side Vaadin development, you should generally use the classes under the [package]#com.vaadin.ui# or [package]#com.vaadin.server# packages.
+_You can not use client-side classes (under [package]#com.vaadin.client#) or GWT classes for server-side development._
[[getting-started.first-project.server]]
== Setting Up and Starting the Web Server
Follow the following steps:
-. Switch to the Servers tab in the lower panel in Eclipse. List of servers should be empty after Eclipse is installed. Right-click on the empty area in the panel and select "New > Server".
+. Switch to the [guilabel]#Servers# tab in the lower panel in Eclipse.
+List of servers should be empty after Eclipse is installed.
+Right-click on the empty area in the panel and select "New > Server".
+ifdef::web[]
+
-image::img/tomcat-startserver-1.png[]
-
+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[]
-
+image::img/tomcat-startserver-2.png[width=60%, scaledwidth=100%]
+endif::web[]
. 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[]
+image::img/tomcat-startserver-3.png[width=60%, scaledwidth=100%]
+endif::web[]
. The server and the project are now installed in Eclipse and are shown in the [guilabel]#Servers# tab.
To start the server, right-click on the server and select [guilabel]#Debug#.
To start the server in non-debug mode, select [guilabel]#Start#.
+ifdef::web[]
+
-image::img/tomcat-startserver-4.png[]
+image::img/tomcat-startserver-4.png[width=60%, scaledwidth=100%]
+endif::web[]
. The server starts and the WebContent directory of the project is published to the server on http://localhost:8080/myproject/.
+ifdef::web[]
+
-image::img/tomcat-startserver-5.png[]
+image::img/tomcat-startserver-5.png[width=60%, scaledwidth=100%]
+endif::web[]
[[getting-started.first-project.run]]
== Running and Debugging
[guilabel]#Project Explorer# and then "Run > Debug As > Debug on Server".
Eclipse then opens the application in built-in web browser.
+////
+// This is rather irrelevant
+//
.Running a Vaadin Application
-image::img/runningMyProject.png[width=60%]
+image::img/runningMyProject.png[width=60%, scaledwidth=80%]
+////
You can insert break points in the Java code by double-clicking on the left
margin bar of the source code window. For example, if you insert a breakpoint in
To continue execution, select [guilabel]#Resume# from [guilabel]#Run# menu.
.Debugging a Vaadin Application
-image::img/debuggingMyProject.png[]
+image::img/debuggingMyProject.png[scaledwidth=100%]
Above, we described how to debug a server-side application.
Debugging client-side applications and widgets is described in
<<dummy/../../../framework/clientside/clientside-debugging#clientside.debugging,"Debugging Client-Side Code">>.
[[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
project specific, as a different version might be required for different
If you experience problems after updating the libraries, you can try using
"Maven > Update Project".
+ifdef::web[]
[[getting-started.eclipse.libraryupdate]]
== Updating the Vaadin Libraries in Ivy Projects
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[]
Vaadin requires at least Java 6.
If you have not configured a Java SDK previously, you can configure it here.
+
-image::img/idea-newproject-1.png[]
+image::img/idea-newproject-1.png[scaledwidth=100%]
+
Click [guibutton]#Next#.
path. You probably also want an application stub, so select [guilabel]#Create
sample application# and give a name for the generated UI class.
+
-image::img/idea-newproject-2.png[]
+image::img/idea-newproject-2.png[scaledwidth=100%]
+
Do __not__ click [guibutton]#Finish# yet.
ifdef::web[]
+
-image::img/idea-newproject-3.png[]
+image::img/idea-newproject-3.png[scaledwidth=100%]
endif::web[]
. Click [guibutton]#Finish#.
The project is created with the UI class stub and a [filename]#web.xml#
deployment descriptor.
-image::img/idea-newproject-4.png[]
+image::img/idea-newproject-4.png[scaledwidth=100%]
The wizard does not currently create a servlet class automatically, and uses
Servlet 2.4 compatible deployment with a [filename]#web.xml# deployment
. Enter a project name, location, and the Java SDK to be used for the project.
Vaadin requires at least Java 6.
+
-image::img/idea-maven-newproject-1.png[]
+image::img/idea-maven-newproject-1.png[scaledwidth=100%]
+
Click [guibutton]#Next#.
//<?dbfo-need height="6cm" ?>
[guilabel]#Version# for the project, or use the defaults.
+
-image::img/idea-maven-newproject-2.png[]
+image::img/idea-maven-newproject-2.png[scaledwidth=100%]
. Check [guilabel]#Create from archetype#
//<?dbfo-need height="6cm" ?>
. In the [guilabel]#New Project# window that opens, select the [guilabel]#Vaadin# category and one of the Vaadin archetypes from the right.
+
-image::img/netbeans-newproject-1.png[]
+image::img/netbeans-newproject-1.png[width=80%, scaledwidth=100%]
+
The archetypes are described in more detail in <<getting-started-archetypes#getting-started.archetypes, "Overview of Maven Archetypes">>.
. In the [guilabel]#Name and Location# step, enter the project parameters.
+
-image::img/netbeans-newproject-2.png[]
+image::img/netbeans-newproject-2.png[width=80%, scaledwidth=100%]
[guilabel]#Project Name#:: A project name.
The name must be a valid identifier that may only contains alphanumerics, minus, and underscore.
[[figure.getting-started.netbeans.exploring]]
.A new Vaadin project in NetBeans
-image::img/netbeans-created-annotated-hi.png[width=80%]
+image::img/netbeans-created-annotated-hi.png[width=80%, scaledwidth=100%]
[filename]#mytheme#::
The theme of the UI.
. In the [guilabel]#Select deployment server# window, select a server from the [guilabel]#Server# list.
It should show either GlassFish or Apache Tomcat or both, depending on what you chose in NetBeans installation.
+
-image::img/netbeans-server.png[width=75%]
+image::img/netbeans-server.png[width=75%, scaledwidth=100%]
+
Also, select [guilabel]#Remember Permanently# if you want to use the same server also in future while developing applications.
+
Click [guibutton]#OK#.
-+
+
The widget set will be compiled at this point, which may take a while.
If all goes well, NetBeans starts the server in port 8080 and, depending on your
The archetypes contain all the needed dependencies, which Maven takes care of.
The Eclipse IDE plugin currently also supports creating a normal Eclipse web project using the Ivy dependency manager.
-In this chapter, we give:
+In this chapter, we:
-. An overview of the Vaadin libraries
-. List the available Maven archetypes
-. Step-by-step instructions for creating a project in the Eclipse IDE, NetBeans IDE, and IntelliJ IDEA, as well as with command-line.
+* Give an overview of the Vaadin libraries
+* List the available Maven archetypes
+* Give step-by-step instructions for creating a project in the Eclipse IDE, NetBeans IDE, and IntelliJ IDEA, as well as with command-line.
--- /dev/null
+<?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"
+ version="1.1"
+ id="svg1901"
+ height="231"
+ width="561">
+ <defs
+ id="defs1903">
+ <font
+ id="font3118"
+ horiz-adv-x="1024">
+ <font-face
+ font-family="SVGFont 1"
+ id="font-face3120"
+ units-per-em="1024" />
+ <missing-glyph
+ id="missing-glyph3122"
+ d="M0,0h1000v1024h-1000z" />
+ </font>
+ </defs>
+ <metadata
+ id="metadata1906">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ transform="translate(-124.5,-526.86145)"
+ id="layer1">
+ <path
+ id="rect3115"
+ d="m 130,224.09448 550,0 0,220 -550,0 z"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:2, 1;stroke-dashoffset:0;stroke-opacity:0.13524589;marker:none;enable-background:accumulate"
+ transform="translate(0,308.2677)" />
+ <path
+ id="path3003"
+ d="m 185,727.36221 50,0 350,0"
+ style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ <g
+ transform="translate(160,2.7294197e-5)"
+ id="g3238">
+ <g
+ id="g3908-4-9"
+ transform="translate(50.125,-69.875)">
+ <path
+ id="rect3806-4-2-2"
+ d="m 16.740473,657.23718 56.269054,0 c 1.033472,0 1.865473,0.832 1.865473,1.86548 l 0,36.26908 c 0,1.03347 -0.832001,1.86547 -1.865473,1.86547 l -56.269054,0 c -1.033472,0 -1.865473,-0.832 -1.865473,-1.86547 l 0,-36.26908 c 0,-1.03348 0.832001,-1.86548 1.865473,-1.86548 z"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <g
+ id="flowRoot3808-5-7-2"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:11px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+ transform="translate(0.74636894,298.81113)">
+ <path
+ id="path149"
+ style=""
+ d="m 17.025016,365.12887 c 0,2.398 1.166,4.246 4.004,4.246 2.706,0 4.004,-2.013 4.004,-4.246 0,-2.321 -1.408,-4.048 -4.004,-4.048 -2.596,0 -4.004,1.727 -4.004,4.048 z m 1.804,0 c 0,-1.518 0.726,-2.596 2.2,-2.596 1.474,0 2.2,1.078 2.2,2.596 0,1.518 -0.561,2.794 -2.2,2.794 -1.694,0 -2.2,-1.276 -2.2,-2.794 z" />
+ <path
+ id="path151"
+ style=""
+ d="m 26.159484,368.52787 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-2.651 c 0,-0.803 0.66,-1.265 1.221,-1.265 0.693,0 1.012,0.462 1.012,1.111 l 0,2.805 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-3.124 c 0,-1.628 -1.056,-2.112 -2.024,-2.112 -0.913,0 -1.496,0.418 -1.947,1.012 l -0.022,0 0,-0.209 c 0,-0.484 -0.22,-0.803 -0.726,-0.803 -0.506,0 -0.726,0.319 -0.726,0.803 l 0,4.433 z" />
+ <path
+ id="path153"
+ style=""
+ d="m 26.540016,372.35587 c 0.044,-0.165 0.088,-0.341 0.088,-0.517 0,-0.55 -0.451,-0.814 -0.869,-0.814 -0.429,0 -0.704,0.209 -0.814,0.737 l -1.078,5.258 -0.022,0 -1.199,-5.137 c -0.11,-0.495 -0.264,-0.858 -1.023,-0.858 -0.671,0 -0.847,0.231 -0.946,0.671 l -1.232,5.324 -0.022,0 -1.067,-5.258 c -0.11,-0.528 -0.385,-0.737 -0.847,-0.737 -0.418,0 -0.869,0.264 -0.869,0.814 0,0.176 0.044,0.352 0.088,0.517 l 1.551,6.017 c 0.165,0.627 0.429,0.858 1.089,0.858 0.682,0 0.935,-0.286 1.078,-0.891 l 1.177,-4.829 0.022,0 1.177,4.829 c 0.154,0.605 0.396,0.891 1.078,0.891 0.66,0 0.924,-0.231 1.089,-0.858 l 1.551,-6.017 z" />
+ <path
+ id="path155"
+ style=""
+ d="m 27.450609,378.42787 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-4.433 c 0,-0.429 -0.176,-0.803 -0.803,-0.803 -0.627,0 -0.803,0.374 -0.803,0.803 l 0,4.433 z m -0.033,-6.611 c 0,0.462 0.374,0.836 0.836,0.836 0.462,0 0.836,-0.374 0.836,-0.836 0,-0.462 -0.374,-0.836 -0.836,-0.836 -0.462,0 -0.836,0.374 -0.836,0.836 z" />
+ <path
+ id="path157"
+ style=""
+ d="m 30.413391,378.42787 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-2.651 c 0,-0.803 0.66,-1.265 1.221,-1.265 0.693,0 1.012,0.462 1.012,1.111 l 0,2.805 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-3.124 c 0,-1.628 -1.056,-2.112 -2.024,-2.112 -0.913,0 -1.496,0.418 -1.947,1.012 l -0.022,0 0,-0.209 c 0,-0.484 -0.22,-0.803 -0.726,-0.803 -0.506,0 -0.726,0.319 -0.726,0.803 l 0,4.433 z" />
+ <path
+ id="path159"
+ style=""
+ d="m 42.583,371.82787 c 0,-0.528 -0.319,-0.803 -0.803,-0.803 -0.484,0 -0.803,0.275 -0.803,0.803 l 0,2.178 -0.022,0 c -0.319,-0.517 -0.869,-0.814 -1.584,-0.814 -1.694,0 -2.475,1.441 -2.475,2.981 0,2.079 1.177,3.058 2.519,3.058 0.781,0 1.43,-0.33 1.694,-1.012 l 0.022,0 0,0.253 c 0,0.495 0.253,0.759 0.726,0.759 0.495,0 0.726,-0.264 0.726,-0.759 l 0,-6.644 z m -4.081,4.4 c 0,-0.748 0.253,-1.782 1.276,-1.782 0.979,-0.011 1.287,0.957 1.287,1.782 0,0.913 -0.352,1.749 -1.287,1.749 -0.858,-0.022 -1.276,-0.803 -1.276,-1.749 z" />
+ <path
+ id="path161"
+ style=""
+ d="m 45.226609,376.20587 c 0,-1.045 0.429,-1.826 1.364,-1.826 0.935,0 1.364,0.781 1.364,1.826 0,0.979 -0.407,1.837 -1.364,1.837 -0.957,0 -1.364,-0.858 -1.364,-1.837 z m -1.606,0 c 0,1.606 0.781,3.025 2.97,3.025 2.189,0 2.97,-1.419 2.97,-3.025 0,-1.694 -1.034,-3.014 -2.97,-3.014 -1.936,0 -2.97,1.32 -2.97,3.014 z" />
+ <path
+ id="path163"
+ style=""
+ d="m 51.314766,378.36187 c 0.231,0.759 0.407,0.869 1.045,0.869 0.671,0 0.836,-0.198 1.001,-0.836 l 0.792,-3.157 0.022,0 0.792,3.157 c 0.165,0.638 0.33,0.836 1.001,0.836 0.638,0 0.814,-0.11 1.045,-0.869 l 1.177,-3.828 c 0.055,-0.176 0.11,-0.352 0.11,-0.594 0,-0.418 -0.374,-0.748 -0.781,-0.748 -0.594,0 -0.693,0.319 -0.792,0.781 l -0.792,3.52 -0.022,0 -0.693,-3.201 c -0.143,-0.638 -0.297,-1.122 -1.056,-1.1 -0.748,-0.022 -0.88,0.473 -1.012,1.1 l -0.682,3.201 -0.022,0 -0.847,-3.52 c -0.11,-0.462 -0.198,-0.781 -0.792,-0.781 -0.407,0 -0.781,0.33 -0.781,0.748 0,0.242 0.055,0.418 0.11,0.594 l 1.177,3.828 z" />
+ <path
+ id="path165"
+ style=""
+ d="m 58.820547,374.98487 c 0,1.078 0.726,1.463 1.661,1.694 l 0.946,0.231 c 0.572,0.143 0.924,0.209 0.924,0.616 0,0.33 -0.363,0.583 -0.935,0.583 -1.188,0 -1.254,-0.99 -1.947,-0.99 -0.451,0 -0.649,0.319 -0.649,0.671 0,0.792 1.21,1.441 2.662,1.441 1.21,0 2.475,-0.605 2.475,-1.914 0,-1.122 -1.089,-1.507 -2.002,-1.716 l -0.671,-0.154 c -0.495,-0.11 -0.858,-0.198 -0.858,-0.572 0,-0.341 0.363,-0.495 0.924,-0.495 1.012,0 1.034,0.737 1.661,0.737 0.418,0 0.671,-0.33 0.671,-0.704 0,-0.737 -1.232,-1.221 -2.453,-1.221 -1.111,0 -2.409,0.484 -2.409,1.793 z" />
+ </g>
+ </g>
+ <g
+ id="g3908-4"
+ transform="translate(50.125,-49.875)">
+ <path
+ id="rect3806-4-2"
+ d="m 16.740473,662.23718 56.269054,0 c 1.033472,0 1.865473,0.832 1.865473,1.86548 l 0,31.26908 c 0,1.03347 -0.832001,1.86547 -1.865473,1.86547 l -56.269054,0 c -1.033472,0 -1.865473,-0.832 -1.865473,-1.86547 l 0,-31.26908 c 0,-1.03348 0.832001,-1.86548 1.865473,-1.86548 z"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <g
+ id="flowRoot3808-5-7"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+ transform="translate(0.73921187,303.05351)">
+ <path
+ id="path169"
+ style="font-size:11px"
+ d="m 17.025016,365.12887 c 0,2.398 1.166,4.246 4.004,4.246 2.706,0 4.004,-2.013 4.004,-4.246 0,-2.321 -1.408,-4.048 -4.004,-4.048 -2.596,0 -4.004,1.727 -4.004,4.048 z m 1.804,0 c 0,-1.518 0.726,-2.596 2.2,-2.596 1.474,0 2.2,1.078 2.2,2.596 0,1.518 -0.561,2.794 -2.2,2.794 -1.694,0 -2.2,-1.276 -2.2,-2.794 z" />
+ <path
+ id="path171"
+ style="font-size:11px"
+ d="m 26.159484,368.52787 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-2.651 c 0,-0.803 0.66,-1.265 1.221,-1.265 0.693,0 1.012,0.462 1.012,1.111 l 0,2.805 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-3.124 c 0,-1.628 -1.056,-2.112 -2.024,-2.112 -0.913,0 -1.496,0.418 -1.947,1.012 l -0.022,0 0,-0.209 c 0,-0.484 -0.22,-0.803 -0.726,-0.803 -0.506,0 -0.726,0.319 -0.726,0.803 l 0,4.433 z" />
+ <path
+ id="path173"
+ style="font-size:11px"
+ d="m 17.025016,375.02887 c 0,2.398 1.166,4.246 4.004,4.246 2.706,0 4.004,-2.013 4.004,-4.246 0,-2.321 -1.408,-4.048 -4.004,-4.048 -2.596,0 -4.004,1.727 -4.004,4.048 z m 1.804,0 c 0,-1.518 0.726,-2.596 2.2,-2.596 1.474,0 2.2,1.078 2.2,2.596 0,1.518 -0.561,2.794 -2.2,2.794 -1.694,0 -2.2,-1.276 -2.2,-2.794 z" />
+ <path
+ id="path175"
+ style="font-size:11px"
+ d="m 28.997484,374.15987 c -0.572,-0.132 -1.232,-0.308 -1.232,-0.858 0,-0.55 0.462,-0.935 1.298,-0.935 1.683,0 1.529,1.177 2.365,1.177 0.44,0 0.825,-0.264 0.825,-0.715 0,-1.056 -1.661,-1.848 -3.069,-1.848 -1.529,0 -3.157,0.66 -3.157,2.42 0,0.847 0.297,1.749 1.936,2.167 l 2.035,0.517 c 0.616,0.154 0.77,0.506 0.77,0.825 0,0.528 -0.517,1.045 -1.452,1.045 -1.826,0 -1.573,-1.43 -2.552,-1.43 -0.44,0 -0.759,0.308 -0.759,0.748 0,0.858 1.023,2.002 3.311,2.002 2.178,0 3.256,-1.067 3.256,-2.497 0,-0.924 -0.418,-1.903 -2.068,-2.277 l -1.507,-0.341 z" />
+ <path
+ id="path177"
+ style="font-size:11px"
+ d="m 36.798547,377.76787 c -0.209,0.308 -0.242,0.506 -0.242,0.693 0,0.44 0.341,0.77 0.869,0.77 0.275,0 0.55,-0.099 0.704,-0.352 l 1.562,-2.497 1.452,2.431 c 0.209,0.352 0.462,0.418 0.759,0.418 0.506,0 0.924,-0.308 0.924,-0.891 0,-0.209 -0.11,-0.352 -0.297,-0.638 l -1.793,-2.695 1.837,-2.684 c 0.088,-0.121 0.165,-0.33 0.165,-0.484 0,-0.572 -0.429,-0.814 -0.869,-0.814 -0.396,0 -0.55,0.143 -0.737,0.44 l -1.397,2.255 -1.309,-2.255 c -0.11,-0.187 -0.319,-0.44 -0.748,-0.44 -0.517,0 -0.902,0.374 -0.902,0.847 0,0.209 0.077,0.385 0.187,0.55 l 1.727,2.585 -1.892,2.761 z" />
+ </g>
+ </g>
+ <g
+ id="g3908"
+ transform="translate(50.125,-29.875)">
+ <path
+ id="rect3806-4"
+ d="m 16.740473,667.23718 56.269054,0 c 1.033472,0 1.865473,0.832 1.865473,1.86548 l 0,26.26908 c 0,1.03347 -0.832001,1.86547 -1.865473,1.86547 l -56.269054,0 c -1.033472,0 -1.865473,-0.832 -1.865473,-1.86547 l 0,-26.26908 c 0,-1.03348 0.832001,-1.86548 1.865473,-1.86548 z"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <g
+ id="flowRoot3808-5"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:8px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+ transform="translate(0.71890704,308.81113)">
+ <path
+ id="path181"
+ style="font-size:11px"
+ d="m 17.025016,365.12887 c 0,2.398 1.166,4.246 4.004,4.246 2.706,0 4.004,-2.013 4.004,-4.246 0,-2.321 -1.408,-4.048 -4.004,-4.048 -2.596,0 -4.004,1.727 -4.004,4.048 z m 1.804,0 c 0,-1.518 0.726,-2.596 2.2,-2.596 1.474,0 2.2,1.078 2.2,2.596 0,1.518 -0.561,2.794 -2.2,2.794 -1.694,0 -2.2,-1.276 -2.2,-2.794 z" />
+ <path
+ id="path183"
+ style="font-size:11px"
+ d="m 26.159484,368.52787 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-2.651 c 0,-0.803 0.66,-1.265 1.221,-1.265 0.693,0 1.012,0.462 1.012,1.111 l 0,2.805 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-3.124 c 0,-1.628 -1.056,-2.112 -2.024,-2.112 -0.913,0 -1.496,0.418 -1.947,1.012 l -0.022,0 0,-0.209 c 0,-0.484 -0.22,-0.803 -0.726,-0.803 -0.506,0 -0.726,0.319 -0.726,0.803 l 0,4.433 z" />
+ <path
+ id="path185"
+ style="font-size:11px"
+ d="m 17.377016,378.03187 c 0,0.803 0.418,1.056 1.056,1.056 l 3.762,0 c 0.517,0 0.935,-0.264 0.935,-0.759 0,-0.495 -0.418,-0.759 -0.935,-0.759 l -3.014,0 0,-5.643 c 0,-0.539 -0.352,-0.902 -0.902,-0.902 -0.55,0 -0.902,0.363 -0.902,0.902 l 0,6.105 z" />
+ <path
+ id="path187"
+ style="font-size:11px"
+ d="m 23.991625,378.42787 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-4.433 c 0,-0.429 -0.176,-0.803 -0.803,-0.803 -0.627,0 -0.803,0.374 -0.803,0.803 l 0,4.433 z m -0.033,-6.611 c 0,0.462 0.374,0.836 0.836,0.836 0.462,0 0.836,-0.374 0.836,-0.836 0,-0.462 -0.374,-0.836 -0.836,-0.836 -0.462,0 -0.836,0.374 -0.836,0.836 z" />
+ <path
+ id="path189"
+ style="font-size:11px"
+ d="m 26.954406,378.42787 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-2.651 c 0,-0.803 0.66,-1.265 1.221,-1.265 0.693,0 1.012,0.462 1.012,1.111 l 0,2.805 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-3.124 c 0,-1.628 -1.056,-2.112 -2.024,-2.112 -0.913,0 -1.496,0.418 -1.947,1.012 l -0.022,0 0,-0.209 c 0,-0.484 -0.22,-0.803 -0.726,-0.803 -0.506,0 -0.726,0.319 -0.726,0.803 l 0,4.433 z" />
+ <path
+ id="path191"
+ style="font-size:11px"
+ d="m 39.124016,373.99487 c 0,-0.429 -0.176,-0.803 -0.803,-0.803 -0.627,0 -0.803,0.374 -0.803,0.803 l 0,2.651 c 0,0.803 -0.66,1.265 -1.221,1.265 -0.693,0 -1.012,-0.462 -1.012,-1.111 l 0,-2.805 c 0,-0.429 -0.176,-0.803 -0.803,-0.803 -0.627,0 -0.803,0.374 -0.803,0.803 l 0,3.124 c 0,1.628 1.056,2.112 2.024,2.112 0.913,0 1.496,-0.418 1.947,-1.012 l 0.022,0 0,0.209 c 0,0.484 0.22,0.803 0.726,0.803 0.506,0 0.726,-0.319 0.726,-0.803 l 0,-4.433 z" />
+ <path
+ id="path193"
+ style="font-size:11px"
+ d="m 42.405625,377.22887 0.924,1.474 c 0.209,0.33 0.407,0.528 0.737,0.528 0.517,0 0.814,-0.363 0.814,-0.748 0,-0.231 -0.066,-0.363 -0.154,-0.484 l -1.243,-1.848 1.166,-1.727 c 0.099,-0.143 0.165,-0.308 0.165,-0.539 0,-0.363 -0.352,-0.693 -0.726,-0.693 -0.253,0 -0.495,0.066 -0.737,0.473 l -0.869,1.419 -0.902,-1.485 c -0.187,-0.308 -0.396,-0.407 -0.649,-0.407 -0.583,0 -0.858,0.462 -0.858,0.803 0,0.154 0.077,0.297 0.165,0.418 l 1.155,1.738 -1.232,1.815 c -0.143,0.209 -0.22,0.374 -0.22,0.517 0,0.44 0.396,0.748 0.781,0.748 0.297,0 0.517,-0.154 0.627,-0.319 l 1.056,-1.683 z" />
+ </g>
+ </g>
+ <g
+ id="g3822"
+ transform="translate(30,-2.7058031e-6)">
+ <path
+ id="path3005-2"
+ d="m 19.911936,426.71852 a 9.1659365,9.1659365 0 0 1 -2.53643,-12.71142 9.1659365,9.1659365 0 0 1 12.711199,-2.53756 9.1659365,9.1659365 0 0 1 2.538696,12.71097 9.1659365,9.1659365 0 0 1 -12.710747,2.53983 L 25,419.09448 Z"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#000000;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:2, 1;stroke-dashoffset:0;stroke-opacity:0.13524589;marker:none;enable-background:accumulate"
+ transform="matrix(0.54549827,0,0,0.54549827,36.362543,498.74687)" />
+ <path
+ transform="translate(0,308.2677)"
+ id="path3804"
+ d="m 50,419.09448 c 0,-15 0,-25.36336 0,-25.36336"
+ style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ </g>
+ <g
+ id="g3868"
+ transform="translate(4.8113861,-12.853955)">
+ <path
+ id="rect3806"
+ d="m 33.219076,675.21613 83.939074,0 c 1.67888,0 3.03046,1.35158 3.03046,3.03046 l 0,33.93909 c 0,1.67887 -1.35158,3.03046 -3.03046,3.03046 l -83.939074,0 c -1.678876,0 -3.030462,-1.35159 -3.030462,-3.03046 l 0,-33.93909 c 0,-1.67888 1.351586,-3.03046 3.030462,-3.03046 z"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <g
+ id="flowRoot3808"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:16px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+ transform="translate(18.369364,319.99189)">
+ <path
+ id="path198"
+ style=""
+ d="m 17.757016,370.83262 c 0,0.784 0.512,1.312 1.312,1.312 0.8,0 1.312,-0.528 1.312,-1.312 l 0,-9.312 c 0,-0.784 -0.512,-1.312 -1.312,-1.312 -0.8,0 -1.312,0.528 -1.312,1.312 l 0,9.312 z" />
+ <path
+ id="path200"
+ style=""
+ d="m 22.531516,370.97662 c 0,0.624 0.256,1.168 1.168,1.168 0.912,0 1.168,-0.544 1.168,-1.168 l 0,-3.856 c 0,-1.168 0.96,-1.84 1.776,-1.84 1.008,0 1.472,0.672 1.472,1.616 l 0,4.08 c 0,0.624 0.256,1.168 1.168,1.168 0.912,0 1.168,-0.544 1.168,-1.168 l 0,-4.544 c 0,-2.368 -1.536,-3.072 -2.944,-3.072 -1.328,0 -2.176,0.608 -2.832,1.472 l -0.032,0 0,-0.304 c 0,-0.704 -0.32,-1.168 -1.056,-1.168 -0.736,0 -1.056,0.464 -1.056,1.168 l 0,6.448 z" />
+ <path
+ id="path202"
+ style=""
+ d="m 31.944766,365.96862 c 0,1.568 1.056,2.128 2.416,2.464 l 1.376,0.336 c 0.832,0.208 1.344,0.304 1.344,0.896 0,0.48 -0.528,0.848 -1.36,0.848 -1.728,0 -1.824,-1.44 -2.832,-1.44 -0.656,0 -0.944,0.464 -0.944,0.976 0,1.152 1.76,2.096 3.872,2.096 1.76,0 3.6,-0.88 3.6,-2.784 0,-1.632 -1.584,-2.192 -2.912,-2.496 l -0.976,-0.224 c -0.72,-0.16 -1.248,-0.288 -1.248,-0.832 0,-0.496 0.528,-0.72 1.344,-0.72 1.472,0 1.504,1.072 2.416,1.072 0.608,0 0.976,-0.48 0.976,-1.024 0,-1.072 -1.792,-1.776 -3.568,-1.776 -1.616,0 -3.504,0.704 -3.504,2.608 z" />
+ <path
+ id="path204"
+ style=""
+ d="m 41.514516,370.06462 c 0,1.376 0.704,2.08 2.4,2.08 1.12,0 1.696,-0.368 1.696,-1.04 0,-0.496 -0.304,-0.784 -0.816,-0.784 l -0.336,0 c -0.416,0 -0.608,-0.192 -0.608,-0.544 l 0,-4.672 0.704,0 c 0.688,0 1.056,-0.208 1.056,-0.768 0,-0.56 -0.368,-0.768 -1.056,-0.768 l -0.704,0 0,-1.424 c 0,-0.768 -0.464,-1.168 -1.168,-1.168 -0.704,0 -1.168,0.4 -1.168,1.168 l 0,1.424 -0.4,0 c -0.656,0 -0.928,0.256 -0.928,0.768 0,0.512 0.272,0.768 0.928,0.768 l 0.4,0 0,4.96 z" />
+ <path
+ id="path206"
+ style=""
+ d="m 54.572766,365.76062 c 0,-1.68 -1.552,-2.4 -3.792,-2.4 -2.4,0 -3.712,1.184 -3.712,2.112 0,0.48 0.4,0.896 0.992,0.896 0.928,0 0.976,-1.28 2.704,-1.28 0.784,0 1.472,0.288 1.472,0.96 0,0.672 -0.448,0.8 -1.008,0.864 l -1.424,0.16 c -1.792,0.208 -3.264,0.752 -3.264,2.688 0,1.472 1.312,2.384 2.64,2.384 1.232,0 2.288,-0.352 3.2,-1.36 0.032,0.72 0.368,1.36 1.376,1.36 0.56,0 1.056,-0.368 1.056,-0.896 0,-0.368 -0.24,-0.592 -0.24,-1.568 l 0,-3.92 z m -2.336,3.152 c 0,0.864 -0.784,1.696 -2.064,1.696 -0.8,0 -1.296,-0.432 -1.296,-0.96 0,-0.704 0.528,-1.008 1.504,-1.152 l 0.848,-0.128 c 0.272,-0.048 0.752,-0.128 1.008,-0.368 l 0,0.912 z" />
+ <path
+ id="path208"
+ style=""
+ d="m 56.722016,370.97662 c 0,0.768 0.464,1.168 1.168,1.168 0.704,0 1.168,-0.4 1.168,-1.168 l 0,-9.6 c 0,-0.768 -0.464,-1.168 -1.168,-1.168 -0.704,0 -1.168,0.4 -1.168,1.168 l 0,9.6 z" />
+ <path
+ id="path210"
+ style=""
+ d="m 61.159516,370.97662 c 0,0.768 0.464,1.168 1.168,1.168 0.704,0 1.168,-0.4 1.168,-1.168 l 0,-9.6 c 0,-0.768 -0.464,-1.168 -1.168,-1.168 -0.704,0 -1.168,0.4 -1.168,1.168 l 0,9.6 z" />
+ <path
+ id="path212"
+ style=""
+ d="m 24.509016,375.92062 c 0,-0.784 -0.512,-1.312 -1.312,-1.312 -0.8,0 -1.312,0.528 -1.312,1.312 l 0,6.784 c 0,1.248 -0.48,1.888 -1.344,1.888 -0.928,0 -1.28,-0.544 -1.28,-1.296 0,-0.784 -0.24,-1.52 -1.184,-1.52 -0.8,0 -1.248,0.624 -1.248,1.6 0,1.136 0.592,3.232 3.744,3.232 2.592,0 3.936,-1.456 3.936,-3.872 l 0,-6.816 z" />
+ <path
+ id="path214"
+ style=""
+ d="m 26.944516,384.80062 c 0,1.168 0.608,1.536 1.536,1.536 l 3.152,0 c 3.504,0 5.536,-2.112 5.536,-5.76 0,-4.512 -2.624,-5.76 -5.488,-5.76 l -3.2,0 c -0.928,0 -1.536,0.368 -1.536,1.536 l 0,8.448 z m 2.624,-7.872 2.192,0 c 1.92,0 2.784,1.376 2.784,3.648 0,1.776 -0.672,3.648 -2.768,3.648 l -2.208,0 0,-7.296 z" />
+ <path
+ id="path216"
+ style=""
+ d="m 39.100766,385.23262 c 0,0.784 0.512,1.312 1.312,1.312 0.8,0 1.312,-0.528 1.312,-1.312 l 0,-2.608 1.44,-1.44 3.024,4.672 c 0.352,0.56 0.64,0.688 1.168,0.688 0.624,0 1.344,-0.288 1.344,-1.264 0,-0.336 -0.256,-0.672 -0.496,-1.04 l -3.184,-4.848 2.688,-2.832 c 0.224,-0.224 0.432,-0.496 0.432,-0.896 0,-0.672 -0.624,-1.056 -1.248,-1.056 -0.464,0 -0.736,0.256 -1.04,0.576 l -4.128,4.544 0,-3.808 c 0,-0.784 -0.512,-1.312 -1.312,-1.312 -0.8,0 -1.312,0.528 -1.312,1.312 l 0,9.312 z" />
+ </g>
+ </g>
+ </g>
+ <g
+ transform="translate(160,2.7294197e-5)"
+ id="g3271">
+ <g
+ id="g3908-4-9-7"
+ transform="translate(150.125,-70.238342)">
+ <path
+ id="rect3806-4-2-2-0"
+ d="m 16.740473,657.60052 56.269054,0 c 1.033472,0 1.865473,0.83201 1.865473,1.86548 l 0,36.26902 c 0,1.03347 -0.832001,1.86547 -1.865473,1.86547 l -56.269054,0 c -1.033472,0 -1.865473,-0.832 -1.865473,-1.86547 l 0,-36.26902 c 0,-1.03347 0.832001,-1.86548 1.865473,-1.86548 z"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <g
+ id="flowRoot3808-5-7-2-4"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:11px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+ transform="translate(0.96798326,298.92194)">
+ <path
+ id="path220"
+ style=""
+ d="m 17.421016,368.13187 c 0,0.803 0.418,1.056 1.056,1.056 l 4.323,0 c 0.528,0 0.913,-0.154 0.913,-0.726 0,-0.572 -0.385,-0.726 -0.913,-0.726 l -3.575,0 0,-1.914 3.058,0 c 0.473,0 0.847,-0.132 0.847,-0.693 0,-0.561 -0.374,-0.693 -0.847,-0.693 l -3.058,0 0,-1.716 3.487,0 c 0.528,0 0.913,-0.154 0.913,-0.726 0,-0.572 -0.385,-0.726 -0.913,-0.726 l -4.235,0 c -0.638,0 -1.056,0.253 -1.056,1.056 l 0,5.808 z" />
+ <path
+ id="path222"
+ style=""
+ d="m 24.412031,366.42687 c 0,1.683 0.935,2.904 2.915,2.904 1.65,0 2.442,-0.968 2.442,-1.672 0,-0.319 -0.264,-0.616 -0.671,-0.616 -0.847,0 -0.605,1.034 -1.727,1.034 -0.88,0 -1.353,-0.649 -1.353,-1.65 0,-1.452 0.737,-1.881 1.364,-1.881 1.155,0 0.88,0.946 1.639,0.946 0.407,0 0.748,-0.231 0.748,-0.693 0,-0.748 -1.001,-1.507 -2.343,-1.507 -1.969,0 -3.014,1.287 -3.014,3.135 z" />
+ <path
+ id="path224"
+ style=""
+ d="m 30.716234,368.52787 c 0,0.528 0.319,0.803 0.803,0.803 0.484,0 0.803,-0.275 0.803,-0.803 l 0,-6.6 c 0,-0.528 -0.319,-0.803 -0.803,-0.803 -0.484,0 -0.803,0.275 -0.803,0.803 l 0,6.6 z" />
+ <path
+ id="path226"
+ style=""
+ d="m 33.767016,368.52787 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-4.433 c 0,-0.429 -0.176,-0.803 -0.803,-0.803 -0.627,0 -0.803,0.374 -0.803,0.803 l 0,4.433 z m -0.033,-6.611 c 0,0.462 0.374,0.836 0.836,0.836 0.462,0 0.836,-0.374 0.836,-0.836 0,-0.462 -0.374,-0.836 -0.836,-0.836 -0.462,0 -0.836,0.374 -0.836,0.836 z" />
+ <path
+ id="path228"
+ style=""
+ d="m 36.729797,370.66187 c 0,0.528 0.319,0.803 0.803,0.803 0.484,0 0.803,-0.275 0.803,-0.803 l 0,-2.145 0.022,0 c 0.297,0.517 0.847,0.814 1.584,0.814 1.694,0 2.475,-1.441 2.475,-2.981 0,-2.079 -1.177,-3.058 -2.519,-3.058 -0.781,0 -1.43,0.33 -1.694,1.012 l -0.022,0 0,-0.253 c 0,-0.495 -0.253,-0.759 -0.726,-0.759 -0.495,0 -0.726,0.264 -0.726,0.759 l 0,6.611 z m 4.081,-4.367 c 0,0.748 -0.253,1.782 -1.276,1.782 -0.979,0.011 -1.287,-0.957 -1.287,-1.782 0,-0.913 0.352,-1.749 1.287,-1.749 0.858,0.022 1.276,0.803 1.276,1.749 z" />
+ <path
+ id="path230"
+ style=""
+ d="m 43.201406,365.08487 c 0,1.078 0.726,1.463 1.661,1.694 l 0.946,0.231 c 0.572,0.143 0.924,0.209 0.924,0.616 0,0.33 -0.363,0.583 -0.935,0.583 -1.188,0 -1.254,-0.99 -1.947,-0.99 -0.451,0 -0.649,0.319 -0.649,0.671 0,0.792 1.21,1.441 2.662,1.441 1.21,0 2.475,-0.605 2.475,-1.914 0,-1.122 -1.089,-1.507 -2.002,-1.716 l -0.671,-0.154 c -0.495,-0.11 -0.858,-0.198 -0.858,-0.572 0,-0.341 0.363,-0.495 0.924,-0.495 1.012,0 1.034,0.737 1.661,0.737 0.418,0 0.671,-0.33 0.671,-0.704 0,-0.737 -1.232,-1.221 -2.453,-1.221 -1.111,0 -2.409,0.484 -2.409,1.793 z" />
+ <path
+ id="path232"
+ style=""
+ d="m 54.356609,366.61387 c 0.539,0 0.704,-0.143 0.704,-0.693 0,-1.32 -1.056,-2.629 -2.904,-2.629 -1.903,0 -3.036,1.254 -3.036,3.124 0,1.397 0.847,2.915 3.091,2.915 0.968,0 2.519,-0.451 2.519,-1.419 0,-0.297 -0.275,-0.627 -0.66,-0.627 -0.649,0 -0.649,0.792 -1.859,0.792 -0.935,0 -1.485,-0.616 -1.485,-1.463 l 3.63,0 z m -3.63,-0.924 c 0.176,-0.781 0.66,-1.276 1.463,-1.276 0.715,0 1.265,0.539 1.353,1.276 l -2.816,0 z" />
+ <path
+ id="path234"
+ style=""
+ d="m 17.377016,378.32887 c 0,0.539 0.352,0.902 0.902,0.902 0.55,0 0.902,-0.363 0.902,-0.902 l 0,-6.402 c 0,-0.539 -0.352,-0.902 -0.902,-0.902 -0.55,0 -0.902,0.363 -0.902,0.902 l 0,6.402 z" />
+ <path
+ id="path236"
+ style=""
+ d="m 20.857484,378.03187 c 0,0.803 0.418,1.056 1.056,1.056 l 2.167,0 c 2.409,0 3.806,-1.452 3.806,-3.96 0,-3.102 -1.804,-3.96 -3.773,-3.96 l -2.2,0 c -0.638,0 -1.056,0.253 -1.056,1.056 l 0,5.808 z m 1.804,-5.412 1.507,0 c 1.32,0 1.914,0.946 1.914,2.508 0,1.221 -0.462,2.508 -1.903,2.508 l -1.518,0 0,-5.016 z" />
+ <path
+ id="path238"
+ style=""
+ d="m 29.258906,378.03187 c 0,0.803 0.418,1.056 1.056,1.056 l 4.323,0 c 0.528,0 0.913,-0.154 0.913,-0.726 0,-0.572 -0.385,-0.726 -0.913,-0.726 l -3.575,0 0,-1.914 3.058,0 c 0.473,0 0.847,-0.132 0.847,-0.693 0,-0.561 -0.374,-0.693 -0.847,-0.693 l -3.058,0 0,-1.716 3.487,0 c 0.528,0 0.913,-0.154 0.913,-0.726 0,-0.572 -0.385,-0.726 -0.913,-0.726 l -4.235,0 c -0.638,0 -1.056,0.253 -1.056,1.056 l 0,5.808 z" />
+ </g>
+ </g>
+ <g
+ id="g3908-4-1"
+ transform="translate(145.125,-49.874982)">
+ <path
+ id="rect3806-4-2-6"
+ d="m 21.740473,662.23712 56.269054,0 c 1.033472,0 1.865473,0.832 1.865473,1.86547 l 0,31.2691 c 0,1.03348 -0.832001,1.86548 -1.865473,1.86548 l -56.269054,0 c -1.033472,0 -1.865473,-0.832 -1.865473,-1.86548 l 0,-31.2691 c 0,-1.03347 0.832001,-1.86547 1.865473,-1.86547 z"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <g
+ id="flowRoot3808-5-7-0"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:11px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+ transform="translate(5.79546,303.04687)">
+ <path
+ id="path242"
+ style=""
+ d="m 17.344016,368.46187 c 0,0.583 0.33,0.869 0.869,0.869 0.539,0 0.869,-0.286 0.869,-0.869 l 0,-4.565 0.022,0 3.135,4.95 c 0.231,0.363 0.418,0.484 0.99,0.484 0.759,0 1.067,-0.407 1.067,-1.122 l 0,-6.215 c 0,-0.583 -0.33,-0.869 -0.869,-0.869 -0.539,0 -0.869,0.286 -0.869,0.869 l 0,4.697 -0.022,0 -3.157,-5.093 c -0.198,-0.33 -0.528,-0.473 -0.902,-0.473 -0.77,0 -1.133,0.308 -1.133,1.056 l 0,6.281 z" />
+ <path
+ id="path244"
+ style=""
+ d="m 30.723797,366.61387 c 0.539,0 0.704,-0.143 0.704,-0.693 0,-1.32 -1.056,-2.629 -2.904,-2.629 -1.903,0 -3.036,1.254 -3.036,3.124 0,1.397 0.847,2.915 3.091,2.915 0.968,0 2.519,-0.451 2.519,-1.419 0,-0.297 -0.275,-0.627 -0.66,-0.627 -0.649,0 -0.649,0.792 -1.859,0.792 -0.935,0 -1.485,-0.616 -1.485,-1.463 l 3.63,0 z m -3.63,-0.924 c 0.176,-0.781 0.66,-1.276 1.463,-1.276 0.715,0 1.265,0.539 1.353,1.276 l -2.816,0 z" />
+ <path
+ id="path246"
+ style=""
+ d="m 32.872406,367.90087 c 0,0.946 0.484,1.43 1.65,1.43 0.77,0 1.166,-0.253 1.166,-0.715 0,-0.341 -0.209,-0.539 -0.561,-0.539 l -0.231,0 c -0.286,0 -0.418,-0.132 -0.418,-0.374 l 0,-3.212 0.484,0 c 0.473,0 0.726,-0.143 0.726,-0.528 0,-0.385 -0.253,-0.528 -0.726,-0.528 l -0.484,0 0,-0.979 c 0,-0.528 -0.319,-0.803 -0.803,-0.803 -0.484,0 -0.803,0.275 -0.803,0.803 l 0,0.979 -0.275,0 c -0.451,0 -0.638,0.176 -0.638,0.528 0,0.352 0.187,0.528 0.638,0.528 l 0.275,0 0,3.41 z" />
+ <path
+ id="path248"
+ style=""
+ d="m 36.712953,368.13187 c 0,0.803 0.418,1.056 1.056,1.056 l 2.651,0 c 1.562,0 2.915,-0.682 2.915,-2.343 0,-1.089 -0.55,-1.683 -1.386,-1.903 l 0,-0.022 c 0.748,-0.297 1.111,-0.935 1.111,-1.606 0,-1.749 -1.573,-2.046 -2.893,-2.046 l -2.398,0 c -0.638,0 -1.056,0.253 -1.056,1.056 l 0,5.808 z m 1.804,-2.464 1.298,0 c 0.88,0 1.716,0.121 1.716,1.078 0,0.913 -0.792,1.056 -1.496,1.056 l -1.518,0 0,-2.134 z m 0,-3.08 1.43,0 c 0.671,0 1.309,0.209 1.309,0.968 0,0.627 -0.407,0.968 -1.254,0.968 l -1.485,0 0,-1.936 z" />
+ <path
+ id="path250"
+ style=""
+ d="m 49.458172,366.61387 c 0.539,0 0.704,-0.143 0.704,-0.693 0,-1.32 -1.056,-2.629 -2.904,-2.629 -1.903,0 -3.036,1.254 -3.036,3.124 0,1.397 0.847,2.915 3.091,2.915 0.968,0 2.519,-0.451 2.519,-1.419 0,-0.297 -0.275,-0.627 -0.66,-0.627 -0.649,0 -0.649,0.792 -1.859,0.792 -0.935,0 -1.485,-0.616 -1.485,-1.463 l 3.63,0 z m -3.63,-0.924 c 0.176,-0.781 0.66,-1.276 1.463,-1.276 0.715,0 1.265,0.539 1.353,1.276 l -2.816,0 z" />
+ <path
+ id="path252"
+ style=""
+ d="m 56.523781,364.94187 c 0,-1.155 -1.067,-1.65 -2.607,-1.65 -1.65,0 -2.552,0.814 -2.552,1.452 0,0.33 0.275,0.616 0.682,0.616 0.638,0 0.671,-0.88 1.859,-0.88 0.539,0 1.012,0.198 1.012,0.66 0,0.462 -0.308,0.55 -0.693,0.594 l -0.979,0.11 c -1.232,0.143 -2.244,0.517 -2.244,1.848 0,1.012 0.902,1.639 1.815,1.639 0.847,0 1.573,-0.242 2.2,-0.935 0.022,0.495 0.253,0.935 0.946,0.935 0.385,0 0.726,-0.253 0.726,-0.616 0,-0.253 -0.165,-0.407 -0.165,-1.078 l 0,-2.695 z m -1.606,2.167 c 0,0.594 -0.539,1.166 -1.419,1.166 -0.55,0 -0.891,-0.297 -0.891,-0.66 0,-0.484 0.363,-0.693 1.034,-0.792 l 0.583,-0.088 c 0.187,-0.033 0.517,-0.088 0.693,-0.253 l 0,0.627 z" />
+ <path
+ id="path254"
+ style=""
+ d="m 57.913391,368.52787 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-2.651 c 0,-0.803 0.66,-1.265 1.221,-1.265 0.693,0 1.012,0.462 1.012,1.111 l 0,2.805 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-3.124 c 0,-1.628 -1.056,-2.112 -2.024,-2.112 -0.913,0 -1.496,0.418 -1.947,1.012 l -0.022,0 0,-0.209 c 0,-0.484 -0.22,-0.803 -0.726,-0.803 -0.506,0 -0.726,0.319 -0.726,0.803 l 0,4.433 z" />
+ <path
+ id="path256"
+ style=""
+ d="m 64.385,365.08487 c 0,1.078 0.726,1.463 1.661,1.694 l 0.946,0.231 c 0.572,0.143 0.924,0.209 0.924,0.616 0,0.33 -0.363,0.583 -0.935,0.583 -1.188,0 -1.254,-0.99 -1.947,-0.99 -0.451,0 -0.649,0.319 -0.649,0.671 0,0.792 1.21,1.441 2.662,1.441 1.21,0 2.475,-0.605 2.475,-1.914 0,-1.122 -1.089,-1.507 -2.002,-1.716 l -0.671,-0.154 c -0.495,-0.11 -0.858,-0.198 -0.858,-0.572 0,-0.341 0.363,-0.495 0.924,-0.495 1.012,0 1.034,0.737 1.661,0.737 0.418,0 0.671,-0.33 0.671,-0.704 0,-0.737 -1.232,-1.221 -2.453,-1.221 -1.111,0 -2.409,0.484 -2.409,1.793 z" />
+ <path
+ id="path258"
+ style=""
+ d="m 17.377016,378.32887 c 0,0.539 0.352,0.902 0.902,0.902 0.55,0 0.902,-0.363 0.902,-0.902 l 0,-6.402 c 0,-0.539 -0.352,-0.902 -0.902,-0.902 -0.55,0 -0.902,0.363 -0.902,0.902 l 0,6.402 z" />
+ <path
+ id="path260"
+ style=""
+ d="m 20.857484,378.03187 c 0,0.803 0.418,1.056 1.056,1.056 l 2.167,0 c 2.409,0 3.806,-1.452 3.806,-3.96 0,-3.102 -1.804,-3.96 -3.773,-3.96 l -2.2,0 c -0.638,0 -1.056,0.253 -1.056,1.056 l 0,5.808 z m 1.804,-5.412 1.507,0 c 1.32,0 1.914,0.946 1.914,2.508 0,1.221 -0.462,2.508 -1.903,2.508 l -1.518,0 0,-5.016 z" />
+ <path
+ id="path262"
+ style=""
+ d="m 29.258906,378.03187 c 0,0.803 0.418,1.056 1.056,1.056 l 4.323,0 c 0.528,0 0.913,-0.154 0.913,-0.726 0,-0.572 -0.385,-0.726 -0.913,-0.726 l -3.575,0 0,-1.914 3.058,0 c 0.473,0 0.847,-0.132 0.847,-0.693 0,-0.561 -0.374,-0.693 -0.847,-0.693 l -3.058,0 0,-1.716 3.487,0 c 0.528,0 0.913,-0.154 0.913,-0.726 0,-0.572 -0.385,-0.726 -0.913,-0.726 l -4.235,0 c -0.638,0 -1.056,0.253 -1.056,1.056 l 0,5.808 z" />
+ </g>
+ </g>
+ <g
+ id="g3908-3"
+ transform="translate(145.125,-29.874982)">
+ <path
+ id="rect3806-4-0"
+ d="m 21.740473,667.23712 56.269054,0 c 1.033472,0 1.865473,0.832 1.865473,1.86547 l 0,26.2691 c 0,1.03348 -0.832001,1.86548 -1.865473,1.86548 l -56.269054,0 c -1.033472,0 -1.865473,-0.832 -1.865473,-1.86548 l 0,-26.2691 c 0,-1.03347 0.832001,-1.86547 1.865473,-1.86547 z"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <g
+ id="flowRoot3808-5-8"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:11px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+ transform="translate(5.77146,308.61462)">
+ <path
+ id="path266"
+ style=""
+ d="m 17.377016,368.42887 c 0,0.539 0.352,0.902 0.902,0.902 0.55,0 0.902,-0.363 0.902,-0.902 l 0,-6.402 c 0,-0.539 -0.352,-0.902 -0.902,-0.902 -0.55,0 -0.902,0.363 -0.902,0.902 l 0,6.402 z" />
+ <path
+ id="path268"
+ style=""
+ d="m 20.659484,368.52787 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-2.651 c 0,-0.803 0.66,-1.265 1.221,-1.265 0.693,0 1.012,0.462 1.012,1.111 l 0,2.805 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-3.124 c 0,-1.628 -1.056,-2.112 -2.024,-2.112 -0.913,0 -1.496,0.418 -1.947,1.012 l -0.022,0 0,-0.209 c 0,-0.484 -0.22,-0.803 -0.726,-0.803 -0.506,0 -0.726,0.319 -0.726,0.803 l 0,4.433 z" />
+ <path
+ id="path270"
+ style=""
+ d="m 27.802094,367.90087 c 0,0.946 0.484,1.43 1.65,1.43 0.77,0 1.166,-0.253 1.166,-0.715 0,-0.341 -0.209,-0.539 -0.561,-0.539 l -0.231,0 c -0.286,0 -0.418,-0.132 -0.418,-0.374 l 0,-3.212 0.484,0 c 0.473,0 0.726,-0.143 0.726,-0.528 0,-0.385 -0.253,-0.528 -0.726,-0.528 l -0.484,0 0,-0.979 c 0,-0.528 -0.319,-0.803 -0.803,-0.803 -0.484,0 -0.803,0.275 -0.803,0.803 l 0,0.979 -0.275,0 c -0.451,0 -0.638,0.176 -0.638,0.528 0,0.352 0.187,0.528 0.638,0.528 l 0.275,0 0,3.41 z" />
+ <path
+ id="path272"
+ style=""
+ d="m 36.438641,366.61387 c 0.539,0 0.704,-0.143 0.704,-0.693 0,-1.32 -1.056,-2.629 -2.904,-2.629 -1.903,0 -3.036,1.254 -3.036,3.124 0,1.397 0.847,2.915 3.091,2.915 0.968,0 2.519,-0.451 2.519,-1.419 0,-0.297 -0.275,-0.627 -0.66,-0.627 -0.649,0 -0.649,0.792 -1.859,0.792 -0.935,0 -1.485,-0.616 -1.485,-1.463 l 3.63,0 z m -3.63,-0.924 c 0.176,-0.781 0.66,-1.276 1.463,-1.276 0.715,0 1.265,0.539 1.353,1.276 l -2.816,0 z" />
+ <path
+ id="path274"
+ style=""
+ d="m 38.25725,368.52787 c 0,0.528 0.319,0.803 0.803,0.803 0.484,0 0.803,-0.275 0.803,-0.803 l 0,-6.6 c 0,-0.528 -0.319,-0.803 -0.803,-0.803 -0.484,0 -0.803,0.275 -0.803,0.803 l 0,6.6 z" />
+ <path
+ id="path276"
+ style=""
+ d="m 41.308031,368.52787 c 0,0.528 0.319,0.803 0.803,0.803 0.484,0 0.803,-0.275 0.803,-0.803 l 0,-6.6 c 0,-0.528 -0.319,-0.803 -0.803,-0.803 -0.484,0 -0.803,0.275 -0.803,0.803 l 0,6.6 z" />
+ <path
+ id="path278"
+ style=""
+ d="m 44.358812,368.52787 c 0,0.429 0.176,0.803 0.803001,0.803 0.626999,0 0.802999,-0.374 0.802999,-0.803 l 0,-4.433 c 0,-0.429 -0.176,-0.803 -0.802999,-0.803 -0.627001,0 -0.803001,0.374 -0.803001,0.803 l 0,4.433 z m -0.033,-6.611 c 0,0.462 0.374,0.836 0.836001,0.836 0.461999,0 0.836,-0.374 0.836,-0.836 0,-0.462 -0.374001,-0.836 -0.836,-0.836 -0.462001,0 -0.836001,0.374 -0.836001,0.836 z" />
+ <path
+ id="path280"
+ style=""
+ d="m 52.161594,362.02687 c 0,-0.539 -0.352,-0.902 -0.902,-0.902 -0.55,0 -0.902,0.363 -0.902,0.902 l 0,4.664 c 0,0.858 -0.33,1.298 -0.924,1.298 -0.638,0 -0.88,-0.374 -0.88,-0.891 0,-0.539 -0.165,-1.045 -0.814,-1.045 -0.55,0 -0.858,0.429 -0.858,1.1 0,0.781 0.407,2.222 2.574,2.222 1.782,0 2.706,-1.001 2.706,-2.662 l 0,-4.686 z" />
+ <path
+ id="path282"
+ style=""
+ d="m 17.377016,378.32887 c 0,0.539 0.352,0.902 0.902,0.902 0.55,0 0.902,-0.363 0.902,-0.902 l 0,-6.402 c 0,-0.539 -0.352,-0.902 -0.902,-0.902 -0.55,0 -0.902,0.363 -0.902,0.902 l 0,6.402 z" />
+ <path
+ id="path284"
+ style=""
+ d="m 20.857484,378.03187 c 0,0.803 0.418,1.056 1.056,1.056 l 2.167,0 c 2.409,0 3.806,-1.452 3.806,-3.96 0,-3.102 -1.804,-3.96 -3.773,-3.96 l -2.2,0 c -0.638,0 -1.056,0.253 -1.056,1.056 l 0,5.808 z m 1.804,-5.412 1.507,0 c 1.32,0 1.914,0.946 1.914,2.508 0,1.221 -0.462,2.508 -1.903,2.508 l -1.518,0 0,-5.016 z" />
+ <path
+ id="path286"
+ style=""
+ d="m 29.258906,378.03187 c 0,0.803 0.418,1.056 1.056,1.056 l 4.323,0 c 0.528,0 0.913,-0.154 0.913,-0.726 0,-0.572 -0.385,-0.726 -0.913,-0.726 l -3.575,0 0,-1.914 3.058,0 c 0.473,0 0.847,-0.132 0.847,-0.693 0,-0.561 -0.374,-0.693 -0.847,-0.693 l -3.058,0 0,-1.716 3.487,0 c 0.528,0 0.913,-0.154 0.913,-0.726 0,-0.572 -0.385,-0.726 -0.913,-0.726 l -4.235,0 c -0.638,0 -1.056,0.253 -1.056,1.056 l 0,5.808 z" />
+ <path
+ id="path288"
+ style=""
+ d="m 36.194922,377.74587 c -0.066,0.176 -0.176,0.495 -0.176,0.693 0,0.484 0.341,0.792 0.836,0.792 0.429,0 0.682,-0.143 0.803,-0.495 l 0.473,-1.32 2.904,0 0.462,1.32 c 0.132,0.352 0.418,0.495 0.814,0.495 0.462,0 0.847,-0.352 0.847,-0.792 0,-0.198 -0.11,-0.517 -0.176,-0.693 l -2.178,-6.061 c -0.198,-0.561 -0.561,-0.66 -0.968,-0.66 l -0.429,0 c -0.44,0 -0.726,0.143 -0.88,0.55 l -2.332,6.171 z m 4.444,-1.584 -2.112,0 1.067,-3.179 0.022,0 1.023,3.179 z" />
+ </g>
+ </g>
+ <g
+ id="g3822-0"
+ transform="translate(130,2.421875e-6)">
+ <path
+ id="path3005-2-8"
+ d="m 19.911936,426.71852 a 9.1659365,9.1659365 0 0 1 -2.53643,-12.71142 9.1659365,9.1659365 0 0 1 12.711199,-2.53756 9.1659365,9.1659365 0 0 1 2.538696,12.71097 9.1659365,9.1659365 0 0 1 -12.710747,2.53983 L 25,419.09448 Z"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#000000;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:2, 1;stroke-dashoffset:0;stroke-opacity:0.13524589;marker:none;enable-background:accumulate"
+ transform="matrix(0.54549827,0,0,0.54549827,36.362543,498.74687)" />
+ <path
+ transform="translate(0,308.2677)"
+ id="path3804-9"
+ d="m 50,419.09448 c 0,-15 0,-25.36336 0,-25.36336"
+ style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ </g>
+ <path
+ id="rect3806-0"
+ d="m 138.03046,661.99884 83.93908,0 c 1.67887,0 3.03046,1.35159 3.03046,3.03046 l 0,34.30242 c 0,1.67888 -1.35159,3.03046 -3.03046,3.03046 l -83.93908,0 c -1.67887,0 -3.03046,-1.35158 -3.03046,-3.03046 l 0,-34.30242 c 0,-1.67887 1.35159,-3.03046 3.03046,-3.03046 z"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <g
+ id="flowRoot3808-3"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:16px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+ transform="translate(123.18075,306.77458)">
+ <path
+ id="path293"
+ style=""
+ d="m 17.757016,370.83262 c 0,0.784 0.512,1.312 1.312,1.312 0.8,0 1.312,-0.528 1.312,-1.312 l 0,-9.312 c 0,-0.784 -0.512,-1.312 -1.312,-1.312 -0.8,0 -1.312,0.528 -1.312,1.312 l 0,9.312 z" />
+ <path
+ id="path295"
+ style=""
+ d="m 22.531516,370.97662 c 0,0.624 0.256,1.168 1.168,1.168 0.912,0 1.168,-0.544 1.168,-1.168 l 0,-3.856 c 0,-1.168 0.96,-1.84 1.776,-1.84 1.008,0 1.472,0.672 1.472,1.616 l 0,4.08 c 0,0.624 0.256,1.168 1.168,1.168 0.912,0 1.168,-0.544 1.168,-1.168 l 0,-4.544 c 0,-2.368 -1.536,-3.072 -2.944,-3.072 -1.328,0 -2.176,0.608 -2.832,1.472 l -0.032,0 0,-0.304 c 0,-0.704 -0.32,-1.168 -1.056,-1.168 -0.736,0 -1.056,0.464 -1.056,1.168 l 0,6.448 z" />
+ <path
+ id="path297"
+ style=""
+ d="m 31.944766,365.96862 c 0,1.568 1.056,2.128 2.416,2.464 l 1.376,0.336 c 0.832,0.208 1.344,0.304 1.344,0.896 0,0.48 -0.528,0.848 -1.36,0.848 -1.728,0 -1.824,-1.44 -2.832,-1.44 -0.656,0 -0.944,0.464 -0.944,0.976 0,1.152 1.76,2.096 3.872,2.096 1.76,0 3.6,-0.88 3.6,-2.784 0,-1.632 -1.584,-2.192 -2.912,-2.496 l -0.976,-0.224 c -0.72,-0.16 -1.248,-0.288 -1.248,-0.832 0,-0.496 0.528,-0.72 1.344,-0.72 1.472,0 1.504,1.072 2.416,1.072 0.608,0 0.976,-0.48 0.976,-1.024 0,-1.072 -1.792,-1.776 -3.568,-1.776 -1.616,0 -3.504,0.704 -3.504,2.608 z" />
+ <path
+ id="path299"
+ style=""
+ d="m 41.514516,370.06462 c 0,1.376 0.704,2.08 2.4,2.08 1.12,0 1.696,-0.368 1.696,-1.04 0,-0.496 -0.304,-0.784 -0.816,-0.784 l -0.336,0 c -0.416,0 -0.608,-0.192 -0.608,-0.544 l 0,-4.672 0.704,0 c 0.688,0 1.056,-0.208 1.056,-0.768 0,-0.56 -0.368,-0.768 -1.056,-0.768 l -0.704,0 0,-1.424 c 0,-0.768 -0.464,-1.168 -1.168,-1.168 -0.704,0 -1.168,0.4 -1.168,1.168 l 0,1.424 -0.4,0 c -0.656,0 -0.928,0.256 -0.928,0.768 0,0.512 0.272,0.768 0.928,0.768 l 0.4,0 0,4.96 z" />
+ <path
+ id="path301"
+ style=""
+ d="m 54.572766,365.76062 c 0,-1.68 -1.552,-2.4 -3.792,-2.4 -2.4,0 -3.712,1.184 -3.712,2.112 0,0.48 0.4,0.896 0.992,0.896 0.928,0 0.976,-1.28 2.704,-1.28 0.784,0 1.472,0.288 1.472,0.96 0,0.672 -0.448,0.8 -1.008,0.864 l -1.424,0.16 c -1.792,0.208 -3.264,0.752 -3.264,2.688 0,1.472 1.312,2.384 2.64,2.384 1.232,0 2.288,-0.352 3.2,-1.36 0.032,0.72 0.368,1.36 1.376,1.36 0.56,0 1.056,-0.368 1.056,-0.896 0,-0.368 -0.24,-0.592 -0.24,-1.568 l 0,-3.92 z m -2.336,3.152 c 0,0.864 -0.784,1.696 -2.064,1.696 -0.8,0 -1.296,-0.432 -1.296,-0.96 0,-0.704 0.528,-1.008 1.504,-1.152 l 0.848,-0.128 c 0.272,-0.048 0.752,-0.128 1.008,-0.368 l 0,0.912 z" />
+ <path
+ id="path303"
+ style=""
+ d="m 56.722016,370.97662 c 0,0.768 0.464,1.168 1.168,1.168 0.704,0 1.168,-0.4 1.168,-1.168 l 0,-9.6 c 0,-0.768 -0.464,-1.168 -1.168,-1.168 -0.704,0 -1.168,0.4 -1.168,1.168 l 0,9.6 z" />
+ <path
+ id="path305"
+ style=""
+ d="m 61.159516,370.97662 c 0,0.768 0.464,1.168 1.168,1.168 0.704,0 1.168,-0.4 1.168,-1.168 l 0,-9.6 c 0,-0.768 -0.464,-1.168 -1.168,-1.168 -0.704,0 -1.168,0.4 -1.168,1.168 l 0,9.6 z" />
+ <path
+ id="path307"
+ style=""
+ d="m 78.135266,365.76062 c 0,-1.68 -1.552,-2.4 -3.792,-2.4 -2.4,0 -3.712,1.184 -3.712,2.112 0,0.48 0.4,0.896 0.992,0.896 0.928,0 0.976,-1.28 2.704,-1.28 0.784,0 1.472,0.288 1.472,0.96 0,0.672 -0.448,0.8 -1.008,0.864 l -1.424,0.16 c -1.792,0.208 -3.264,0.752 -3.264,2.688 0,1.472 1.312,2.384 2.64,2.384 1.232,0 2.288,-0.352 3.2,-1.36 0.032,0.72 0.368,1.36 1.376,1.36 0.56,0 1.056,-0.368 1.056,-0.896 0,-0.368 -0.24,-0.592 -0.24,-1.568 l 0,-3.92 z m -2.336,3.152 c 0,0.864 -0.784,1.696 -2.064,1.696 -0.8,0 -1.296,-0.432 -1.296,-0.96 0,-0.704 0.528,-1.008 1.504,-1.152 l 0.848,-0.128 c 0.272,-0.048 0.752,-0.128 1.008,-0.368 l 0,0.912 z" />
+ <path
+ id="path309"
+ style=""
+ d="m 80.156516,370.97662 c 0,0.624 0.256,1.168 1.168,1.168 0.912,0 1.168,-0.544 1.168,-1.168 l 0,-3.856 c 0,-1.168 0.96,-1.84 1.776,-1.84 1.008,0 1.472,0.672 1.472,1.616 l 0,4.08 c 0,0.624 0.256,1.168 1.168,1.168 0.912,0 1.168,-0.544 1.168,-1.168 l 0,-4.544 c 0,-2.368 -1.536,-3.072 -2.944,-3.072 -1.328,0 -2.176,0.608 -2.832,1.472 l -0.032,0 0,-0.304 c 0,-0.704 -0.32,-1.168 -1.056,-1.168 -0.736,0 -1.056,0.464 -1.056,1.168 l 0,6.448 z" />
+ <path
+ id="path311"
+ style=""
+ d="m 17.757016,385.23262 c 0,0.784 0.512,1.312 1.312,1.312 0.8,0 1.312,-0.528 1.312,-1.312 l 0,-9.312 c 0,-0.784 -0.512,-1.312 -1.312,-1.312 -0.8,0 -1.312,0.528 -1.312,1.312 l 0,9.312 z" />
+ <path
+ id="path313"
+ style=""
+ d="m 22.819516,384.80062 c 0,1.168 0.608,1.536 1.536,1.536 l 3.152,0 c 3.504,0 5.536,-2.112 5.536,-5.76 0,-4.512 -2.624,-5.76 -5.488,-5.76 l -3.2,0 c -0.928,0 -1.536,0.368 -1.536,1.536 l 0,8.448 z m 2.624,-7.872 2.192,0 c 1.92,0 2.784,1.376 2.784,3.648 0,1.776 -0.672,3.648 -2.768,3.648 l -2.208,0 0,-7.296 z" />
+ <path
+ id="path315"
+ style=""
+ d="m 35.039766,384.80062 c 0,1.168 0.608,1.536 1.536,1.536 l 6.288,0 c 0.768,0 1.328,-0.224 1.328,-1.056 0,-0.832 -0.56,-1.056 -1.328,-1.056 l -5.2,0 0,-2.784 4.448,0 c 0.688,0 1.232,-0.192 1.232,-1.008 0,-0.816 -0.544,-1.008 -1.232,-1.008 l -4.448,0 0,-2.496 5.072,0 c 0.768,0 1.328,-0.224 1.328,-1.056 0,-0.832 -0.56,-1.056 -1.328,-1.056 l -6.16,0 c -0.928,0 -1.536,0.368 -1.536,1.536 l 0,8.448 z" />
+ </g>
+ </g>
+ <g
+ id="g3271-5"
+ transform="translate(260,2.7294197e-5)">
+ <g
+ id="g3908-4-9-7-8"
+ transform="translate(150.125,-110.23837)">
+ <path
+ id="rect3806-4-2-2-0-0"
+ d="m 16.740473,647.60052 56.269054,0 c 1.033472,0 1.865473,0.83201 1.865473,1.86548 l 0,46.26914 c 0,1.03348 -0.832001,1.86548 -1.865473,1.86548 l -56.269054,0 c -1.033472,0 -1.865473,-0.832 -1.865473,-1.86548 l 0,-46.26914 c 0,-1.03347 0.832001,-1.86548 1.865473,-1.86548 z"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <g
+ id="flowRoot3808-5-7-2-4-0"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:11px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+ transform="translate(1.0223215,288.61775)">
+ <path
+ id="path319"
+ style=""
+ d="m 16.816016,367.84587 c -0.066,0.176 -0.176,0.495 -0.176,0.693 0,0.484 0.341,0.792 0.836,0.792 0.429,0 0.682,-0.143 0.803,-0.495 l 0.473,-1.32 2.904,0 0.462,1.32 c 0.132,0.352 0.418,0.495 0.814,0.495 0.462,0 0.847,-0.352 0.847,-0.792 0,-0.198 -0.11,-0.517 -0.176,-0.693 l -2.178,-6.061 c -0.198,-0.561 -0.561,-0.66 -0.968,-0.66 l -0.429,0 c -0.44,0 -0.726,0.143 -0.88,0.55 l -2.332,6.171 z m 4.444,-1.584 -2.112,0 1.067,-3.179 0.022,0 1.023,3.179 z" />
+ <path
+ id="path321"
+ style=""
+ d="m 24.526672,370.66187 c 0,0.528 0.319,0.803 0.803,0.803 0.484,0 0.803,-0.275 0.803,-0.803 l 0,-2.145 0.022,0 c 0.297,0.517 0.847,0.814 1.584,0.814 1.694,0 2.475,-1.441 2.475,-2.981 0,-2.079 -1.177,-3.058 -2.519,-3.058 -0.781,0 -1.43,0.33 -1.694,1.012 l -0.022,0 0,-0.253 c 0,-0.495 -0.253,-0.759 -0.726,-0.759 -0.495,0 -0.726,0.264 -0.726,0.759 l 0,6.611 z m 4.081,-4.367 c 0,0.748 -0.253,1.782 -1.276,1.782 -0.979,0.011 -1.287,-0.957 -1.287,-1.782 0,-0.913 0.352,-1.749 1.287,-1.749 0.858,0.022 1.276,0.803 1.276,1.749 z" />
+ <path
+ id="path323"
+ style=""
+ d="m 36.586281,364.94187 c 0,-1.155 -1.067,-1.65 -2.607,-1.65 -1.65,0 -2.552,0.814 -2.552,1.452 0,0.33 0.275,0.616 0.682,0.616 0.638,0 0.671,-0.88 1.859,-0.88 0.539,0 1.012,0.198 1.012,0.66 0,0.462 -0.308,0.55 -0.693,0.594 l -0.979,0.11 c -1.232,0.143 -2.244,0.517 -2.244,1.848 0,1.012 0.902,1.639 1.815,1.639 0.847,0 1.573,-0.242 2.2,-0.935 0.022,0.495 0.253,0.935 0.946,0.935 0.385,0 0.726,-0.253 0.726,-0.616 0,-0.253 -0.165,-0.407 -0.165,-1.078 l 0,-2.695 z m -1.606,2.167 c 0,0.594 -0.539,1.166 -1.419,1.166 -0.55,0 -0.891,-0.297 -0.891,-0.66 0,-0.484 0.363,-0.693 1.034,-0.792 l 0.583,-0.088 c 0.187,-0.033 0.517,-0.088 0.693,-0.253 l 0,0.627 z" />
+ <path
+ id="path325"
+ style=""
+ d="m 37.667891,366.42687 c 0,1.683 0.935,2.904 2.915,2.904 1.65,0 2.442,-0.968 2.442,-1.672 0,-0.319 -0.264,-0.616 -0.671,-0.616 -0.847,0 -0.605,1.034 -1.727,1.034 -0.88,0 -1.353,-0.649 -1.353,-1.65 0,-1.452 0.737,-1.881 1.364,-1.881 1.155,0 0.88,0.946 1.639,0.946 0.407,0 0.748,-0.231 0.748,-0.693 0,-0.748 -1.001,-1.507 -2.343,-1.507 -1.969,0 -3.014,1.287 -3.014,3.135 z" />
+ <path
+ id="path327"
+ style=""
+ d="m 43.884094,368.52787 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-2.651 c 0,-0.803 0.66,-1.265 1.221,-1.265 0.693,0 1.012,0.462 1.012,1.111 l 0,2.805 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-3.124 c 0,-1.628 -1.056,-2.112 -2.024,-2.112 -0.913,0 -1.474,0.429 -1.793,0.847 l -0.022,0 0,-2.211 c 0,-0.528 -0.319,-0.803 -0.803,-0.803 -0.484,0 -0.803,0.275 -0.803,0.803 l 0,6.6 z" />
+ <path
+ id="path329"
+ style=""
+ d="m 55.602703,366.61387 c 0.539,0 0.704,-0.143 0.704,-0.693 0,-1.32 -1.056,-2.629 -2.904,-2.629 -1.903,0 -3.036,1.254 -3.036,3.124 0,1.397 0.847,2.915 3.091,2.915 0.968,0 2.519,-0.451 2.519,-1.419 0,-0.297 -0.275,-0.627 -0.66,-0.627 -0.649,0 -0.649,0.792 -1.859,0.792 -0.935,0 -1.485,-0.616 -1.485,-1.463 l 3.63,0 z m -3.63,-0.924 c 0.176,-0.781 0.66,-1.276 1.463,-1.276 0.715,0 1.265,0.539 1.353,1.276 l -2.816,0 z" />
+ <path
+ id="path331"
+ style=""
+ d="m 19.313016,378.32887 c 0,0.539 0.352,0.902 0.902,0.902 0.55,0 0.902,-0.363 0.902,-0.902 l 0,-5.643 1.705,0 c 0.517,0 0.935,-0.264 0.935,-0.759 0,-0.495 -0.418,-0.759 -0.935,-0.759 l -5.214,0 c -0.517,0 -0.935,0.264 -0.935,0.759 0,0.495 0.418,0.759 0.935,0.759 l 1.705,0 0,5.643 z" />
+ <path
+ id="path333"
+ style=""
+ d="m 24.386766,376.20587 c 0,-1.045 0.429,-1.826 1.364,-1.826 0.935,0 1.364,0.781 1.364,1.826 0,0.979 -0.407,1.837 -1.364,1.837 -0.957,0 -1.364,-0.858 -1.364,-1.837 z m -1.606,0 c 0,1.606 0.781,3.025 2.97,3.025 2.189,0 2.97,-1.419 2.97,-3.025 0,-1.694 -1.034,-3.014 -2.97,-3.014 -1.936,0 -2.97,1.32 -2.97,3.014 z" />
+ <path
+ id="path335"
+ style=""
+ d="m 29.747375,378.42787 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-2.673 c 0,-0.748 0.55,-1.243 1.166,-1.243 0.627,0 0.88,0.462 0.88,1.034 l 0,2.882 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-2.673 c 0,-0.748 0.55,-1.243 1.166,-1.243 0.627,0 0.88,0.462 0.88,1.034 l 0,2.882 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-3.289 c 0,-1.441 -0.891,-1.947 -2.002,-1.947 -0.869,0 -1.441,0.385 -1.892,1.012 -0.297,-0.759 -0.99,-1.012 -1.54,-1.012 -0.814,0 -1.518,0.374 -1.936,1.012 l -0.022,0 0,-0.209 c 0,-0.484 -0.286,-0.803 -0.759,-0.803 -0.473,0 -0.759,0.319 -0.759,0.803 l 0,4.433 z" />
+ <path
+ id="path337"
+ style=""
+ d="m 39.622969,376.32687 c 0,1.683 0.935,2.904 2.915,2.904 1.65,0 2.442,-0.968 2.442,-1.672 0,-0.319 -0.264,-0.616 -0.671,-0.616 -0.847,0 -0.605,1.034 -1.727,1.034 -0.88,0 -1.353,-0.649 -1.353,-1.65 0,-1.452 0.737,-1.881 1.364,-1.881 1.155,0 0.88,0.946 1.639,0.946 0.407,0 0.748,-0.231 0.748,-0.693 0,-0.748 -1.001,-1.507 -2.343,-1.507 -1.969,0 -3.014,1.287 -3.014,3.135 z" />
+ <path
+ id="path339"
+ style=""
+ d="m 51.174172,374.84187 c 0,-1.155 -1.067,-1.65 -2.607,-1.65 -1.65,0 -2.552,0.814 -2.552,1.452 0,0.33 0.275,0.616 0.682,0.616 0.638,0 0.671,-0.88 1.859,-0.88 0.539,0 1.012,0.198 1.012,0.66 0,0.462 -0.308,0.55 -0.693,0.594 l -0.979,0.11 c -1.232,0.143 -2.244,0.517 -2.244,1.848 0,1.012 0.902,1.639 1.815,1.639 0.847,0 1.573,-0.242 2.2,-0.935 0.022,0.495 0.253,0.935 0.946,0.935 0.385,0 0.726,-0.253 0.726,-0.616 0,-0.253 -0.165,-0.407 -0.165,-1.078 l 0,-2.695 z m -1.606,2.167 c 0,0.594 -0.539,1.166 -1.419,1.166 -0.55,0 -0.891,-0.297 -0.891,-0.66 0,-0.484 0.363,-0.693 1.034,-0.792 l 0.583,-0.088 c 0.187,-0.033 0.517,-0.088 0.693,-0.253 l 0,0.627 z" />
+ <path
+ id="path341"
+ style=""
+ d="m 52.981781,377.80087 c 0,0.946 0.484,1.43 1.65,1.43 0.77,0 1.166,-0.253 1.166,-0.715 0,-0.341 -0.209,-0.539 -0.561,-0.539 l -0.231,0 c -0.286,0 -0.418,-0.132 -0.418,-0.374 l 0,-3.212 0.484,0 c 0.473,0 0.726,-0.143 0.726,-0.528 0,-0.385 -0.253,-0.528 -0.726,-0.528 l -0.484,0 0,-0.979 c 0,-0.528 -0.319,-0.803 -0.803,-0.803 -0.484,0 -0.803,0.275 -0.803,0.803 l 0,0.979 -0.275,0 c -0.451,0 -0.638,0.176 -0.638,0.528 0,0.352 0.187,0.528 0.638,0.528 l 0.275,0 0,3.41 z" />
+ </g>
+ </g>
+ <g
+ id="g3908-4-1-3"
+ transform="translate(145.125,-89.874981)">
+ <path
+ id="rect3806-4-2-6-8"
+ d="m 21.740473,652.23712 56.269054,0 c 1.033472,0 1.865473,0.832 1.865473,1.86547 l 0,41.2691 c 0,1.03348 -0.832001,1.86548 -1.865473,1.86548 l -56.269054,0 c -1.033472,0 -1.865473,-0.832 -1.865473,-1.86548 l 0,-41.2691 c 0,-1.03347 0.832001,-1.86547 1.865473,-1.86547 z"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <g
+ id="flowRoot3808-5-7-0-0"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:11px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+ transform="translate(5.7477504,293.01433)">
+ <path
+ id="path345"
+ style=""
+ d="m 19.313016,368.42887 c 0,0.539 0.352,0.902 0.902,0.902 0.55,0 0.902,-0.363 0.902,-0.902 l 0,-5.643 1.705,0 c 0.517,0 0.935,-0.264 0.935,-0.759 0,-0.495 -0.418,-0.759 -0.935,-0.759 l -5.214,0 c -0.517,0 -0.935,0.264 -0.935,0.759 0,0.495 0.418,0.759 0.935,0.759 l 1.705,0 0,5.643 z" />
+ <path
+ id="path347"
+ style=""
+ d="m 24.386766,366.30587 c 0,-1.045 0.429,-1.826 1.364,-1.826 0.935,0 1.364,0.781 1.364,1.826 0,0.979 -0.407,1.837 -1.364,1.837 -0.957,0 -1.364,-0.858 -1.364,-1.837 z m -1.606,0 c 0,1.606 0.781,3.025 2.97,3.025 2.189,0 2.97,-1.419 2.97,-3.025 0,-1.694 -1.034,-3.014 -2.97,-3.014 -1.936,0 -2.97,1.32 -2.97,3.014 z" />
+ <path
+ id="path349"
+ style=""
+ d="m 29.747375,368.52787 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-2.673 c 0,-0.748 0.55,-1.243 1.166,-1.243 0.627,0 0.88,0.462 0.88,1.034 l 0,2.882 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-2.673 c 0,-0.748 0.55,-1.243 1.166,-1.243 0.627,0 0.88,0.462 0.88,1.034 l 0,2.882 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-3.289 c 0,-1.441 -0.891,-1.947 -2.002,-1.947 -0.869,0 -1.441,0.385 -1.892,1.012 -0.297,-0.759 -0.99,-1.012 -1.54,-1.012 -0.814,0 -1.518,0.374 -1.936,1.012 l -0.022,0 0,-0.209 c 0,-0.484 -0.286,-0.803 -0.759,-0.803 -0.473,0 -0.759,0.319 -0.759,0.803 l 0,4.433 z" />
+ <path
+ id="path351"
+ style=""
+ d="m 40.172969,368.13187 c 0,0.803 0.418,1.056 1.056,1.056 l 4.323,0 c 0.528,0 0.913,-0.154 0.913,-0.726 0,-0.572 -0.385,-0.726 -0.913,-0.726 l -3.575,0 0,-1.914 3.058,0 c 0.473,0 0.847,-0.132 0.847,-0.693 0,-0.561 -0.374,-0.693 -0.847,-0.693 l -3.058,0 0,-1.716 3.487,0 c 0.528,0 0.913,-0.154 0.913,-0.726 0,-0.572 -0.385,-0.726 -0.913,-0.726 l -4.235,0 c -0.638,0 -1.056,0.253 -1.056,1.056 l 0,5.808 z" />
+ <path
+ id="path353"
+ style=""
+ d="m 47.713984,368.13187 c 0,0.803 0.418,1.056 1.056,1.056 l 4.323,0 c 0.528,0 0.913,-0.154 0.913,-0.726 0,-0.572 -0.385,-0.726 -0.913,-0.726 l -3.575,0 0,-1.914 3.058,0 c 0.473,0 0.847,-0.132 0.847,-0.693 0,-0.561 -0.374,-0.693 -0.847,-0.693 l -3.058,0 0,-1.716 3.487,0 c 0.528,0 0.913,-0.154 0.913,-0.726 0,-0.572 -0.385,-0.726 -0.913,-0.726 l -4.235,0 c -0.638,0 -1.056,0.253 -1.056,1.056 l 0,5.808 z" />
+ </g>
+ </g>
+ <g
+ id="g3908-4-1-3-3"
+ transform="translate(145.125,-69.875003)">
+ <path
+ id="rect3806-4-2-6-8-5"
+ d="m 21.740473,657.23718 56.269054,0 c 1.033472,0 1.865473,0.832 1.865473,1.86548 l 0,36.26907 c 0,1.03347 -0.832001,1.86548 -1.865473,1.86548 l -56.269054,0 c -1.033472,0 -1.865473,-0.83201 -1.865473,-1.86548 l 0,-36.26907 c 0,-1.03348 0.832001,-1.86548 1.865473,-1.86548 z"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <g
+ id="flowRoot3808-5-7-0-0-9"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:11px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+ transform="translate(6.486036,298.2575)">
+ <path
+ id="path357"
+ style=""
+ d="m 26.540016,362.45587 c 0.044,-0.165 0.088,-0.341 0.088,-0.517 0,-0.55 -0.451,-0.814 -0.869,-0.814 -0.429,0 -0.704,0.209 -0.814,0.737 l -1.078,5.258 -0.022,0 -1.199,-5.137 c -0.11,-0.495 -0.264,-0.858 -1.023,-0.858 -0.671,0 -0.847,0.231 -0.946,0.671 l -1.232,5.324 -0.022,0 -1.067,-5.258 c -0.11,-0.528 -0.385,-0.737 -0.847,-0.737 -0.418,0 -0.869,0.264 -0.869,0.814 0,0.176 0.044,0.352 0.088,0.517 l 1.551,6.017 c 0.165,0.627 0.429,0.858 1.089,0.858 0.682,0 0.935,-0.286 1.078,-0.891 l 1.177,-4.829 0.022,0 1.177,4.829 c 0.154,0.605 0.396,0.891 1.078,0.891 0.66,0 0.924,-0.231 1.089,-0.858 l 1.551,-6.017 z" />
+ <path
+ id="path359"
+ style=""
+ d="m 27.450609,368.52787 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-4.433 c 0,-0.429 -0.176,-0.803 -0.803,-0.803 -0.627,0 -0.803,0.374 -0.803,0.803 l 0,4.433 z m -0.033,-6.611 c 0,0.462 0.374,0.836 0.836,0.836 0.462,0 0.836,-0.374 0.836,-0.836 0,-0.462 -0.374,-0.836 -0.836,-0.836 -0.462,0 -0.836,0.374 -0.836,0.836 z" />
+ <path
+ id="path361"
+ style=""
+ d="m 30.501391,368.52787 c 0,0.528 0.319,0.803 0.803,0.803 0.484,0 0.803,-0.275 0.803,-0.803 l 0,-6.6 c 0,-0.528 -0.319,-0.803 -0.803,-0.803 -0.484,0 -0.803,0.275 -0.803,0.803 l 0,6.6 z" />
+ <path
+ id="path363"
+ style=""
+ d="m 38.909172,361.92787 c 0,-0.528 -0.319,-0.803 -0.803,-0.803 -0.484,0 -0.803,0.275 -0.803,0.803 l 0,2.178 -0.022,0 c -0.319,-0.517 -0.869,-0.814 -1.584,-0.814 -1.694,0 -2.475,1.441 -2.475,2.981 0,2.079 1.177,3.058 2.519,3.058 0.781,0 1.43,-0.33 1.694,-1.012 l 0.022,0 0,0.253 c 0,0.495 0.253,0.759 0.726,0.759 0.495,0 0.726,-0.264 0.726,-0.759 l 0,-6.644 z m -4.081,4.4 c 0,-0.748 0.253,-1.782 1.276,-1.782 0.979,-0.011 1.287,0.957 1.287,1.782 0,0.913 -0.352,1.749 -1.287,1.749 -0.858,-0.022 -1.276,-0.803 -1.276,-1.749 z" />
+ <path
+ id="path365"
+ style=""
+ d="m 40.606781,368.52787 c 0,0.528 0.319,0.803 0.803,0.803 0.484,0 0.803,-0.275 0.803,-0.803 l 0,-4.037 0.396,0 c 0.396,0 0.649,-0.143 0.649,-0.528 0,-0.385 -0.253,-0.528 -0.649,-0.528 l -0.396,0 0,-0.715 c 0,-0.242 0.077,-0.352 0.22,-0.352 0.099,0 0.187,0.033 0.286,0.033 0.286,0 0.539,-0.209 0.539,-0.594 0,-0.55 -0.473,-0.726 -0.968,-0.726 -1.199,0 -1.683,0.462 -1.683,1.551 l 0,0.803 -0.275,0 c -0.451,0 -0.638,0.176 -0.638,0.528 0,0.352 0.187,0.528 0.638,0.528 l 0.275,0 0,4.037 z m 3.333,0 c 0,0.528 0.319,0.803 0.803,0.803 0.484,0 0.803,-0.275 0.803,-0.803 l 0,-6.6 c 0,-0.528 -0.319,-0.803 -0.803,-0.803 -0.484,0 -0.803,0.275 -0.803,0.803 l 0,6.6 z" />
+ <path
+ id="path367"
+ style=""
+ d="m 48.013391,363.89687 c -0.099,-0.363 -0.396,-0.605 -0.825,-0.605 -0.429,0 -0.781,0.33 -0.781,0.77 0,0.187 0.066,0.363 0.198,0.748 l 1.672,4.763 c -0.121,0.495 -0.352,0.506 -0.561,0.506 l -0.165,0 c -0.429,0 -0.737,0.22 -0.737,0.649 0,0.385 0.297,0.737 1.012,0.737 1.012,0 1.452,-0.572 1.837,-1.672 l 1.859,-5.269 c 0.077,-0.209 0.121,-0.374 0.121,-0.506 0,-0.198 -0.187,-0.726 -0.825,-0.726 -0.44,0 -0.66,0.308 -0.77,0.715 l -0.979,3.641 -0.022,0 -1.034,-3.751 z" />
+ </g>
+ </g>
+ <g
+ id="g3908-3-3"
+ transform="translate(145.125,-49.875)">
+ <path
+ id="rect3806-4-0-0"
+ d="m 21.740473,662.23718 56.269054,0 c 1.033472,0 1.865473,0.832 1.865473,1.86548 l 0,31.26908 c 0,1.03347 -0.832001,1.86547 -1.865473,1.86547 l -56.269054,0 c -1.033472,0 -1.865473,-0.832 -1.865473,-1.86547 l 0,-31.26908 c 0,-1.03348 0.832001,-1.86548 1.865473,-1.86548 z"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <g
+ id="flowRoot3808-5-8-5"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:11px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+ transform="translate(5.5983218,303.07893)">
+ <path
+ id="path371"
+ style=""
+ d="m 24.725016,365.74487 c 0,-0.495 -0.209,-0.759 -0.737,-0.759 l -2.222,0 c -0.451,0 -0.704,0.253 -0.704,0.693 0,0.55 0.429,0.693 0.814,0.693 l 1.177,0 c -0.088,0.968 -0.924,1.617 -1.881,1.617 -1.474,0 -2.244,-1.078 -2.244,-2.64 0,-2.002 0.979,-2.816 2.222,-2.816 1.76,0 1.43,1.243 2.321,1.243 0.385,0 0.847,-0.165 0.847,-0.792 0,-0.704 -1.067,-1.903 -3.069,-1.903 -2.453,0 -4.125,1.474 -4.125,4.147 0,2.222 1.067,4.147 3.861,4.147 1.122,0 1.837,-0.418 2.354,-1.067 0.11,0.704 0.253,1.023 0.77,1.023 0.363,0 0.616,-0.275 0.616,-0.605 l 0,-2.981 z" />
+ <path
+ id="path373"
+ style=""
+ d="m 26.226,368.52787 c 0,0.528 0.319,0.803 0.803,0.803 0.484,0 0.803,-0.275 0.803,-0.803 l 0,-6.6 c 0,-0.528 -0.319,-0.803 -0.803,-0.803 -0.484,0 -0.803,0.275 -0.803,0.803 l 0,6.6 z" />
+ <path
+ id="path375"
+ style=""
+ d="m 34.523781,364.94187 c 0,-1.155 -1.067,-1.65 -2.607,-1.65 -1.65,0 -2.552,0.814 -2.552,1.452 0,0.33 0.275,0.616 0.682,0.616 0.638,0 0.671,-0.88 1.859,-0.88 0.539,0 1.012,0.198 1.012,0.66 0,0.462 -0.308,0.55 -0.693,0.594 l -0.979,0.11 c -1.232,0.143 -2.244,0.517 -2.244,1.848 0,1.012 0.902,1.639 1.815,1.639 0.847,0 1.573,-0.242 2.2,-0.935 0.022,0.495 0.253,0.935 0.946,0.935 0.385,0 0.726,-0.253 0.726,-0.616 0,-0.253 -0.165,-0.407 -0.165,-1.078 l 0,-2.695 z m -1.606,2.167 c 0,0.594 -0.539,1.166 -1.419,1.166 -0.55,0 -0.891,-0.297 -0.891,-0.66 0,-0.484 0.363,-0.693 1.034,-0.792 l 0.583,-0.088 c 0.187,-0.033 0.517,-0.088 0.693,-0.253 l 0,0.627 z" />
+ <path
+ id="path377"
+ style=""
+ d="m 35.660391,365.08487 c 0,1.078 0.726,1.463 1.661,1.694 l 0.946,0.231 c 0.572,0.143 0.924,0.209 0.924,0.616 0,0.33 -0.363,0.583 -0.935,0.583 -1.188,0 -1.254,-0.99 -1.947,-0.99 -0.451,0 -0.649,0.319 -0.649,0.671 0,0.792 1.21,1.441 2.662,1.441 1.21,0 2.475,-0.605 2.475,-1.914 0,-1.122 -1.089,-1.507 -2.002,-1.716 l -0.671,-0.154 c -0.495,-0.11 -0.858,-0.198 -0.858,-0.572 0,-0.341 0.363,-0.495 0.924,-0.495 1.012,0 1.034,0.737 1.661,0.737 0.418,0 0.671,-0.33 0.671,-0.704 0,-0.737 -1.232,-1.221 -2.453,-1.221 -1.111,0 -2.409,0.484 -2.409,1.793 z" />
+ <path
+ id="path379"
+ style=""
+ d="m 41.568594,365.08487 c 0,1.078 0.726,1.463 1.661,1.694 l 0.946,0.231 c 0.572,0.143 0.924,0.209 0.924,0.616 0,0.33 -0.363,0.583 -0.935,0.583 -1.188,0 -1.254,-0.99 -1.947,-0.99 -0.451,0 -0.649,0.319 -0.649,0.671 0,0.792 1.21,1.441 2.662,1.441 1.21,0 2.475,-0.605 2.475,-1.914 0,-1.122 -1.089,-1.507 -2.002,-1.716 l -0.671,-0.154 c -0.495,-0.11 -0.858,-0.198 -0.858,-0.572 0,-0.341 0.363,-0.495 0.924,-0.495 1.012,0 1.034,0.737 1.661,0.737 0.418,0 0.671,-0.33 0.671,-0.704 0,-0.737 -1.232,-1.221 -2.453,-1.221 -1.111,0 -2.409,0.484 -2.409,1.793 z" />
+ <path
+ id="path381"
+ style=""
+ d="m 47.971797,368.42887 c 0,0.539 0.352,0.902 0.902,0.902 0.55,0 0.902,-0.363 0.902,-0.902 l 0,-2.475 2.728,0 c 0.473,0 0.847,-0.132 0.847,-0.693 0,-0.561 -0.374,-0.693 -0.847,-0.693 l -2.728,0 0,-1.848 3.223,0 c 0.528,0 0.913,-0.154 0.913,-0.726 0,-0.572 -0.385,-0.726 -0.913,-0.726 l -3.971,0 c -0.638,0 -1.056,0.253 -1.056,1.056 l 0,6.105 z" />
+ <path
+ id="path383"
+ style=""
+ d="m 54.75725,368.52787 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-4.433 c 0,-0.429 -0.176,-0.803 -0.803,-0.803 -0.627,0 -0.803,0.374 -0.803,0.803 l 0,4.433 z m -0.033,-6.611 c 0,0.462 0.374,0.836 0.836,0.836 0.462,0 0.836,-0.374 0.836,-0.836 0,-0.462 -0.374,-0.836 -0.836,-0.836 -0.462,0 -0.836,0.374 -0.836,0.836 z" />
+ <path
+ id="path385"
+ style=""
+ d="m 57.467031,365.08487 c 0,1.078 0.726,1.463 1.661,1.694 l 0.946,0.231 c 0.572,0.143 0.924,0.209 0.924,0.616 0,0.33 -0.363,0.583 -0.935,0.583 -1.188,0 -1.254,-0.99 -1.947,-0.99 -0.451,0 -0.649,0.319 -0.649,0.671 0,0.792 1.21,1.441 2.662,1.441 1.21,0 2.475,-0.605 2.475,-1.914 0,-1.122 -1.089,-1.507 -2.002,-1.716 l -0.671,-0.154 c -0.495,-0.11 -0.858,-0.198 -0.858,-0.572 0,-0.341 0.363,-0.495 0.924,-0.495 1.012,0 1.034,0.737 1.661,0.737 0.418,0 0.671,-0.33 0.671,-0.704 0,-0.737 -1.232,-1.221 -2.453,-1.221 -1.111,0 -2.409,0.484 -2.409,1.793 z" />
+ <path
+ id="path387"
+ style=""
+ d="m 63.628234,368.52787 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-2.651 c 0,-0.803 0.66,-1.265 1.221,-1.265 0.693,0 1.012,0.462 1.012,1.111 l 0,2.805 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-3.124 c 0,-1.628 -1.056,-2.112 -2.024,-2.112 -0.913,0 -1.474,0.429 -1.793,0.847 l -0.022,0 0,-2.211 c 0,-0.528 -0.319,-0.803 -0.803,-0.803 -0.484,0 -0.803,0.275 -0.803,0.803 l 0,6.6 z" />
+ </g>
+ </g>
+ <g
+ id="g3908-3-3-7"
+ transform="translate(145.125,-29.875002)">
+ <path
+ id="rect3806-4-0-0-8"
+ d="m 21.740473,667.23718 56.269054,0 c 1.033472,0 1.865473,0.832 1.865473,1.86548 l 0,26.26907 c 0,1.03348 -0.832001,1.86548 -1.865473,1.86548 l -56.269054,0 c -1.033472,0 -1.865473,-0.832 -1.865473,-1.86548 l 0,-26.26907 c 0,-1.03348 0.832001,-1.86548 1.865473,-1.86548 z"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <g
+ id="flowRoot3808-5-8-5-5"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:11px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+ transform="translate(5.4917504,307.90036)">
+ <path
+ id="path391"
+ style=""
+ d="m 17.025016,365.12887 c 0,2.398 1.166,4.246 4.004,4.246 2.706,0 4.004,-2.013 4.004,-4.246 0,-2.321 -1.408,-4.048 -4.004,-4.048 -2.596,0 -4.004,1.727 -4.004,4.048 z m 1.804,0 c 0,-1.518 0.726,-2.596 2.2,-2.596 1.474,0 2.2,1.078 2.2,2.596 0,1.518 -0.561,2.794 -2.2,2.794 -1.694,0 -2.2,-1.276 -2.2,-2.794 z" />
+ <path
+ id="path393"
+ style=""
+ d="m 26.577484,367.90087 c 0,0.946 0.484,1.43 1.65,1.43 0.77,0 1.166,-0.253 1.166,-0.715 0,-0.341 -0.209,-0.539 -0.561,-0.539 l -0.231,0 c -0.286,0 -0.418,-0.132 -0.418,-0.374 l 0,-3.212 0.484,0 c 0.473,0 0.726,-0.143 0.726,-0.528 0,-0.385 -0.253,-0.528 -0.726,-0.528 l -0.484,0 0,-0.979 c 0,-0.528 -0.319,-0.803 -0.803,-0.803 -0.484,0 -0.803,0.275 -0.803,0.803 l 0,0.979 -0.275,0 c -0.451,0 -0.638,0.176 -0.638,0.528 0,0.352 0.187,0.528 0.638,0.528 l 0.275,0 0,3.41 z" />
+ <path
+ id="path395"
+ style=""
+ d="m 30.220031,368.52787 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-2.651 c 0,-0.803 0.66,-1.265 1.221,-1.265 0.693,0 1.012,0.462 1.012,1.111 l 0,2.805 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-3.124 c 0,-1.628 -1.056,-2.112 -2.024,-2.112 -0.913,0 -1.474,0.429 -1.793,0.847 l -0.022,0 0,-2.211 c 0,-0.528 -0.319,-0.803 -0.803,-0.803 -0.484,0 -0.803,0.275 -0.803,0.803 l 0,6.6 z" />
+ <path
+ id="path397"
+ style=""
+ d="m 41.938641,366.61387 c 0.539,0 0.704,-0.143 0.704,-0.693 0,-1.32 -1.056,-2.629 -2.904,-2.629 -1.903,0 -3.036,1.254 -3.036,3.124 0,1.397 0.847,2.915 3.091,2.915 0.968,0 2.519,-0.451 2.519,-1.419 0,-0.297 -0.275,-0.627 -0.66,-0.627 -0.649,0 -0.649,0.792 -1.859,0.792 -0.935,0 -1.485,-0.616 -1.485,-1.463 l 3.63,0 z m -3.63,-0.924 c 0.176,-0.781 0.66,-1.276 1.463,-1.276 0.715,0 1.265,0.539 1.353,1.276 l -2.816,0 z" />
+ <path
+ id="path399"
+ style=""
+ d="m 43.75725,368.52787 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-1.87 c 0,-1.331 0.352,-1.782 1.001,-1.782 l 0.286,0 c 0.396,0 0.792,-0.209 0.792,-0.803 0,-0.451 -0.374,-0.781 -0.88,-0.781 -0.781,0 -1.144,0.693 -1.331,1.364 l -0.022,0 0,-0.616 c 0,-0.484 -0.319,-0.748 -0.726,-0.748 -0.407,0 -0.726,0.264 -0.726,0.748 l 0,4.488 z" />
+ </g>
+ </g>
+ <g
+ id="g3822-0-3"
+ transform="translate(130,2.421875e-6)">
+ <path
+ id="path3005-2-8-1"
+ d="m 19.911936,426.71852 a 9.1659365,9.1659365 0 0 1 -2.53643,-12.71142 9.1659365,9.1659365 0 0 1 12.711199,-2.53756 9.1659365,9.1659365 0 0 1 2.538696,12.71097 9.1659365,9.1659365 0 0 1 -12.710747,2.53983 L 25,419.09448 Z"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#000000;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:2, 1;stroke-dashoffset:0;stroke-opacity:0.13524589;marker:none;enable-background:accumulate"
+ transform="matrix(0.54549827,0,0,0.54549827,36.362543,498.74687)" />
+ <path
+ transform="translate(0,308.2677)"
+ id="path3804-9-3"
+ d="m 50,419.09448 c 0,-15 0,-25.36336 0,-25.36336"
+ style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+ </g>
+ <path
+ id="rect3806-0-6"
+ d="m 138.03046,661.99884 83.93908,0 c 1.67887,0 3.03046,1.35159 3.03046,3.03046 l 0,34.30242 c 0,1.67888 -1.35159,3.03046 -3.03046,3.03046 l -83.93908,0 c -1.67887,0 -3.03046,-1.35158 -3.03046,-3.03046 l 0,-34.30242 c 0,-1.67887 1.35159,-3.03046 3.03046,-3.03046 z"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <g
+ id="flowRoot3808-3-6"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:16px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+ transform="translate(122.76475,307.13793)">
+ <path
+ id="path404"
+ style=""
+ d="m 17.757016,370.83262 c 0,0.784 0.512,1.312 1.312,1.312 0.8,0 1.312,-0.528 1.312,-1.312 l 0,-9.312 c 0,-0.784 -0.512,-1.312 -1.312,-1.312 -0.8,0 -1.312,0.528 -1.312,1.312 l 0,9.312 z" />
+ <path
+ id="path406"
+ style=""
+ d="m 22.531516,370.97662 c 0,0.624 0.256,1.168 1.168,1.168 0.912,0 1.168,-0.544 1.168,-1.168 l 0,-3.856 c 0,-1.168 0.96,-1.84 1.776,-1.84 1.008,0 1.472,0.672 1.472,1.616 l 0,4.08 c 0,0.624 0.256,1.168 1.168,1.168 0.912,0 1.168,-0.544 1.168,-1.168 l 0,-4.544 c 0,-2.368 -1.536,-3.072 -2.944,-3.072 -1.328,0 -2.176,0.608 -2.832,1.472 l -0.032,0 0,-0.304 c 0,-0.704 -0.32,-1.168 -1.056,-1.168 -0.736,0 -1.056,0.464 -1.056,1.168 l 0,6.448 z" />
+ <path
+ id="path408"
+ style=""
+ d="m 31.944766,365.96862 c 0,1.568 1.056,2.128 2.416,2.464 l 1.376,0.336 c 0.832,0.208 1.344,0.304 1.344,0.896 0,0.48 -0.528,0.848 -1.36,0.848 -1.728,0 -1.824,-1.44 -2.832,-1.44 -0.656,0 -0.944,0.464 -0.944,0.976 0,1.152 1.76,2.096 3.872,2.096 1.76,0 3.6,-0.88 3.6,-2.784 0,-1.632 -1.584,-2.192 -2.912,-2.496 l -0.976,-0.224 c -0.72,-0.16 -1.248,-0.288 -1.248,-0.832 0,-0.496 0.528,-0.72 1.344,-0.72 1.472,0 1.504,1.072 2.416,1.072 0.608,0 0.976,-0.48 0.976,-1.024 0,-1.072 -1.792,-1.776 -3.568,-1.776 -1.616,0 -3.504,0.704 -3.504,2.608 z" />
+ <path
+ id="path410"
+ style=""
+ d="m 41.514516,370.06462 c 0,1.376 0.704,2.08 2.4,2.08 1.12,0 1.696,-0.368 1.696,-1.04 0,-0.496 -0.304,-0.784 -0.816,-0.784 l -0.336,0 c -0.416,0 -0.608,-0.192 -0.608,-0.544 l 0,-4.672 0.704,0 c 0.688,0 1.056,-0.208 1.056,-0.768 0,-0.56 -0.368,-0.768 -1.056,-0.768 l -0.704,0 0,-1.424 c 0,-0.768 -0.464,-1.168 -1.168,-1.168 -0.704,0 -1.168,0.4 -1.168,1.168 l 0,1.424 -0.4,0 c -0.656,0 -0.928,0.256 -0.928,0.768 0,0.512 0.272,0.768 0.928,0.768 l 0.4,0 0,4.96 z" />
+ <path
+ id="path412"
+ style=""
+ d="m 54.572766,365.76062 c 0,-1.68 -1.552,-2.4 -3.792,-2.4 -2.4,0 -3.712,1.184 -3.712,2.112 0,0.48 0.4,0.896 0.992,0.896 0.928,0 0.976,-1.28 2.704,-1.28 0.784,0 1.472,0.288 1.472,0.96 0,0.672 -0.448,0.8 -1.008,0.864 l -1.424,0.16 c -1.792,0.208 -3.264,0.752 -3.264,2.688 0,1.472 1.312,2.384 2.64,2.384 1.232,0 2.288,-0.352 3.2,-1.36 0.032,0.72 0.368,1.36 1.376,1.36 0.56,0 1.056,-0.368 1.056,-0.896 0,-0.368 -0.24,-0.592 -0.24,-1.568 l 0,-3.92 z m -2.336,3.152 c 0,0.864 -0.784,1.696 -2.064,1.696 -0.8,0 -1.296,-0.432 -1.296,-0.96 0,-0.704 0.528,-1.008 1.504,-1.152 l 0.848,-0.128 c 0.272,-0.048 0.752,-0.128 1.008,-0.368 l 0,0.912 z" />
+ <path
+ id="path414"
+ style=""
+ d="m 56.722016,370.97662 c 0,0.768 0.464,1.168 1.168,1.168 0.704,0 1.168,-0.4 1.168,-1.168 l 0,-9.6 c 0,-0.768 -0.464,-1.168 -1.168,-1.168 -0.704,0 -1.168,0.4 -1.168,1.168 l 0,9.6 z" />
+ <path
+ id="path416"
+ style=""
+ d="m 61.159516,370.97662 c 0,0.768 0.464,1.168 1.168,1.168 0.704,0 1.168,-0.4 1.168,-1.168 l 0,-9.6 c 0,-0.768 -0.464,-1.168 -1.168,-1.168 -0.704,0 -1.168,0.4 -1.168,1.168 l 0,9.6 z" />
+ <path
+ id="path418"
+ style=""
+ d="m 78.135266,365.76062 c 0,-1.68 -1.552,-2.4 -3.792,-2.4 -2.4,0 -3.712,1.184 -3.712,2.112 0,0.48 0.4,0.896 0.992,0.896 0.928,0 0.976,-1.28 2.704,-1.28 0.784,0 1.472,0.288 1.472,0.96 0,0.672 -0.448,0.8 -1.008,0.864 l -1.424,0.16 c -1.792,0.208 -3.264,0.752 -3.264,2.688 0,1.472 1.312,2.384 2.64,2.384 1.232,0 2.288,-0.352 3.2,-1.36 0.032,0.72 0.368,1.36 1.376,1.36 0.56,0 1.056,-0.368 1.056,-0.896 0,-0.368 -0.24,-0.592 -0.24,-1.568 l 0,-3.92 z m -2.336,3.152 c 0,0.864 -0.784,1.696 -2.064,1.696 -0.8,0 -1.296,-0.432 -1.296,-0.96 0,-0.704 0.528,-1.008 1.504,-1.152 l 0.848,-0.128 c 0.272,-0.048 0.752,-0.128 1.008,-0.368 l 0,0.912 z" />
+ <path
+ id="path420"
+ style=""
+ d="m 21.597016,379.16862 c -0.832,-0.192 -1.792,-0.448 -1.792,-1.248 0,-0.8 0.672,-1.36 1.888,-1.36 2.448,0 2.224,1.712 3.44,1.712 0.64,0 1.2,-0.384 1.2,-1.04 0,-1.536 -2.416,-2.688 -4.464,-2.688 -2.224,0 -4.592,0.96 -4.592,3.52 0,1.232 0.432,2.544 2.816,3.152 l 2.96,0.752 c 0.896,0.224 1.12,0.736 1.12,1.2 0,0.768 -0.752,1.52 -2.112,1.52 -2.656,0 -2.288,-2.08 -3.712,-2.08 -0.64,0 -1.104,0.448 -1.104,1.088 0,1.248 1.488,2.912 4.816,2.912 3.168,0 4.736,-1.552 4.736,-3.632 0,-1.344 -0.608,-2.768 -3.008,-3.312 l -2.192,-0.496 z" />
+ <path
+ id="path422"
+ style=""
+ d="m 35.701766,382.59262 c 0.784,0 1.024,-0.208 1.024,-1.008 0,-1.92 -1.536,-3.824 -4.224,-3.824 -2.768,0 -4.416,1.824 -4.416,4.544 0,2.032 1.232,4.24 4.496,4.24 1.408,0 3.664,-0.656 3.664,-2.064 0,-0.432 -0.4,-0.912 -0.96,-0.912 -0.944,0 -0.944,1.152 -2.704,1.152 -1.36,0 -2.16,-0.896 -2.16,-2.128 l 5.28,0 z m -5.28,-1.344 c 0.256,-1.136 0.96,-1.856 2.128,-1.856 1.04,0 1.84,0.784 1.968,1.856 l -4.096,0 z" />
+ <path
+ id="path424"
+ style=""
+ d="m 38.347016,385.37662 c 0,0.624 0.256,1.168 1.168,1.168 0.912,0 1.168,-0.544 1.168,-1.168 l 0,-2.72 c 0,-1.936 0.512,-2.592 1.456,-2.592 l 0.416,0 c 0.576,0 1.152,-0.304 1.152,-1.168 0,-0.656 -0.544,-1.136 -1.28,-1.136 -1.136,0 -1.664,1.008 -1.936,1.984 l -0.032,0 0,-0.896 c 0,-0.704 -0.464,-1.088 -1.056,-1.088 -0.592,0 -1.056,0.384 -1.056,1.088 l 0,6.528 z" />
+ <path
+ id="path426"
+ style=""
+ d="m 46.255016,385.71262 c 0.224,0.624 0.368,0.832 1.536,0.832 1.168,0 1.312,-0.208 1.536,-0.832 l 2.208,-6.144 c 0.064,-0.192 0.144,-0.448 0.144,-0.592 0,-0.832 -0.576,-1.216 -1.136,-1.216 -0.88,0 -1.104,0.736 -1.168,0.976 l -1.568,5.28 -0.032,0 -1.568,-5.28 c -0.064,-0.24 -0.288,-0.976 -1.168,-0.976 -0.56,0 -1.136,0.384 -1.136,1.216 0,0.144 0.08,0.4 0.144,0.592 l 2.208,6.144 z" />
+ <path
+ id="path428"
+ style=""
+ d="m 59.983016,382.59262 c 0.784,0 1.024,-0.208 1.024,-1.008 0,-1.92 -1.536,-3.824 -4.224,-3.824 -2.768,0 -4.416,1.824 -4.416,4.544 0,2.032 1.232,4.24 4.496,4.24 1.408,0 3.664,-0.656 3.664,-2.064 0,-0.432 -0.4,-0.912 -0.96,-0.912 -0.944,0 -0.944,1.152 -2.704,1.152 -1.36,0 -2.16,-0.896 -2.16,-2.128 l 5.28,0 z m -5.28,-1.344 c 0.256,-1.136 0.96,-1.856 2.128,-1.856 1.04,0 1.84,0.784 1.968,1.856 l -4.096,0 z" />
+ <path
+ id="path430"
+ style=""
+ d="m 62.628266,385.37662 c 0,0.624 0.256,1.168 1.168,1.168 0.912,0 1.168,-0.544 1.168,-1.168 l 0,-2.72 c 0,-1.936 0.512,-2.592 1.456,-2.592 l 0.416,0 c 0.576,0 1.152,-0.304 1.152,-1.168 0,-0.656 -0.544,-1.136 -1.28,-1.136 -1.136,0 -1.664,1.008 -1.936,1.984 l -0.032,0 0,-0.896 c 0,-0.704 -0.464,-1.088 -1.056,-1.088 -0.592,0 -1.056,0.384 -1.056,1.088 l 0,6.528 z" />
+ </g>
+ </g>
+ <g
+ id="g3238-6"
+ transform="translate(460,-0.36332963)">
+ <g
+ id="g3908-0"
+ transform="translate(50.125,-29.511643)">
+ <path
+ id="rect3806-4-6"
+ d="m 16.740473,667.23718 56.269054,0 c 1.033472,0 1.865473,0.832 1.865473,1.86548 l 0,26.26908 c 0,1.03347 -0.832001,1.86547 -1.865473,1.86547 l -56.269054,0 c -1.033472,0 -1.865473,-0.832 -1.865473,-1.86547 l 0,-26.26908 c 0,-1.03348 0.832001,-1.86548 1.865473,-1.86548 z"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#e0e0e0;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:1, 2;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <g
+ id="flowRoot3808-5-9"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:11px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+ transform="translate(-0.038706,307.54845)">
+ <path
+ id="path434"
+ style=""
+ d="m 17.421016,368.42887 c 0,0.539 0.352,0.902 0.902,0.902 0.55,0 0.902,-0.363 0.902,-0.902 l 0,-2.475 2.728,0 c 0.473,0 0.847,-0.132 0.847,-0.693 0,-0.561 -0.374,-0.693 -0.847,-0.693 l -2.728,0 0,-1.848 3.223,0 c 0.528,0 0.913,-0.154 0.913,-0.726 0,-0.572 -0.385,-0.726 -0.913,-0.726 l -3.971,0 c -0.638,0 -1.056,0.253 -1.056,1.056 l 0,6.105 z" />
+ <path
+ id="path436"
+ style=""
+ d="m 24.206469,368.52787 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-4.433 c 0,-0.429 -0.176,-0.803 -0.803,-0.803 -0.627,0 -0.803,0.374 -0.803,0.803 l 0,4.433 z m -0.033,-6.611 c 0,0.462 0.374,0.836 0.836,0.836 0.462,0 0.836,-0.374 0.836,-0.836 0,-0.462 -0.374,-0.836 -0.836,-0.836 -0.462,0 -0.836,0.374 -0.836,0.836 z" />
+ <path
+ id="path438"
+ style=""
+ d="m 27.25725,368.52787 c 0,0.429 0.176,0.803 0.803,0.803 0.627,0 0.803,-0.374 0.803,-0.803 l 0,-1.87 c 0,-1.331 0.352,-1.782 1.001,-1.782 l 0.286,0 c 0.396,0 0.792,-0.209 0.792,-0.803 0,-0.451 -0.374,-0.781 -0.88,-0.781 -0.781,0 -1.144,0.693 -1.331,1.364 l -0.022,0 0,-0.616 c 0,-0.484 -0.319,-0.748 -0.726,-0.748 -0.407,0 -0.726,0.264 -0.726,0.748 l 0,4.488 z" />
+ <path
+ id="path440"
+ style=""
+ d="m 36.503094,366.61387 c 0.539,0 0.704,-0.143 0.704,-0.693 0,-1.32 -1.056,-2.629 -2.904,-2.629 -1.903,0 -3.036,1.254 -3.036,3.124 0,1.397 0.847,2.915 3.091,2.915 0.968,0 2.519,-0.451 2.519,-1.419 0,-0.297 -0.275,-0.627 -0.66,-0.627 -0.649,0 -0.649,0.792 -1.859,0.792 -0.935,0 -1.485,-0.616 -1.485,-1.463 l 3.63,0 z m -3.63,-0.924 c 0.176,-0.781 0.66,-1.276 1.463,-1.276 0.715,0 1.265,0.539 1.353,1.276 l -2.816,0 z" />
+ <path
+ id="path442"
+ style=""
+ d="m 38.233703,368.57187 c 0,0.495 0.231,0.759 0.726,0.759 0.473,0 0.726,-0.264 0.726,-0.759 l 0,-0.253 0.022,0 c 0.264,0.682 0.913,1.012 1.694,1.012 1.342,0 2.519,-0.979 2.519,-3.058 0,-1.54 -0.781,-2.981 -2.475,-2.981 -0.715,0 -1.265,0.297 -1.584,0.814 l -0.022,0 0,-2.178 c 0,-0.528 -0.319,-0.803 -0.803,-0.803 -0.484,0 -0.803,0.275 -0.803,0.803 l 0,6.644 z m 4.081,-2.244 c 0,0.946 -0.418,1.727 -1.276,1.749 -0.935,0 -1.287,-0.836 -1.287,-1.749 0,-0.825 0.308,-1.793 1.287,-1.782 1.023,0 1.276,1.034 1.276,1.782 z" />
+ <path
+ id="path444"
+ style=""
+ d="m 50.403312,364.09487 c 0,-0.429 -0.176,-0.803 -0.803,-0.803 -0.627,0 -0.802999,0.374 -0.802999,0.803 l 0,2.651 c 0,0.803 -0.660001,1.265 -1.221001,1.265 -0.692999,0 -1.012,-0.462 -1.012,-1.111 l 0,-2.805 c 0,-0.429 -0.176,-0.803 -0.802999,-0.803 -0.627001,0 -0.803001,0.374 -0.803001,0.803 l 0,3.124 c 0,1.628 1.056001,2.112 2.024,2.112 0.913001,0 1.496,-0.418 1.947001,-1.012 l 0.022,0 0,0.209 c 0,0.484 0.22,0.803 0.726,0.803 0.506,0 0.726,-0.319 0.726,-0.803 l 0,-4.433 z" />
+ <path
+ id="path446"
+ style=""
+ d="m 53.046922,366.29487 c 0,-0.99 0.319,-1.749 1.353,-1.749 0.748,0 1.188,0.517 1.188,1.683 0,1.144 -0.55,1.617 -1.265,1.617 -0.913,0 -1.276,-0.814 -1.276,-1.551 z m 4.081,-2.244 c 0,-0.495 -0.231,-0.759 -0.726,-0.759 -0.473,0 -0.726,0.264 -0.726,0.759 l 0,0.198 -0.022,0 c -0.297,-0.594 -0.913,-0.957 -1.694,-0.957 -1.353,0 -2.519,0.979 -2.519,3.058 0,1.584 0.88,2.684 2.574,2.684 0.638,0 1.265,-0.352 1.551,-0.77 l 0.022,0 0,0.33 c 0,1.265 -0.396,1.76 -1.375,1.76 -0.902,0 -1.034,-0.825 -1.705,-0.825 -0.352,0 -0.66,0.286 -0.66,0.682 0,0.781 1.199,1.331 2.42,1.331 1.672,0 2.86,-0.891 2.86,-2.827 l 0,-4.664 z" />
+ </g>
+ </g>
+ <g
+ id="g3822-1"
+ transform="translate(30,0.3633567)">
+ <path
+ id="path3005-2-1"
+ d="m 19.911936,426.71852 a 9.1659365,9.1659365 0 0 1 -2.602258,-12.61135 9.1659365,9.1659365 0 0 1 12.576029,-2.76796 9.1659365,9.1659365 0 0 1 2.933174,12.53852 9.1659365,9.1659365 0 0 1 -12.498848,3.09789"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:3.66637278;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ transform="matrix(0.54549827,0,0,0.54549827,36.362543,498.74687)" />
+ <path
+ transform="translate(0,308.2677)"
+ id="path3804-4"
+ d="m 50,414.09448 c 0,-15 0,-20.36336 0,-20.36336"
+ style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:2, 4;stroke-dashoffset:0;stroke-opacity:1" />
+ </g>
+ <g
+ id="g3868-8"
+ transform="translate(4.8113861,-12.853955)">
+ <path
+ id="rect3806-8"
+ d="m 33.219076,675.57947 83.939074,0 c 1.67888,0 3.03046,1.35158 3.03046,3.03046 l 0,33.93905 c 0,1.67888 -1.35158,3.03046 -3.03046,3.03046 l -83.939074,0 c -1.678876,0 -3.030462,-1.35158 -3.030462,-3.03046 l 0,-33.93905 c 0,-1.67888 1.351586,-3.03046 3.030462,-3.03046 z"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:2, 4;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <g
+ id="flowRoot3808-4"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:16px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+ transform="translate(18.369364,319.99189)">
+ <path
+ id="path451"
+ style=""
+ d="m 17.245016,366.03262 c 0,3.488 1.696,6.176 5.824,6.176 3.936,0 5.824,-2.928 5.824,-6.176 0,-3.376 -2.048,-5.888 -5.824,-5.888 -3.776,0 -5.824,2.512 -5.824,5.888 z m 2.624,0 c 0,-2.208 1.056,-3.776 3.2,-3.776 2.144,0 3.2,1.568 3.2,3.776 0,2.208 -0.816,4.064 -3.2,4.064 -2.464,0 -3.2,-1.856 -3.2,-4.064 z" />
+ <path
+ id="path453"
+ style=""
+ d="m 31.139516,370.06462 c 0,1.376 0.704,2.08 2.4,2.08 1.12,0 1.696,-0.368 1.696,-1.04 0,-0.496 -0.304,-0.784 -0.816,-0.784 l -0.336,0 c -0.416,0 -0.608,-0.192 -0.608,-0.544 l 0,-4.672 0.704,0 c 0.688,0 1.056,-0.208 1.056,-0.768 0,-0.56 -0.368,-0.768 -1.056,-0.768 l -0.704,0 0,-1.424 c 0,-0.768 -0.464,-1.168 -1.168,-1.168 -0.704,0 -1.168,0.4 -1.168,1.168 l 0,1.424 -0.4,0 c -0.656,0 -0.928,0.256 -0.928,0.768 0,0.512 0.272,0.768 0.928,0.768 l 0.4,0 0,4.96 z" />
+ <path
+ id="path455"
+ style=""
+ d="m 36.437766,370.97662 c 0,0.624 0.256,1.168 1.168,1.168 0.912,0 1.168,-0.544 1.168,-1.168 l 0,-3.856 c 0,-1.168 0.96,-1.84 1.776,-1.84 1.008,0 1.472,0.672 1.472,1.616 l 0,4.08 c 0,0.624 0.256,1.168 1.168,1.168 0.912,0 1.168,-0.544 1.168,-1.168 l 0,-4.544 c 0,-2.368 -1.536,-3.072 -2.944,-3.072 -1.328,0 -2.144,0.624 -2.608,1.232 l -0.032,0 0,-3.216 c 0,-0.768 -0.464,-1.168 -1.168,-1.168 -0.704,0 -1.168,0.4 -1.168,1.168 l 0,9.6 z" />
+ <path
+ id="path457"
+ style=""
+ d="m 53.483016,368.19262 c 0.784,0 1.024,-0.208 1.024,-1.008 0,-1.92 -1.536,-3.824 -4.224,-3.824 -2.768,0 -4.416,1.824 -4.416,4.544 0,2.032 1.232,4.24 4.496,4.24 1.408,0 3.664,-0.656 3.664,-2.064 0,-0.432 -0.4,-0.912 -0.96,-0.912 -0.944,0 -0.944,1.152 -2.704,1.152 -1.36,0 -2.16,-0.896 -2.16,-2.128 l 5.28,0 z m -5.28,-1.344 c 0.256,-1.136 0.96,-1.856 2.128,-1.856 1.04,0 1.84,0.784 1.968,1.856 l -4.096,0 z" />
+ <path
+ id="path459"
+ style=""
+ d="m 56.128266,370.97662 c 0,0.624 0.256,1.168 1.168,1.168 0.912,0 1.168,-0.544 1.168,-1.168 l 0,-2.72 c 0,-1.936 0.512,-2.592 1.456,-2.592 l 0.416,0 c 0.576,0 1.152,-0.304 1.152,-1.168 0,-0.656 -0.544,-1.136 -1.28,-1.136 -1.136,0 -1.664,1.008 -1.936,1.984 l -0.032,0 0,-0.896 c 0,-0.704 -0.464,-1.088 -1.056,-1.088 -0.592,0 -1.056,0.384 -1.056,1.088 l 0,6.528 z" />
+ <path
+ id="path461"
+ style=""
+ d="m 20.573016,385.23262 c 0,0.784 0.512,1.312 1.312,1.312 0.8,0 1.312,-0.528 1.312,-1.312 l 0,-8.208 2.48,0 c 0.752,0 1.36,-0.384 1.36,-1.104 0,-0.72 -0.608,-1.104 -1.36,-1.104 l -7.584,0 c -0.752,0 -1.36,0.384 -1.36,1.104 0,0.72 0.608,1.104 1.36,1.104 l 2.48,0 0,8.208 z" />
+ <path
+ id="path463"
+ style=""
+ d="m 27.953016,382.14462 c 0,-1.52 0.624,-2.656 1.984,-2.656 1.36,0 1.984,1.136 1.984,2.656 0,1.424 -0.592,2.672 -1.984,2.672 -1.392,0 -1.984,-1.248 -1.984,-2.672 z m -2.336,0 c 0,2.336 1.136,4.4 4.32,4.4 3.184,0 4.32,-2.064 4.32,-4.4 0,-2.464 -1.504,-4.384 -4.32,-4.384 -2.816,0 -4.32,1.92 -4.32,4.384 z" />
+ <path
+ id="path465"
+ style=""
+ d="m 37.734266,382.14462 c 0,-1.52 0.624,-2.656 1.984,-2.656 1.36,0 1.984,1.136 1.984,2.656 0,1.424 -0.592,2.672 -1.984,2.672 -1.392,0 -1.984,-1.248 -1.984,-2.672 z m -2.336,0 c 0,2.336 1.136,4.4 4.32,4.4 3.184,0 4.32,-2.064 4.32,-4.4 0,-2.464 -1.504,-4.384 -4.32,-4.384 -2.816,0 -4.32,1.92 -4.32,4.384 z" />
+ <path
+ id="path467"
+ style=""
+ d="m 45.659516,385.37662 c 0,0.768 0.464,1.168 1.168,1.168 0.704,0 1.168,-0.4 1.168,-1.168 l 0,-9.6 c 0,-0.768 -0.464,-1.168 -1.168,-1.168 -0.704,0 -1.168,0.4 -1.168,1.168 l 0,9.6 z" />
+ <path
+ id="path469"
+ style=""
+ d="m 49.601016,380.36862 c 0,1.568 1.056,2.128 2.416,2.464 l 1.376,0.336 c 0.832,0.208 1.344,0.304 1.344,0.896 0,0.48 -0.528,0.848 -1.36,0.848 -1.728,0 -1.824,-1.44 -2.832,-1.44 -0.656,0 -0.944,0.464 -0.944,0.976 0,1.152 1.76,2.096 3.872,2.096 1.76,0 3.6,-0.88 3.6,-2.784 0,-1.632 -1.584,-2.192 -2.912,-2.496 l -0.976,-0.224 c -0.72,-0.16 -1.248,-0.288 -1.248,-0.832 0,-0.496 0.528,-0.72 1.344,-0.72 1.472,0 1.504,1.072 2.416,1.072 0.608,0 0.976,-0.48 0.976,-1.024 0,-1.072 -1.792,-1.776 -3.568,-1.776 -1.616,0 -3.504,0.704 -3.504,2.608 z" />
+ </g>
+ </g>
+ </g>
+ <path
+ id="path3005-2-1-8-2"
+ d="m 14.823881,434.34255 a 18.331858,18.331858 0 0 1 -5.2045132,-25.22269 18.331858,18.331858 0 0 1 25.1520382,-5.53591 18.331858,18.331858 0 0 1 5.866343,25.07703 18.331858,18.331858 0 0 1 -24.997676,6.19576"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:3.66637278;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ transform="matrix(0.54549827,0,0,0.54549827,581.36254,498.74687)" />
+ <g
+ id="flowRoot3808-4-1"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:16px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none"
+ transform="translate(590.48907,346.65234)">
+ <path
+ id="path473"
+ style=""
+ d="m 28.445016,366.92862 c 0,-0.72 -0.304,-1.104 -1.072,-1.104 l -3.232,0 c -0.656,0 -1.024,0.368 -1.024,1.008 0,0.8 0.624,1.008 1.184,1.008 l 1.712,0 c -0.128,1.408 -1.344,2.352 -2.736,2.352 -2.144,0 -3.264,-1.568 -3.264,-3.84 0,-2.912 1.424,-4.096 3.232,-4.096 2.56,0 2.08,1.808 3.376,1.808 0.56,0 1.232,-0.24 1.232,-1.152 0,-1.024 -1.552,-2.768 -4.464,-2.768 -3.568,0 -6,2.144 -6,6.032 0,3.232 1.552,6.032 5.616,6.032 1.632,0 2.672,-0.608 3.424,-1.552 0.16,1.024 0.368,1.488 1.12,1.488 0.528,0 0.896,-0.4 0.896,-0.88 l 0,-4.336 z" />
+ <path
+ id="path475"
+ style=""
+ d="m 32.484266,367.74462 c 0,-1.52 0.624,-2.656 1.984,-2.656 1.36,0 1.984,1.136 1.984,2.656 0,1.424 -0.592,2.672 -1.984,2.672 -1.392,0 -1.984,-1.248 -1.984,-2.672 z m -2.336,0 c 0,2.336 1.136,4.4 4.32,4.4 3.184,0 4.32,-2.064 4.32,-4.4 0,-2.464 -1.504,-4.384 -4.32,-4.384 -2.816,0 -4.32,1.92 -4.32,4.384 z" />
+ <path
+ id="path477"
+ style=""
+ d="m 17.389016,380.57662 c 0,3.968 2.128,6.032 5.728,6.032 2.544,0 4.56,-1.648 4.56,-3.312 0,-0.64 -0.64,-1.008 -1.28,-1.008 -1.264,0 -1.216,2.208 -3.28,2.208 -2.272,0 -3.104,-1.824 -3.104,-3.92 0,-2.496 1.36,-3.92 3.008,-3.92 2.4,0 1.952,2.08 3.472,2.08 0.784,0 1.184,-0.448 1.184,-1.184 0,-1.12 -1.648,-3.008 -4.656,-3.008 -3.712,0 -5.632,2.784 -5.632,6.032 z" />
+ <path
+ id="path479"
+ style=""
+ d="m 29.159516,385.37662 c 0,0.624 0.256,1.168 1.168,1.168 0.912,0 1.168,-0.544 1.168,-1.168 l 0,-2.72 c 0,-1.936 0.512,-2.592 1.456,-2.592 l 0.416,0 c 0.576,0 1.152,-0.304 1.152,-1.168 0,-0.656 -0.544,-1.136 -1.28,-1.136 -1.136,0 -1.664,1.008 -1.936,1.984 l -0.032,0 0,-0.896 c 0,-0.704 -0.464,-1.088 -1.056,-1.088 -0.592,0 -1.056,0.384 -1.056,1.088 l 0,6.528 z" />
+ <path
+ id="path481"
+ style=""
+ d="m 42.608016,382.59262 c 0.784,0 1.024,-0.208 1.024,-1.008 0,-1.92 -1.536,-3.824 -4.224,-3.824 -2.768,0 -4.416,1.824 -4.416,4.544 0,2.032 1.232,4.24 4.496,4.24 1.408,0 3.664,-0.656 3.664,-2.064 0,-0.432 -0.4,-0.912 -0.96,-0.912 -0.944,0 -0.944,1.152 -2.704,1.152 -1.36,0 -2.16,-0.896 -2.16,-2.128 l 5.28,0 z m -5.28,-1.344 c 0.256,-1.136 0.96,-1.856 2.128,-1.856 1.04,0 1.84,0.784 1.968,1.856 l -4.096,0 z" />
+ <path
+ id="path483"
+ style=""
+ d="m 52.885266,380.16062 c 0,-1.68 -1.552,-2.4 -3.792,-2.4 -2.4,0 -3.712,1.184 -3.712,2.112 0,0.48 0.4,0.896 0.992,0.896 0.928,0 0.976,-1.28 2.704,-1.28 0.784,0 1.472,0.288 1.472,0.96 0,0.672 -0.448,0.8 -1.008,0.864 l -1.424,0.16 c -1.792,0.208 -3.264,0.752 -3.264,2.688 0,1.472 1.312,2.384 2.64,2.384 1.232,0 2.288,-0.352 3.2,-1.36 0.032,0.72 0.368,1.36 1.376,1.36 0.56,0 1.056,-0.368 1.056,-0.896 0,-0.368 -0.24,-0.592 -0.24,-1.568 l 0,-3.92 z m -2.336,3.152 c 0,0.864 -0.784,1.696 -2.064,1.696 -0.8,0 -1.296,-0.432 -1.296,-0.96 0,-0.704 0.528,-1.008 1.504,-1.152 l 0.848,-0.128 c 0.272,-0.048 0.752,-0.128 1.008,-0.368 l 0,0.912 z" />
+ <path
+ id="path485"
+ style=""
+ d="m 55.514516,384.46462 c 0,1.376 0.704,2.08 2.4,2.08 1.12,0 1.696,-0.368 1.696,-1.04 0,-0.496 -0.304,-0.784 -0.816,-0.784 l -0.336,0 c -0.416,0 -0.608,-0.192 -0.608,-0.544 l 0,-4.672 0.704,0 c 0.688,0 1.056,-0.208 1.056,-0.768 0,-0.56 -0.368,-0.768 -1.056,-0.768 l -0.704,0 0,-1.424 c 0,-0.768 -0.464,-1.168 -1.168,-1.168 -0.704,0 -1.168,0.4 -1.168,1.168 l 0,1.424 -0.4,0 c -0.656,0 -0.928,0.256 -0.928,0.768 0,0.512 0.272,0.768 0.928,0.768 l 0.4,0 0,4.96 z" />
+ <path
+ id="path487"
+ style=""
+ d="m 68.076766,382.59262 c 0.784,0 1.024,-0.208 1.024,-1.008 0,-1.92 -1.536,-3.824 -4.224,-3.824 -2.768,0 -4.416,1.824 -4.416,4.544 0,2.032 1.232,4.24 4.496,4.24 1.408,0 3.664,-0.656 3.664,-2.064 0,-0.432 -0.4,-0.912 -0.96,-0.912 -0.944,0 -0.944,1.152 -2.704,1.152 -1.36,0 -2.16,-0.896 -2.16,-2.128 l 5.28,0 z m -5.28,-1.344 c 0.256,-1.136 0.96,-1.856 2.128,-1.856 1.04,0 1.84,0.784 1.968,1.856 l -4.096,0 z" />
+ <path
+ id="path489"
+ style=""
+ d="m 83.260266,380.16062 c 0,-1.68 -1.552,-2.4 -3.792,-2.4 -2.4,0 -3.712,1.184 -3.712,2.112 0,0.48 0.4,0.896 0.992,0.896 0.928,0 0.976,-1.28 2.704,-1.28 0.784,0 1.472,0.288 1.472,0.96 0,0.672 -0.448,0.8 -1.008,0.864 l -1.424,0.16 c -1.792,0.208 -3.264,0.752 -3.264,2.688 0,1.472 1.312,2.384 2.64,2.384 1.232,0 2.288,-0.352 3.2,-1.36 0.032,0.72 0.368,1.36 1.376,1.36 0.56,0 1.056,-0.368 1.056,-0.896 0,-0.368 -0.24,-0.592 -0.24,-1.568 l 0,-3.92 z m -2.336,3.152 c 0,0.864 -0.784,1.696 -2.064,1.696 -0.8,0 -1.296,-0.432 -1.296,-0.96 0,-0.704 0.528,-1.008 1.504,-1.152 l 0.848,-0.128 c 0.272,-0.048 0.752,-0.128 1.008,-0.368 l 0,0.912 z" />
+ <path
+ id="path491"
+ style=""
+ d="m 17.757016,399.63261 c 0,0.784 0.512,1.312 1.312,1.312 0.8,0 1.312,-0.528 1.312,-1.312 l 0,-3.12 2.912,0 c 2.544,0 4,-1.552 4,-3.648 0,-2.56 -1.776,-3.648 -3.984,-3.648 l -4.016,0 c -0.928,0 -1.536,0.368 -1.536,1.536 l 0,8.88 z m 2.624,-8.4 2.176,0 c 1.296,0 2.112,0.48 2.112,1.632 0,0.992 -0.784,1.632 -1.84,1.632 l -2.448,0 0,-3.264 z" />
+ <path
+ id="path493"
+ style=""
+ d="m 28.847016,399.77661 c 0,0.624 0.256,1.168 1.168,1.168 0.912,0 1.168,-0.544 1.168,-1.168 l 0,-2.72 c 0,-1.936 0.512,-2.592 1.456,-2.592 l 0.416,0 c 0.576,0 1.152,-0.304 1.152,-1.168 0,-0.656 -0.544,-1.136 -1.28,-1.136 -1.136,0 -1.664,1.008 -1.936,1.984 l -0.032,0 0,-0.896 c 0,-0.704 -0.464,-1.088 -1.056,-1.088 -0.592,0 -1.056,0.384 -1.056,1.088 l 0,6.528 z" />
+ <path
+ id="path495"
+ style=""
+ d="m 37.015516,396.54461 c 0,-1.52 0.624,-2.656 1.984,-2.656 1.36,0 1.984,1.136 1.984,2.656 0,1.424 -0.592,2.672 -1.984,2.672 -1.392,0 -1.984,-1.248 -1.984,-2.672 z m -2.336,0 c 0,2.336 1.136,4.4 4.32,4.4 3.184,0 4.32,-2.064 4.32,-4.4 0,-2.464 -1.504,-4.384 -4.32,-4.384 -2.816,0 -4.32,1.92 -4.32,4.384 z" />
+ <path
+ id="path497"
+ style=""
+ d="m 44.940766,401.80861 c 0,0.224 -0.112,0.416 -0.336,0.416 l -0.256,0 c -0.496,0 -0.736,0.224 -0.736,0.816 0,0.672 0.384,1.008 1.28,1.008 1.744,0 2.384,-0.8 2.384,-2.48 l 0,-8.24 c 0,-0.624 -0.256,-1.168 -1.168,-1.168 -0.912,0 -1.168,0.544 -1.168,1.168 l 0,8.48 z m -0.048,-11.648 c 0,0.672 0.544,1.216 1.216,1.216 0.672,0 1.216,-0.544 1.216,-1.216 0,-0.672 -0.544,-1.216 -1.216,-1.216 -0.672,0 -1.216,0.544 -1.216,1.216 z" />
+ <path
+ id="path499"
+ style=""
+ d="m 56.514266,396.99261 c 0.784,0 1.024,-0.208 1.024,-1.008 0,-1.92 -1.536,-3.824 -4.224,-3.824 -2.768,0 -4.416,1.824 -4.416,4.544 0,2.032 1.232,4.24 4.496,4.24 1.408,0 3.664,-0.656 3.664,-2.064 0,-0.432 -0.4,-0.912 -0.96,-0.912 -0.944,0 -0.944,1.152 -2.704,1.152 -1.36,0 -2.16,-0.896 -2.16,-2.128 l 5.28,0 z m -5.28,-1.344 c 0.256,-1.136 0.96,-1.856 2.128,-1.856 1.04,0 1.84,0.784 1.968,1.856 l -4.096,0 z" />
+ <path
+ id="path501"
+ style=""
+ d="m 58.583516,396.72061 c 0,2.448 1.36,4.224 4.24,4.224 2.4,0 3.552,-1.408 3.552,-2.432 0,-0.464 -0.384,-0.896 -0.976,-0.896 -1.232,0 -0.88,1.504 -2.512,1.504 -1.28,0 -1.968,-0.944 -1.968,-2.4 0,-2.112 1.072,-2.736 1.984,-2.736 1.68,0 1.28,1.376 2.384,1.376 0.592,0 1.088,-0.336 1.088,-1.008 0,-1.088 -1.456,-2.192 -3.408,-2.192 -2.864,0 -4.384,1.872 -4.384,4.56 z" />
+ <path
+ id="path503"
+ style=""
+ d="m 68.233266,398.86461 c 0,1.376 0.704,2.08 2.4,2.08 1.12,0 1.696,-0.368 1.696,-1.04 0,-0.496 -0.304,-0.784 -0.816,-0.784 l -0.336,0 c -0.416,0 -0.608,-0.192 -0.608,-0.544 l 0,-4.672 0.704,0 c 0.688,0 1.056,-0.208 1.056,-0.768 0,-0.56 -0.368,-0.768 -1.056,-0.768 l -0.704,0 0,-1.424 c 0,-0.768 -0.464,-1.168 -1.168,-1.168 -0.704,0 -1.168,0.4 -1.168,1.168 l 0,1.424 -0.4,0 c -0.656,0 -0.928,0.256 -0.928,0.768 0,0.512 0.272,0.768 0.928,0.768 l 0.4,0 0,4.96 z" />
+ </g>
+ <path
+ id="path3005-2-1-8-2-7"
+ d="m 14.823881,434.34255 a 18.331858,18.331858 0 0 1 -5.2045132,-25.22269 18.331858,18.331858 0 0 1 25.1520382,-5.53591 18.331858,18.331858 0 0 1 5.866343,25.07703 18.331858,18.331858 0 0 1 -24.997676,6.19576"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:3.66637278;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ transform="matrix(0.54549827,0,0,0.54549827,171.36254,498.74687)" />
+ <g
+ id="flowRoot3808-4-1-8"
+ style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:16px;line-height:89.99999762%;font-family:'Helvetica Rounded LT Std';-inkscape-font-specification:'Helvetica Rounded LT Std Bold';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none"
+ transform="translate(69.45294,353.63285)">
+ <path
+ id="path507"
+ style=""
+ d="m 68.372406,364.76862 c -0.832,-0.192 -1.792,-0.448 -1.792,-1.248 0,-0.8 0.672,-1.36 1.888,-1.36 2.448,0 2.224,1.712 3.44,1.712 0.64,0 1.2,-0.384 1.2,-1.04 0,-1.536 -2.416,-2.688 -4.464,-2.688 -2.224,0 -4.592,0.96 -4.592,3.52 0,1.232 0.432,2.544 2.816,3.152 l 2.96,0.752 c 0.896,0.224 1.12,0.736 1.12,1.2 0,0.768 -0.752,1.52 -2.112,1.52 -2.656,0 -2.288,-2.08 -3.712,-2.08 -0.64,0 -1.104,0.448 -1.104,1.088 0,1.248 1.488,2.912 4.816,2.912 3.168,0 4.736,-1.552 4.736,-3.632 0,-1.344 -0.608,-2.768 -3.008,-3.312 l -2.192,-0.496 z" />
+ <path
+ id="path509"
+ style=""
+ d="m 75.821156,370.06462 c 0,1.376 0.704,2.08 2.4,2.08 1.12,0 1.696,-0.368 1.696,-1.04 0,-0.496 -0.304,-0.784 -0.816,-0.784 l -0.336,0 c -0.416,0 -0.608,-0.192 -0.608,-0.544 l 0,-4.672 0.704,0 c 0.688,0 1.056,-0.208 1.056,-0.768 0,-0.56 -0.368,-0.768 -1.056,-0.768 l -0.704,0 0,-1.424 c 0,-0.768 -0.464,-1.168 -1.168,-1.168 -0.704,0 -1.168,0.4 -1.168,1.168 l 0,1.424 -0.4,0 c -0.656,0 -0.928,0.256 -0.928,0.768 0,0.512 0.272,0.768 0.928,0.768 l 0.4,0 0,4.96 z" />
+ <path
+ id="path511"
+ style=""
+ d="m 88.879406,365.76062 c 0,-1.68 -1.552,-2.4 -3.792,-2.4 -2.4,0 -3.712,1.184 -3.712,2.112 0,0.48 0.4,0.896 0.992,0.896 0.928,0 0.976,-1.28 2.704,-1.28 0.784,0 1.472,0.288 1.472,0.96 0,0.672 -0.448,0.8 -1.008,0.864 l -1.424,0.16 c -1.792,0.208 -3.264,0.752 -3.264,2.688 0,1.472 1.312,2.384 2.64,2.384 1.232,0 2.288,-0.352 3.2,-1.36 0.032,0.72 0.368,1.36 1.376,1.36 0.56,0 1.056,-0.368 1.056,-0.896 0,-0.368 -0.24,-0.592 -0.24,-1.568 l 0,-3.92 z m -2.336,3.152 c 0,0.864 -0.784,1.696 -2.064,1.696 -0.8,0 -1.296,-0.432 -1.296,-0.96 0,-0.704 0.528,-1.008 1.504,-1.152 l 0.848,-0.128 c 0.272,-0.048 0.752,-0.128 1.008,-0.368 l 0,0.912 z" />
+ <path
+ id="path513"
+ style=""
+ d="m 91.028656,370.97662 c 0,0.624 0.256,1.168 1.168,1.168 0.912,0 1.168,-0.544 1.168,-1.168 l 0,-2.72 c 0,-1.936 0.512,-2.592 1.456,-2.592 l 0.416,0 c 0.576,0 1.152,-0.304 1.152,-1.168 0,-0.656 -0.544,-1.136 -1.28,-1.136 -1.136,0 -1.664,1.008 -1.936,1.984 l -0.032,0 0,-0.896 c 0,-0.704 -0.464,-1.088 -1.056,-1.088 -0.592,0 -1.056,0.384 -1.056,1.088 l 0,6.528 z" />
+ <path
+ id="path515"
+ style=""
+ d="m 98.008656,370.06462 c 0,1.376 0.704,2.08 2.400004,2.08 1.12,0 1.696,-0.368 1.696,-1.04 0,-0.496 -0.304,-0.784 -0.816,-0.784 l -0.336,0 c -0.416,0 -0.608,-0.192 -0.608,-0.544 l 0,-4.672 0.704,0 c 0.688,0 1.056,-0.208 1.056,-0.768 0,-0.56 -0.368,-0.768 -1.056,-0.768 l -0.704,0 0,-1.424 c 0,-0.768 -0.464004,-1.168 -1.168004,-1.168 -0.704,0 -1.168,0.4 -1.168,1.168 l 0,1.424 -0.4,0 c -0.656,0 -0.928,0.256 -0.928,0.768 0,0.512 0.272,0.768 0.928,0.768 l 0.4,0 0,4.96 z" />
+ <path
+ id="path517"
+ style=""
+ d="m 65.282406,385.23262 c 0,0.784 0.512,1.312 1.312,1.312 0.8,0 1.312,-0.528 1.312,-1.312 l 0,-3.84 4.768,0 0,3.84 c 0,0.784 0.512,1.312 1.312,1.312 0.8,0 1.312,-0.528 1.312,-1.312 l 0,-9.312 c 0,-0.784 -0.512,-1.312 -1.312,-1.312 -0.8,0 -1.312,0.528 -1.312,1.312 l 0,3.264 -4.768,0 0,-3.264 c 0,-0.784 -0.512,-1.312 -1.312,-1.312 -0.8,0 -1.312,0.528 -1.312,1.312 l 0,9.312 z" />
+ <path
+ id="path519"
+ style=""
+ d="m 84.695906,382.59262 c 0.784,0 1.024,-0.208 1.024,-1.008 0,-1.92 -1.536,-3.824 -4.224,-3.824 -2.768,0 -4.416,1.824 -4.416,4.544 0,2.032 1.232,4.24 4.496,4.24 1.408,0 3.664,-0.656 3.664,-2.064 0,-0.432 -0.4,-0.912 -0.96,-0.912 -0.944,0 -0.944,1.152 -2.704,1.152 -1.36,0 -2.16,-0.896 -2.16,-2.128 l 5.28,0 z m -5.28,-1.344 c 0.256,-1.136 0.96,-1.856 2.128,-1.856 1.04,0 1.84,0.784 1.968,1.856 l -4.096,0 z" />
+ <path
+ id="path521"
+ style=""
+ d="m 87.341156,385.37662 c 0,0.624 0.256,1.168 1.168,1.168 0.912,0 1.168,-0.544 1.168,-1.168 l 0,-2.72 c 0,-1.936 0.512,-2.592 1.456,-2.592 l 0.416,0 c 0.576,0 1.152,-0.304 1.152,-1.168 0,-0.656 -0.544,-1.136 -1.28,-1.136 -1.136,0 -1.664,1.008 -1.936,1.984 l -0.032,0 0,-0.896 c 0,-0.704 -0.464,-1.088 -1.056,-1.088 -0.592,0 -1.056,0.384 -1.056,1.088 l 0,6.528 z" />
+ <path
+ id="path523"
+ style=""
+ d="m 100.78966,382.59262 c 0.784,0 1.024,-0.208 1.024,-1.008 0,-1.92 -1.536,-3.824 -4.224004,-3.824 -2.768,0 -4.416,1.824 -4.416,4.544 0,2.032 1.232,4.24 4.496,4.24 1.408,0 3.664004,-0.656 3.664004,-2.064 0,-0.432 -0.4,-0.912 -0.96,-0.912 -0.944004,0 -0.944004,1.152 -2.704004,1.152 -1.36,0 -2.16,-0.896 -2.16,-2.128 l 5.280004,0 z m -5.280004,-1.344 c 0.256,-1.136 0.96,-1.856 2.128,-1.856 1.04,0 1.84,0.784 1.968,1.856 l -4.096,0 z" />
+ </g>
+ </g>
+</svg>
[[figure.getting-started.eclipse.notification-center.overview]]
.Overview of the notification center
-image::img/notification-center-overview.png[]
+image::img/notification-center-overview.png[scaledwidth=60%]
By clicking a notification in the list, you can open it up.
+ifdef::web[]
.Detailed view of a notification
-image::img/webinar-trainings-sneakpeek.png[]
+image::img/webinar-trainings-sneakpeek.png[scaledwidth=75%]
+endif::web[]
Clicking on the [guilabel]#Clear All# icon in the main pop-up clears all notifications and marks them all as read.
[[getting-started.eclipse.notification.signin]]
notification that asks you to sign in.
.The sign-in notification
-image::img/signin-icon.png[]
+image::img/signin-icon.png[scaledwidth=75%]
When you click the sign-in item, a dialog opens for signing in.
-.The sign-in dialog.
-image::img/sign-in-form.png[]
+.The sign-in dialog
+image::img/sign-in-form.png[scaledwidth=60%]
-You can then sign in with your Vaadin
-account. If you do not have one, you can sign in using a Google,
-Facebook, or Twitter account instead. First, click on the sign-in link. It opens a second dialog, as shown
+You can then sign in with your Vaadin account.
+
+If you do not have one, you can sign in using a Google, Facebook, or Twitter account instead.
+
+First, click on the sign-in link. It opens a second dialog, as shown
in <<figure.getting-started.eclipse.notification-center.complex-signin>>.
[[figure.getting-started.eclipse.notification-center.complex-signin]]
.Sign-in authentication dialog
-image::img/signin-via-website.png[]
+image::img/signin-via-website.png[scaledwidth=60%]
-By following the [url]#vaadin.com# link and logging in to the Vaadin website using your preferred
-account, you can then copy the authentication token from the resulting page.
-After that, you can paste the authorization token into the dialog and
-click [guibutton]#Submit# to log in.
+By following the [url]#vaadin.com# link and logging in to the Vaadin website using your preferred account, you can then copy the authentication token from the resulting page.
+After that, you can paste the authorization token into the dialog and click [guibutton]#Submit# to log in.
[[getting-started.eclipse.notification.settings]]
=== Notification Settings
You can open the settings by selecting "Eclipse... > Preferences".
+ifdef::web[]
.The settings pane
-image::img/preferences.png[]
+image::img/preferences.png[scaledwidth=100%]
+endif::web[]
The options are as follows:
-[guilabel]#Enable automatic widgetset compilation# :: Compiles the widgetset
-of Maven-based projects whenever there are changes and the project is rebuilt.
+[guilabel]#Enable automatic widgetset compilation#::
+Compiles the widgetset of Maven-based projects whenever there are changes and the project is rebuilt.
-[guilabel]#Enable Vaadin pre-release archetypes# :: Adds pre-release
-(alpha/beta) archetypes to the archetype selection list when creating a new
-Vaadin project.
+[guilabel]#Enable Vaadin pre-release archetypes#::
+Adds pre-release (alpha/beta) archetypes to the archetype selection list when creating a new Vaadin project.
[guilabel]#Enable# :: Disabling this disables all notifications.
-[guilabel]#Show popups# :: Disabling this stops
-pop-ups from appearing. The notifications can still be viewed by opening
-the notification center window.
+[guilabel]#Show popups# ::
+Disabling this stops pop-ups from appearing.
+The notifications can still be viewed by opening the notification center window.
[guilabel]#Check for new Vaadin versions# ::
-Polls for new Vaadin versions once every 24h and gives a notification if there
-are new versions available.
-
-[guilabel]#Check for new notifications from vaadin.com# :: Polls the Vaadin site
-for notifications once every 4 hours.
+Polls for new Vaadin versions once every 24h and gives a notification if there are new versions available.
+[guilabel]#Check for new notifications from vaadin.com#::
+Polls the Vaadin site for notifications once every 4 hours.
[[installing.eclipse.update]]
== Updating the Plugins
. In the Tomcat Server dialog, specify the home directory for the server.
+
-image::img/idea-server-1.png[]
+image::img/idea-server-1.png[scaledwidth=80%]
+
Click [guibutton]#OK#.
. Review the application server settings page to check that it is OK.
+
-image::img/idea-server-2.png[]
+image::img/idea-server-2.png[scaledwidth=100%]
+
Then, click [guibutton]#OK#.
It also allows directly downloading Vaadin add-ons from the Vaadin Directory.
.Installation of the NetBeans IDE toolchain
-image::img/installation-netbeans-hi.png[width=60%]
+image::img/installation-netbeans-hi.png[width=80%, scaledwidth=80%]
The installation bundle includes a web server, so you do not need that.
[[figure.firebug.calc]]
.Firebug Debugger for Firefox
-image::img/firebug.png[]
+image::img/firebug.png[scaledwidth=100%]
The most important feature in Firebug is inspecting HTML elements. Right-click
on an element and select [guilabel]#Inspect Element with Firebug# to inspect it.
Vaadin has special support for the Eclipse and NetBeans IDEs, as well as for IntelliJ IDEA.
.Vaadin installation steps
-image::img/installation-steps-hi.png[]
+image::img/installation-steps.svg[scaledwidth=100%]
Managing Vaadin and other Java libraries can get tedious to do manually, so using a build system that manages dependencies automatically is adviced.
Vaadin is distributed in the Maven central repository, and can be used with any build or dependency management system that can access Maven repositories, such as Ivy or Gradle, in addition to Maven.
[[figure.toolchain]]
.Development Toolchain and Process
-image::img/toolchain-hi.png[width=70%]
+image::img/toolchain-hi.png[width=70%, scaledwidth=100%]
<<figure.toolchain>> illustrates the development toolchain. You develop your
application as an Eclipse project. The project must include, in addition to your
height="744.09448"
id="svg1901"
sodipodi:version="0.32"
- inkscape:version="0.48.3.1 r9886"
- sodipodi:docname="steps-constellation-2.svg"
- version="1.1">
+ inkscape:version="0.91 r"
+ sodipodi:docname="installation-steps-constellation.svg"
+ version="1.1"
+ inkscape:export-filename="/home/magi/itmill/vaadin/documentation/installing/original-drawings/installation-steps-constellation.png"
+ inkscape:export-xdpi="183"
+ inkscape:export-ydpi="183">
<defs
id="defs1903">
<g
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
- inkscape:zoom="2.2743067"
- inkscape:cx="596.69243"
- inkscape:cy="336.80876"
+ inkscape:zoom="1.1371534"
+ inkscape:cx="438.05434"
+ inkscape:cy="283.40355"
inkscape:document-units="px"
inkscape:current-layer="layer1"
inkscape:window-width="1920"
inkscape:window-height="1060"
- inkscape:window-x="-3"
+ inkscape:window-x="-2"
inkscape:window-y="-3"
showgrid="true"
inkscape:window-maximized="1"
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
- <dc:title></dc:title>
+ <dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-308.2677)">
- <g
- id="surface0"
- transform="matrix(2.4204743,0,0,2.4204743,-57.788206,141.01257)"
- style="opacity:0">
- <use
- id="use15470"
- xlink:href="#surface1"
- x="0"
- y="0"
- width="1"
- height="1" />
- </g>
<path
style="fill:none;stroke:#acacac;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 458.93578,684.66906 -23.94945,18.58377"
sodipodi:cy="419.09448"
sodipodi:rx="14.258381"
sodipodi:ry="14.258381"
- d="m 17.085091,430.95432 a 14.258381,14.258381 0 1 1 0.03124,0.0208"
+ d="m 17.085091,430.95432 a 14.258381,14.258381 0 0 1 -3.950129,-19.76694 14.258381,14.258381 0 0 1 19.764334,-3.96314 14.258381,14.258381 0 0 1 3.976137,19.76173 14.258381,14.258381 0 0 1 -19.759102,3.98913"
transform="matrix(0.54549827,0,0,0.54549827,426.83523,443.91326)"
sodipodi:start="2.1592864"
sodipodi:end="8.4398399"
sodipodi:cy="419.09448"
sodipodi:rx="14.258381"
sodipodi:ry="14.258381"
- d="m 17.085091,430.95432 c -6.550005,-4.37129 -8.3162076,-13.22474 -3.944924,-19.77475 4.371283,-6.55 13.224737,-8.3162 19.774742,-3.94492 6.550005,4.37128 8.316208,13.22474 3.944924,19.77474 -4.370182,6.54836 -13.220603,8.31559 -19.770514,3.94775 L 25,419.09448 z"
+ d="m 17.085091,430.95432 a 14.258381,14.258381 0 0 1 -3.945629,-19.77369 14.258381,14.258381 0 0 1 19.773333,-3.94739 14.258381,14.258381 0 0 1 3.949153,19.77298 14.258381,14.258381 0 0 1 -19.772629,3.95092 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,445.27941,456.04902)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="9.9760981"
sodipodi:ry="9.9760981"
- d="m 19.462211,427.3924 c -4.582813,-3.05844 -5.818564,-9.25289 -2.760128,-13.83571 3.058437,-4.58281 9.252893,-5.81856 13.835706,-2.76012 4.582813,3.05843 5.818564,9.25289 2.760128,13.8357 -3.057666,4.58166 -9.250001,5.81814 -13.832748,2.7621 L 25,419.09448 z"
+ d="m 19.462211,427.3924 a 9.9760981,9.9760981 0 0 1 -2.760621,-13.83497 9.9760981,9.9760981 0 0 1 13.83472,-2.76185 9.9760981,9.9760981 0 0 1 2.763087,13.83447 9.9760981,9.9760981 0 0 1 -13.834228,2.76432 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,521.47235,449.18471)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="16.573128"
sodipodi:ry="16.573128"
- d="M 15.800162,432.87968 C 8.1868101,427.79874 6.1338769,417.508 11.214807,409.89464 c 5.080931,-7.61335 15.371679,-9.66628 22.985031,-4.58535 7.613352,5.08093 9.666285,15.37168 4.585355,22.98503 -5.07965,7.61143 -15.366874,9.66557 -22.980117,4.58863 L 25,419.09448 z"
+ d="m 15.800162,432.87968 a 16.573128,16.573128 0 0 1 -4.586174,-22.98381 16.573128,16.573128 0 0 1 22.983393,-4.58822 16.573128,16.573128 0 0 1 4.59027,22.98299 16.573128,16.573128 0 0 1 -22.982575,4.59231 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,569.95275,535.48029)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="16.45739"
sodipodi:ry="16.45739"
- d="m 15.864409,432.78341 c -7.5601846,-5.04545 -9.5987812,-15.26433 -4.553333,-22.82452 5.045447,-7.56018 15.264331,-9.59878 22.824515,-4.55333 7.560185,5.04545 9.598781,15.26433 4.553333,22.82451 -5.044176,7.55828 -15.25956,9.59807 -22.819636,4.55659 L 25,419.09448 z"
+ d="m 15.864409,432.78341 a 16.45739,16.45739 0 0 1 -4.554147,-22.8233 16.45739,16.45739 0 0 1 22.82289,-4.55618 16.45739,16.45739 0 0 1 4.558214,22.82248 16.45739,16.45739 0 0 1 -22.822078,4.56025 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,650.04587,468.90306)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="6.6197143"
sodipodi:ry="6.6197143"
- d="m 21.325359,424.60063 c -3.04096,-2.02945 -3.860952,-6.13983 -1.831504,-9.18079 2.029449,-3.04096 6.139827,-3.86095 9.180786,-1.8315 3.04096,2.02945 3.860952,6.13982 1.831504,9.18078 -2.028937,3.0402 -6.137907,3.86067 -9.178824,1.83282 L 25,419.09448 z"
+ d="m 21.325359,424.60063 a 6.6197143,6.6197143 0 0 1 -1.831831,-9.1803 6.6197143,6.6197143 0 0 1 9.180132,-1.83265 6.6197143,6.6197143 0 0 1 1.833467,9.17997 6.6197143,6.6197143 0 0 1 -9.179806,1.83429 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,693.69477,532.83762)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="11.133471"
sodipodi:ry="11.133471"
- d="m 18.819747,428.35508 c -5.114486,-3.41326 -6.493602,-10.32636 -3.080343,-15.44085 3.41326,-5.11449 10.326363,-6.4936 15.440849,-3.08034 5.114486,3.41326 6.493602,10.32636 3.080343,15.44085 -3.4124,5.11319 -10.323136,6.49312 -15.437548,3.08254 L 25,419.09448 z"
+ d="m 18.819747,428.35508 a 11.133471,11.133471 0 0 1 -3.080893,-15.44003 11.133471,11.133471 0 0 1 15.439749,-3.08226 11.133471,11.133471 0 0 1 3.083645,15.43947 11.133471,11.133471 0 0 1 -15.4392,3.08502 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,543.84048,509.96824)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="9.1659365"
sodipodi:ry="9.1659365"
- d="m 19.911936,426.71852 c -4.210641,-2.81006 -5.346037,-8.50146 -2.535977,-12.7121 2.81006,-4.21064 8.501463,-5.34604 12.712105,-2.53598 4.210641,2.81006 5.346037,8.50146 2.535977,12.71211 -2.809352,4.20958 -8.498806,5.34564 -12.709387,2.53779 L 25,419.09448 z"
+ d="m 19.911936,426.71852 a 9.1659365,9.1659365 0 0 1 -2.53643,-12.71142 9.1659365,9.1659365 0 0 1 12.711199,-2.53756 9.1659365,9.1659365 0 0 1 2.538696,12.71097 9.1659365,9.1659365 0 0 1 -12.710747,2.53983 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,558.10888,564.13766)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="10.148001"
sodipodi:ry="10.148001"
- d="m 19.366787,427.53538 c -4.661782,-3.11113 -5.918827,-9.41233 -2.807689,-14.07411 3.111138,-4.66178 9.412334,-5.91883 14.074115,-2.80769 4.661782,3.11114 5.918827,9.41233 2.807689,14.07412 -3.110354,4.6606 -9.409392,5.91838 -14.071107,2.80969 L 25,419.09448 z"
+ d="m 19.366787,427.53538 a 10.148001,10.148001 0 0 1 -2.808191,-14.07336 10.148001,10.148001 0 0 1 14.073113,-2.80944 10.148001,10.148001 0 0 1 2.810698,14.07286 10.148001,10.148001 0 0 1 -14.072612,2.81195 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,585.22254,590.25297)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="7.0381308"
sodipodi:ry="7.0381308"
- d="m 21.093093,424.94866 c -3.233171,-2.15773 -4.104993,-6.52791 -1.947268,-9.76108 2.157725,-3.23318 6.52791,-4.105 9.761082,-1.94727 3.233171,2.15772 4.104993,6.52791 1.947268,9.76108 -2.157181,3.23236 -6.52587,4.10469 -9.758995,1.94866 L 25,419.09448 z"
+ d="m 21.093093,424.94866 a 7.0381308,7.0381308 0 0 1 -1.947616,-9.76056 7.0381308,7.0381308 0 0 1 9.760386,-1.94849 7.0381308,7.0381308 0 0 1 1.949356,9.76021 7.0381308,7.0381308 0 0 1 -9.760039,1.95023 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,600.04322,575.49375)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="7.0545816"
sodipodi:ry="7.0545816"
- d="m 21.083961,424.96234 a 7.0545816,7.0545816 0 1 1 0.0021,0.001 L 25,419.09448 z"
+ d="m 21.083961,424.96234 a 7.0545816,7.0545816 0 0 1 -1.952168,-9.78337 7.0545816,7.0545816 0 0 1 9.7832,-1.95304 7.0545816,7.0545816 0 0 1 1.953912,9.78302 7.0545816,7.0545816 0 0 1 -9.782852,1.95479 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,457.00359,499.62701)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="6.0560665"
sodipodi:ry="6.0560665"
- d="m 21.638243,424.1318 a 6.0560665,6.0560665 0 1 1 0.0018,0.001 L 25,419.09448 z"
+ d="m 21.638243,424.1318 a 6.0560665,6.0560665 0 0 1 -1.675856,-8.39863 6.0560665,6.0560665 0 0 1 8.398472,-1.6766 6.0560665,6.0560665 0 0 1 1.677353,8.39832 6.0560665,6.0560665 0 0 1 -8.398174,1.6781 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,534.87537,373.72391)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="7.0381308"
sodipodi:ry="7.0381308"
- d="m 21.093093,424.94866 a 7.0381308,7.0381308 0 1 1 0.0021,0.001 L 25,419.09448 z"
+ d="m 21.093093,424.94866 a 7.0381308,7.0381308 0 0 1 -1.947616,-9.76056 7.0381308,7.0381308 0 0 1 9.760386,-1.94849 7.0381308,7.0381308 0 0 1 1.949356,9.76021 7.0381308,7.0381308 0 0 1 -9.760039,1.95023 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,421.34887,474.63751)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="7.3141384"
sodipodi:ry="7.3141384"
- d="m 20.93988,425.17823 a 7.3141384,7.3141384 0 1 1 0.0022,0.001 L 25,419.09448 z"
+ d="m 20.93988,425.17823 a 7.3141384,7.3141384 0 0 1 -2.023994,-10.14333 7.3141384,7.3141384 0 0 1 10.14315,-2.02489 7.3141384,7.3141384 0 0 1 2.025802,10.14297 7.3141384,7.3141384 0 0 1 -10.14279,2.0267 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,405.3085,269.06738)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="6.8368459"
sodipodi:ry="6.8368459"
- d="m 21.204828,424.78123 a 6.8368459,6.8368459 0 1 1 0.002,0.001 L 25,419.09448 z"
+ d="m 21.204828,424.78123 a 6.8368459,6.8368459 0 0 1 -1.891916,-9.48141 6.8368459,6.8368459 0 0 1 9.481247,-1.89276 6.8368459,6.8368459 0 0 1 1.893606,9.48107 6.8368459,6.8368459 0 0 1 -9.48091,1.89445 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,461.6318,289.90142)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="9.1659365"
sodipodi:ry="9.1659365"
- d="m 19.911936,426.71852 a 9.1659365,9.1659365 0 1 1 0.0027,0.002 L 25,419.09448 z"
+ d="m 19.911936,426.71852 a 9.1659365,9.1659365 0 0 1 -2.53643,-12.71142 9.1659365,9.1659365 0 0 1 12.711199,-2.53756 9.1659365,9.1659365 0 0 1 2.538696,12.71097 9.1659365,9.1659365 0 0 1 -12.710747,2.53983 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,334.64672,276.96229)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="14.142643"
sodipodi:ry="14.142643"
- d="m 17.149338,430.85805 c -6.496838,-4.3358 -8.2487037,-13.11739 -3.912903,-19.61423 4.335801,-6.49684 13.11739,-8.2487 19.614227,-3.9129 6.496838,4.3358 8.248704,13.11739 3.912903,19.61422 -4.216961,6.31877 -12.672539,8.17737 -19.150591,4.20945"
+ d="m 17.149338,430.85805 a 14.142643,14.142643 0 0 1 -3.988727,-19.49941 14.142643,14.142643 0 0 1 19.459676,-4.17825 14.142643,14.142643 0 0 1 4.36738,19.4181 14.142643,14.142643 0 0 1 -19.374693,4.5561"
transform="matrix(0.54549827,0,0,0.54549827,521.47235,449.18471)"
sodipodi:start="2.1592864"
sodipodi:end="8.4035543"
sodipodi:cy="419.09448"
sodipodi:rx="7.5456133"
sodipodi:ry="7.5456133"
- d="m 20.811387,425.37077 c -3.466299,-2.31331 -4.400983,-6.9986 -2.087676,-10.4649 2.313307,-3.4663 6.998604,-4.40098 10.464902,-2.08768 3.466299,2.31331 4.400983,6.99861 2.087676,10.46491 -2.312725,3.46542 -6.996416,4.40065 -10.462665,2.08916 L 25,419.09448 z"
+ d="m 20.811387,425.37077 a 7.5456133,7.5456133 0 0 1 -2.088049,-10.46434 7.5456133,7.5456133 0 0 1 10.464157,-2.08898 7.5456133,7.5456133 0 0 1 2.089913,10.46397 7.5456133,7.5456133 0 0 1 -10.463784,2.09084 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,530.58222,440.52024)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="14.258381"
sodipodi:ry="14.258381"
- d="m 17.085091,430.95432 a 14.258381,14.258381 0 1 1 0.03124,0.0208"
+ d="m 17.085091,430.95432 a 14.258381,14.258381 0 0 1 -3.950129,-19.76694 14.258381,14.258381 0 0 1 19.764334,-3.96314 14.258381,14.258381 0 0 1 3.976137,19.76173 14.258381,14.258381 0 0 1 -19.759102,3.98913"
transform="matrix(0.54549827,0,0,0.54549827,748.55255,386.93313)"
sodipodi:start="2.1592864"
sodipodi:end="8.4398399"
sodipodi:cy="419.09448"
sodipodi:rx="11.457419"
sodipodi:ry="11.457419"
- d="M 18.639921,428.62453 C 13.37662,425.11196 11.957375,417.9977 15.46995,412.7344 c 3.512575,-5.2633 10.626828,-6.68254 15.890129,-3.16997 5.263301,3.51258 6.682546,10.62683 3.169971,15.89013 -3.51169,5.26198 -10.623506,6.68205 -15.886732,3.17224 L 25,419.09448 z"
+ d="m 18.639921,428.62453 a 11.457419,11.457419 0 0 1 -3.170538,-15.88928 11.457419,11.457419 0 0 1 15.888998,-3.17195 11.457419,11.457419 0 0 1 3.173369,15.88871 11.457419,11.457419 0 0 1 -15.888432,3.17479 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,386.28035,373.45979)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="8.0366459"
sodipodi:ry="8.0366459"
- d="m 20.538812,425.7792 a 8.0366459,8.0366459 0 1 1 0.0024,0.002 L 25,419.09448 z"
+ d="m 20.538812,425.7792 a 8.0366459,8.0366459 0 0 1 -2.223929,-11.14531 8.0366459,8.0366459 0 0 1 11.145114,-2.22492 8.0366459,8.0366459 0 0 1 2.225915,11.14491 8.0366459,8.0366459 0 0 1 -11.144717,2.22691 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,479.22751,566.24206)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="6.2361951"
sodipodi:ry="6.2361951"
- d="m 21.538252,424.28162 a 6.2361951,6.2361951 0 1 1 0.0018,0.001 L 25,419.09448 z"
+ d="m 21.538252,424.28162 a 6.2361951,6.2361951 0 0 1 -1.725702,-8.64842 6.2361951,6.2361951 0 0 1 8.648273,-1.72648 6.2361951,6.2361951 0 0 1 1.727243,8.64812 6.2361951,6.2361951 0 0 1 -8.647965,1.72802 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,487.83627,571.33356)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="8.0366459"
sodipodi:ry="8.0366459"
- d="m 20.538812,425.7792 a 8.0366459,8.0366459 0 1 1 0.0024,0.002 L 25,419.09448 z"
+ d="m 20.538812,425.7792 a 8.0366459,8.0366459 0 0 1 -2.223929,-11.14531 8.0366459,8.0366459 0 0 1 11.145114,-2.22492 8.0366459,8.0366459 0 0 1 2.225915,11.14491 8.0366459,8.0366459 0 0 1 -11.144717,2.22691 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,577.80511,399.02132)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="7.4637752"
sodipodi:ry="7.4637752"
- d="m 20.856816,425.3027 a 7.4637752,7.4637752 0 1 1 0.0022,0.001 L 25,419.09448 z"
+ d="m 20.856816,425.3027 a 7.4637752,7.4637752 0 0 1 -2.065403,-10.35085 7.4637752,7.4637752 0 0 1 10.350665,-2.06632 7.4637752,7.4637752 0 0 1 2.067247,10.35048 7.4637752,7.4637752 0 0 1 -10.350296,2.06817 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,521.99238,481.6531)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="5.4486704"
sodipodi:ry="5.4486704"
- d="m 21.975412,423.62658 a 5.4486704,5.4486704 0 1 1 0.0016,0.001 L 25,419.09448 z"
+ d="m 21.975412,423.62658 a 5.4486704,5.4486704 0 0 1 -1.507775,-7.55628 5.4486704,5.4486704 0 0 1 7.556143,-1.50845 5.4486704,5.4486704 0 0 1 1.509122,7.55601 5.4486704,5.4486704 0 0 1 -7.555875,1.50979 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,486.60346,375.03871)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="5.4486704"
sodipodi:ry="5.4486704"
- d="m 21.975412,423.62658 a 5.4486704,5.4486704 0 1 1 0.0016,0.001 L 25,419.09448 z"
+ d="m 21.975412,423.62658 a 5.4486704,5.4486704 0 0 1 -1.507775,-7.55628 5.4486704,5.4486704 0 0 1 7.556143,-1.50845 5.4486704,5.4486704 0 0 1 1.509122,7.55601 5.4486704,5.4486704 0 0 1 -7.555875,1.50979 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,486.95467,357.60974)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="5.4486704"
sodipodi:ry="5.4486704"
- d="m 21.975412,423.62658 a 5.4486704,5.4486704 0 1 1 0.0016,0.001 L 25,419.09448 z"
+ d="m 21.975412,423.62658 a 5.4486704,5.4486704 0 0 1 -1.507775,-7.55628 5.4486704,5.4486704 0 0 1 7.556143,-1.50845 5.4486704,5.4486704 0 0 1 1.509122,7.55601 5.4486704,5.4486704 0 0 1 -7.555875,1.50979 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,636.67061,362.9471)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="5.4486704"
sodipodi:ry="5.4486704"
- d="m 21.975412,423.62658 a 5.4486704,5.4486704 0 1 1 0.0016,0.001 L 25,419.09448 z"
+ d="m 21.975412,423.62658 a 5.4486704,5.4486704 0 0 1 -1.507775,-7.55628 5.4486704,5.4486704 0 0 1 7.556143,-1.50845 5.4486704,5.4486704 0 0 1 1.509122,7.55601 5.4486704,5.4486704 0 0 1 -7.555875,1.50979 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,649.86144,401.20052)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="5.4486704"
sodipodi:ry="5.4486704"
- d="m 21.975412,423.62658 a 5.4486704,5.4486704 0 1 1 0.0016,0.001 L 25,419.09448 z"
+ d="m 21.975412,423.62658 a 5.4486704,5.4486704 0 0 1 -1.507775,-7.55628 5.4486704,5.4486704 0 0 1 7.556143,-1.50845 5.4486704,5.4486704 0 0 1 1.509122,7.55601 5.4486704,5.4486704 0 0 1 -7.555875,1.50979 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,601.05536,420.10738)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="5.4486704"
sodipodi:ry="5.4486704"
- d="m 21.975412,423.62658 a 5.4486704,5.4486704 0 1 1 0.0016,0.001 L 25,419.09448 z"
+ d="m 21.975412,423.62658 a 5.4486704,5.4486704 0 0 1 -1.507775,-7.55628 5.4486704,5.4486704 0 0 1 7.556143,-1.50845 5.4486704,5.4486704 0 0 1 1.509122,7.55601 5.4486704,5.4486704 0 0 1 -7.555875,1.50979 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,620.40192,422.30585)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="5.4486704"
sodipodi:ry="5.4486704"
- d="m 21.975412,423.62658 a 5.4486704,5.4486704 0 1 1 0.0016,0.001 L 25,419.09448 z"
+ d="m 21.975412,423.62658 a 5.4486704,5.4486704 0 0 1 -1.507775,-7.55628 5.4486704,5.4486704 0 0 1 7.556143,-1.50845 5.4486704,5.4486704 0 0 1 1.509122,7.55601 5.4486704,5.4486704 0 0 1 -7.555875,1.50979 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,650.30114,420.54707)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="5.4486704"
sodipodi:ry="5.4486704"
- d="m 21.975412,423.62658 a 5.4486704,5.4486704 0 1 1 0.0016,0.001 L 25,419.09448 z"
+ d="m 21.975412,423.62658 a 5.4486704,5.4486704 0 0 1 -1.507775,-7.55628 5.4486704,5.4486704 0 0 1 7.556143,-1.50845 5.4486704,5.4486704 0 0 1 1.509122,7.55601 5.4486704,5.4486704 0 0 1 -7.555875,1.50979 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,661.73319,422.30585)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="5.4486704"
sodipodi:ry="5.4486704"
- d="m 21.975412,423.62658 a 5.4486704,5.4486704 0 1 1 0.0016,0.001 L 25,419.09448 z"
+ d="m 21.975412,423.62658 a 5.4486704,5.4486704 0 0 1 -1.507775,-7.55628 5.4486704,5.4486704 0 0 1 7.556143,-1.50845 5.4486704,5.4486704 0 0 1 1.509122,7.55601 5.4486704,5.4486704 0 0 1 -7.555875,1.50979 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,718.01408,489.5791)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="5.4486704"
sodipodi:ry="5.4486704"
- d="m 21.975412,423.62658 a 5.4486704,5.4486704 0 1 1 0.0016,0.001 L 25,419.09448 z"
+ d="m 21.975412,423.62658 a 5.4486704,5.4486704 0 0 1 -1.507775,-7.55628 5.4486704,5.4486704 0 0 1 7.556143,-1.50845 5.4486704,5.4486704 0 0 1 1.509122,7.55601 5.4486704,5.4486704 0 0 1 -7.555875,1.50979 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,661.73319,482.54399)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="5.4486704"
sodipodi:ry="5.4486704"
- d="m 21.975412,423.62658 a 5.4486704,5.4486704 0 1 1 0.0016,0.001 L 25,419.09448 z"
+ d="m 21.975412,423.62658 a 5.4486704,5.4486704 0 0 1 -1.507775,-7.55628 5.4486704,5.4486704 0 0 1 7.556143,-1.50845 5.4486704,5.4486704 0 0 1 1.509122,7.55601 5.4486704,5.4486704 0 0 1 -7.555875,1.50979 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,594.89964,567.40501)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="5.4486704"
sodipodi:ry="5.4486704"
- d="m 21.975412,423.62658 a 5.4486704,5.4486704 0 1 1 0.0016,0.001 L 25,419.09448 z"
+ d="m 21.975412,423.62658 a 5.4486704,5.4486704 0 0 1 -1.507775,-7.55628 5.4486704,5.4486704 0 0 1 7.556143,-1.50845 5.4486704,5.4486704 0 0 1 1.509122,7.55601 5.4486704,5.4486704 0 0 1 -7.555875,1.50979 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,421.22034,494.41574)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="5.4486704"
sodipodi:ry="5.4486704"
- d="m 21.975412,423.62658 a 5.4486704,5.4486704 0 1 1 0.0016,0.001 L 25,419.09448 z"
+ d="m 21.975412,423.62658 a 5.4486704,5.4486704 0 0 1 -1.507775,-7.55628 5.4486704,5.4486704 0 0 1 7.556143,-1.50845 5.4486704,5.4486704 0 0 1 1.509122,7.55601 5.4486704,5.4486704 0 0 1 -7.555875,1.50979 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,406.27073,500.57146)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="4.7433839"
sodipodi:ry="4.7433839"
- d="m 22.36692,423.03993 a 4.7433839,4.7433839 0 1 1 0.0014,9.4e-4 L 25,419.09448 z"
+ d="m 22.36692,423.03993 a 4.7433839,4.7433839 0 0 1 -1.312605,-6.57818 4.7433839,4.7433839 0 0 1 6.578061,-1.31319 4.7433839,4.7433839 0 0 1 1.313779,6.57795 4.7433839,4.7433839 0 0 1 -6.577828,1.31436 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,516.11611,330.06144)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="4.7433839"
sodipodi:ry="4.7433839"
- d="m 22.36692,423.03993 a 4.7433839,4.7433839 0 1 1 0.0014,9.4e-4 L 25,419.09448 z"
+ d="m 22.36692,423.03993 a 4.7433839,4.7433839 0 0 1 -1.312605,-6.57818 4.7433839,4.7433839 0 0 1 6.578061,-1.31319 4.7433839,4.7433839 0 0 1 1.313779,6.57795 4.7433839,4.7433839 0 0 1 -6.577828,1.31436 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,551.42485,333.21276)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="4.7433839"
sodipodi:ry="4.7433839"
- d="m 22.36692,423.03993 a 4.7433839,4.7433839 0 1 1 0.0014,9.4e-4 L 25,419.09448 z"
+ d="m 22.36692,423.03993 a 4.7433839,4.7433839 0 0 1 -1.312605,-6.57818 4.7433839,4.7433839 0 0 1 6.578061,-1.31319 4.7433839,4.7433839 0 0 1 1.313779,6.57795 4.7433839,4.7433839 0 0 1 -6.577828,1.31436 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,635.38908,321.93665)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="4.7433839"
sodipodi:ry="4.7433839"
- d="m 22.36692,423.03993 a 4.7433839,4.7433839 0 1 1 0.0014,9.4e-4 L 25,419.09448 z"
+ d="m 22.36692,423.03993 a 4.7433839,4.7433839 0 0 1 -1.312605,-6.57818 4.7433839,4.7433839 0 0 1 6.578061,-1.31319 4.7433839,4.7433839 0 0 1 1.313779,6.57795 4.7433839,4.7433839 0 0 1 -6.577828,1.31436 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,626.06175,300.4838)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="4.7433839"
sodipodi:ry="4.7433839"
- d="m 22.36692,423.03993 a 4.7433839,4.7433839 0 1 1 0.0014,9.4e-4 L 25,419.09448 z"
+ d="m 22.36692,423.03993 a 4.7433839,4.7433839 0 0 1 -1.312605,-6.57818 4.7433839,4.7433839 0 0 1 6.578061,-1.31319 4.7433839,4.7433839 0 0 1 1.313779,6.57795 4.7433839,4.7433839 0 0 1 -6.577828,1.31436 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,664.3038,299.24015)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="4.7433839"
sodipodi:ry="4.7433839"
- d="m 22.36692,423.03993 a 4.7433839,4.7433839 0 1 1 0.0014,9.4e-4 L 25,419.09448 z"
+ d="m 22.36692,423.03993 a 4.7433839,4.7433839 0 0 1 -1.312605,-6.57818 4.7433839,4.7433839 0 0 1 6.578061,-1.31319 4.7433839,4.7433839 0 0 1 1.313779,6.57795 4.7433839,4.7433839 0 0 1 -6.577828,1.31436 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,685.91639,393.50586)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="5.3479152"
sodipodi:ry="5.3479152"
- d="m 22.031342,423.54277 a 5.3479152,5.3479152 0 1 1 0.0016,0.001 L 25,419.09448 z"
+ d="m 22.031342,423.54277 a 5.3479152,5.3479152 0 0 1 -1.479894,-7.41655 5.3479152,5.3479152 0 0 1 7.416418,-1.48055 5.3479152,5.3479152 0 0 1 1.481215,7.41628 5.3479152,5.3479152 0 0 1 -7.416154,1.48188 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,355.92571,551.57601)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="4.8441391"
sodipodi:ry="4.8441391"
- d="m 22.310991,423.12374 a 4.8441391,4.8441391 0 1 1 0.0014,9.6e-4 L 25,419.09448 z"
+ d="m 22.310991,423.12374 a 4.8441391,4.8441391 0 0 1 -1.340488,-6.71791 4.8441391,4.8441391 0 0 1 6.717788,-1.34108 4.8441391,4.8441391 0 0 1 1.341685,6.71766 4.8441391,4.8441391 0 0 1 -6.717549,1.34229 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,489.15313,501.01115)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="505.69778"
sodipodi:rx="4.0302472"
sodipodi:ry="4.2794442"
- d="m 598.09317,509.25734 a 4.0302472,4.2794442 0 1 1 0.0789,0.0545"
+ d="m 598.09317,509.25734 a 4.0302472,4.2794442 0 0 1 -1.12807,-5.91428 4.0302472,4.2794442 0 0 1 5.56321,-1.23232 4.0302472,4.2794442 0 0 1 1.19301,5.89989 4.0302472,4.2794442 0 0 1 -5.54927,1.3012"
transform="translate(0.7145034,307.7181)"
sodipodi:start="2.1592864"
sodipodi:end="8.4191227"
sodipodi:cy="419.09448"
sodipodi:rx="5.0456495"
sodipodi:ry="5.0456495"
- d="m 22.199131,423.29135 a 5.0456495,5.0456495 0 1 1 0.0015,10e-4 L 25,419.09448 z"
+ d="m 22.199131,423.29135 a 5.0456495,5.0456495 0 0 1 -1.39625,-6.99736 5.0456495,5.0456495 0 0 1 6.99724,-1.39688 5.0456495,5.0456495 0 0 1 1.397497,6.99712 5.0456495,5.0456495 0 0 1 -6.996991,1.39812 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,503.60808,441.59744)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="5.0456495"
sodipodi:ry="5.0456495"
- d="m 22.199131,423.29135 a 5.0456495,5.0456495 0 1 1 0.0015,10e-4 L 25,419.09448 z"
+ d="m 22.199131,423.29135 a 5.0456495,5.0456495 0 0 1 -1.39625,-6.99736 5.0456495,5.0456495 0 0 1 6.99724,-1.39688 5.0456495,5.0456495 0 0 1 1.397497,6.99712 5.0456495,5.0456495 0 0 1 -6.996991,1.39812 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,502.07547,430.88932)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="505.69778"
sodipodi:rx="4.0302472"
sodipodi:ry="4.2794442"
- d="m 598.09317,509.25734 a 4.0302472,4.2794442 0 1 1 0.0789,0.0545"
+ d="m 598.09317,509.25734 a 4.0302472,4.2794442 0 0 1 -1.12807,-5.91428 4.0302472,4.2794442 0 0 1 5.56321,-1.23232 4.0302472,4.2794442 0 0 1 1.19301,5.89989 4.0302472,4.2794442 0 0 1 -5.54927,1.3012"
transform="translate(-60.10543,208.90573)"
sodipodi:start="2.1592864"
sodipodi:end="8.4191227"
sodipodi:cy="419.09448"
sodipodi:rx="6.8735647"
sodipodi:ry="6.8735647"
- d="m 21.184445,424.81177 a 6.8735647,6.8735647 0 1 1 0.002,0.001 L 25,419.09448 z"
+ d="m 21.184445,424.81177 a 6.8735647,6.8735647 0 0 1 -1.902077,-9.53233 6.8735647,6.8735647 0 0 1 9.532168,-1.90293 6.8735647,6.8735647 0 0 1 1.903776,9.532 6.8735647,6.8735647 0 0 1 -9.531829,1.90462 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,711.09589,465.11113)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="4.7362232"
sodipodi:ry="4.7362232"
- d="m 22.370895,423.03398 a 4.7362232,4.7362232 0 1 1 0.0014,9.3e-4 L 25,419.09448 z"
+ d="m 22.370895,423.03398 a 4.7362232,4.7362232 0 0 1 -1.310624,-6.56825 4.7362232,4.7362232 0 0 1 6.568132,-1.31121 4.7362232,4.7362232 0 0 1 1.311794,6.56801 4.7362232,4.7362232 0 0 1 -6.567897,1.31238 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,402.31127,372.70812)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="4.7362232"
sodipodi:ry="4.7362232"
- d="m 22.370895,423.03398 a 4.7362232,4.7362232 0 1 1 0.0014,9.3e-4 L 25,419.09448 z"
+ d="m 22.370895,423.03398 a 4.7362232,4.7362232 0 0 1 -1.310624,-6.56825 4.7362232,4.7362232 0 0 1 6.568132,-1.31121 4.7362232,4.7362232 0 0 1 1.311794,6.56801 4.7362232,4.7362232 0 0 1 -6.567897,1.31238 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,370.18207,354.27138)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="6.7310748"
sodipodi:ry="6.7310748"
- d="m 21.263542,424.69325 a 6.7310748,6.7310748 0 1 1 0.002,0.001 L 25,419.09448 z"
+ d="m 21.263542,424.69325 a 6.7310748,6.7310748 0 0 1 -1.862647,-9.33473 6.7310748,6.7310748 0 0 1 9.334565,-1.86348 6.7310748,6.7310748 0 0 1 1.864311,9.3344 6.7310748,6.7310748 0 0 1 -9.334234,1.86515 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,379.35394,351.31773)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="4.7362232"
sodipodi:ry="4.7362232"
- d="m 22.370895,423.03398 a 4.7362232,4.7362232 0 1 1 0.0014,9.3e-4 L 25,419.09448 z"
+ d="m 22.370895,423.03398 a 4.7362232,4.7362232 0 0 1 -1.310624,-6.56825 4.7362232,4.7362232 0 0 1 6.568132,-1.31121 4.7362232,4.7362232 0 0 1 1.311794,6.56801 4.7362232,4.7362232 0 0 1 -6.567897,1.31238 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,373.29118,344.16678)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="4.7362232"
sodipodi:ry="4.7362232"
- d="m 22.370895,423.03398 a 4.7362232,4.7362232 0 1 1 0.0014,9.3e-4 L 25,419.09448 z"
+ d="m 22.370895,423.03398 a 4.7362232,4.7362232 0 0 1 -1.310624,-6.56825 4.7362232,4.7362232 0 0 1 6.568132,-1.31121 4.7362232,4.7362232 0 0 1 1.311794,6.56801 4.7362232,4.7362232 0 0 1 -6.567897,1.31238 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,429.72151,287.42554)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
sodipodi:cy="419.09448"
sodipodi:rx="4.7362232"
sodipodi:ry="4.7362232"
- d="m 22.370895,423.03398 a 4.7362232,4.7362232 0 1 1 0.0014,9.3e-4 L 25,419.09448 z"
+ d="m 22.370895,423.03398 a 4.7362232,4.7362232 0 0 1 -1.310624,-6.56825 4.7362232,4.7362232 0 0 1 6.568132,-1.31121 4.7362232,4.7362232 0 0 1 1.311794,6.56801 4.7362232,4.7362232 0 0 1 -6.567897,1.31238 L 25,419.09448 Z"
transform="matrix(0.54549827,0,0,0.54549827,492.83642,279.03094)"
sodipodi:start="2.1592864"
sodipodi:end="8.4421153"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
- width="1052.3622"
- height="744.09448"
+ width="561"
+ height="231"
id="svg1901"
sodipodi:version="0.32"
inkscape:version="0.48.4 r9939"
sodipodi:docname="installation-steps.svg"
version="1.1">
<defs
- id="defs1903" />
+ id="defs1903">
+ <font
+ horiz-adv-x="1024"
+ id="font3118"
+ inkscape:label="fontti 1">
+ <font-face
+ units-per-em="1024"
+ id="font-face3120"
+ font-family="SVGFont 1" />
+ <missing-glyph
+ d="M0,0h1000v1024h-1000z"
+ id="missing-glyph3122" />
+ </font>
+ </defs>
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
- inkscape:zoom="2.8"
- inkscape:cx="402.01814"
- inkscape:cy="409.01233"
+ inkscape:zoom="1.979899"
+ inkscape:cx="247.15191"
+ inkscape:cy="62.440392"
inkscape:document-units="px"
inkscape:current-layer="layer1"
inkscape:window-width="1920"
inkscape:object-nodes="true"
inkscape:snap-object-midpoints="true"
showguides="true"
- inkscape:guide-bbox="true">
+ inkscape:guide-bbox="true"
+ fit-margin-top="5"
+ fit-margin-left="5"
+ fit-margin-right="5"
+ fit-margin-bottom="5">
<inkscape:grid
type="xygrid"
id="grid2982"
enabled="true"
snapvisiblegridlinesonly="true"
spacingx="5px"
- spacingy="5px" />
+ spacingy="5px"
+ originx="-124.5px"
+ originy="-294.50073px" />
<sodipodi:guide
orientation="1,0"
- position="227.32143,468.92857"
+ position="102.82143,174.42784"
id="guide3116" />
<sodipodi:guide
orientation="1,0"
- position="328.03571,468.03571"
+ position="203.53571,173.53498"
id="guide3120" />
</sodipodi:namedview>
<metadata
inkscape:label="Taso 1"
inkscape:groupmode="layer"
id="layer1"
- transform="translate(0,-308.2677)">
+ transform="translate(-124.5,-526.86145)">
<rect
style="color:#000000;fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:0.13524589;stroke-dasharray:2, 1;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
id="rect3115"
rx="1.8654728" />
<flowRoot
transform="translate(0.74636894,298.81113)"
- style="font-size:11px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:90%;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
+ style="font-size:11px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:89.99999762%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
id="flowRoot3808-5-7-2"
xml:space="preserve"><flowRegion
id="flowRegion3810-5-6-3"><rect
rx="1.8654728" />
<flowRoot
transform="translate(0.96798326,298.92194)"
- style="font-size:11px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:90%;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
+ style="font-size:11px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:89.99999762%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
id="flowRoot3808-5-7-2-4"
xml:space="preserve"><flowRegion
id="flowRegion3810-5-6-3-2"><rect
rx="1.8654728" />
<flowRoot
transform="translate(5.79546,303.04687)"
- style="font-size:11px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:90%;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
+ style="font-size:11px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:89.99999762%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
id="flowRoot3808-5-7-0"
xml:space="preserve"><flowRegion
id="flowRegion3810-5-6-6"><rect
rx="1.8654728" />
<flowRoot
transform="translate(5.77146,308.61462)"
- style="font-size:11px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:90%;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
+ style="font-size:11px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:89.99999762%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
id="flowRoot3808-5-8"
xml:space="preserve"><flowRegion
id="flowRegion3810-5-3"><rect
rx="1.8654728" />
<flowRoot
transform="translate(1.0223215,288.61775)"
- style="font-size:11px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:90%;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
+ style="font-size:11px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:89.99999762%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
id="flowRoot3808-5-7-2-4-0"
xml:space="preserve"><flowRegion
id="flowRegion3810-5-6-3-2-1"><rect
rx="1.8654728" />
<flowRoot
transform="translate(5.7477504,293.01433)"
- style="font-size:11px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:90%;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
+ style="font-size:11px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:89.99999762%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
id="flowRoot3808-5-7-0-0"
xml:space="preserve"><flowRegion
id="flowRegion3810-5-6-6-0"><rect
rx="1.8654728" />
<flowRoot
transform="translate(6.486036,298.2575)"
- style="font-size:11px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:90%;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
+ style="font-size:11px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:89.99999762%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
id="flowRoot3808-5-7-0-0-9"
xml:space="preserve"><flowRegion
id="flowRegion3810-5-6-6-0-5"><rect
- style="font-size:11px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:90%;writing-mode:lr;text-anchor:start;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
+ style="font-size:11px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:89.99999762%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
y="363.14072"
x="16.541248"
height="25.127552"
rx="1.8654728" />
<flowRoot
transform="translate(5.5983218,303.07893)"
- style="font-size:11px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:90%;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
+ style="font-size:11px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:89.99999762%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
id="flowRoot3808-5-8-5"
xml:space="preserve"><flowRegion
id="flowRegion3810-5-3-9"><rect
rx="1.8654728" />
<flowRoot
transform="translate(5.4917504,307.90036)"
- style="font-size:11px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:90%;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
+ style="font-size:11px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:89.99999762%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
id="flowRoot3808-5-8-5-5"
xml:space="preserve"><flowRegion
id="flowRegion3810-5-3-9-6"><rect
- style="font-size:11px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:90%;writing-mode:lr;text-anchor:start;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
+ style="font-size:11px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:89.99999762%;writing-mode:lr-tb;text-anchor:start;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
y="363.14072"
x="16.541248"
height="25.127552"
rx="1.8654728" />
<flowRoot
transform="translate(-0.038706,307.54845)"
- style="font-size:11px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:90%;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
+ style="font-size:11px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:89.99999762%;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"
id="flowRoot3808-5-9"
xml:space="preserve"><flowRegion
id="flowRegion3810-5-65"><rect
[[figure.intro.architecture]]
.Vaadin Application Architecture
-image::img/architecture-vaadin7-hi.png[]
+image::img/architecture-vaadin7-hi.png[scaledwidth=100%]
<<figure.intro.architecture>> illustrates the basic architectures of web
applications made with Vaadin. The server-side application architecture consists
or jump straight to more practical things in
<<dummy/../../../framework/application/application-overview.asciidoc#application.overview,"Writing
a Server-Side Web Application">>.
-
-
-
grid.addComponent(date, 2, 2, 3, 3);
----
-The resulting layout will look as follows. The borders have been made visible to
-illustrate the layout cells.
+The resulting layout is shown in <<figure.layout.gridlayout>>.
+The borders have been made visible to illustrate the layout cells.
-[[figure.ui.gridlayout]]
-.The Grid Layout Component
-image::img/gridlayout.png[]
+[[figure.layout.gridlayout]]
+.The [classname]#GridLayout# component
+image::img/gridlayout.png[width=50%, scaledwidth=75%]
A component to be placed on the grid must not overlap with existing components.
A conflict causes throwing a [classname]#GridLayout.OverlapsException#.
====
-
-
Often, you want to have one or more rows or columns that take all the available
space left over from non-expanding rows or columns. You need to set the rows or
columns as __expanding__ with [methodname]#setRowExpandRatio()# and
portion how much a specific row/column will take in relation with the other
expanding rows/columns.
-
[source, java]
----
GridLayout grid = new GridLayout(3,2);
for (int row=0; row<grid.getRows(); row++) {
Component c = grid.getComponent(col, row);
grid.setComponentAlignment(c, Alignment.TOP_CENTER);
-
+
// Make the labels high to illustrate the empty
// horizontal space.
if (col != 0 || row != 0)
----
[[figure.ui.gridlayout.sizing.expanding]]
-.Expanding Rows and Columns in [classname]#GridLayout#
-image::img/gridlayout_sizing_expanding.png[]
+.Expanding rows and columns in [classname]#GridLayout#
+image::img/gridlayout_sizing_expanding.png[width=75%, scaledwidth=100%]
If the size of the contained components is undefined or fixed, the expansion
ratio is of the __excess__ space, as in
[methodname]#setWidth("100%")#, the columns would have respective widths of 20
and 80 pixels, regardless of the minimum size of their contained components.
-
+[[layout.gridlayout.css]]
== CSS Style Rules
-
[source, css]
----
.v-gridlayout {}
.v-gridlayout-margin {}
----
-The v-gridlayout is the root element of the [classname]#GridLayout# component.
-The v-gridlayout-margin is a simple element inside it that allows setting a
-padding between the outer element and the cells.
-
-For styling the individual grid cells, you should style the components inserted
-in the cells. The implementation structure of the grid can change, so depending
-on it, as is done in the example below, is not generally recommended. Normally,
-if you want to have, for example, a different color for a certain cell, just
-make set the component inside it [methodname]#setSizeFull()#, and add a style
-name for it. Sometimes you may need to use a layout component between a cell and
-its actual component just for styling.
-
-The following example shows how to make the grid borders visible, as in
-<<figure.ui.gridlayout.sizing.expanding>>.
-
-
-[source, java]
-----
-.v-gridlayout-gridexpandratio {
- background: blue; /* Creates a "border" around the grid. */
- margin: 10px; /* Empty space around the layout. */
-}
-
-/* Add padding through which the background color shows. */
-.v-gridlayout-gridexpandratio .v-gridlayout-margin {
- padding: 2px;
-}
-
-/* Add cell borders and make the cell backgrounds white.
- * Warning: This depends heavily on the HTML structure. */
-.v-gridlayout-gridexpandratio > div > div > div {
- padding: 2px; /* Layout background will show through. */
- background: white; /* The cells will be colored white. */
-}
-
-/* Components inside the layout are a safe way to style cells. */
-.v-gridlayout-gridexpandratio .v-label {
- text-align: left;
- background: #ffffc0; /* Pale yellow */
-}
-----
-
-You should beware of [literal]#++margin++#, [literal]#++padding++#, and
-[literal]#++border++# settings in CSS as they can mess up the layout. The
-dimensions of layouts are calculated in the Client-Side Engine of Vaadin and
-some settings can interfere with these calculations. For more information, on
-margins and spacing, see
-<<dummy/../../../framework/layout/layout-settings#layout.settings.spacing,"Layout
-Cell Spacing">> and
-<<dummy/../../../framework/layout/layout-settings#layout.settings.margins,"Layout
-Margins">>
-
-
-
+The `v-gridlayout` is the root element of the [classname]#GridLayout# component.
+The `v-gridlayout-margin` is a simple element inside it that allows setting a padding between the outer element and the cells.
+For styling the individual grid cells, you should style the components inserted in the cells.
+Normally, if you want to have, for example, a different color for a certain cell, just make set the component inside it [methodname]#setSizeFull()#, and add a style name for it.
+Sometimes, you may need to wrap a component inside a layout component just for styling the cell.
----
See the http://demo.vaadin.com/book-examples-vaadin7/book#layout.orderedlayout.basic[on-line example, window="_blank"].
-The component captions are placed above the component, so the layout will look
-as follows:
+In [classname]#VerticalLayout#, the captions of child components are placed above each component, so the layout would look as follows:
-image::img/orderedlayout_vertical.png[]
+image::img/orderedlayout_vertical.png[width=30%, scaledwidth=65%]
-Using [classname]#HorizontalLayout# gives the following layout:
+[classname]#HorizontalLayout# gives the following layout:
-image::img/orderedlayout_horizontal.png[]
+image::img/orderedlayout_horizontal.png[width=80%, scaledwidth=100%]
[[layout.orderedlayout.properties]]
== Properties or Attributes
[[layout.orderedlayout.properties.table]]
.Properties and Declarative Attributes
+[cols="1,2"]
|===============
|Property|Declarative Attribute
-|[parameter]#componentAlignment#|In child components:[literal]#++:left++#(default),[literal]#++:center++#,[literal]#++:right++#,[literal]#++:top++#(default),[literal]#++:middle++#,[literal]#++:bottom++#
-|[parameter]#spacing#|[parameter]#spacing#[replaceable]#[=<boolean>]#
-|[parameter]#margin#|[parameter]#margin#[replaceable]#[=<boolean>]#
-|[parameter]#expandRatio#|In child components:[parameter]#:expand#=[replaceable]#<integer>#or[parameter]#:expand#(implies ratio 1)
+|[parameter]#componentAlignment#|Alignment of a child component is specified in the child with: [literal]#++:left++# (default), [literal]#++:center++#, [literal]#++:right++#, [literal]#++:top++# (default), [literal]##++:middle++##, [literal]##++:bottom++##
+|[parameter]#spacing#|[parameter]##spacing##++[=++[replaceable]##<boolean>##++]++
+|[parameter]#margin#|[parameter]##margin##++[=++[replaceable]##<boolean>##++]++
+|[parameter]#expandRatio#|Expand ratio of a child component is specified in the child with: [parameter]#:expand#++[=++[replaceable]##<integer>##++]++ or [parameter]#:expand# (implies ratio 1)
|===============
-
-
-
[[layout.orderedlayout.spacing]]
== Spacing in Ordered Layouts
[literal]#++v-horizontal++# for all vertically or horizontally ordered layouts,
such as [classname]#FormLayout#.
-For example, the following sets the amount of spacing for all
-[classname]#VerticalLayout#s, as well as [classname]#FormLayout#, in the UI:
-
+For example, the following sets the amount of spacing for all [classname]##VerticalLayout##s (as well as [classname]##FormLayout##s) in the UI:
[source, css]
----
Or for [classname]#HorizontalLayout#:
-
[source, css]
----
.v-horizontal > .v-spacing {
}
----
-
[[layout.orderedlayout.sizing]]
== Sizing Contained Components
direction of the layout component.
[[figure.layout.orderedlayout.size.summary]]
-.Component Widths in [classname]#HorizontalLayout#
-image::img/horizontallayout_sizing.png[]
+.Component widths in [classname]#HorizontalLayout#
+image::img/horizontallayout_sizing.png[width=75%, scaledwidth=100%]
<<figure.layout.orderedlayout.size.summary>> gives a summary of the sizing
options for a [classname]#HorizontalLayout#. The figure is broken down in the
====
-
-
An exception to the above rule is a case where you have a layout with undefined
size that contains a component with a fixed or undefined size together with one
or more components with relative size. In this case, the contained component
layout, removing the paradox. That size is then used for the relatively sized
components.
+ifdef::web[]
The technique can be used to define the width of a [classname]#VerticalLayout#
or the height of a [classname]#HorizontalLayout#.
----
// Vertical layout would normally have 100% width
VerticalLayout vertical = new VerticalLayout();
-
+
// Shrink to fit the width of contained components
vertical.setWidth(Sizeable.SIZE_UNDEFINED, 0);
-
+
// Label has normally 100% width, but we set it as
// undefined so that it will take only the needed space
Label label =
"the width of this Label \u2192");
label.setWidth(Sizeable.SIZE_UNDEFINED, 0);
vertical.addComponent(label);
-
+
// Button has undefined width by default
Button butt = new Button("\u2190 This Button takes 100% "+
"of the width \u2192");
[[figure.layout.orderedlayout.sizing.undefined.defining]]
.Defining the Size with a Component
-image::img/orderedlayout-sizing-undefined.png[]
+image::img/orderedlayout-sizing-undefined.png[width=50%, scaledwidth=75%]
+endif::web[]
=== Layout with Defined Size
for (int i = 1; i <= 3; i++) {
// Button with undefined size.
Button button = new Button(captions[i - 1]);
-
+
layout4.addComponent(button);
// Expand ratios are 1:2:3.
}
parentLayout.addComponent(layout50);
----
-
-
-
-
-
The user interface components in Vaadin can roughly be divided in two groups:
components that the user can interact with and layout components for placing the
-other components to specific places in the user interface. The layout components
-are identical in their purpose to layout managers in regular desktop frameworks
-for Java and you can use plain Java to accomplish sophisticated component
-layouting.
+other components to specific places in the user interface.
+The layout components are identical in their purpose to layout managers in regular desktop frameworks for Java.
+You can use plain Java to accomplish sophisticated component layouts.
+
+[[figure.layout.intro.simple]]
+.Layout example
+image::img/layout-intro-example-1.png[width=75%, scaledwidth=100%]
You start by creating a content layout for the UI and then add other layout
components hierarchically, and finally the interaction components as the leaves
of the component tree.
+[[figure.layout.intro.schematic]]
+.Layout schematic
+image::img/layout-schematic-hi.png[width=100%, scaledwidth=100%]
+
+Let us look at building a bit simplified version of the layout in <<figure.layout.intro.simple>>:
[source, java]
----
VerticalLayout content = new VerticalLayout();
setContent(content);
-// Add the topmost component.
-content.addComponent(new Label("The Ultimate Cat Finder"));
+HorizontalLayout titleBar = new HorizontalLayout();
+titleBar.setWidth("100%");
+root.addComponent(titleBar);
-// Add a horizontal layout for the bottom part.
-HorizontalLayout bottom = new HorizontalLayout();
-content.addComponent(bottom);
+Label title = new Label("The Ultimate Cat Finder");
+titleBar.addComponent(title);
+titleBar.setExpandRatio(title, 1.0f); // Expand
-bottom.addComponent(new Tree("Major Planets and Their Moons"));
-bottom.addComponent(new Panel());
-...
-----
+Label titleComment = new Label("for Vaadin");
+titleComment.setSizeUndefined(); // Take minimum space
+titleBar.addComponent(titleComment);
-Or in the declarative format:
+... build rest of the layout ...
+----
+Or in the declarative format (roughly):
[source, html]
----
<vaadin-label>The Ultimate Cat Finder</vaadin-label>
<vaadin-horizontal-layout>
- <vaadin-tree caption="Major Planets and Their Moons"/>
+ <vaadin-tree caption="Possible Places"/>
<vaadin-panel/>
+ ...
</vaadin-horizontal-layout>
</vaadin-vertical-layout>
----
You can see a finished version of the above example in
<<figure.layout.intro.simple>>.
-
-[[figure.layout.intro.simple]]
-.Layout Example
-image::img/layout-intro-example-1.png[]
-
-
-
--- /dev/null
+SVG =
+RASTERIMAGES = layout-schematic
+
+RASTERSRCIMAGES := $(foreach file, $(RASTERIMAGES), $(file).svg)
+RASTERIMAGES_HI := $(foreach file, $(RASTERIMAGES), ../img/$(file)-hi.png)
+SVGTRGIMAGES := $(foreach file, $(SVG), ../img/$(file).svg)
+
+images: $(RASTERIMAGES_HI) $(SVGTRGIMAGES) FORCE
+# Just do low now $(TRGIMAGES_LO)
+
+$(RASTERIMAGES_HI): ../img/%-hi.png: %.svg
+ inkscape --export-png $@ --export-dpi=300 --export-area-drawing $<
+
+$(SVGTRGIMAGES): ../img/%.svg: %.svg FORCE
+ inkscape $< --export-text-to-path -l $@
+
+FORCE:
--- /dev/null
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="82mm"
+ height="41mm"
+ id="svg1901"
+ sodipodi:version="0.32"
+ inkscape:version="0.91 r"
+ sodipodi:docname="layout-schematic.svg"
+ version="1.1">
+ <defs
+ id="defs1903" />
+ <sodipodi:namedview
+ id="base"
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1.0"
+ inkscape:pageopacity="1"
+ inkscape:pageshadow="2"
+ inkscape:zoom="3.959798"
+ inkscape:cx="148.02363"
+ inkscape:cy="70.790343"
+ inkscape:document-units="mm"
+ inkscape:current-layer="layer1"
+ inkscape:window-width="1920"
+ inkscape:window-height="1060"
+ inkscape:window-x="-2"
+ inkscape:window-y="-3"
+ showgrid="true"
+ inkscape:window-maximized="1"
+ inkscape:snap-center="true"
+ inkscape:snap-grids="true"
+ inkscape:snap-bbox="true"
+ inkscape:object-paths="true"
+ inkscape:object-nodes="true"
+ inkscape:snap-object-midpoints="true"
+ showguides="true"
+ inkscape:guide-bbox="true"
+ units="mm"
+ fit-margin-top="2"
+ fit-margin-left="2"
+ fit-margin-right="2"
+ fit-margin-bottom="2">
+ <inkscape:grid
+ type="xygrid"
+ id="grid2982"
+ empspacing="10"
+ visible="true"
+ enabled="true"
+ snapvisiblegridlinesonly="true"
+ spacingx="3.5433071"
+ spacingy="3.5433071"
+ units="mm"
+ originx="18.581643"
+ originy="0.35428181" />
+ </sodipodi:namedview>
+ <metadata
+ id="metadata1906">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ inkscape:label="Taso 1"
+ inkscape:groupmode="layer"
+ id="layer1"
+ transform="translate(18.581643,-907.44094)">
+ <rect
+ y="910.62994"
+ x="46.062992"
+ height="138.189"
+ width="162.99213"
+ id="rect4347-0-2-5-5-9-59"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#e61e6d;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <flowRoot
+ xml:space="preserve"
+ id="flowRoot4349"
+ style="font-style:normal;font-weight:normal;font-size:10px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ transform="translate(7.0866142,882.28351)"><flowRegion
+ id="flowRegion4351"><rect
+ id="rect4353"
+ width="67.322838"
+ height="42.519684"
+ x="49.6063"
+ y="56.692909"
+ style="font-size:10px" /></flowRegion><flowPara
+ id="flowPara4355" /></flowRoot> <g
+ id="g4392-0-4-6-8"
+ transform="translate(216.14174,42.519773)" />
+ <rect
+ y="914.17328"
+ x="49.6063"
+ height="131.10236"
+ width="155.90552"
+ id="rect4347-0-2-5-5-9"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#e61e6d;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <rect
+ y="917.71655"
+ x="53.149605"
+ height="21.259869"
+ width="148.81889"
+ id="rect4347-0-2-5-5-9-5"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#e61e6d;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <rect
+ y="921.25989"
+ x="56.692913"
+ height="14.17316"
+ width="102.7559"
+ id="rect4347-0-2-5-5-9-5-8"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffc13f;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <rect
+ y="921.25983"
+ x="162.99213"
+ height="14.173287"
+ width="35.433075"
+ id="rect4347-0-2-5-5-9-5-8-5"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffc13f;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <rect
+ y="942.51971"
+ x="53.149605"
+ height="88.582695"
+ width="148.81889"
+ id="rect4347-0-2-5-5-9-5-84"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#e61e6d;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <rect
+ y="1034.6458"
+ x="53.149605"
+ height="7.0865755"
+ width="148.81889"
+ id="rect4347-0-2-5-5-9-5-9"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffc13f;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <rect
+ y="946.06305"
+ x="56.692913"
+ height="81.496048"
+ width="46.062984"
+ id="rect4347-0-2-5-5-9-5-8-0"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#e61e6d;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <rect
+ y="956.69293"
+ x="60.236221"
+ height="67.322792"
+ width="38.976372"
+ id="rect4347-0-2-5-5-9-5-8-0-5"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffc13f;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <rect
+ y="946.06293"
+ x="106.29922"
+ height="81.49617"
+ width="92.125977"
+ id="rect4347-0-2-5-5-9-5-8-0-8"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#e61e6d;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <rect
+ y="956.69287"
+ x="109.84253"
+ height="67.322922"
+ width="85.03936"
+ id="rect4347-0-2-5-5-9-5-8-0-5-4"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#e61e6d;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <path
+ style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 49.606297,921.25994 -10.629919,-5e-5"
+ id="path3003-6-5-1"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cc" />
+ <circle
+ cy="921.25989"
+ cx="49.606293"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6"
+ r="2.1259842" />
+ <circle
+ cy="921.25989"
+ cx="38.976379"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6-1"
+ r="2.1259842" />
+ <path
+ style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 53.149601,1038.1893 -14.17322,0"
+ id="path3003-6-5-1-8"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cc" />
+ <circle
+ cy="1038.1891"
+ cx="53.149601"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6-7"
+ r="2.1259842" />
+ <circle
+ cy="1038.189"
+ cx="38.976379"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6-1-4"
+ r="2.1259842" />
+ <path
+ style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 56.69291,953.14967 -17.716532,-2e-5"
+ id="path3003-6-5-1-5"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cc" />
+ <circle
+ cy="953.14966"
+ cx="56.692902"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6-13"
+ r="2.1259842" />
+ <circle
+ cy="953.14966"
+ cx="38.976376"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6-1-7"
+ r="2.1259842" />
+ <path
+ style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 53.1496,946.06308 -14.173222,-4e-5"
+ id="path3003-6-5-1-5-1"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cc" />
+ <circle
+ cy="946.06299"
+ cx="53.149601"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6-13-9"
+ r="2.1259842" />
+ <circle
+ cy="946.06305"
+ cx="38.976379"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6-1-7-8"
+ r="2.1259842" />
+ <path
+ style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 216.14174,931.8898 -17.71654,0"
+ id="path3003-6-5-1-5-7"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cc" />
+ <circle
+ cy="931.88983"
+ cx="198.42522"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6-13-3"
+ r="2.1259842" />
+ <circle
+ cy="931.88983"
+ cx="216.14174"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6-1-7-7"
+ r="2.1259842" />
+ <path
+ style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 56.692911,928.34655 -17.716533,-5e-5"
+ id="path3003-6-5-1-5-78"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cc" />
+ <circle
+ cy="928.3465"
+ cx="56.692902"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6-13-7"
+ r="2.1259842" />
+ <circle
+ cy="928.3465"
+ cx="38.976379"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6-1-7-0"
+ r="2.1259842" />
+ <path
+ style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 60.236217,960.23629 -21.259839,-3e-5"
+ id="path3003-6-5-1-5-13"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cc" />
+ <circle
+ cy="960.23627"
+ cx="60.236206"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6-13-39"
+ r="2.1259842" />
+ <circle
+ cy="960.23627"
+ cx="38.976376"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6-1-7-9"
+ r="2.1259842" />
+ <path
+ style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 216.14174,949.60637 -17.71653,0"
+ id="path3003-6-5-1-5-7-1"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cc" />
+ <circle
+ cy="949.60632"
+ cx="198.42522"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6-13-3-2"
+ r="2.1259842" />
+ <circle
+ cy="949.60638"
+ cx="216.14175"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6-1-7-7-4"
+ r="2.1259842" />
+ <path
+ style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 216.14174,921.25991 -14.17323,0"
+ id="path3003-6-5-1-5-7-1-1"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cc" />
+ <circle
+ cy="921.25989"
+ cx="201.96854"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6-13-3-2-6"
+ r="2.1259842" />
+ <circle
+ cy="921.26001"
+ cx="216.14175"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6-1-7-7-4-2"
+ r="2.1259842" />
+ <rect
+ y="970.86621"
+ x="120.47243"
+ height="38.976353"
+ width="63.77953"
+ id="rect4347-0-2-5-5-9-5-8-0-5-4-1"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#e61e6d;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <rect
+ y="974.40948"
+ x="124.01573"
+ height="14.173236"
+ width="56.692928"
+ id="rect4347-0-2-5-5-9-5-8-0-5-4-1-7"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffc13f;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <rect
+ y="992.12604"
+ x="124.01573"
+ height="14.173219"
+ width="56.692928"
+ id="rect4347-0-2-5-5-9-5-8-0-5-4-1-7-8"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffc13f;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
+ <path
+ style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 216.14173,985.03941 -35.43307,2e-5"
+ id="path3003-6-5-1-5-7-7"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cc" />
+ <circle
+ cy="985.03943"
+ cx="180.70866"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6-13-3-5"
+ r="2.1259842" />
+ <circle
+ cy="985.03943"
+ cx="216.14174"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6-1-7-7-0"
+ r="2.1259842" />
+ <path
+ style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 216.14173,1002.7559 -35.43307,0"
+ id="path3003-6-5-1-5-7-7-7"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cc" />
+ <circle
+ cy="1002.7559"
+ cx="180.70866"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6-13-3-5-3"
+ r="2.1259842" />
+ <circle
+ cy="1002.7559"
+ cx="216.14174"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6-1-7-7-0-3"
+ r="2.1259842" />
+ <path
+ style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 216.14173,974.40949 -31.88976,2e-5"
+ id="path3003-6-5-1-5-7-1-1-7"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cc" />
+ <circle
+ cy="974.40948"
+ cx="184.25197"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6-13-3-2-6-9"
+ r="2.1259842" />
+ <circle
+ cy="974.40955"
+ cx="216.14177"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6-1-7-7-4-2-4"
+ r="2.1259842" />
+ <flowRoot
+ transform="translate(34.181781,923.10248)"
+ id="flowRoot4367-0-7-2-4-4-43-5-2"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
+ xml:space="preserve"><flowRegion
+ id="flowRegion4369-0-6-7-7-5-6-6-7" /><flowPara
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;writing-mode:lr;text-anchor:end;"
+ id="flowPara4783-7-2-8-1-0-0">VerticalLayout</flowPara></flowRoot> <flowRoot
+ transform="translate(34.055515,1040.0315)"
+ id="flowRoot4367-0-7-2-4-4-4"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
+ xml:space="preserve"><flowRegion
+ id="flowRegion4369-0-6-7-7-5-8" /><flowPara
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;writing-mode:lr;text-anchor:end;"
+ id="flowPara4783-7-2-8-5">Label</flowPara></flowRoot> <flowRoot
+ transform="translate(34.055511,955.26005)"
+ id="flowRoot4367-0-7-2-4-4-43"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
+ xml:space="preserve"><flowRegion
+ id="flowRegion4369-0-6-7-7-5-6" /><flowPara
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;writing-mode:lr;text-anchor:end;"
+ id="flowPara4783-7-2-8-1">Panel</flowPara></flowRoot> <flowRoot
+ transform="translate(34.176406,947.90968)"
+ id="flowRoot4367-0-7-2-4-4-43-3"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
+ xml:space="preserve"><flowRegion
+ id="flowRegion4369-0-6-7-7-5-6-1" /><flowPara
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;letter-spacing:0px;writing-mode:lr;text-anchor:end;"
+ id="flowPara4684">HorizontalLayout</flowPara></flowRoot> <flowRoot
+ transform="translate(220.06236,933.6273)"
+ id="flowRoot4367-0-7-2-4-4-8"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:58%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill-rule:nonzero;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;"
+ xml:space="preserve"><flowRegion
+ id="flowRegion4369-0-6-7-7-5-7" /><flowPara
+ style="font-size:6.25px;text-align:start;text-anchor:start;color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;filter-blend-mode:normal;filter-gaussianBlur-deviation:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate;-inkscape-font-specification:'Montserrat, Normal';font-family:Montserrat;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;writing-mode:lr;line-height:58%;"
+ id="flowPara4783-7-2-8-7">Label</flowPara></flowRoot> <flowRoot
+ transform="translate(34.055512,930.18906)"
+ id="flowRoot4367-0-7-2-4-4-43-5"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
+ xml:space="preserve"><flowRegion
+ id="flowRegion4369-0-6-7-7-5-6-6" /><flowPara
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;writing-mode:lr;text-anchor:end;"
+ id="flowPara4783-7-2-8-1-0">Label</flowPara></flowRoot> <flowRoot
+ transform="translate(33.772237,962.0788)"
+ id="flowRoot4367-0-7-2-4-4-43-8"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
+ xml:space="preserve"><flowRegion
+ id="flowRegion4369-0-6-7-7-5-6-7" /><flowPara
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;writing-mode:lr;text-anchor:end;"
+ id="flowPara4783-7-2-8-1-1">Tree</flowPara></flowRoot> <flowRoot
+ transform="translate(220.06237,951.34394)"
+ id="flowRoot4367-0-7-2-4-4-8-4"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:58%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
+ xml:space="preserve"><flowRegion
+ id="flowRegion4369-0-6-7-7-5-7-7" /><flowPara
+ style="font-size:6.25px;text-align:start;text-anchor:start;-inkscape-font-specification:'Montserrat, Normal';font-family:Montserrat;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;writing-mode:lr;line-height:58%;"
+ id="flowPara4783-7-2-8-7-1">Panel</flowPara></flowRoot> <flowRoot
+ transform="translate(219.88965,923.13155)"
+ id="flowRoot4367-0-7-2-4-4-8-4-8"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:58%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
+ xml:space="preserve"><flowRegion
+ id="flowRegion4369-0-6-7-7-5-7-7-1" /><flowPara
+ style="font-size:6.25px;line-height:58%;text-align:start;text-anchor:start;-inkscape-font-specification:'Montserrat, Normal';font-family:Montserrat;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;writing-mode:lr;"
+ id="flowPara4865">HorizontalLayout</flowPara></flowRoot> <flowRoot
+ transform="translate(220.25102,986.77706)"
+ id="flowRoot4367-0-7-2-4-4-8-9"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:58%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
+ xml:space="preserve"><flowRegion
+ id="flowRegion4369-0-6-7-7-5-7-6" /><flowPara
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:58%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;writing-mode:lr;text-anchor:start;"
+ id="flowPara4783-7-2-8-7-4">Label</flowPara></flowRoot> <flowRoot
+ transform="translate(220.25102,1004.4936)"
+ id="flowRoot4367-0-7-2-4-4-8-9-7"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:58%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
+ xml:space="preserve"><flowRegion
+ id="flowRegion4369-0-6-7-7-5-7-6-6" /><flowPara
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:58%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;writing-mode:lr;text-anchor:start;"
+ id="flowPara4783-7-2-8-7-4-8">Label</flowPara></flowRoot> <flowRoot
+ transform="translate(219.88712,976.25205)"
+ id="flowRoot4367-0-7-2-4-4-8-4-8-2"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:58%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
+ xml:space="preserve"><flowRegion
+ id="flowRegion4369-0-6-7-7-5-7-7-1-6" /><flowPara
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:58%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;writing-mode:lr;text-anchor:start;"
+ id="flowPara4865-9">VerticalLayout</flowPara></flowRoot> <path
+ style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 46.06299,914.17332 -7.086612,-5e-5"
+ id="path3003-6-5-1-86"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cc" />
+ <circle
+ cy="914.17328"
+ cx="46.062992"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6-8"
+ r="2.1259842" />
+ <circle
+ cy="914.17328"
+ cx="38.976379"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6-1-6"
+ r="2.1259842" />
+ <flowRoot
+ transform="translate(34.181782,916.01583)"
+ id="flowRoot4367-0-7-2-4-4-43-5-2-5"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
+ xml:space="preserve"><flowRegion
+ id="flowRegion4369-0-6-7-7-5-6-6-7-3" /><flowPara
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:121%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;writing-mode:lr;text-anchor:end;"
+ id="flowPara4783-7-2-8-1-0-0-9">UI</flowPara></flowRoot> <path
+ style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+ d="m 216.1417,960.23626 -21.25981,0"
+ id="path3003-6-5-1-5-7-1-1-7-5"
+ inkscape:connector-curvature="0"
+ sodipodi:nodetypes="cc" />
+ <circle
+ cy="960.23627"
+ cx="194.8819"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6-13-3-2-6-9-1"
+ r="2.1259842" />
+ <circle
+ cy="960.23627"
+ cx="216.14174"
+ style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
+ id="path2997-7-6-1-7-7-4-2-4-9"
+ r="2.1259842" />
+ <flowRoot
+ transform="translate(219.88709,962.07882)"
+ id="flowRoot4367-0-7-2-4-4-8-4-8-2-0"
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:57.99999833%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+ xml:space="preserve"><flowRegion
+ id="flowRegion4369-0-6-7-7-5-7-7-1-6-7" /><flowPara
+ style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:57.99999833%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start"
+ id="flowPara4865-9-0">VerticalLayout</flowPara></flowRoot> </g>
+</svg>
projects / vaadin-framework.git / commitdiff
