Add documentation to master branch

Change-Id: I2504bb10f1ae73ec0cbc08b7ba5a88925caa1674

127 files changed, 16484 insertions, 0 deletions

diff --git a/documentation/components/chapter-components.asciidoc b/documentation/components/chapter-components.asciidoc
new file mode 100644
index 0000000000..36e0287e30
--- /dev/null
+++ b/documentation/components/chapter-components.asciidoc
@@ -0,0 +1,71 @@
+[[components]]
+== User Interface Components
+
+This chapter provides an overview and a detailed description of all non-layout
+components in Vaadin.
+
+include::components-overview.asciidoc[leveloffset=+2]
+
+include::components-interfaces.asciidoc[leveloffset=+2]
+
+include::components-features.asciidoc[leveloffset=+2]
+
+include::components-fields.asciidoc[leveloffset=+2]
+
+include::components-selection.asciidoc[leveloffset=+2]
+
+include::components-extensions.asciidoc[leveloffset=+2]
+
+include::components-label.asciidoc[leveloffset=+2]
+
+include::components-link.asciidoc[leveloffset=+2]
+
+include::components-textfield.asciidoc[leveloffset=+2]
+
+include::components-textarea.asciidoc[leveloffset=+2]
+
+include::components-passwordfield.asciidoc[leveloffset=+2]
+
+include::components-richtextarea.asciidoc[leveloffset=+2]
+
+include::components-datefield.asciidoc[leveloffset=+2]
+
+include::components-button.asciidoc[leveloffset=+2]
+
+include::components-checkbox.asciidoc[leveloffset=+2]
+
+include::components-combobox.asciidoc[leveloffset=+2]
+
+include::components-listselect.asciidoc[leveloffset=+2]
+
+include::components-nativeselect.asciidoc[leveloffset=+2]
+
+include::components-optiongroup.asciidoc[leveloffset=+2]
+
+include::components-twincolselect.asciidoc[leveloffset=+2]
+
+include::components-table.asciidoc[leveloffset=+2]
+
+include::components-tree.asciidoc[leveloffset=+2]
+
+include::components-treetable.asciidoc[leveloffset=+2]
+
+include::components-grid.asciidoc[leveloffset=+2]
+
+include::components-menubar.asciidoc[leveloffset=+2]
+
+include::components-upload.asciidoc[leveloffset=+2]
+
+include::components-progressbar.asciidoc[leveloffset=+2]
+
+include::components-slider.asciidoc[leveloffset=+2]
+
+include::components-popupview.asciidoc[leveloffset=+2]
+
+include::components-calendar.asciidoc[leveloffset=+2]
+
+include::components-customcomponent.asciidoc[leveloffset=+2]
+
+include::components-customfield.asciidoc[leveloffset=+2]
+
+include::components-embedded.asciidoc[leveloffset=+2]
diff --git a/documentation/components/components-button.asciidoc b/documentation/components/components-button.asciidoc
new file mode 100644
index 0000000000..59ab380348
--- /dev/null
+++ b/documentation/components/components-button.asciidoc
@@ -0,0 +1,71 @@
+---
+title: Button
+order: 14
+layout: page
+---
+
+[[components.button]]
+= [classname]#Button#
+
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/interaction/button"]
+endif::web[]
+
+
+The [classname]#Button# component is normally used for initiating some action,
+such as finalizing input in forms. When the user clicks a button, a
+[classname]#Button.ClickEvent# is fired, which can be handled with a
+[interfacename]#Button.ClickListener# in the [methodname]#buttonClick()# method.
+
+You can handle button clicks with an anonymous class as follows:
+
+
+[source, java]
+----
+Button button = new Button("Do not press this button");
+
+button.addClickListener(new Button.ClickListener() {
+    public void buttonClick(ClickEvent event) {
+        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.
+
+[[figure.component.button.basic]]
+.Button in Different Styles of Valo Theme
+image::img/button-example1.png[]
+
+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">>.
+
+== CSS Style Rules
+
+
+[source, css]
+----
+.v-button { }
+  .v-button-wrap { }
+    .v-button-caption { }
+----
+
+A button has an overall [literal]#++v-button++# style. The caption has
+[literal]#++v-button-caption++# style. There is also an intermediate wrap
+element, which may help in styling in some cases.
+
+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.
+
+
+
+
diff --git a/documentation/components/components-calendar.asciidoc b/documentation/components/components-calendar.asciidoc
new file mode 100644
index 0000000000..0bc2791088
--- /dev/null
+++ b/documentation/components/components-calendar.asciidoc
@@ -0,0 +1,1197 @@
+---
+title: Calendar
+order: 30
+layout: page
+---
+
+[[components.calendar]]
+= [classname]#Calendar#
+
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/dates/dates-calendar]
+endif::web[]
+
+The [classname]#Calendar# component allows organizing and displaying calendar
+events. The main features of the calendar include:
+
+* Monthly, weekly, and daily views
+* Two types of events: all-day events and events with a time range
+* Add events directly, from a [classname]#Container#, or with an event provider
+* Control the range of the visible dates
+* Selecting and editing date or time range by dragging
+* Drag and drop events to calendar
+* Support for localization and timezones
+
+User interaction with the calendar elements, such as date and week captions as
+well as events, is handled with event listeners. Also date/time range
+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[]
+.
+
+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
+container, or to any other data source by implementing an __event provider__.
+
+The [classname]#Calendar# has undefined size by default and you usually want to
+give it a fixed or relative size, for example as follows.
+
+
+[source, java]
+----
+Calendar cal = new Calendar("My Calendar");
+cal.setWidth("600px");
+cal.setHeight("300px");
+----
+
+After creating the calendar, you need to set a time range for it, which also
+controls the view mode, and set up the data source for calendar events.
+
+[[components.calendar.daterange]]
+== Date Range and View Mode
+
+The Vaadin Calendar has two types of views that are shown depending on the date
+range of the calendar. The __weekly view__ displays a week by default. It can
+show anything between one to seven days a week, and is also used as a single-day
+view. The view mode is determined from the __date range__ of the calendar,
+defined by a start and an end date. Calendar will be shown in a __monthly view__
+when the date range is over than one week (seven days) long. The date range is
+always calculated in an accuracy of one millisecond.
+
+[[figure.components.calendar.daterange.monthly]]
+.Monthly view with All-Day and Normal Events
+image::img/calendar-monthly.png[]
+
+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
+that last for one or more days. You can drag the events to move them. In the
+figure, you can see two longer events that are highlighted with a blue and green
+background color. Other markings are shorter day events that last less than a 24
+hours. These events can not be moved by dragging in the monthly view.
+
+[[figure.components.calendar.daterange.weekly]]
+.Weekly View
+image::img/calendar-weekly.png[]
+
+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.
+
+In the following, we set the calendar to show only one day, which is the current
+day.
+
+
+[source, java]
+----
+cal.setStartDate(new Date());
+cal.setEndDate(new Date());
+----
+
+Notice that although the range we set above is actually zero time long, the
+calendar still renders the time from 00:00 to 23:59. This is normal, as the
+Vaadin Calendar is guaranteed to render at least the date range provided, but
+may expand it. This behaviour is important to notice when we implement our own
+event providers.
+
+
+[[components.calendar.events]]
+== Calendar Events
+
+All occurrences in a calendar are represented as __events__. You have three ways
+to manage the calendar events:
+
+* Add events directly to the [classname]#Calendar# object using the [methodname]#addEvent()#
+* Use a [interfacename]#Container# as a data source
+* Use the __event provider__ mechanism
+
+You can add events with [methodname]#addEvent()# and remove them with the
+[methodname]#removeEvent()#. These methods will use the underlying event
+provider to write the modifications to the data source.
+
+[[components.calendar.events.types]]
+=== Event Interfaces and Providers
+
+Events are handled though the [interfacename]#CalendarEvent# interface. The
+concrete class of the event depends on the specific
+[classname]#CalendarEventProvider# used in the calendar.
+
+By default, [classname]#Calendar# uses a [classname]#BasicEventProvider# to
+provide events, which uses [classname]#BasicEvent# instances.
+
+Calendar does not depend on any particular data source implementation. Events
+are queried by the [classname]#Calendar# from the provider that just has to
+implement the [interfacename]#CalendarEventProvider# interface. It is up to the
+event provider that [classname]#Calendar# gets the correct events.
+
+You can bind any Vaadin [classname]#Container# to a calendar, in which case a
+[classname]#ContainerEventProvider# is used transparently. The container must be
+ordered by start date and time of the events. See
+<<dummy/../../../framework/datamodel/datamodel-container#datamodel.container,"Collecting
+Items in Containers">> for basic information about containers.
+
+
+[[components.calendar.events.details]]
+=== Event Types
+
+A calendar event requires a start time and an end time. These are the only
+mandatory properties. In addition, an event can also be set as an all-day event
+by setting the [literal]#++all-day++# property of the event. You can also set
+the [literal]#++description++# of an event, which is displayed as a tooltip in
+the user interface.
+
+If the [literal]#++all-day++# field of the event is [literal]#++true++#, then
+the event is always rendered as an all-day event. In the monthly view, this
+means that no start time is displayed in the user interface and the event has an
+colored background. In the weekly view, all-day events are displayed in the
+upper part of the screen, and rendered similarly to the monthly view. In
+addition, when the time range of an event is 24 hours or longer, it is rendered
+as an all-day event in the monthly view.
+
+When the time range of an event is equal or less than 24 hours, with the
+accuracy of one millisecond, the event is considered as a normal day event.
+Normal event has a start and end times that may be on different days.
+
+
+[[components.calendar.events.basic]]
+=== Basic Events
+
+The easiest way to add and manage events in a calendar is to use the __basic
+event__ management API. Calendar uses by default a
+[classname]#BasicEventProvider#, which keeps the events in memory in an internal
+reprensetation.
+
+For example, the following adds a two-hour event starting from the current time.
+The standard Java [classname]#GregorianCalendar# provides various ways to
+manipulate date and time.
+
+
+[source, java]
+----
+// Add a two-hour event
+GregorianCalendar start = new GregorianCalendar();
+GregorianCalendar end   = new GregorianCalendar();
+end.add(java.util.Calendar.HOUR, 2);
+calendar.addEvent(new BasicEvent("Calendar study",
+        "Learning how to use Vaadin Calendar",
+        start.getTime(), end.getTime()));
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#calendar.monthlyview[on-line example, window="_blank"].
+
+This adds a new event that lasts for 3 hours. As the BasicEventProvider and
+BasicEvent implement some optional event interfaces provided by the calendar
+package, there is no need to refresh the calendar. Just create events, set their
+properties and add them to the Event Provider.
+
+
+
+[[components.calendar.container]]
+== Getting Events from a Container
+
+You can use any Vaadin [interfacename]#Container# that implements the
+[interfacename]#Indexed# interface as the data source for calendar events. The
+[classname]#Calendar# will listen to change events from the container as well as
+write changes to the container. You can attach a container to a
+[classname]#Calendar# with [methodname]#setContainerDataSource()#.
+
+In the following example, we bind a [classname]#BeanItemContainer# that contains
+built-in [classname]#BasicEvent# events to a calendar.
+
+
+[source, java]
+----
+// Create the calendar
+Calendar calendar = new Calendar("Bound Calendar");
+
+// Use a container of built-in BasicEvents
+final BeanItemContainer<BasicEvent> container =
+    new BeanItemContainer<BasicEvent>(BasicEvent.class);        
+
+// Create a meeting in the container
+container.addBean(new BasicEvent("The Event", "Single Event",
+            new GregorianCalendar(2012,1,14,12,00).getTime(),
+            new GregorianCalendar(2012,1,14,14,00).getTime()));
+
+// The container must be ordered by the start time. You
+// have to sort the BIC every time after you have added
+// or modified events.
+container.sort(new Object[]{"start"}, new boolean[]{true});
+
+calendar.setContainerDataSource(container, "caption",
+    "description", "start", "end", "styleName");
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#calendar.beanitemcontainer[on-line example, window="_blank"].
+
+The container must either use the default property IDs for event data, as
+defined in the [interfacename]#CalendarEvent# interface, or provide them as
+parameters for the [methodname]#setContainerDataSource()# method, as we did in
+the example above.
+
+[[components.calendar.container.sorting]]
+=== Keeping the Container Ordered
+
+The events in the container __must__ be kept ordered by their start date/time.
+Failing to do so may and will result in the events not showing in the calendar
+properly.
+
+Ordering depends on the container. With some containers, such as
+[classname]#BeanItemContainer#, you have to sort the container explicitly every
+time after you have added or modified events, usually with the
+[methodname]#sort()# method, as we did in the example above. Some container,
+such as [classname]#JPAContainer#, keep the in container automatically order if
+you provide a sorting rule.
+
+For example, you could order a [classname]#JPAContainer# by the following rule,
+assuming that the start date/time is held in the [literal]#++startDate++#
+property:
+
+
+[source, java]
+----
+// The container must be ordered by start date. For JPAContainer
+// we can just set up sorting once and it will stay ordered.
+container.sort(new String[]{"startDate"}, new boolean[]{true});
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#calendar.jpacontainer[on-line example, window="_blank"].
+
+
+ifdef::web[]
+[[components.calendar.container.customization]]
+=== Delegation of Event Management
+
+Setting a container as the calendar data source with
+[methodname]#setContainerDataSource()# automatically switches to
+[classname]#ContainerEventProvider#. You can manipulate the event data through
+the API in [classname]#Calendar# and the user can move and resize event through
+the user interface. The event provider delegates all such calendar operations to
+the container.
+
+If you add events through the [classname]#Calendar# API, notice that you may be
+unable to create events of the type held in the container or adding them
+requires some container-specific operations. In such case, you may need to
+customize the [methodname]#addEvent()# method.
+
+For example, [classname]#JPAContainer# requires adding new items with
+[methodname]#addEntity()#. You could first add the entity to the container or
+entity manager directly and then pass it to the [methodname]#addEvent()#. That
+does not, however, work if the entity class does not implement
+[interfacename]#CalendarEvent#. This is actually the case always if the property
+names differ from the ones defined in the interface. You could handle creating
+the underlying entity objects in the [methodname]#addEvent()# as follows:
+
+
+[source, java]
+----
+// Create a JPAContainer
+final JPAContainer<MyCalendarEvent> container =
+    JPAContainerFactory.make(MyCalendarEvent.class,
+                             "book-examples");
+
+// Customize the event provider for adding events
+// as entities
+ContainerEventProvider cep =
+        new ContainerEventProvider(container) {
+    @Override
+    public void addEvent(CalendarEvent event) {
+        MyCalendarEvent entity = new MyCalendarEvent(
+            event.getCaption(), event.getDescription(),
+            event.getStart(), event.getEnd(),
+            event.getStyleName());
+        container.addEntity(entity);
+    }
+}
+
+// Set the container as the data source
+calendar.setEventProvider(cep);
+        
+// Now we can add events to the database through the calendar
+BasicEvent event = new BasicEvent("The Event", "Single Event",
+    new GregorianCalendar(2012,1,15,12,00).getTime(),
+    new GregorianCalendar(2012,1,15,14,00).getTime());
+calendar.addEvent(event);
+----
+
+endif::web[]
+
+
+ifdef::web[]
+[[components.calendar.eventprovider]]
+== Implementing an Event Provider
+
+If the two simple ways of storing and managing events for a calendar are not
+enough, you may need to implement a custom event provider. It is the most
+flexible way of providing events. You need to attach the event provider to the
+[classname]#Calendar# using the [methodname]#setEventProvider()# method.
+
+Event queries are done by asking the event provider for all the events between
+two given dates. The range of these dates is guaranteed to be at least as long
+as the start and end dates set for the component. The component can, however,
+ask for a longer range to ensure correct rendering. In particular, all start
+dates are expanded to the start of the day, and all end dates are expanded to
+the end of the day.
+
+[[components.calendar.eventprovider.customevents]]
+=== Custom Events
+
+An event provider could use the built-in [classname]#BasicEvent#, but it is
+usually more proper to define a custom event type that is bound directly to the
+data source. Custom events may be useful for some other purposes as well, such
+as when you need to add extra information to an event or customize how it is
+acquired.
+
+Custom events must implement the [interfacename]#CalendarEvent# interface or
+extend an existing event class. The built-in [classname]#BasicEvent# class
+should serve as a good example of implementing simple events. It keeps the data
+in member variables.
+
+
+[source, java]
+----
+public class BasicEvent
+       implements CalendarEventEditor, EventChangeNotifier {
+   ...
+
+   public String getCaption() {
+        return caption;
+    }
+
+    public String getDescription() {
+        return description;
+    }
+
+    public Date getEnd() {
+        return end;
+    }
+
+    public Date getStart() {
+        return start;
+    }
+
+    public String getStyleName() {
+        return styleName;
+    }
+
+    public boolean isAllDay() {
+        return isAllDay;
+    }
+
+    public void setCaption(String caption) {
+        this.caption = caption;
+        fireEventChange();
+    }
+
+    public void setDescription(String description) {
+        this.description = description;
+        fireEventChange();
+    }
+
+    public void setEnd(Date end) {
+        this.end = end;
+        fireEventChange();
+    }
+
+    public void setStart(Date start) {
+        this.start = start;
+        fireEventChange();
+    }
+
+    public void setStyleName(String styleName) {
+        this.styleName = styleName;
+        fireEventChange();
+    }
+
+    public void setAllDay(boolean isAllDay) {
+        this.isAllDay = isAllDay;
+        fireEventChange();
+    }
+
+    public void addEventChangeListener(
+            EventChangeListener listener) {
+        ...
+    }
+    
+    public void removeListener(EventChangeListener listener) {
+        ...
+    }
+
+    protected void fireEventChange() {...}
+}
+----
+
+You may have noticed that there was some additional code in the
+[classname]#BasicEvent# that was not in the [interfacename]#CalendarEvent#
+interface. Namely [classname]#BasicEvent# also implements two additional
+interfaces:
+
+[interfacename]#CalendarEditor#:: This interface defines setters for all the fields, and is required for some of
+the default handlers to work.
+
+[interfacename]#EventChangeNotifier#:: This interface adds the possibility to listen for changes in the event, and
+enables the [classname]#Calendar# to render the changes immediately.
+
+
+
+The start time and end time are mandatory, but caption, description, and style
+name are not. The style name is used as a part of the CSS class name for the
+HTML DOM element of the event.
+
+In addition to the basic event interfaces, you can enhance the functionality of
+your event and event provider classes by using the [classname]#EventChange# and
+[classname]#EventSetChange# events. They let the [classname]#Calendar# component
+to know about changes in events and update itself accordingly. The
+[classname]#BasicEvent# and [classname]#BasicEventProvider# examples given
+earlier include a simple implementation of these interfaces.
+
+
+[[components.calendar.eventprovider.eventprovider]]
+=== Implementing the Event Provider
+
+An event provider needs to implement the [interfacename]#CalendarEventProvider#
+interface. It has only one method to be implemented. Whenever the calendar is
+painted, [methodname]#getEvents(Date, Date)# method is called and it must return
+a list of events between the given start and end time.
+
+The following example implementation returns only one example event. The event
+starts from the current time and is five hours long.
+
+
+[source, java]
+----
+public class MyEventProvider implements CalendarEventProvider{
+    public List<Event> getEvents(Date startDate, Date endDate){
+        List<Event> events = new ArrayList<Event>();
+        GregorianCalendar cal = new GregorianCalendar();
+        cal.setTime(new Date());
+
+        Date start = cal.getTime();
+        cal.add(GregorianCalendar.HOUR, 5);
+        Date end = cal.getTime();
+        BasicEvent event = new BasicEvent();
+        event.setCaption("My Event");
+        event.setDescription("My Event Description");
+        event.setStart(start);
+        event.setEnd(end);
+        events.add(event);
+
+        return events;
+    }
+}
+----
+
+It is important to notice that the [classname]#Calendar# may query for dates
+beyond the range defined by start date and end date. Particularly, it may expand
+the date range to make sure the user interface is rendered correctly.
+
+
+endif::web[]
+
+ifdef::web[]
+[[components.calendar.appearance]]
+== Styling a Calendar
+
+Configuring the appearance of the Vaadin Calendar component is one of the basic
+tasks. At the least, you need to consider its sizing in your user interface. You
+also quite probably want to use some color or colors for events.
+
+[[components.calendar.appearance.sizing]]
+=== Sizing
+
+The Calendar supports component sizing as usual for defined (fixed or relative)
+sizes. When using an undefined size for the calendar, all the sizes come from
+CSS. In addition, when the height is undefined, a scrollbar is displayed in the
+weekly view to better fit the cells to the user interface.
+
+Below is a list of style rules that define the size of a Calendar with undefined
+size (these are the defaults):
+
+
+[source, css]
+----
+.v-calendar-month-sizedheight .v-calendar-month-day {
+	height: 100px;
+}
+
+.v-calendar-month-sizedwidth .v-calendar-month-day {
+	width: 100px;
+}
+
+.v-calendar-header-month-Hsized .v-calendar-header-day {
+	width: 101px;
+}
+
+/* for IE */
+.v-ie6 .v-calendar-header-month-Hsized .v-calendar-header-day {
+	width: 104px;
+}
+
+/* for others */
+.v-calendar-header-month-Hsized td:first-child {
+	padding-left: 21px;
+}
+
+.v-calendar-header-day-Hsized {
+	width: 200px;
+}
+
+.v-calendar-week-numbers-Vsized .v-calendar-week-number {
+	height: 100px;
+	line-height: 100px;
+}
+
+.v-calendar-week-wrapper-Vsized {
+	height: 400px;
+	overflow-x: hidden !important;
+}
+
+.v-calendar-times-Vsized .v-calendar-time {
+	height: 38px;
+}
+
+.v-calendar-times-Hsized .v-calendar-time {
+	width: 42px;
+}
+
+.v-calendar-day-times-Vsized .v-slot,.v-calendar-day-times-Vsized .v-slot-even {
+	height: 18px;
+}
+
+.v-calendar-day-times-Hsized, .v-calendar-day-times-Hsized .v-slot,.v-calendar-day-times-Hsized .v-slot-even {
+	width: 200px;
+}
+----
+
+
+[[components.calendar.appearance.event-style]]
+=== Event Style
+
+Events can be styled with CSS by setting them a __style name suffix__. The
+suffix is retrieved with the [methodname]#getStyleName()# method in
+[interfacename]#CalendarEvent#. If you use [classname]#BasicEvent# events, you
+can set the suffix with [methodname]#setStyleName()#.
+
+
+[source, java]
+----
+BasicEvent event = new BasicEvent("Wednesday Wonder", ... );
+event.setStyleName("mycolor");
+calendar.addEvent(event);
+----
+
+Suffix [literal]#++mycolor++# would create
+[literal]#++v-calendar-event-mycolor++# class for regular events and
+[literal]#++v-calendar-event-mycolor-add-day++# for all-day events. You could
+style the events with the following rules:
+
+
+[source, css]
+----
+.v-calendar .v-calendar-event-mycolor {}
+.v-calendar .v-calendar-event-mycolor-all-day {}
+.v-calendar .v-calendar-event-mycolor .v-calendar-event-caption {}
+.v-calendar .v-calendar-event-mycolor .v-calendar-event-content {}
+----
+
+
+endif::web[]
+
+ifdef::web[]
+[[components.calendar.visible-hours-days]]
+== Visible Hours and Days
+
+As we saw in <<components.calendar.daterange>>, you can set the range of dates
+that are shown by the Calendar. But what if you wanted to show the entire month
+but hide the weekends? Or show only hours from 8 to 16 in the weekly view? The
+[methodname]#setVisibleDays()# and [methodname]#setVisibleHours()# methods allow
+you to do that.
+
+
+[source, java]
+----
+calendar.setVisibleDays(1,5);   // Monday to Friday
+calendar.setVisibleHours(0,15); // Midnight until 4 pm
+----
+
+After the above settings, only weekdays from Monday to Friday would be shown.
+And when the calendar is in the weekly view, only the time range from 00:00 to
+16:00 would be shown.
+
+Note that the excluded times are never shown so you should take care when
+setting the date range. If the date range contains only dates / times that are
+excluded, nothing will be displayed. Also note that even if a date is not
+rendered because these settings, the event provider may still be queried for
+events for that date.
+
+endif::web[]
+
+ifdef::web[]
+[[components.calendar.drag-and-drop]]
+== Drag and Drop
+
+Vaadin Calendar can act as a drop target for drag and drop, described in
+<<dummy/../../../framework/advanced/advanced-dragndrop#advanced.dragndrop,"Drag
+and Drop">>. With the functionality, the user could drag events, for example,
+from a table to a calendar.
+
+To support dropping, a [classname]#Calendar# must have a drop handler. When the
+drop handler is set, the days in the monthly view and the time slots in the
+weekly view can receive drops. Other locations, such as day names in the weekly
+view, can not currently receive drops.
+
+Calendar uses its own implementation of [interfacename]#TargetDetails#:
+[classname]#CalendarTargetdetails#. It holds information about the the drop
+location, which in the context of [classname]#Calendar# means the date and time.
+The drop target location can be retrieved via the [methodname]#getDropTime()#
+method. If the drop is done in the monthly view, the returned date does not have
+exact time information. If the drop happened in the weekly view, the returned
+date also contains the start time of the slot.
+
+Below is a short example of creating a drop handler and using the drop
+information to create a new event:
+
+
+[source, java]
+----
+private Calendar createDDCalendar() {
+  Calendar calendar = new Calendar();
+  calendar.setDropHandler(new DropHandler() {
+    public void drop(DragAndDropEvent event) {
+      CalendarTargetDetails details = 
+              (CalendarTargetDetails) event.getTargetDetails();
+      
+      TableTransferable transferable = 
+              (TableTransferable) event.getTransferable();
+
+      createEvent(details, transferable);
+      removeTableRow(transferable);
+    }
+
+    public AcceptCriterion getAcceptCriterion() {
+      return AcceptAll.get();
+    }
+
+  });
+
+  return calendar;
+}
+
+
+protected void createEvent(CalendarTargetDetails details,
+  TableTransferable transferable) {
+  Date dropTime = details.getDropTime();
+  java.util.Calendar timeCalendar = details.getTargetCalendar()
+                                    .getInternalCalendar();
+  timeCalendar.setTime(dropTime);
+  timeCalendar.add(java.util.Calendar.MINUTE, 120);
+  Date endTime = timeCalendar.getTime();
+
+  Item draggedItem = transferable.getSourceComponent().
+                            getItem(transferable.getItemId());
+
+  String eventType = (String)draggedItem.
+                            getItemProperty("type").getValue();
+
+  String eventDescription = "Attending: "
+             + getParticipantString(
+                 (String[]) draggedItem.
+                   getItemProperty("participants").getValue());
+
+  BasicEvent newEvent = new BasicEvent();
+  newEvent.setAllDay(!details.hasDropTime());
+  newEvent.setCaption(eventType);
+  newEvent.setDescription(eventDescription);
+  newEvent.setStart(dropTime);
+  newEvent.setEnd(endTime);
+
+  BasicEventProvider ep = (BasicEventProvider) details
+                       .getTargetCalendar().getEventProvider();
+  ep.addEvent(newEvent);
+}
+----
+
+endif::web[]
+
+ifdef::web[]
+[[components.calendar.contextmenu]]
+== Using the Context Menu
+
+Vaadin Calendar allows the use of context menu (mouse right-click) to manage
+events. As in other context menus in Vaadin, the menu items are handled in
+Vaadin as __actions__ by an __action handler__. To enable a context menu, you
+have to implement a Vaadin [interfacename]#Action.Handler# and add it to the
+calendar with [methodname]#addActionHandler()#.
+
+An action handler must implement two methods: [methodname]#getActions()# and
+[methodname]#handleAction()#. The [methodname]#getActions()# is called for each
+day displayed in the calendar view. It should return a list of allowed actions
+for that day, that is, the items of the context menu. The [parameter]#target#
+parameter is the context of the click - a [classname]#CalendarDateRange# that
+spans over the day. The [parameter]#sender# is the [classname]#Calendar# object.
+
+The [methodname]#handleActions()# receives the target context in the
+[parameter]#target#. If the context menu was opened on an event, the target is
+the [interfacename]#Event# object, otherwise it is a
+[classname]#CalendarDateRange#.
+
+endif::web[]
+
+ifdef::web[]
+[[components.calendar.localization]]
+== Localization and Formatting
+
+[[components.calendar.localization.locale]]
+=== Setting the Locale and Time Zone
+
+Month and weekday names are shown in the language of the locale setting of the
+[classname]#Calendar#. The translations are acquired from the standard Java
+locale data. By default, [classname]#Calendar# uses the system default locale
+for its internal calendar, but you can change it with
+[methodname]#setLocale(Locale locale)#. Setting the locale will update also
+other location specific date and time settings, such as the first day of the
+week, time zone, and time format. However, time zone and time format can be
+overridden by settings in the [classname]#Calendar#.
+
+For example, the following would set the language to US English:
+
+
+[source, java]
+----
+cal.setLocale(Locale.US);
+----
+
+The locale defines the default time zone. You can change it with the
+[methodname]#setTimeZone()# method, which takes a
+[classname]#java.util.TimeZone# object as its parameter. Setting timezone to
+null will reset timezone to the locale default.
+
+For example, the following would set the Finnish time zone, which is EET
+
+
+[source, java]
+----
+cal.setTimeZone(TimeZone.getTimeZone("Europe/Helsinki"));
+----
+
+
+[[components.calendar.localization.datecaption]]
+=== Time and Date Caption Format
+
+The time may be shown either in 24 or 12 hour format. The default format is
+defined by the locale, but you can change it with the
+[methodname]#setTimeFormat()# method. Giving a [literal]#++null++# setting will
+reset the time format to the locale default.
+
+
+[source, java]
+----
+cal.setTimeFormat(TimeFormat.Format12H);
+----
+
+You can change the format of the date captions in the week view with the
+[methodname]#setWeeklyCaptionFormat(String dateFormatPattern)# method. The date
+format pattern should follow the format of the standard Java
+[classname]#java.text.SimpleDateFormat# class.
+
+For example:
+
+
+[source, java]
+----
+cal.setWeeklyCaptionFormat("dd-MM-yyyy");
+----
+
+
+endif::web[]
+
+ifdef::web[]
+[[components.calendar.customizing]]
+== Customizing the Calendar
+
+In this section, we give a tutorial for how to make various basic customizations
+of the Vaadin Calendar. The event provider and styling was described earlier, so
+now we concentrate on other features of the Calendar API.
+
+[[components.calendar.customizing.overview]]
+=== Overview of Handlers
+
+Most of the handlers related to calendar events have sensible default handlers.
+These are found in the [package]#com.vaadin.ui.handler# package. The default
+handlers and their functionalities are described below.
+
+* [classname]#BasicBackwardHandler#. Handles clicking the back-button of the weekly view so that the viewed month is changed to the previous one.
+* [classname]#BasicForwardHandler#. Handles clicking the forward-button of the weekly view so that the viewed month is changed to the next one.
+* [classname]#BasicWeekClickHandler#. Handles clicking the week numbers int the monthly view so that the viewable date range is changed to the clicked week.
+* [classname]#BasicDateClickHandler#. Handles clicking the dates on both the monthly view and the weekly view. Changes the viewable date range so that only the clicked day is visible.
+* [classname]#BasicEventMoveHandler#. Handles moving the events in both monthly view and the weekly view. Events can be moved and their start and end dates are changed correctly, but only if the event implements [classname]#CalendarEventEditor# (implemented by [classname]#BasicEvent#).
+* [classname]#BasicEventResizeHandler#. Handles resizing the events in the weekly view. Events can be resized and their start and end dates are changed correctly, but only if the event implements [classname]#CalendarEventEditor# (implemented by the [classname]#BasicEvent#).
+
+All of these handlers are automatically set when creating a new
+[classname]#Calendar#. If you wish to disable some of the default functionality,
+you can simply set the corresponding handler to [literal]#++null++#. This will
+prevent the functionality from ever appearing on the user interface. For
+example, if you set the [classname]#EventMoveHandler# to [literal]#++null++#,
+the user will be unable to move events in the browser.
+
+
+[[components.calendar.customizing.creating]]
+=== Creating a Calendar
+
+Let us first create a new [classname]#Calendar# instance. Here we use our own
+event provider, the [classname]#MyEventProvider# described in
+<<components.calendar.eventprovider.eventprovider>>.
+
+
+[source, java]
+----
+Calendar cal = new Calendar(new MyEventProvider());
+----
+
+This initializes the Calendar. To customize the viewable date range, we must set
+a start and end date to it.
+
+There is only one visible event in the timeline, starting from the current time.
+That is what our event provider passes to the client.//TODO See the figure
+3.
+
+It would be nice to also be able to control the navigation forward and backward.
+The default navigation is provided by the default handlers, but perhaps we want
+to restrict the users so they can only navigate dates in the current year. Maybe
+we also want to pose some other restrictions to the clicking week numbers and
+dates.
+
+These restrictions and other custom logic can be defined with custom handlers.
+You can find the handlers in the [package]#com.vaadin.addon.calendar.ui.handler#
+package and they can be easily extended. Note that if you don not want to extend
+the default handlers, you are free to implement your own. The interfaces are
+described in [interfacename]#CalendarComponentEvents#.
+
+
+endif::web[]
+
+[[components.calendar.navigation]]
+== Backward and Forward Navigation
+
+Vaadin Calendar has only limited built-in navigation support. The weekly view
+has navigation buttons in the top left and top right
+corners.////
+TODO See the figure
+4.
+////
+
+You can handle backward and forward navigation with a
+[interfacename]#BackwardListener# and [interfacename]#ForwardListener#.
+
+
+[source, java]
+----
+cal.setHandler(new BasicBackwardHandler() {
+  protected void setDates(BackwardEvent event,
+                          Date start, Date end) {
+
+      java.util.Calendar calendar = event.getComponent()
+                                    .getInternalCalendar();
+      if (isThisYear(calendar, end) 
+           && isThisYear(calendar, start)) {
+        super.setDates(event, start, end);
+      }
+  }});
+----
+
+The forward navigation handler can be implemented in the same way. The example
+handler restricts the dates to the current year.
+
+
+ifdef::web[]
+[[components.calendar.dateclick]]
+== Date Click Handling
+
+By default, clicking a date either in month or week view switches to single-day
+view, while clicking on the date header in the day view has no effect. The date
+click event is handled by a [interfacename]#DateClickHandler#.
+
+The following example handles click events on the date header in the day view to
+zoom out to the week view. For other clicks it applies the default behavior; in
+the week view clicking on a day switches to the day view.
+
+
+[source, java]
+----
+calendar.setHandler(new BasicDateClickHandler() {
+    public void dateClick(DateClickEvent event) {
+      Calendar cal = event.getComponent();
+      
+      // Check if the current range is already one day long
+      long currentCalDateRange = cal.getEndDate().getTime() -
+                                 cal.getStartDate().getTime();
+
+      // From one-day view, zoom out to week view
+      if (currentCalDateRange <= DateConstants.DAYINMILLIS) {
+          // Change the date range to the current week
+          GregorianCalendar weekstart = new GregorianCalendar();
+          GregorianCalendar weekend   = new GregorianCalendar();
+          weekstart.setTime(event.getDate());
+          weekend.setTime(event.getDate());
+          weekstart.setFirstDayOfWeek(java.util.Calendar.SUNDAY);
+          weekstart.set(java.util.Calendar.HOUR_OF_DAY, 0);
+          weekstart.set(java.util.Calendar.DAY_OF_WEEK,
+                       java.util.Calendar.SUNDAY);
+          weekend.set(java.util.Calendar.HOUR_OF_DAY, 23);
+          weekend.set(java.util.Calendar.DAY_OF_WEEK,
+                       java.util.Calendar.SATURDAY);
+          cal.setStartDate(weekstart.getTime());
+          cal.setEndDate(weekend.getTime());
+
+          Notification.show("Custom zoom to week");
+      } else {
+        // Default behavior, change date range to one day
+        super.dateClick(event);
+      }
+    }
+  });
+----
+
+endif::web[]
+
+ifdef::web[]
+[[components.calendar.weekclick]]
+== Handling Week Clicks
+
+The monthly view displays week numbers for each week row on the left side of the
+date grid. The week number are clickable and you can handle the click events by
+setting a [interfacename]#WeekClickHandler# for the [classname]#Calendar#
+object. The default handler changes the date range to be the clicked week.
+
+In the following example, we add a week click handler that changes the date
+range of the calendar to one week only if the start and end dates of the week
+are in the current month.
+
+
+[source, java]
+----
+cal.setHandler(new BasicWeekClickHandler() {
+    protected void setDates(WeekClick event,
+                          Date start, Date end) {
+        java.util.Calendar calendar = event.getComponent()
+                                  .getInternalCalendar();
+        if (isThisMonth(calendar, start) 
+            && isThisMonth(calendar,  end)) {
+            super.setDates(event, start, end);
+        }
+    }
+});
+----
+
+endif::web[]
+
+ifdef::web[]
+[[components.calendar.eventclick]]
+== Handling Event Clicks
+
+The calendar events in all views are are clickable. There is no default handler.
+Just like the date and week click handlers, event click handling is enabled by
+setting an [interfacename]#EventClickHandler# for the [classname]#Calendar#
+object.
+
+You can get hold of the clicked event by the [methodname]#getCalendarEvent()#
+method in the [classname]#EventClick# object passed to the handler, as shown in
+the following example.
+
+
+[source, java]
+----
+cal.setHandler(new EventClickHandler() {
+    public void eventClick(EventClick event) {
+        BasicEvent e = (BasicEvent) event.getCalendarEvent();
+
+        // Do something with it
+        new Notification("Event clicked: " + e.getCaption(),
+            e.getDescription()).show(Page.getCurrent());
+    }
+});
+----
+
+endif::web[]
+
+ifdef::web[]
+[[components.calendar.eventdrag]]
+== Event Dragging
+
+The user can drag an event to change its position in time. The default handler
+sets the start and end time of the event accordingly. You can do many things
+with a custom move handler, such as restrict moving events.
+
+In the following example, we add a [interfacename]#EventMoveHandler# to a
+[classname]#Calendar#. The event handler updates the new position to the
+datasource, but only if the new dates are in the current month. This requires
+making some changes to the event provider class.
+
+
+[source, java]
+----
+cal.setHandler(new BasicEventMoveHandler() {
+  private java.util.Calendar javaCalendar;
+
+  public void eventMove(MoveEvent event) {
+    javaCalendar = event.getComponent().getInternalCalendar();
+    super.eventMove(event);
+  }
+  
+  protected void setDates(CalendarEventEditor event,
+                          Date start, Date end) {
+    if (isThisMonth(javaCalendar, start)
+        && isThisMonth(javaCalendar, end)) {
+      super.setDates(event, start, end);
+    }
+  }
+});
+----
+
+For the above example to work, the example event provider presented earlier
+needs to be changed slightly so that it doesn't always create a new event when
+[methodname]#getEvents()# is called.
+
+
+[source, java]
+----
+public static class MyEventProvider
+              implements CalendarEventProvider {
+  private List<CalendarEvent> events =
+        new ArrayList<CalendarEvent>();
+
+  public MyEventProvider() {
+    events = new ArrayList<CalendarEvent>();
+    GregorianCalendar cal = new GregorianCalendar();
+    cal.setTime(new Date());
+
+    Date start = cal.getTime();
+    cal.add(GregorianCalendar.HOUR, 5);
+    Date end = cal.getTime();
+    BasicEvent event = new BasicEvent();
+    event.setCaption("My Event");
+    event.setDescription("My Event Description");
+    event.setStart(start);
+    event.setEnd(end);
+    events.add(event);
+  }
+
+  public void addEvent(CalendarEvent BasicEvent) {
+    events.add(BasicEvent);
+  }
+
+  public List<CalendarEvent> getEvents(Date startDate, 
+                                       Date endDate) {
+    return events;
+  }
+}
+----
+
+After these changes, the user can move events around as earlier, but dropping an
+event, the start and end dates are checked by the server. Note that as the
+server-side must move the event in order for it to render to the place it was
+dropped. The server can also reject moves by not doing anything when the event
+is received.
+
+endif::web[]
+
+ifdef::web[]
+[[components.calendar.dragselection]]
+== Handling Drag Selection
+
+Drag selection works both in the monthly and weekly views. To listen for drag
+selection, you can add a [interfacename]#RangeSelectListener# to the
+[classname]#Calendar#. There is no default handler for range select.
+
+In the code example below, we create an new event when any date range is
+selected. Drag selection opens a window where the user is asked for a caption
+for the new event. After confirming, the new event is be passed to the event
+provider and calendar is updated. Note that as our example event provider and
+event classes do not implement the event change interface, we must refresh the
+[classname]#Calendar# manually after changing the events.
+
+
+[source, java]
+----
+cal.setHandler(new RangeSelectHandler() {
+  public void rangeSelect(RangeSelectEvent event) {
+    BasicEvent calendarEvent = new BasicEvent();
+    calendarEvent.setStart(event.getStart());
+    calendarEvent.setEnd(event.getEnd());
+
+    // Create popup window and add a form in it.
+    VerticalLayout layout = new VerticalLayout();
+    layout.setMargin(true);
+    layout.setSpacing(true);
+
+    final Window w = new Window(null, layout);
+    ...
+
+    // Wrap the calendar event to a BeanItem 
+    // and pass it to the form
+    final BeanItem<CalendarEvent> item = 
+                         new BeanItem<CalendarEvent>(myEvent);
+
+    final Form form = new Form();
+    form.setItemDataSource(item);
+    ...
+
+    layout.addComponent(form);
+
+    HorizontalLayout buttons = new HorizontalLayout();
+    buttons.setSpacing(true);
+    buttons.addComponent(new Button("OK", new ClickListener() {
+
+        public void buttonClick(ClickEvent event) {
+            form.commit();
+
+            // Update event provider's data source
+            provider.addEvent(item.getBean());
+
+            UI.getCurrent().removeWindow(w);
+        }
+    }));
+
+    ...
+  }
+});
+----
+
+endif::web[]
+
+ifdef::web[]
+[[components.calendar.eventresizing]]
+== Resizing Events
+
+The user can resize an event by dragging from both ends to change its start or
+end time. This offers a convenient way to change event times without the need to
+type anything. The default resize handler sets the start and end time of the
+event according to the resize.
+
+In the example below, we set a custom handler for resize events. The handler
+prevents any event to be resized over 12 hours in length. Note that this does
+not prevent the user from resizing an event over 12 hours in the client. The
+resize will just be corrected by the server.
+
+
+[source, java]
+----
+cal.setHandler(new BasicEventResizeHandler() {
+  private static final long twelveHoursInMs = 12*60*60*1000;
+
+  protected void setDates(CalendarEventEditor event, 
+                          Date start, Date end) {
+    long eventLength = end.getTime() - start.getTime();
+    if (eventLength <= twelveHoursInMs) {
+      super.setDates(event, start, end);
+    }
+  }
+});
+----
+
+endif::web[]
+
+
+
diff --git a/documentation/components/components-checkbox.asciidoc b/documentation/components/components-checkbox.asciidoc
new file mode 100644
index 0000000000..95a60cd5fa
--- /dev/null
+++ b/documentation/components/components-checkbox.asciidoc
@@ -0,0 +1,72 @@
+---
+title: CheckBox
+order: 15
+layout: page
+---
+
+[[components.checkbox]]
+= [classname]#CheckBox#
+
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/other/check-box]
+endif::web[]
+
+[classname]#CheckBox# is a two-state selection component that can be either
+checked or unchecked. The caption of the check box will be placed right of the
+actual check box. Vaadin provides two ways to create check boxes: individual
+check boxes with the [classname]#CheckBox# component described in this section
+and check box groups with the [classname]#OptionGroup# component in multiple
+selection mode, as described in
+<<dummy/../../../framework/components/components-optiongroup#components.optiongroup,"OptionGroup">>.
+
+Clicking on a check box will change its state. The state is a
+[classname]#Boolean# property that you can set with the [methodname]#setValue()#
+method and obtain with the [methodname]#getValue()# method of the
+[classname]#Property# interface. Changing the value of a check box will cause a
+[classname]#ValueChangeEvent#, which can be handled by a
+[classname]#ValueChangeListener#.
+
+
+[source, java]
+----
+CheckBox checkbox1 = new CheckBox("Box with no Check");
+CheckBox checkbox2 = new CheckBox("Box with a Check");
+
+checkbox2.setValue(true);
+
+checkbox1.addValueChangeListener(event -> // Java 8
+    checkbox2.setValue(! checkbox1.getValue()));
+
+checkbox2.addValueChangeListener(event -> // Java 8
+    checkbox1.setValue(! checkbox2.getValue()));
+----
+
+The result is shown in <<figure.components.checkbox.basic>>.
+
+[[figure.components.checkbox.basic]]
+.An Example of a Check Box
+image::img/checkbox-example1.png[]
+
+For an example on the use of check boxes in a table, see
+<<dummy/../../../framework/components/components-table#components.table,"Table">>.
+
+== CSS Style Rules
+
+
+[source, css]
+----
+.v-checkbox { }
+  .v-checkbox > input { }
+  .v-checkbox > label { }
+----
+
+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.
+
+
+
+
diff --git a/documentation/components/components-combobox.asciidoc b/documentation/components/components-combobox.asciidoc
new file mode 100644
index 0000000000..f119cfbc40
--- /dev/null
+++ b/documentation/components/components-combobox.asciidoc
@@ -0,0 +1,112 @@
+---
+title: ComboBox
+order: 16
+layout: page
+---
+
+[[components.combobox]]
+= [classname]#ComboBox#
+
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/multiple-value/combo-box]
+endif::web[]
+
+[classname]#ComboBox# is a selection component allows selecting an item from a
+drop-down list. The component also has a text field area, which allows entering
+search text by which the items shown in the drop-down list are filtered. Common
+selection component features are described in
+<<dummy/../../../framework/components/components-selection#components.selection,"Selection
+Components">>.
+
+.The [classname]#ComboBox# Component
+image::img/combobox-basic.png[]
+
+[classname]#ComboBox# supports adding new items when the user presses
+kbd:[Enter].
+ifdef::web[]
+See <<dummy/../../../framework/components/components-selection#components.selection.newitems,"Allowing Adding New Items">>.
+endif::web[]
+
+[[components.combobox.filtering]]
+== Filtered Selection
+
+[classname]#ComboBox# allows filtering the items available for selection in the
+drop-down list by the text entered in the input box.
+
+[[figure.components.combobox.filter]]
+.Filtered Selection in [classname]#ComboBox#
+image::img/combobox-filtering.png[]
+
+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
+next or previous page. The list selection can also be done with the arrow keys
+on the keyboard. The shown items are loaded from the server as needed, so the
+number of items held in the component can be quite large. The number of matching
+items is displayed by the drop-down list.
+
+Filtering is enabled by setting a __filtering mode__ with
+[methodname]#setFilteringMode()#.
+
+
+[source, java]
+----
+cb.setFilteringMode(FilteringMode.CONTAINS);
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.select.combobox.filtering[on-line example, window="_blank"].
+
+The modes defined in the [classname]#FilteringMode# enum are as follows:
+
+[parameter]#CONTAINS#:: Matches any item that contains the string given in the text field part of the
+component.
+
+[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.
+
+
+
+The above example uses the containment filter that matches to all items
+containing the input string. As shown in <<figure.components.combobox.filter>>
+below, when we type some text in the input area, the drop-down list will show
+all the matching items.
+
+
+[[components.combobox.css]]
+== CSS Style Rules
+
+
+[source, css]
+----
+.v-filterselect { }
+  .v-filterselect-input { }
+  .v-filterselect-button { }
+
+// Under v-overlay-container
+.v-filterselect-suggestpopup { }
+  .popupContent { }
+    .v-filterselect-prevpage,
+      .v-filterselect-prevpage-off { }
+    .v-filterselect-suggestmenu { }
+      .gwt-MenuItem { }
+    .v-filterselect-nextpage,
+      .v-filterselect-nextpage-off { }
+    .v-filterselect-status { }
+----
+
+In its default state, only the input field of the [classname]#ComboBox#
+component is visible. The entire component is enclosed in
+[literal]#++v-filterselect++# style (a legacy remnant), the input field has
+[literal]#++v-filterselect-input++# style and the button in the right end that
+opens and closes the drop-down result list has
+[literal]#++v-filterselect-button++# style.
+
+The drop-down result list has an overall
+[literal]#++v-filterselect-suggestpopup++# style. It contains the list of
+suggestions with [literal]#++v-filterselect-suggestmenu++# style. When there are
+more items that fit in the menu, navigation buttons with
+[literal]#++v-filterselect-prevpage++# and
+[literal]#++v-filterselect-nextpage++# styles are shown. When they are not
+shown, the elements have [literal]#++-off++# suffix. The status bar in the
+bottom that shows the paging status has [literal]#++v-filterselect-status++#
+style.
diff --git a/documentation/components/components-customcomponent.asciidoc b/documentation/components/components-customcomponent.asciidoc
new file mode 100644
index 0000000000..cce897daa9
--- /dev/null
+++ b/documentation/components/components-customcomponent.asciidoc
@@ -0,0 +1,87 @@
+---
+title: Composition with CustomComponent
+order: 31
+layout: page
+---
+
+[[components.customcomponent]]
+= Composition with [classname]#CustomComponent#
+
+The ease of making new user interface components is one of the core features of
+Vaadin. Typically, you simply combine existing built-in components to produce
+composite components. In many applications, such composite components make up
+the majority of the user interface.
+
+As described earlier in
+<<dummy/../../../framework/application/application-architecture#application.architecture.composition,"Compositing
+Components">>, you have two basic ways to create a composite - either by
+extending a layout component or the [classname]#CustomComponent#, which
+typically wraps around a layout component. The benefit of wrapping a layout
+composite in [classname]#CustomComponent# is mainly encapsulation - hiding the
+implementation details of the composition. Otherwise, a user of the composite
+could rely on implementation details, which would create an unwanted dependency.
+
+To create a composite, you need to inherit the [classname]#CustomComponent# and
+set the __composition root__ component in the constructor. The composition root
+is typically a layout component that contains other components.
+
+For example:
+
+
+[source, java]
+----
+class MyComposite extends CustomComponent {
+    public MyComposite(String message) {
+        // A layout structure used for composition
+        Panel panel = new Panel("My Custom Component");
+        VerticalLayout panelContent = new VerticalLayout();
+        panelContent.setMargin(true); // Very useful
+        panel.setContent(panelContent);
+        
+        // Compose from multiple components
+        Label label = new Label(message);
+        label.setSizeUndefined(); // Shrink
+        panelContent.addComponent(label);
+        panelContent.addComponent(new Button("Ok"));
+
+        // Set the size as undefined at all levels
+        panelContent.setSizeUndefined();
+        panel.setSizeUndefined();
+        setSizeUndefined();
+
+        // The composition root MUST be set
+        setCompositionRoot(panel);
+    }
+}
+----
+
+Take note of the sizing when trying to make a customcomponent that shrinks to
+fit the contained components. You have to set the size as undefined at all
+levels; the sizing of the composite component and the composition root are
+separate.
+
+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[]
+
+You can also inherit any other components, such as layouts, to attain similar
+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">>.
+
+
+
diff --git a/documentation/components/components-customfield.asciidoc b/documentation/components/components-customfield.asciidoc
new file mode 100644
index 0000000000..f57eb2debf
--- /dev/null
+++ b/documentation/components/components-customfield.asciidoc
@@ -0,0 +1,33 @@
+---
+title: Composite Fields with CustomField
+order: 32
+layout: page
+---
+
+[[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.
+
+It is also possible to override [methodname]#validate()#,
+[methodname]#setInternalValue()#, [methodname]#commit()#,
+[methodname]#setPropertyDataSource#, [methodname]#isEmpty()# and other methods
+to implement different functionalities in the field. Methods overriding
+[methodname]#setInternalValue()# should call the superclass method.
+
+
+
diff --git a/documentation/components/components-datefield.asciidoc b/documentation/components/components-datefield.asciidoc
new file mode 100644
index 0000000000..0f15a0f6ad
--- /dev/null
+++ b/documentation/components/components-datefield.asciidoc
@@ -0,0 +1,391 @@
+---
+title: Date and Time Input with DateField
+order: 13
+layout: page
+---
+
+[[components.datefield]]
+= Date and Time Input with [classname]#DateField#
+
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/dates/popup-date-field]
+endif::web[]
+
+The [classname]#DateField# component provides the means to display and input
+date and time. The field comes in two variations: [classname]#PopupDateField#,
+with a numeric input box and a popup calendar view, and
+[classname]#InlineDateField#, with the calendar view always visible. The
+[classname]#DateField# base class defaults to the popup variation.
+
+The example below illustrates the use of the [classname]#DateField# baseclass,
+which is equivalent to the [classname]#PopupDateField#. We set the initial time
+of the date field to current time by using the default constructor of the
+[classname]#java.util.Date# class.
+
+
+[source, java]
+----
+// Create a DateField with the default style
+DateField date = new DateField();
+	
+// Set the date and time to present
+date.setValue(new Date());
+----
+
+The result is shown in <<figure.components.datefield.basic>>.
+
+[[figure.components.datefield.basic]]
+.[classname]#DateField# ([classname]#PopupDateField#) for Selecting Date and Time
+image::img/datefield-example1.png[]
+
+[[components.datefield.popupdatefield]]
+== [classname]#PopupDateField#
+
+The [classname]#PopupDateField# provides date input using a text box for the
+date and time. As the [classname]#DateField# defaults to this component, the use
+is exactly the same as described earlier. Clicking the handle right of the date
+opens a popup view for selecting the year, month, and day, as well as time. Also
+the Down key opens the popup. Once opened, the user can navigate the calendar
+using the cursor keys.
+
+The date and time selected from the popup are displayed in the text box
+according to the default date and time format of the current locale, or as
+specified with [methodname]#setDateFormat()#. The same format definitions are
+used for parsing user input.
+
+[[components.datefield.popupdatefield.format]]
+=== Date and Time Format
+
+The date and time are normally displayed according to the default format for the
+current locale (see
+<<dummy/../../../framework/components/components-features#components.features.locale,"Locale">>).
+You can specify a custom format with [methodname]#setDateFormat()#. It takes a
+format string that follows the format of the [classname]#SimpleDateFormat# in
+Java.
+
+
+[source, java]
+----
+// Display only year, month, and day in ISO format
+date.setDateFormat("yyyy-MM-dd");
+----
+
+The result is shown in <<figure.components.datefield.popupdatefield.format>>.
+
+[[figure.components.datefield.popupdatefield.format]]
+.Custom Date Format for [classname]#PopupDateField#
+image::img/datefield-formatting.png[]
+
+The same format specification is also used for parsing user-input date and time,
+as described later.
+
+
+ifdef::web[]
+[[components.datefield.popupdatefield.malformed]]
+=== Handling Malformed User Input
+
+A user can easily input a malformed or otherwise invalid date or time.
+[classname]#DateField# has two validation layers: first on the client-side and
+then on the server-side.
+
+The validity of the entered date is first validated on the client-side,
+immediately when the input box loses focus. If the date format is invalid, the
+[literal]#++v-datefield-parseerror++# style is set. Whether this causes a
+visible indication of a problem depends on the theme. The built-in
+[literal]#++reindeer++# theme does not shown any indication by default, making
+server-side handling of the problem more convenient.
+
+
+[source, css]
+----
+.mydate.v-datefield-parseerror .v-textfield {
+    background: pink;
+}
+----
+
+The [methodname]#setLenient(true)# setting enables relaxed interpretation of
+dates, so that invalid dates, such as February 30th or March 0th, are wrapped to
+the next or previous month, for example.
+
+The server-side validation phase occurs when the date value is sent to the
+server. If the date field is set in immediate state, it occurs immediately after
+the field loses focus. Once this is done and if the status is still invalid, an
+error indicator is displayed beside the component. Hovering the mouse pointer
+over the indicator shows the error message.
+
+You can handle the errors by overriding the
+[methodname]#handleUnparsableDateString()# method. The method gets the user
+input as a string parameter and can provide a custom parsing mechanism, as shown
+in the following example.
+
+
+[source, java]
+----
+// Create a date field with a custom parsing and a
+// custom error message for invalid format
+PopupDateField date = new PopupDateField("My Date") {
+    @Override
+    protected Date handleUnparsableDateString(String dateString)
+    throws Property.ConversionException {
+        // Try custom parsing
+        String fields[] = dateString.split("/");
+        if (fields.length >= 3) {
+            try {
+                int year  = Integer.parseInt(fields[0]);
+                int month = Integer.parseInt(fields[1])-1;
+                int day   = Integer.parseInt(fields[2]);
+                GregorianCalendar c =
+                    new GregorianCalendar(year, month, day);
+                return c.getTime();
+            } catch (NumberFormatException e) {
+                throw new Property.
+                    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");
+
+// Don't be too tight about the validity of dates
+// on the client-side
+date.setLenient(true);
+----
+
+The handler method must either return a parsed [classname]#Date# object or throw
+a [classname]#ConversionException#. Returning [parameter]#null# will set the
+field value to [parameter]#null# and clear the input box.
+
+endif::web[]
+
+ifdef::web[]
+[[components.datefield.popupdatefield.error-customization]]
+=== Customizing the Error Message
+
+In addition to customized parsing, overriding the handler method for unparseable
+input is useful for internationalization and other customization of the error
+message. You can also use it for another way for reporting the errors, as is
+done in the example below:
+
+
+[source, java]
+----
+// Create a date field with a custom error message for invalid format
+PopupDateField date = new PopupDateField("My Date") {
+    @Override
+    protected Date handleUnparsableDateString(String dateString)
+    throws Property.ConversionException {
+        // Have a notification for the error
+        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");
+    }
+};
+----
+
+If the input is invalid, you should always throw the exception; returning a
+[parameter]#null# value would make the input field empty, which is probably
+undesired.
+
+endif::web[]
+
+[[components.datefield.popupdatefield.prompt]]
+=== Input Prompt
+
+Like other fields that have a text box, [classname]#PopupDateField# allows an
+input prompt that is visible until the user has input a value. You can set the
+prompt with [methodname]#setInputPrompt#.
+
+
+[source, java]
+----
+PopupDateField date = new PopupDateField();
+
+// Set the prompt
+date.setInputPrompt("Select a date");
+        
+// Set width explicitly to accommodate the prompt
+date.setWidth("10em");
+----
+
+The date field doesn't automatically scale to accommodate the prompt, so you
+need to set it explicitly with [methodname]#setWidth()#.
+
+The input prompt is not available in the [classname]#DateField# superclass.
+
+
+[[components.datefield.popupdatefield.css]]
+=== CSS Style Rules
+
+
+[source, css]
+----
+.v-datefield, v-datefield-popupcalendar {}
+  .v-textfield, v-datefield-textfield {}
+  .v-datefield-button {}
+----
+
+The top-level element of [classname]#DateField# and all its variants have
+[literal]#++v-datefield++# style. The base class and the
+[classname]#PopupDateField# also have the
+[literal]#++v-datefield-popupcalendar++# style.
+
+In addition, the top-level element has a style that indicates the resolution,
+with [literal]#++v-datefield-++# basename and an extension, which is one of
+[literal]#++full++#, [literal]#++day++#, [literal]#++month++#, or
+[literal]#++year++#. The [literal]#++-full++# style is enabled when the
+resolution is smaller than a day. These styles are used mainly for controlling
+the appearance of the popup calendar.
+
+The text box has [literal]#++v-textfield++# and
+[literal]#++v-datefield-textfield++# styles, and the calendar button
+[literal]#++v-datefield-button++#.
+
+Once opened, the calendar popup has the following styles at the top level:
+
+
+[source, css]
+----
+.v-datefield-popup {}
+  .v-popupcontent {}
+    .v-datefield-calendarpanel {}
+----
+
+The top-level element of the floating popup calendar has
+[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.
+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
+field.
+
+
+[source, java]
+----
+// Create a DateField with the default style
+InlineDateField date = new InlineDateField();
+    
+// Set the date and time to present
+date.setValue(new java.util.Date());
+----
+
+The result is shown in <<figure.components.datefield.inlinedatefield>>.
+
+[[figure.components.datefield.inlinedatefield]]
+.Example of the [classname]#InlineDateField#
+image::img/datefield-inlinedatefield.png[]
+
+The user can also navigate the calendar using the cursor keys.
+
+=== CSS Style Rules
+
+
+[source, css]
+----
+.v-datefield {}
+  .v-datefield-calendarpanel {}
+    .v-datefield-calendarpanel-header {}
+      .v-datefield-calendarpanel-prevyear {}
+      .v-datefield-calendarpanel-prevmonth {}
+      .v-datefield-calendarpanel-month {}
+      .v-datefield-calendarpanel-nextmonth {}
+      .v-datefield-calendarpanel-nextyear {}
+    .v-datefield-calendarpanel-body {}
+      .v-datefield-calendarpanel-weekdays,
+      .v-datefield-calendarpanel-weeknumbers {}
+        .v-first {}
+        .v-last {}
+      .v-datefield-calendarpanel-weeknumber {}
+      .v-datefield-calendarpanel-day {}
+    .v-datefield-calendarpanel-time {}
+      .v-datefield-time {}
+        .v-select {}
+        .v-label {}
+----
+
+The top-level element has the [literal]#++v-datefield++# style. In addition, the
+top-level element has a style name that indicates the resolution of the
+calendar, with [literal]#++v-datefield-++# basename and an extension, which is
+one of [literal]#++full++#, [literal]#++day++#, [literal]#++month++#, or
+[literal]#++year++#. The [literal]#++-full++# style is enabled when the
+resolution is smaller than a day.
+
+The [literal]#++v-datefield-calendarpanel-weeknumbers++# and
+[literal]#++v-datefield-calendarpanel-weeknumber++# styles are enabled when the
+week numbers are enabled. The former controls the appearance of the weekday
+header and the latter the actual week numbers.
+
+The other style names should be self-explanatory. For weekdays, the
+[literal]#++v-first++# and [literal]#++v-last++# styles allow making rounded
+endings for the weekday bar.
+
+
+
+[[components.datefield.resolution]]
+== Date and Time Resolution
+
+In addition to display a calendar with dates, [classname]#DateField# can also
+display the time in hours and minutes, or just the month or year. The visibility
+of the input components is controlled by __time resolution__, which you can set
+with [methodname]#setResolution()#. The method takes as its parameters the
+lowest visible component, [parameter]#DateField.Resolution.DAY# for just dates
+and [parameter]#DateField.Resolution.MIN# for dates with time in hours and
+minutes. Please see the API Reference for the complete list of resolution
+parameters.
+
+
+[[components.datefield.locale]]
+== DateField Locale
+
+The date and time are displayed according to the locale of the user, as reported
+by the browser. You can set a custom locale with the [methodname]#setLocale()#
+method of [classname]#AbstractComponent#, as described in
+<<dummy/../../../framework/components/components-features#components.features.locale,"Locale">>.
+Only Gregorian calendar is supported.
+
+
+ifdef::web[]
+[[components.datefield.weeknumbers]]
+== Week Numbers
+
+You can enable week numbers in a date field with
+[methodname]#setShowISOWeekNumbers()#. The numbers are shown in a column on the
+left side of the field.
+
+
+[source, java]
+----
+df.setShowISOWeekNumbers(true);
+----
+
+The supported numbering is defined in the ISO 8601 standard. Note that the ISO
+standard applies only to calendar locales where the week starts on Monday. This
+is not the case in many countries, such as Americas (North and South), many
+East-Asian countries, and some African countries, where the week starts on
+Sunday, nor in some North African and Middle-Eastern countries, where the week
+begins on Saturday. In such locales, the week numbers are not displayed.
+
+endif::web[]
+
+
+
diff --git a/documentation/components/components-embedded.asciidoc b/documentation/components/components-embedded.asciidoc
new file mode 100644
index 0000000000..bea83971a8
--- /dev/null
+++ b/documentation/components/components-embedded.asciidoc
@@ -0,0 +1,205 @@
+---
+title: Embedded Resources
+order: 33
+layout: page
+---
+
+[[components.embedded]]
+= Embedded Resources
+
+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">>.
+
+The following example displays an image as a class resource loaded with the
+class loader:
+
+
+[source, java]
+----
+Image image = new Image("Yes, logo:",
+    new ClassResource("vaadin-logo.png"));
+main.addComponent(image);
+----
+
+The caption can be given as null to disable it. An empty string displays an
+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
+[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.
+
+[[components.embedded.image]]
+== Embedded [classname]#Image#
+
+The [classname]#Image# component allows embedding an image resource in a Vaadin
+UI.
+
+
+[source, java]
+----
+// Serve the image from the theme
+Resource res = new ThemeResource("img/myimage.png");
+
+// Display the image without caption
+Image image = new Image(null, res);
+layout.addComponent(image);
+----
+
+The [classname]#Image# component has by default undefined size in both
+directions, so it will automatically fit the size of the embedded image.
+((("scroll
+bars")))
+If you want scrolling with scroll bars, you can put the image inside a
+[classname]#Panel# that has a defined size to enable scrolling, as described in
+<<dummy/../../../framework/layout/layout-panel#layout.panel.scrolling,"Scrolling
+the Panel Content">>. You can also put it inside some other component container
+and set the [literal]#++overflow: auto++# CSS property for the container element
+in a theme to enable automatic scrollbars. (((overflow CSS
+property)))
+
+[[components.embedded.image.generated]]
+=== Generating and Reloading Images
+
+You can also generate the image content dynamically using a
+[classname]#StreamResource#, as described in
+<<dummy/../../../framework/application/application-resources#application.resources.stream,"Stream
+Resources">>, or with a [classname]#RequestHandler#.
+
+If the image changes, the browser needs to reload it. Simply updating the stream
+resource is not enough. Because of how caching is handled in some browsers, you
+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.
+
+
+[source, java]
+----
+// Create the stream resource with some initial filename
+StreamResource imageResource =
+    new StreamResource(imageSource, "initial-filename.png");
+
+// Instruct browser not to cache the image
+imageResource.setCacheTime(0);
+
+// Display the image
+Image image = new Image(null, imageResource);
+----
+
+When refreshing, you also need to call [methodname]#markAsDirty()# for the
+[classname]#Image# object.
+
+
+[source, java]
+----
+// This needs to be done, but is not sufficient
+image.markAsDirty();
+
+// Generate a filename with a timestamp
+SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS");
+String filename = "myfilename-" + df.format(new Date()) + ".png";
+
+// Replace the filename in the resource
+imageResource.setFilename(makeImageFilename());
+----
+
+
+
+[[components.embedded.flash]]
+== Adobe [classname]#Flash# Graphics
+
+The [classname]#Flash# component allows embedding Adobe Flash animations in
+Vaadin UIs.
+
+
+[source, java]
+----
+Flash flash = new Flash(null,
+    new ThemeResource("img/vaadin_spin.swf"));
+layout.addComponent(flash);
+----
+
+You can set Flash parameters with [methodname]#setParameter()#, which takes a
+parameter's name and value as strings. You can also set the
+[parameter]#codeBase#, [parameter]#archive#, and [parameter]#standBy# attributes
+for the Flash object element in HTML.
+
+
+[[components.embedded.browserframe]]
+== [classname]#BrowserFrame#
+
+The [classname]#BrowserFrame# allows embedding web content inside an HTML
+&lt;iframe&gt; element. You can refer to an external URL with
+[classname]#ExternalResource#.
+
+As the [classname]#BrowserFrame# has undefined size by default, it is critical
+that you define a meaningful size for it, either fixed or relative.
+
+
+[source, java]
+----
+BrowserFrame browser = new BrowserFrame("Browser",
+    new ExternalResource("http://demo.vaadin.com/sampler/"));
+browser.setWidth("600px");
+browser.setHeight("400px");
+layout.addComponent(browser);
+----
+
+Notice that web pages can prevent embedding them in an &lt;iframe&gt;.
+
+
+[[components.embedded.embedded]]
+== Generic [classname]#Embedded# Objects
+
+The generic [classname]#Embedded# component allows embedding all sorts of
+objects, such as SVG graphics, Java applets, and PDF documents, in addition to
+the images, Flash graphics, and browser frames which you can embed with the
+specialized components.
+
+For example, to display a Flash animation:
+
+
+[source, java]
+----
+// A resource reference to some object
+Resource res = new ThemeResource("img/vaadin_spin.swf");
+
+// Display the object
+Embedded object = new Embedded("My Object", res);
+layout.addComponent(object);
+----
+
+Or an SVG image:
+
+
+[source, java]
+----
+// A resource reference to some object
+Resource res = new ThemeResource("img/reindeer.svg");
+
+// Display the object
+Embedded object = new Embedded("My SVG", res);
+object.setMimeType("image/svg+xml"); // Unnecessary
+layout.addComponent(object);
+----
+
+The MIME type of the objects is usually detected automatically from the filename
+extension with the [classname]#FileTypeResolver# utility in Vaadin. If not, you
+can set it explicitly with [methodname]#setMimeType()#, as was done in the
+example above (where it was actually unnecessary).
+
+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.
+
+
+
+
diff --git a/documentation/components/components-extensions.asciidoc b/documentation/components/components-extensions.asciidoc
new file mode 100644
index 0000000000..a84ad92f6e
--- /dev/null
+++ b/documentation/components/components-extensions.asciidoc
@@ -0,0 +1,38 @@
+---
+title: Component Extensions
+order: 6
+layout: page
+---
+
+[[components.extensions]]
+= Component Extensions
+
+Components and UIs can have extensions which are attached to the component
+dynamically. Especially, many add-ons are extensions.
+
+How a component is extended depends on the extension. Typically, they have an
+[methodname]#extend()# method that takes the component to be extended as the
+parameter.
+
+
+[source, java]
+----
+TextField tf = new TextField("Hello");
+layout.addComponent(tf);
+
+// Add a simple extension
+new CapsLockWarning().extend(tf);
+
+// Add an extension that requires some parameters
+CSValidator validator = new CSValidator();
+validator.setRegExp("[0-9]*");
+validator.setErrorMessage("Must be a number");
+validator.extend(tf);
+----
+
+Development of custom extensions is described in
+<<dummy/../../../framework/gwt/gwt-extension#gwt.extension,"Component and UI
+Extensions">>.
+
+
+
diff --git a/documentation/components/components-features.asciidoc b/documentation/components/components-features.asciidoc
new file mode 100644
index 0000000000..9374b93bc1
--- /dev/null
+++ b/documentation/components/components-features.asciidoc
@@ -0,0 +1,757 @@
+---
+title: Common Component Features
+order: 3
+layout: page
+---
+
+[[components.features]]
+= Common Component Features
+
+The component base classes and interfaces provide a large number of features.
+Let us look at some of the most commonly needed features. Features not
+documented here can be found from the Java API Reference.
+
+The interface defines a number of properties, which you can retrieve or
+manipulate with the corresponding setters and getters.
+
+[[components.features.caption]]
+== Caption
+
+((("caption property")))
+((("Component interface", "caption")))
+A caption is an explanatory textual label accompanying a user interface
+component, usually shown above, left of, or inside the component. The contents
+of a caption are automatically quoted, so no raw HTML can be rendered in a
+caption.
+
+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"
+TextField name = new TextField("Name");
+layout.addComponent(name);
+----
+
+The caption of a component is, by default, managed and displayed by the layout
+component or component container inside which the component is placed. For
+example, the [classname]#VerticalLayout# component shows the captions
+left-aligned above the contained components, while the [classname]#FormLayout#
+component shows the captions on the left side of the vertically laid components,
+with the captions and their associated components left-aligned in their own
+columns. The [classname]#CustomComponent# does not manage the caption of its
+composition root, so if the root component has a caption, it will not be
+rendered.
+
+[[figure.components.features.caption.layoutmanaged]]
+.Caption Management by [classname]#VerticalLayout# and [classname]#FormLayout#.
+image::img/features-caption-layoutmanaged.png[]
+
+Some components, such as [classname]#Button# and [classname]#Panel#, manage the
+caption themselves and display it inside the component.
+
+Icon (see <<components.features.icon>>) is closely related to caption and is
+usually displayed horizontally before or after it, depending on the component
+and the containing layout. Also the required indicator in field components is
+usually shown before or after the caption.
+
+An alternative way to implement a caption is to use another component as the
+caption, typically a [classname]#Label#, a [classname]#TextField#, or a
+[classname]#Panel#. A [classname]#Label#, for example, allows highlighting a
+shortcut key with HTML markup or to bind the caption to a data source. The
+[classname]#Panel# provides an easy way to add both a caption and a border
+around a component.
+
+=== CSS Style Rules
+
+
+[source, css]
+----
+.v-caption {}
+  .v-captiontext {}
+  .v-caption-clearelem {}
+  .v-required-field-indicator {}
+----
+
+A caption is be rendered inside an HTML element that has the
+[literal]#++v-caption++# CSS style class. The containing layout may enclose a
+caption inside other caption-related elements.
+
+Some layouts put the caption text in a [literal]#++v-captiontext++# element. A
+[literal]#++v-caption-clearelem++# is used in some layouts to clear a CSS
+[literal]#++float++# property in captions. An optional required indicator in
+field components is contained in a separate element with
+[literal]#++v-required-field-indicator++# style.
+
+
+
+[[components.features.description]]
+== Description and Tooltips
+
+((("description property")))
+((("Component interface", "description")))
+((("tooltips")))
+All components (that inherit [classname]#AbstractComponent#) have a description
+separate from their caption. The description is usually shown as a tooltip that
+appears when the mouse pointer hovers over the component for a short time.
+
+You can set the description with [methodname]#setDescription()# and retrieve
+with [methodname]#getDescription()#.
+
+
+[source, java]
+----
+Button button = new Button("A Button");
+button.setDescription("This is the tooltip");
+----
+
+The tooltip is shown in <<figure.components.tooltip.plain>>.
+
+[[figure.components.tooltip.plain]]
+.Component Description as a Tooltip
+image::img/tooltip-plain-withpointer-hi.png[]
+
+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">>.
+
+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
+images.
+
+
+[source, java]
+----
+button.setDescription(
+    "<h2><img src=\"../VAADIN/themes/sampler/icons/comment_yellow.gif\"/>"+
+    "A richtext tooltip</h2>"+
+    "<ul>"+
+    "  <li>Use rich formatting with HTML</li>"+
+    "  <li>Include images from themes</li>"+
+    "  <li>etc.</li>"+
+    "</ul>");
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.features.description.richtext[on-line example, window="_blank"].
+
+The result is shown in <<figure.components.tooltip.richtext>>.
+
+[[figure.components.tooltip.richtext]]
+.A Rich Text Tooltip
+image::img/tooltip-richtext-withpointer-hi.png[]
+
+Notice that the setter and getter are defined for all fields in the
+[classname]#Field# interface, not for all components in the
+[classname]#Component# interface.
+
+
+[[components.features.enabled]]
+== Enabled
+
+((("enabled property")))
+((("Component interface", "enabled")))
+The __enabled__ property controls whether the user can actually use the
+component. A disabled component is visible, but grayed to indicate the disabled
+state.
+
+Components are always enabled by default. You can disable a component with
+[methodname]#setEnabled(false)#.
+
+
+[source, java]
+----
+Button enabled = new Button("Enabled");
+enabled.setEnabled(true); // The default
+layout.addComponent(enabled);
+        
+Button disabled = new Button("Disabled");
+disabled.setEnabled(false);
+layout.addComponent(disabled);
+----
+
+<<figure.components.features.enabled.simple>> shows the enabled and disabled
+buttons.
+
+[[figure.components.features.enabled.simple]]
+.An Enabled and Disabled [classname]#Button#
+image::img/features-enabled-simple.png[]
+
+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
+security feature, the server-side components do not receive state updates from
+the client in the read-only state. This feature exists in all built-in
+components in Vaadin and is automatically handled for all [classname]#Field#
+components for the field property value. For custom widgets, you need to make
+sure that the read-only state is checked on the server-side for all
+safety-critical variables.
+
+=== CSS Style Rules
+
+Disabled components have the [literal]#++v-disabled++# CSS style in addition to
+the component-specific style. To match a component with both the styles, you
+have to join the style class names with a dot as done in the example below.
+
+
+[source, css]
+----
+.v-textfield.v-disabled {
+    border: dotted;
+}
+----
+
+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[]
+.
+
+
+[[components.features.icon]]
+== Icon
+
+((("icon property")))
+((("Component interface", "icon")))
+An icon is an explanatory graphical label accompanying a user interface
+component, usually shown above, left of, or inside the component. Icon is
+closely related to caption (see <<components.features.caption>>) and is usually
+displayed horizontally before or after it, depending on the component and the
+containing layout.
+
+The icon of a component can be set with the [methodname]#setIcon()# method. The
+image is provided as a resource, perhaps most typically a
+[classname]#ThemeResource#.
+
+
+[source, java]
+----
+// Component with an icon from a custom theme
+TextField name = new TextField("Name");
+name.setIcon(new ThemeResource("icons/user.png"));
+layout.addComponent(name);
+        
+// Component with an icon from another theme ('runo')
+Button ok = new Button("OK");
+ok.setIcon(new ThemeResource("../runo/icons/16/ok.png"));
+layout.addComponent(ok);
+----
+
+The icon of a component is, by default, managed and displayed by the layout
+component or component container in which the component is placed. For example,
+the [classname]#VerticalLayout# component shows the icons left-aligned above the
+contained components, while the [classname]#FormLayout# component shows the
+icons on the left side of the vertically laid components, with the icons and
+their associated components left-aligned in their own columns. The
+[classname]#CustomComponent# does not manage the icon of its composition root,
+so if the root component has an icon, it will not be rendered.
+
+[[figure.components.features.icon]]
+.Displaying an Icon from a Theme Resource.
+image::img/features-icon.png[]
+
+Some components, such as [classname]#Button# and [classname]#Panel#, manage the
+icon themselves and display it inside the component.
+
+In addition to image resources, you can use __font icons__, which are icons
+included in special fonts, but which are handled as special resources. See
+<<dummy/../../../framework/themes/themes-fonticon#themes.fonticon,"Font Icons">>
+for more details.
+
+=== CSS Style Rules
+
+An icon will be rendered inside an HTML element that has the
+[literal]#++v-icon++# CSS style class. The containing layout may enclose an icon
+and a caption inside elements related to the caption, such as
+[literal]#++v-caption++#.
+
+
+
+[[components.features.locale]]
+== Locale
+
+((("locale property", "in [classname]#Component#")))
+((("Component interface", "locale")))
+The locale property defines the country and language used in a component. You
+can use the locale information in conjunction with an internationalization
+scheme to acquire localized resources. Some components, such as
+[classname]#DateField#, use the locale for component localization.
+
+You can set the locale of a component (or the application) with
+[methodname]#setLocale()# as follows:
+
+
+[source, java]
+----
+// Component for which the locale is meaningful
+InlineDateField date = new InlineDateField("Datum");
+        
+// German language specified with ISO 639-1 language
+// code and ISO 3166-1 alpha-2 country code. 
+date.setLocale(new Locale("de", "DE"));
+        
+date.setResolution(Resolution.DAY);
+layout.addComponent(date);
+----
+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>>.
+
+[[figure.components.features.locale.simple]]
+.Set Locale for [classname]#InlineDateField#
+image::img/features-locale-simple.png[]
+
+ifdef::web[]
+[[components.features.locale.get]]
+=== Getting the Locale
+
+((("[methodname]#getLocale()#")))
+You can get the locale of a component with [methodname]#getLocale()#. If the
+locale is undefined for a component, that is, not explicitly set, the locale of
+the parent component is used. If none of the parent components have a locale
+set, the locale of the UI is used, and if that is not set, the default system
+locale is set, as given by [methodname]#Locale.getDefault()#.
+
+The [methodname]#getLocale()# returns null if the component is not yet attached
+to the UI, which is usually the case in most constructors, so it is a bit
+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() {
+    @Override
+    public void attach() {
+        super.attach();
+        ResourceBundle bundle = ResourceBundle.getBundle(
+            MyAppCaptions.class.getName(), getLocale());
+        setCaption(bundle.getString(MyAppCaptions.CancelKey));
+    }
+};
+layout.addComponent(cancel);
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.features.locale.get-attach[on-line example, window="_blank"].
+
+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
+// and the UI object is known in this context.
+ResourceBundle bundle =
+    ResourceBundle.getBundle(MyAppCaptions.class.getName(),
+        UI.getCurrent().getLocale());
+        
+// Get a localized resource from the bundle
+Button cancel =
+    new Button(bundle.getString(MyAppCaptions.CancelKey));
+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[]
+[[component.features.locale.selecting]]
+=== Selecting a Locale
+
+A common task in many applications is selecting a locale. This is done in the
+following example with a [classname]#ComboBox#, which gets the available locales
+in Java.
+
+
+[source, java]
+----
+// The locale in which we want to have the language
+// selection list
+Locale displayLocale = Locale.ENGLISH;
+        
+// All known locales
+final Locale[] locales = Locale.getAvailableLocales();
+        
+// Allow selecting a language. We are in a constructor of a
+// CustomComponent, so preselecting the current
+// language of the application can not be done before
+// this (and the selection) component are attached to
+// the application.
+final ComboBox select = new ComboBox("Select a language") {
+    @Override
+    public void attach() {
+        super.attach();
+        setValue(getLocale());
+    }
+};
+for (int i=0; i<locales.length; i++) {
+    select.addItem(locales[i]);
+    select.setItemCaption(locales[i],
+                          locales[i].getDisplayName(displayLocale));
+    
+    // Automatically select the current locale
+    if (locales[i].equals(getLocale()))
+        select.setValue(locales[i]);
+}
+layout.addComponent(select);
+
+// Locale code of the selected locale
+final Label localeCode = new Label("");
+layout.addComponent(localeCode);
+
+// A date field which language the selection will change
+final InlineDateField date =
+    new InlineDateField("Calendar in the selected language");
+date.setResolution(Resolution.DAY);
+layout.addComponent(date);
+        
+// Handle language selection
+select.addValueChangeListener(new Property.ValueChangeListener() {
+    public void valueChange(ValueChangeEvent event) {
+        Locale locale = (Locale) select.getValue();
+        date.setLocale(locale);
+        localeCode.setValue("Locale code: " +
+                            locale.getLanguage() + "_" +
+                            locale.getCountry());
+    }
+});
+select.setImmediate(true);
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.features.locale.selection[on-line example, window="_blank"].
+
+The user interface is shown in <<figure.components.features.locale.selection>>.
+
+[[figure.components.features.locale.selection]]
+.Selecting a Locale
+image::img/features-locale-selection.png[]
+
+endif::web[]
+
+
+[[components.features.readonly]]
+== Read-Only
+
+((("read-only property")))
+((("Component interface", "read-only")))
+The property defines whether the value of a component can be changed. The
+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");
+readwrite.setValue("You can change this");
+readwrite.setReadOnly(false); // The default
+layout.addComponent(readwrite);
+        
+TextField readonly = new TextField("Read-Only");
+readonly.setValue("You can't touch this!");
+readonly.setReadOnly(true);
+layout.addComponent(readonly);
+----
+
+The resulting read-only text field is shown in
+<<figure.components.features.readonly.simple>>.
+
+[[figure.components.features.readonly.simple]]
+.A Read-Only Component.
+image::img/features-readonly-simple.png[]
+
+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
+example, the disabled state, which is usually applied recursively.
+
+Notice that the value of a selection component is the selection, not its items.
+A read-only selection component doesn't therefore allow its selection to be
+changed, but other changes are possible. For example, if you have a read-only
+[classname]#Table# in editable mode, its contained fields and the underlying
+data model can still be edited, and the user could sort it or reorder the
+columns.
+
+Client-side state modifications will not be communicated to the server-side and,
+more importantly, server-side field components will not accept changes to the
+value of a read-only [classname]#Field# component. The latter is an important
+security feature, because a malicious user can not fabricate state changes in a
+read-only field. This is handled at the level of [classname]#AbstractField# in
+[methodname]#setValue()#, so you can not change the value programmatically
+either. Calling [methodname]#setValue()# on a read-only field results in
+[classname]#Property.ReadOnlyException#.
+
+Also notice that while the read-only status applies automatically to the
+property value of a field, it does not apply to other component variables. A
+read-only component can accept some other variable changes from the client-side
+and some of such changes could be acceptable, such as change in the scroll bar
+position of a [classname]#Table#. Custom widgets should check the read-only
+state for variables bound to business
+data.////
+TODO: Note this also in the Advanced: Security section and possibly also in the
+GWT
+chapter.
+////
+
+=== CSS Style Rules
+
+Setting a normally editable component to read-only state can change its
+appearance to disallow editing the value. In addition to CSS styling, also the
+HTML structure can change. For example, [classname]#TextField# loses the edit
+box and appears much like a [classname]#Label#.
+
+A read-only component will have the [literal]#++v-readonly++# style. The
+following CSS rule would make the text in all read-only [classname]#TextField#
+components appear in italic.
+
+
+[source, css]
+----
+.v-textfield.v-readonly {
+    font-style: italic;
+}
+----
+
+
+
+[[components.features.stylename]]
+== Style Name
+
+((("style name property")))
+((("Component interface", "style name")))
+The __style name__ property defines one or more custom CSS style class names for
+the component. The [methodname]#getStyleName()# returns the current style names
+as a space-separated list. The [methodname]#setStyleName()# replaces all the
+styles with the given style name or a space-separated list of style names. You
+can also add and remove individual style names with [methodname]#addStylename()#
+and [methodname]#removeStyleName()#. A style name must be a valid CSS style
+name.
+
+
+[source, java]
+----
+Label label = new Label("This text has a lot of style");
+label.addStyleName("mystyle");
+layout.addComponent(label);
+----
+
+The style name will appear in the component's HTML element in two forms:
+literally as given and prefixed with the component-specific style name. For
+example, if you add a style name [literal]#++mystyle++# to a
+[classname]#Button#, the component would get both [literal]#++mystyle++# and
+[literal]#++v-button-mystyle++# styles. Neither form may conflict with built-in
+style names of Vaadin. For example, [literal]#++focus++# style would conflict
+with a built-in style of the same name, and an [literal]#++content++# style for
+a [classname]#Panel# component would conflict with the built-in
+[literal]#++v-panel-content++# style.
+
+The following CSS rule would apply the style to any component that has the
+[literal]#++mystyle++# style.
+
+
+[source, css]
+----
+.mystyle {
+    font-family: fantasy;
+    font-style:  italic;
+    font-size:   25px;
+    font-weight: bolder;
+    line-height: 30px;
+}
+----
+
+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[]
+
+
+[[components.features.visible]]
+== Visible
+
+((("visible property")))
+((("Component interface", "visible")))
+Components can be hidden by setting the __visible__ property to __false__. Also
+the caption, icon and any other component features are made hidden. Hidden
+components are not just invisible, but their content is not communicated to the
+browser at all. That is, they are not made invisible cosmetically with only CSS
+rules. This feature is important for security if you have components that
+contain security-critical information that must only be shown in specific
+application states.
+
+
+[source, java]
+----
+TextField invisible = new TextField("No-see-um");
+invisible.setValue("You can't see this!");
+invisible.setVisible(false);
+layout.addComponent(invisible);
+----
+
+The resulting invisible component is shown in
+<<figure.components.features.visible.simple>>.
+
+[[figure.components.features.visible.simple]]
+.An Invisible Component.
+image::img/features-visible-simple.png[]
+
+Beware that invisible beings can leave footprints. The containing layout cell
+that holds the invisible component will not go away, but will show in the layout
+as extra empty space. Also expand ratios work just like if the component was
+visible - it is the layout cell that expands, not the component.
+
+If you need to make a component only cosmetically invisible, you should use a
+custom theme to set it [literal]#++display: none++# style. This is mainly useful
+for some special components that have effects even when made invisible in CSS.
+If the hidden component has undefined size and is enclosed in a layout that also
+has undefined size, the containing layout will collapse when the component
+disappears. If you want to have the component keep its size, you have to make it
+invisible by setting all its font and other attributes to be transparent. In
+such cases, the invisible content of the component can be made visible easily in
+the browser.
+
+A component made invisible with the __visible__ property has no particular CSS
+style class to indicate that it is hidden. The element does exist though, but
+has [literal]#++display: none++# style, which overrides any CSS styling.
+
+
+[[components.features.sizeable]]
+== Sizing Components
+
+((("[classname]#Sizeable# interface")))
+Vaadin components are sizeable; not in the sense that they were fairly large or
+that the number of the components and their features are sizeable, but in the
+sense that you can make them fairly large on the screen if you like, or small or
+whatever size.
+
+The [classname]#Sizeable# interface, shared by all components, provides a number
+of manipulation methods and constants for setting the height and width of a
+component in absolute or relative units, or for leaving the size undefined.
+
+The size of a component can be set with [methodname]#setWidth()# and
+[methodname]#setHeight()# methods. The methods take the size as a floating-point
+value. You need to give the unit of the measure as the second parameter for the
+above methods. The available units are listed in
+<<components.features.sizeable.units.table>> below.
+
+
+[source, java]
+----
+mycomponent.setWidth(100, Sizeable.UNITS_PERCENTAGE);
+mycomponent.setWidth(400, Sizeable.UNITS_PIXELS);
+----
+
+Alternatively, you can speficy the size as a string. The format of such a string
+must follow the HTML/CSS standards for specifying measures.
+
+
+[source, java]
+----
+mycomponent.setWidth("100%");
+mycomponent.setHeight("400px");
+----
+
+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
+directions.
+
+The size can be __undefined__ in either or both dimensions, which means that the
+component will take the minimum necessary space. Most components have undefined
+size by default, but some layouts have full size in horizontal direction. You
+can set the height or width as undefined with
+[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.
+
+The <<components.features.sizeable.units.table>> lists the available units and
+their codes defined in the [classname]#Sizeable# interface.
+
+[[components.features.sizeable.units.table]]
+.Size Units
+
+|===============
+|[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.
+
+|===============
+
+
+
+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
+
+When the user clicks on a component, the component gets the __input focus__,
+which is indicated by highlighting according to style definitions. If the
+component allows inputting text, the focus and insertion point are indicated by
+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#.
+
+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
+[methodname]#getTabIndex()#. The tab index is managed in the context of the page
+in which the components are contained. The focus order can therefore jump
+between two any lower-level component containers, such as sub-windows or panels.
+
+The default focus order is determined by the natural hierarchical order of
+components in the order in which they were added under their parents. The
+default tab index is 0 (zero).
+
+Giving a negative integer as the tab index removes the component from the focus
+order entirely.
+
+=== CSS Style Rules
+
+The component having the focus will have an additional style class with the
+[literal]#++-focus++# suffix. For example, a [classname]#TextField#, which
+normally has the [literal]#++v-textfield++# style, would additionally have the
+[literal]#++v-textfield-focus++# style.
+
+For example, the following would make a text field blue when it has focus.
+
+
+[source, css]
+----
+.v-textfield-focus {
+    background: lightblue;
+}
+----
+
+
+
+
+
diff --git a/documentation/components/components-fields.asciidoc b/documentation/components/components-fields.asciidoc
new file mode 100644
index 0000000000..229592c74e
--- /dev/null
+++ b/documentation/components/components-fields.asciidoc
@@ -0,0 +1,345 @@
+---
+title: Field Components
+order: 4
+layout: page
+---
+
+[[components.fields]]
+= Field Components
+
+((("[classname]#Field#", id="term.components.fields", range="startofrange")))
+
+
+__Fields__ are components that have a value that the user can change through the
+user interface. <<figure.components.fields>> illustrates the inheritance
+relationships and the important interfaces and base classes.
+
+[[figure.components.fields]]
+.Field Components
+image::img/field-diagram-hi.png[]
+
+Field components are built upon the framework defined in the [classname]#Field#
+interface and the [classname]#AbstractField# base class.
+[classname]#AbstractField# is the base class for all field components. In
+addition to the component features inherited from
+[classname]#AbstractComponent#, it implements a number of features defined in
+[classname]#Property#, [classname]#Buffered#, [classname]#Validatable#, and
+[classname]#Component.Focusable# interfaces.
+
+The description of the field interfaces and base classes is broken down in the
+following sections.
+
+[[components.fields.field]]
+== [classname]#Field# Interface
+
+The [classname]#Field# interface inherits the [classname]#Component#
+superinterface and also the [classname]#Property# interface to have a value for
+the field. [classname]#AbstractField# is the only class implementing the
+[classname]#Field# interface directly. The relationships are illustrated in
+<<figure.components.fields.field>>.
+
+[[figure.components.fields.field]]
+.[classname]#Field# Interface Inheritance Diagram
+image::img/field-interface-hi.png[]
+
+You can set the field value with the [methodname]#setValue()# and read with the
+[methodname]#getValue()# method defined in the [classname]#Property# interface.
+The actual value type depends on the component.
+
+The [classname]#Field# interface defines a number of properties, which you can
+access with the corresponding setters and getters.
+
+[methodname]#required#:: When enabled, a required indicator (usually the asterisk * character) is
+displayed on the left, above, or right the field, depending on the containing
+layout and whether the field has a caption. If such fields are validated but are
+empty and the [methodname]#requiredError# property (see below) is set, an error
+indicator is shown and the component error is set to the text defined with the
+error property. Without validation, the required indicator is merely a visual
+guide.
+
+[methodname]#requiredError#:: Defines the error message to show when a value is required, but none is entered.
+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
+
+Fields are strongly coupled with the Vaadin data model. The field value is
+handled as a [classname]#Property# of the field component, as documented in
+<<dummy/../../../framework/datamodel/datamodel-properties#datamodel.properties,"Properties">>.
+Selection fields allow management of the selectable items through the
+[classname]#Container# interface.
+
+Fields are __editors__ for some particular type. For example,
+[classname]#TextField# allows editing [classname]#String# values. When bound to
+a data source, the property type of the data model can be something different,
+say an [classname]#Integer#. __Converters__ are used for converting the values
+between the representation and the model. They are described in
+<<dummy/../../../framework/datamodel/datamodel-properties#datamodel.properties.converter,"Converting
+Between Property Type and Representation">>.
+
+
+[[components.fields.valuechanges]]
+== Handling Field Value Changes
+
+[classname]#Field# inherits [classname]#Property.ValueChangeListener# to allow
+listening for field value changes and [classname]#Property.Editor# to allow
+editing values.
+
+When the value of a field changes, a [classname]#Property.ValueChangeEvent# is
+triggered for the field. You should not implement the
+[methodname]#valueChange()# method in a class inheriting
+[classname]#AbstractField#, as it is already implemented in
+[classname]#AbstractField#. You should instead implement the method explicitly
+by adding the implementing object as a listener.
+
+
+[[components.fields.buffering]]
+== Field Buffering
+
+Field components implement the [interfacename]#Buffered# and
+[interfacename]#BufferedValidatable# interfaces. When buffering is enabled for a
+field with [methodname]#setBuffered(true)#, the value is not written to the
+property data source before the [methodname]#commit()# method is called for the
+field. Calling [methodname]#commit()# also runs validators added to the field,
+and if any fail (and the [parameter]#invalidCommitted# is disabled), the value
+is not written.
+
+
+[source, java]
+----
+form.addComponent(new Button("Commit",
+    new Button.ClickListener() {
+    @Override
+    public void buttonClick(ClickEvent event) {
+        try {
+            editor.commit();
+        } catch (InvalidValueException e) {
+            Notification.show(e.getMessage());
+        }
+    }
+}));
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.field.buffering.basic[on-line example, window="_blank"].
+
+Calling [methodname]#discard()# reads the value from the property data source to
+the current input.
+
+If the fields are bound in a [classname]#FieldGroup# that has buffering enabled,
+calling [methodname]#commit()# for the group runs validation on all fields in
+the group, and if successful, all the field values are written to the item data
+source. See
+<<dummy/../../../framework/datamodel/datamodel-itembinding#datamodel.itembinding.buffering,"Buffering
+Forms">>.
+
+
+[[components.fields.validation]]
+== Field Validation
+
+The input for a field component can be syntactically or semantically invalid.
+Fields implement the [interfacename]#Validatable# interface, which allows
+checking validity of the input with __validators__ that implement the
+[interfacename]#Validator# interface. You can add validators to fields with
+[methodname]#addValidator()#.
+
+
+[source, java]
+----
+TextField field = new TextField("Name");
+field.addValidator(new StringLengthValidator(
+    "The name must be 1-10 letters (was {0})",
+    1, 10, true));
+field.setNullRepresentation("");
+field.setNullSettingAllowed(true);
+layout.addComponent(field);
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.field.validation.basic[on-line example, window="_blank"].
+
+Failed validation is indicated with the error indicator of the field, described
+in
+<<dummy/../../../framework/application/application-errors#application.errors.error-indicator,"Error
+Indicator and Message">>, unless disabled with
+[methodname]#setValidationVisible(false)#. Hovering mouse on the field displays
+the error message given as a parameter for the validator. If validated
+explicitly with [methodname]#validate()#, as described later, the
+[classname]#InvalidValueException# is thrown if the validation fails, also
+carrying the error message. The value [literal]#++{0}++# in the error message
+string is replaced with the invalid input value.
+
+Validators validate the property type of the field after a possible conversion,
+not the presentation type. For example, an [classname]#IntegerRangeValidator#
+requires that the value type of the property data source is
+[classname]#Integer#.
+
+[[components.fields.validation.builtin]]
+=== Built-in Validators
+
+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]#DateRangeValidator#:[classname]#Date#:: Checks that the date value is within the range at or between two given
+dates/times.
+
+[classname]#DoubleRangeValidator#:[classname]#Double#:: Checks that the double 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]#IntegerRangeValidator#:[classname]#Integer#:: Checks that the integer value is at or between two given values.
+
+[classname]#NullValidator#:: Checks that 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#,
+inputting null values can be enabled with [methodname]#setNullSettingAllowed()#.
+You also need to set the representation of null values: in selection components
+with [methodname]#setNullSelectionItemId()# and in [classname]#TextField# with
+[methodname]#setNullRepresentation()#.
+
+ifdef::web[]
++
+Setting field as __required__ can be used for similar effect, and it also
+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]#StringLengthValidator#:[classname]#String#:: Checks that the length of the input string is at or between two given lengths.
+
+ifdef::web[]
++
+The [parameter]#allowNull# parameter determines whether null values should be
+allowed for the string, regardless of the string length. A null value has zero
+length, so it will be invalid if the minimum length is greater than zero.
+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]#setRequired()# (for the false case) or [classname]#NullValidator#.
+endif::web[]
+
+
+
+Please see the API documentation for more details.
+
+
+[[components.fields.validation.automatic]]
+=== Automatic Validation
+
+The validators are normally, when [literal]#++validationVisible++# is true for
+the field, executed implicitly on the next server request if the input has
+changed. If the field is in immediate mode, it (and any other fields with
+changed value) are validated immediately when the focus leaves the field.
+
+
+[source, java]
+----
+TextField field = new TextField("Name");
+field.addValidator(new StringLengthValidator(
+    "The name must be 1-10 letters (was {0})",
+    1, 10, true));
+field.setImmediate(true);
+field.setNullRepresentation("");
+field.setNullSettingAllowed(true);
+layout.addComponent(field);
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.field.validation.basic[on-line example, window="_blank"].
+
+
+[[components.fields.validation.explicit]]
+=== Explicit Validation
+
+The validators are executed when the [methodname]#validate()# or
+[methodname]#commit()# methods are called for the field.
+
+
+[source, java]
+----
+// A field with automatic validation disabled
+final TextField field = new TextField("Name");
+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() {
+    @Override
+    public void buttonClick(ClickEvent event) {
+        field.setValidationVisible(false);
+        try {
+            field.validate();
+        } catch (InvalidValueException e) {
+            Notification.show(e.getMessage());
+            field.setValidationVisible(true);
+        }
+    }
+});
+layout.addComponent(validate);
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.field.validation.explicit[on-line example, window="_blank"].
+
+
+[[components.fields.validation.custom]]
+=== Implementing a Custom Validator
+
+You can create custom validators by implementing the [interfacename]#Validator#
+interface and implementing its [methodname]#validate()# method. If the
+validation fails, the method should throw either
+[classname]#InvalidValueException# or [classname]#EmptyValueException#.
+
+
+[source, java]
+----
+class MyValidator implements Validator {
+    @Override
+    public void validate(Object value)
+            throws InvalidValueException {
+        if (!(value instanceof String &&
+                ((String)value).equals("hello")))
+            throw new InvalidValueException("You're impolite");
+    }
+}
+
+final TextField field = new TextField("Say hello");
+field.addValidator(new MyValidator());
+field.setImmediate(true);
+layout.addComponent(field);
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.field.validation.customvalidator[on-line example, window="_blank"].
+
+
+[[components.fields.validation.fieldgroup]]
+=== Validation in Field Groups
+
+If the field is bound to a [classname]#FieldGroup#, described in
+<<dummy/../../../framework/datamodel/datamodel-itembinding#datamodel.itembinding,"Creating
+Forms by Binding Fields to Items">>, calling [methodname]#commit()# for the
+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")))
+
+
diff --git a/documentation/components/components-grid.asciidoc b/documentation/components/components-grid.asciidoc
new file mode 100644
index 0000000000..e2013b8daa
--- /dev/null
+++ b/documentation/components/components-grid.asciidoc
@@ -0,0 +1,1407 @@
+---
+title: Grid
+order: 24
+layout: page
+---
+
+[[components.grid]]
+= [classname]#Grid#
+
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/grids-and-trees/grid]
+endif::web[]
+
+((("[classname]#Grid#")))
+[classname]#Grid# is many things, and perhaps the most versatile and powerful
+component in Vaadin. Like [classname]#Table#, it allows presenting and editing
+tabular data, but escapes many of [classname]#Table#'s limitations. Efficient
+lazy loading of data while scrolling greatly improves performance. Grid is
+scalable, mobile friendly, and extensible.
+
+[[components.grid.overview]]
+== Overview
+
+[classname]#Grid# is for displaying and editing tabular data laid out in rows
+and columns. At the top, a __header__ can be shown, and a __footer__ at the
+bottom. In addition to plain text, the header and footer can contain HTML and
+components. Having components in the header allows implementing filtering
+easily. The grid data can be sorted by clicking on a column header;
+shift-clicking a column header enables secondary sorting criteria.
+
+[[figure.components.grid.features]]
+.A [classname]#Grid# Component
+image::img/grid-features.png[]
+
+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
+is loaded lazily from the server, so that only the visible data is loaded. The
+smart lazy loading functionality gives excellent user experience even with low
+bandwidth, such as mobile devices.
+
+The grid data can be edited with a row-based editor after double-clicking a row.
+The fields are generated with a field factory, or set explicitly, and bound to
+data with a field group.
+
+Grid is fully themeable with CSS and style names can be set for all grid
+elements. For data rows and cells, the styles can be generated with a row or
+cell style generator.
+
+Finally, [classname]#Grid# is designed to be extensible and used just as well
+for client-side development - its GWT API is nearly identical to the server-side
+API, including data binding.
+
+[[components.grid.overview.table]]
+=== Differences to Table
+
+In addition to core features listed above, [classname]#Grid# has the following
+API-level and functional differences to Table:
+
+* Grid is not a [interfacename]#Container# itself, even though it can be bound to a container data source. Consequently, columns are defined differently, and so forth.
+* Rows can be added with [methodname]#addRow()# shorthand (during initialization) instead of [methodname]#addItem()#.
+* Use [methodname]#setHeightByRows()# and [methodname]#setHeightMode()# instead of [methodname]#setPageLength()# to set the height in number of rows.
+* Grid does not extend [classname]#AbstractSelect# and is not a field, but has its own selection API. [methodname]#addSelectionListener()# is called to define a [interfacename]#SelectionListener#. The listener also receives a collection of deselected items.
+* Grid does not support having all cells in editable mode, it only supports row-based editing, with a row mini-editor that allows saving or discarding the changes.
+* Grid has no generated columns. Instead, the container data source can be wrapped around a [classname]#GeneratedPropertyContainer#.
+* No column icons; you can implement them in a column with an [classname]#ImageRenderer#.
+* Components can not be shown in Grid cells; instead the much more efficient renderers can be used for the most common cases, and row editor for editing values.
+* Limited support for drag and drop: the user can drag columns to reorder them.
+
+In addition, Grid has the following visual changes:
+
+* Multiple selection is indicated with check boxes in addition to highlighting.
+* Grid does not show the row loading indicator like Table does.
+
+
+
+[[components.grid.data]]
+== Binding to Data
+
+[classname]#Grid# is normally used by binding it to a container data source,
+described in
+<<dummy/../../../framework/datamodel/datamodel-container#datamodel.container,"Collecting
+Items in Containers">>. The container must implement
+[interfacename]#Container.Indexed# interface. By default, it is bound to an
+[classname]#IndexedContainer#; Grid offers some shorthand methods to operate on
+the default container, as described later.
+
+You can set the container in the constructor or with
+[methodname]#setContainerDataSource()#.
+
+For example, if you have a collection of beans, you could wrap them in a Vaadin
+[classname]#BeanContainer# or [classname]#BeanItemContainer#, and bind to a [classname]#Grid# as follows
+
+
+[source, java]
+----
+// Have some data
+Collection<Person> people = Lists.newArrayList(
+    new Person("Nicolaus Copernicus", 1543),
+    new Person("Galileo Galilei", 1564),
+    new Person("Johannes Kepler", 1571));
+
+// Have a container of some type to contain the data
+BeanItemContainer<Person> container =
+    new BeanItemContainer<Person>(Person.class, people);
+
+// Create a grid bound to the container
+Grid grid = new Grid(container);
+grid.setColumnOrder("name", "born");
+layout.addComponent(grid);
+----
+
+Note that you need to override [methodname]#equals()# and [methodname]#hashcode()# for
+the bean ([classname]#Person#) class to make the [classname]#BeanItemContainer# work properly.
+
+[[components.grid.basic.manual]]
+=== Default Data Source and Shorthands
+
+Sometimes, when you have just a few fixed items that you want to display, you
+can define the grid columns and add data rows manually. [classname]#Grid# is by
+default bound to a [classname]#IndexedContainer#. You can define new columns
+(container properties) with [methodname]#addColumn()# and then add rows (items)
+with [methodname]#addRow()#. The types in the row data must match the defined
+column types.
+
+For example:
+
+
+[source, java]
+----
+// Create a grid
+Grid grid = new Grid();
+
+// Define some columns
+grid.addColumn("name", String.class);
+grid.addColumn("born", Integer.class);
+
+// Add some data rows
+grid.addRow("Nicolaus Copernicus", 1543);
+grid.addRow("Galileo Galilei", 1564);
+grid.addRow("Johannes Kepler", 1571);
+
+layout.addComponent(grid);
+----
+
+Or, if you have the data in an array:
+
+
+[source, java]
+----
+// Have some data
+Object[][] people = { {"Nicolaus Copernicus", 1543},
+                      {"Galileo Galilei", 1564},
+                      {"Johannes Kepler", 1571}};
+for (Object[] person: people)
+    grid.addRow(person);
+----
+
+Note that you can not use [methodname]#addRow()# to add items if the container
+is read-only or has read-only columns, such as generated columns.
+
+
+
+[[components.grid.selection]]
+== Handling Selection Changes
+
+Selection in [classname]#Grid# is handled a bit differently from other selection
+components, as it is not an [classname]#AbstractSelect#. Grid supports both
+single and multiple selection, defined by the __selection mode__. Selection
+events can be handled with a [interfacename]#SelectionListener#.
+
+[[components.grid.selection.mode]]
+=== Selection Mode
+
+A [classname]#Grid# can be set to be in [literal]#++SINGLE++# (default),
+[literal]#++MULTI++#, or [literal]#++NONE++# selection mode, defined in the
+[classname]#Grid.SelectionMode# enum.
+
+
+[source, java]
+----
+// Use single-selection mode (default)
+grid.setSelectionMode(SelectionMode.SINGLE);
+----
+
+Empty (null) selection is allowed by default, but can be disabled
+with [methodname]#setDeselectAllowed()# in single-selection mode.
+
+The selection is handled with a different selection model object in each
+respective selection mode: [classname]#SingleSelectionModel#,
+[classname]#MultiSelectionModel#, and [classname]#NoSelectionModel# (in which
+selection is always empty).
+
+
+[source, java]
+----
+// Pre-select an item
+SingleSelectionModel selection =
+    (SingleSelectionModel) grid.getSelectionModel();
+selection.select( // Select 3rd item
+    grid.getContainerDataSource().getIdByIndex(2));
+----
+
+
+[[components.grid.selection.single]]
+=== Handling Selection
+
+Changes in the selection can be handled with a
+[interfacename]#SelectionListener#. You need to implement the
+[methodname]#select()# method, which gets a [classname]#SelectionEvent# as
+parameter. In addition to selection, you can handle clicks on rows or cells with
+a [interfacename]#ItemClickListener#.
+
+You can get the new selection from the selection event with
+[methodname]#getSelected()#, which returns a set of item IDs, or more simply
+from the grid or the selection model with [methodname]#getSelectedRow()#, which
+returns the single selected item ID.
+
+For example:
+
+
+[source, java]
+----
+grid.addSelectionListener(selectionEvent -> { // Java 8
+    // Get selection from the selection model
+    Object selected = ((SingleSelectionModel)
+        grid.getSelectionModel()).getSelectedRow();
+
+    if (selected != null)
+        Notification.show("Selected " +
+            grid.getContainerDataSource().getItem(selected)
+                .getItemProperty("name"));
+    else
+        Notification.show("Nothing selected");
+});
+----
+
+The current selection can be obtained from the [classname]#Grid# object by
+[methodname]#getSelectedRow()# or [methodname]#getSelectedRows()#, which return
+one (in single-selection mode) or all (in multi-selection mode) selected items.
+
+
+[WARNING]
+====
+Note that changes to the item set of the container data source are not
+automatically reflected in the selection model and may cause the selection model
+to refer to stale item IDs. This always occurs, for example, when you delete the
+selected item or items. So, if you modify the item set of the container, you
+should synchronize or reset the selection with the container, such as by calling
+[methodname]#reset()# on the selection model.
+
+====
+
+
+
+
+[[components.grid.selection.multi]]
+=== Multiple Selection
+
+In the multiple selection mode, a user can select multiple items by clicking on
+the checkboxes in the leftmost column, or by using the kbd:[Space] to select/deselect the currently focused row.
+Space bar is the default key for toggling the selection, but it can be customized.
+
+[[figure.components.grid.selection.multi]]
+.Multiple Selection in  [classname]#Grid#
+image::img/grid-selection-multi.png[]
+
+The selection is managed through the [classname]#MultiSelectionMode# class. The
+currently selected rows can be set with [methodname]#setSelected()# by a
+collection of item IDs, or you can use [methodname]#select()# to add items to
+the selection.
+
+
+[source, java]
+----
+// Grid in multi-selection mode
+Grid grid = new Grid(exampleDataSource());
+grid.setSelectionMode(SelectionMode.MULTI);
+
+// Pre-select some items
+MultiSelectionModel selection =
+    (MultiSelectionModel) grid.getSelectionModel();
+selection.setSelected( // Items 2-4
+    grid.getContainerDataSource().getItemIds(2, 3));
+
+----
+
+The current selection can be read with [methodname]#getSelectedRows()#; either
+in the [classname]#MultiSelectionMode# object or in the [classname]#Grid#.
+
+
+[source, java]
+----
+// Allow deleting the selected items
+Button delSelected = new Button("Delete Selected", e -> {
+    // Delete all selected data items
+    for (Object itemId: selection.getSelectedRows())
+        grid.getContainerDataSource().removeItem(itemId);
+    
+    // Otherwise out of sync with container
+    grid.getSelectionModel().reset();
+
+    // Disable after deleting
+    e.getButton().setEnabled(false);
+});
+delSelected.setEnabled(grid.getSelectedRows().size() > 0);
+----
+
+Changes in the selection can be handled with a
+[interfacename]#SelectionListener#. The selection event object provides
+[methodname]#getAdded()# and [methodname]#getRemoved()# to allow determining the
+differences in the selection change.
+
+
+[source, java]
+----
+// Handle selection changes
+grid.addSelectionListener(selection -> { // Java 8
+    Notification.show(selection.getAdded().size() +
+                      " items added, " +
+                      selection.getRemoved().size() +
+                      " removed.");
+
+    // Allow deleting only if there's any selected
+    deleteSelected.setEnabled(
+         grid.getSelectedRows().size() > 0);
+});
+----
+
+
+[[components.grid.selection.clicks]]
+=== Focus and Clicks
+
+In addition to selecting rows, you can focus individual cells. The focus can be
+moved with arrow keys and, if editing is enabled, pressing kbd:[Enter] opens the
+editor. Normally, pressing kbd:[Tab] or kbd:[Shift+Tab] moves the focus to another component,
+as usual.
+
+When editing or in unbuffered mode, kbd:[Tab] or kbd:[Shift+Tab] moves the focus to the next or
+previous cell. The focus moves from the last cell of a row forward to the
+beginning of the next row, and likewise, from the first cell backward to the
+end of the previous row. Note that you can extend [classname]#DefaultEditorEventHandler#
+to change this behavior.
+
+With the mouse, you can focus a cell by clicking on it. The clicks can be handled
+with an [interfacename]#ItemClickListener#. The [classname]#ItemClickEvent#
+object contains various information, most importantly the ID of the clicked row
+and column.
+
+
+[source, java]
+----
+grid.addItemClickListener(event -> // Java 8
+    Notification.show("Value: " +
+        container.getContainerProperty(event.getItemId(),
+            event.getPropertyId()).getValue().toString()));
+----
+
+The clicked grid cell is also automatically focused.
+
+The focus indication is themed so that the focused cell has a visible focus
+indicator style by default, while the row doesn't. You can enable row focus, as
+well as disable cell focus, in a custom theme. See <<components.grid.css>>.
+
+
+
+[[components.grid.columns]]
+== Configuring Columns
+
+Columns are normally defined in the container data source. The
+[methodname]#addColumn()# method can be used to add columns to a container that
+supports it, such as the default [classname]#IndexedContainer#.
+
+Column configuration is defined in [classname]#Grid.Column# objects, which can
+be obtained from the grid with [methodname]#getColumn()# by the column
+(property) ID.
+
+
+[source, java]
+----
+Grid.Column bornColumn = grid.getColumn("born");
+bornColumn.setHeaderCaption("Born");
+----
+
+In the following, we describe the basic column configuration.
+
+[[components.grid.columns.order]]
+=== Column Order
+
+You can set the order of columns with [methodname]#setColumnOrder()# for the
+grid. Columns that are not given for the method are placed after the specified
+columns in their natural order.
+
+
+[source, java]
+----
+grid.setColumnOrder("firstname", "lastname", "born",
+                    "birthplace", "died");
+----
+
+Note that the method can not be used to hide columns. You can hide columns with
+the [methodname]#removeColumn()#, as described later, or by hiding them in a
+[classname]#GeneratedPropertyContainer#.
+
+
+[[components.grid.columns.removing]]
+=== Hiding Columns
+
+Columns can be hidden by removing them with [methodname]#removeColumn()#. You
+can remove all columns with [methodname]#removeAllColumns()#. The removed columns
+are only removed from the grid, not from the container data source.
+
+To restore a previously removed column, you can call [methodname]#addColumn()#
+with the property ID. Instead of actually adding another column to the data
+source, it merely restores the previously removed one. However, column settings
+such as header or editor are not restored, but must be redone.
+
+You can also hide columns at container-level. At least
+[classname]#GeneratedpropertyContainer# allows doing so, as described in
+<<dummy/../../../framework/datamodel/datamodel-container#datamodel.container.gpc,"GeneratedPropertyContainer">>.
+
+
+[[components.grid.columns.captions]]
+=== Column Captions
+
+Column captions are displayed in the grid header. The default captions are
+generated automatically from the property ID. You can set the header caption
+explicitly through the column object with [methodname]#setHeaderCaption()#.
+
+
+[source, java]
+----
+Grid.Column bornColumn = grid.getColumn("born");
+bornColumn.setHeaderCaption("Born");
+----
+
+This is equivalent to setting it with [methodname]#setText()# for the header
+cell; the [classname]#HeaderCell# also allows setting the caption in HTML or as
+a component, as well as styling it, as described later in
+<<components.grid.headerfooter>>.
+
+
+[[components.grid.columns.width]]
+=== Column Widths
+
+Columns have by default undefined width, which causes automatic sizing based on
+the widths of the displayed data. You can set column widths explicitly by pixel
+value with [methodname]#setWidth()#, or relatively using expand ratios with
+[methodname]#setExpandRatio()#.
+
+When using expand ratios, the columns with a non-zero expand ratio use the extra
+space remaining from other columns, in proportion to the defined ratios.
+
+You can specify minimum and maximum widths for the expanding columns with
+[methodname]#setMinimumWidth()# and [methodname]#setMaximumWidth()#,
+respectively.
+
+The user can resize columns by dragging their separators with the mouse. When resized manually,
+all the columns widths are set to explicit pixel values, even if they had
+relative values before.
+
+[[components.grid.columns.frozen]]
+=== Frozen Columns
+
+You can set the number of columns to be frozen with
+[methodname]#setFrozenColumnCount()#, so that they are not scrolled off when
+scrolling horizontally.
+
+
+[source, java]
+----
+grid.setFrozenColumnCount(2);
+----
+
+Setting the count to [parameter]#0# disables frozen data columns; setting it to
+[parameter]#-1# also disables the selection column in multi-selection mode.
+
+
+
+[[components.grid.generatedcolumns]]
+== Generating Columns
+
+Columns with values computed from other columns or in some other way can be
+generated with a container or data model that generates the property values. The
+[classname]#GeneratedPropertyContainer# can be used for this purpose. It wraps
+around any indexed container to extend its properties with read-only generated
+properties. The generated properties can have same IDs as the original ones,
+thereby replacing them with formatted or converted values. See
+<<dummy/../../../framework/datamodel/datamodel-container#datamodel.container.gpc,"GeneratedPropertyContainer">>
+for a detailed description of using it.
+
+Generated columns are read-only, so you can not add grid rows with
+[methodname]#addRow()#. In editable mode, editor fields are not generated for
+generated columns.
+
+Note that, while [classname]#GeneratedPropertyContainer# implements
+[interfacename]#Container.Sortable#, the wrapped container might not, and also
+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
+
+A __renderer__ is a feature that draws the client-side representation of a data
+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:
+
+
+[source, java]
+----
+grid.addColumn("born", Integer.class);
+...
+Grid.Column bornColumn = grid.getColumn("born");
+bornColumn.setRenderer(new NumberRenderer("born in %d AD"));
+----
+
+Renderers require a specific data type for the column. To convert to a property
+type to a type required by a renderer, you can pass an optional
+[interfacename]#Converter# to [methodname]#setRenderer()#, as described later in
+this section. A converter can also be used to (pre)format the property values.
+The converter is run on the server-side, before sending the values to the
+client-side to be rendered with the renderer.
+
+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.
+
+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]
+----
+BeanItemContainer<Person> people =
+    new BeanItemContainer<>(Person.class);
+
+people.addBean(new Person("Nicolaus Copernicus", 1473));
+people.addBean(new Person("Galileo Galilei", 1564));
+people.addBean(new Person("Johannes Kepler", 1571));
+
+// Generate button caption column
+GeneratedPropertyContainer gpc =
+    new GeneratedPropertyContainer(people);
+gpc.addGeneratedProperty("delete",
+    new PropertyValueGenerator<String>() {
+
+    @Override
+    public String getValue(Item item, Object itemId,
+                           Object propertyId) {
+        return "Delete"; // The caption
+    }
+
+    @Override
+    public Class<String> getType() {
+        return String.class;
+    }
+});
+
+// Create a grid
+Grid grid = new Grid(gpc);
+
+// Render a button that deletes the data row (item)
+grid.getColumn("delete")
+    .setRenderer(new ButtonRenderer(e -> // Java 8
+    grid.getContainerDataSource()
+        .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]#ExternalResource# are currently supported for images in
+[classname]#Grid#.
+
+ifdef::web[]
+
+[source, java]
+----
+grid.addColumn("picture", Resource.class)
+    .setRenderer(new ImageRenderer());
+...
+// Add some data rows
+grid.addRow(new ThemeResource("img/copernicus-128px.jpg"),
+            "Nicolaus Copernicus", 1543);
+grid.addRow(new ThemeResource("img/galileo-128px.jpg"),
+            "Galileo Galilei", 1564);
+----
+
++
+Instead of creating the resource objects explicitly, as was done above, you
+could generate them dynamically from file name strings using a
+[interfacename]#Converter# for the column.
+
+
++
+[source, java]
+----
+// Define some columns
+grid.addColumn("picture", String.class); // Filename
+grid.addColumn("name", String.class);
+
+// Set the image renderer
+grid.getColumn("picture").setRenderer(new ImageRenderer(),
+    new Converter<Resource, String>() {
+        @Override
+        public String convertToModel(Resource value,
+            Class<? extends String> targetType, Locale l)
+            throws Converter.ConversionException {
+            return "not needed";
+        }
+
+        @Override
+        public Resource convertToPresentation(String value,
+            Class<? extends Resource> targetType, Locale l)
+            throws Converter.ConversionException {
+            return new ThemeResource("img/" + value);
+        }
+
+        @Override
+        public Class<String> getModelType() {
+            return String.class;
+        }
+
+        @Override
+        public Class<Resource> getPresentationType() {
+            return Resource.class;
+        }
+});
+
+// Add some data rows
+grid.addRow("copernicus-128px.jpg", "Nicolaus Copernicus");
+grid.addRow("galileo-128px.jpg", "Galileo Galilei");
+grid.addRow("kepler-128px.jpg", "Johannes Kepler");
+----
++
+You also need to define the row heights so that the images fit there. You can
+set it in the theme for all data cells or for the column containing the images.
+
++
+For the latter way, first define a CSS style name for grid and the column:
+
+
++
+[source, java]
+----
+grid.setStyleName("gridwithpics128px");
+grid.setCellStyleGenerator(cell ->
+    "picture".equals(cell.getPropertyId())?
+        "imagecol" : null);
+----
+ifdef::web[]
++
+Then, define the style in CSS (Sass):
+endif::web[]
+
+
++
+[source, css]
+----
+.gridwithpics128px .imagecol {
+    height: 128px;
+    background: black;
+    text-align: center;
+}
+----
+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++#".
+
+ifdef::web[]
+
+[source, java]
+----
+Grid.Column bornColumn = grid.getColumn("born");
+bornColumn.setRenderer(
+    new DateRenderer("%1$tB %1$te, %1$tY",
+                     Locale.ENGLISH));
+----
+
++
+Optionally, a locale can be given. Otherwise, the default locale (in the
+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]
+----
+grid.addColumn("link", String.class)
+    .setRenderer(new HtmlRenderer());
+----
+ifdef::web[]
++
+Then, in the grid data, give the cell content:
+endif::web[]
+
+
++
+[source, java]
+----
+grid.addRow("Nicolaus Copernicus", 1543,
+            "<a href='http://en.wikipedia.org/wiki/" +
+            "Nicolaus_Copernicus' target='_top'>info</a>");
+----
++
+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
+[classname]#DecimalFormat# and [classname]#ChoiceFormat#, or by
+[methodname]#String.format()#.
+
+ifdef::web[]
+For example:
+
+
++
+[source, java]
+----
+// Define some columns
+grid.addColumn("name", String.class);
+grid.addColumn("born", Integer.class);
+grid.addColumn("sletters", Integer.class);
+grid.addColumn("rating", Double.class);
+
+// Use decimal format
+grid.getColumn("born").setRenderer(new NumberRenderer(
+    new DecimalFormat("in #### AD")));
+
+// Use textual formatting on numeric ranges
+grid.getColumn("sletters").setRenderer(new NumberRenderer(
+    new ChoiceFormat("0#none|1#one|2#multiple")));
+
+// Use String.format() formatting
+grid.getColumn("rating").setRenderer(new NumberRenderer(
+    "%02.4f", Locale.ENGLISH));
+
+// Add some data rows
+grid.addRow("Nicolaus Copernicus", 1473, 2, 0.4);
+grid.addRow("Galileo Galilei",     1564, 0, 4.2);
+grid.addRow("Johannes Kepler",     1571, 1, 2.3);
+----
+endif::web[]
+[classname]#ProgressBarRenderer#:: Renders a progress bar in a column with a [classname]#Double# type. The value
+must be between 0.0 and 1.0.
+
+ifdef::web[]
+For example:
+
+
++
+[source, java]
+----
+// Define some columns
+grid.addColumn("name", String.class);
+grid.addColumn("rating", Double.class)
+    .setRenderer(new ProgressBarRenderer());
+
+// Add some data rows
+grid.addRow("Nicolaus Copernicus", 0.1);
+grid.addRow("Galileo Galilei",     0.42);
+grid.addRow("Johannes Kepler",     1.0);
+----
+endif::web[]
+[classname]#TextRenderer#:: Displays plain text as is. Any HTML markup is quoted.
+
+
+
+[[components.grid.renderer.custom]]
+=== Custom Renderers
+
+Renderers are component extensions that require a client-side counterpart. See
+<<dummy/../../../framework/clientsidewidgets/clientsidewidgets-grid#clientsidewidgets.grid.renderers,"Renderers">>
+for information on implementing custom renderers.
+
+
+[[components.grid.renderer.converter]]
+=== Converting for Rendering
+
+Optionally, you can give a [interfacename]#Converter# in the
+[methodname]#setRenderer()#, or define it for the column, to convert the data
+value to an intermediary representation that is rendered by the renderer. For
+example, when using an [classname]#ImageRenderer#, you could store the image file name
+in the data column, which the converter would convert to a resource, which would
+then be rendered by the renderer.
+
+In the following example, we use a converter and [classname]#HTMLRenderer# to display boolean
+values as [classname]#FontAwesome# icons
+[source, java]
+----
+// Have a column for hyperlink paths to Wikipedia
+grid.addColumn("truth", Boolean.class);
+Grid.Column truth = grid.getColumn("truth");
+truth.setRenderer(new HtmlRenderer(),
+    new StringToBooleanConverter(
+        FontAwesome.CHECK_CIRCLE_O.getHtml(),
+        FontAwesome.CIRCLE_O.getHtml()));
+...
+----
+
+In this example, we use a converter to format URL paths to complete
+HTML hyperlinks with [classname]#HTMLRenderer#:
+
+
+[source, java]
+----
+// Have a column for hyperlink paths to Wikipedia
+grid.addColumn("link", String.class);
+
+Grid.Column linkColumn = grid.getColumn("link");
+linkColumn.setRenderer(new HtmlRenderer(),
+                       new Converter<String,String>(){
+    @Override
+    public String convertToModel(String value,
+        Class<? extends String> targetType, Locale locale)
+        throws Converter.ConversionException {
+        return "not implemented";
+    }
+
+    @Override
+    public String convertToPresentation(String value,
+        Class<? extends String> targetType, Locale locale)
+        throws Converter.ConversionException {
+        return "<a href='http://en.wikipedia.org/wiki/" +
+                value + "' target='_blank'>more info</a>";
+    }
+
+    @Override
+    public Class<String> getModelType() {
+        return String.class;
+    }
+
+    @Override
+    public Class<String> getPresentationType() {
+        return String.class;
+    }
+});
+
+// Data with a hyperlink path in the third column
+grid.addRow("Nicolaus Copernicus", 1473,
+            "Nicolaus_Copernicus");
+...
+----
+
+A [classname]#GeneratedPropertyContainer# could be used for much the same
+purpose.
+
+
+
+[[components.grid.headerfooter]]
+== Header and Footer
+
+A grid by default has a header, which displays column names, and can have a
+footer. Both can have multiple rows and neighbouring header row cells can be
+joined to feature column groups.
+
+[[components.grid.headerfooter.adding]]
+=== Adding and Removing Header and Footer Rows
+
+A new header row is added with [methodname]#prependHeaderRow()#, which adds it
+at the top of the header, [methodname]#appendHeaderRow()#, which adds it at the
+bottom of the header, or with [methodname]#addHeaderRowAt()#, which inserts it
+at the specified 0-base index. All of the methods return a
+[classname]#HeaderRow# object, which you can use to work on the header further.
+
+
+[source, java]
+----
+// Group headers by joining the cells
+HeaderRow groupingHeader = grid.prependHeaderRow();
+...
+
+// Create a header row to hold column filters
+HeaderRow filterRow = grid.appendHeaderRow();
+...
+----
+
+Similarly, you can add footer rows with [methodname]#appendFooterRow()#,
+[methodname]#prependFooterRow()#, and [methodname]#addFooterRowAt()#.
+
+
+[[components.grid.headerfooter.joining]]
+=== Joining Header and Footer Cells
+
+You can join two or more header or footer cells with the [methodname]#join()#
+method. For header cells, the intention is usually to create column grouping,
+while for footer cells, you typically calculate sums or averages.
+
+
+[source, java]
+----
+// Group headers by joining the cells
+HeaderRow groupingHeader = grid.prependHeaderRow();
+HeaderCell namesCell = groupingHeader.join(
+    groupingHeader.getCell("firstname"),
+    groupingHeader.getCell("lastname")).setText("Person");
+HeaderCell yearsCell = groupingHeader.join(
+    groupingHeader.getCell("born"),
+    groupingHeader.getCell("died"),
+    groupingHeader.getCell("lived")).setText("Dates of Life");
+----
+
+
+[[components.grid.headerfooter.content]]
+=== Text and HTML Content
+
+You can set the header caption with [methodname]#setText()#, in which case any
+HTML formatting characters are quoted to ensure security.
+
+
+[source, java]
+----
+HeaderRow mainHeader = grid.getDefaultHeaderRow();
+mainHeader.getCell("firstname").setText("First Name");
+mainHeader.getCell("lastname").setText("Last Name");
+mainHeader.getCell("born").setText("Born In");
+mainHeader.getCell("died").setText("Died In");
+mainHeader.getCell("lived").setText("Lived For");
+----
+
+To use raw HTML in the captions, you can use [methodname]#setHtml()#.
+
+
+[source, java]
+----
+namesCell.setHtml("<b>Names</b>");
+yearsCell.setHtml("<b>Years</b>");
+----
+
+
+[[components.grid.headerfooter.components]]
+=== Components in Header or Footer
+
+You can set a component in a header or footer cell with
+[methodname]#setComponent()#. Often, this feature is used to allow filtering, as
+described in <<components.grid.filtering>>, which also gives an example of the
+use.
+
+
+
+[[components.grid.filtering]]
+== Filtering
+
+The ability to include components in the grid header can be used to create
+filters for the grid data. Filtering is done in the container data source, so
+the container must be of type that implements
+[interfacename]#Container.Filterable#.
+
+[[figure.components.grid.filtering]]
+.Filtering Grid
+image::img/grid-filtering.png[]
+
+The filtering illustrated in <<figure.components.grid.filtering>> can be created
+as follows:
+
+
+[source, java]
+----
+// Have a filterable container
+IndexedContainer container = exampleDataSource();
+
+// Create a grid bound to it
+Grid grid = new Grid(container);
+grid.setSelectionMode(SelectionMode.NONE);
+grid.setWidth("500px");
+grid.setHeight("300px");
+
+// Create a header row to hold column filters
+HeaderRow filterRow = grid.appendHeaderRow();
+
+// Set up a filter for all columns
+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(
+                new SimpleStringFilter(pid,
+                    change.getText(), true, false));
+    });
+    cell.setComponent(filterField);
+}
+----
+
+
+[[components.grid.sorting]]
+== Sorting
+
+A user can sort the data in a grid on a column by clicking the column header.
+Clicking another time on the current sort column reverses the sort direction.
+Clicking on other column headers while keeping the Shift key pressed adds a
+secondary or more sort criteria.
+
+[[figure.components.grid.sorting]]
+.Sorting Grid on Multiple Columns
+image::img/grid-sorting.png[]
+
+Defining sort criteria programmatically can be done with the various
+alternatives of the [methodname]#sort()# method. You can sort on a specific
+column with [methodname]#sort(Object propertyId)#, which defaults to ascending
+sorting order, or [methodname]#sort(Object propertyId, SortDirection
+direction)#, which allows specifying the sort direction.
+
+
+[source, java]
+----
+grid.sort("name", SortDirection.DESCENDING);
+----
+
+To sort on multiple columns, you need to use the fluid sort API with
+[methodname]#sort(Sort)#, which allows chaining sorting rules. Sorting rules are
+created with the static [methodname]#by()# method, which defines the primary
+sort column, and [methodname]#then()#, which can be used to specify any
+secondary sort columns. They default to ascending sort order, but the sort
+direction can be given with an optional parameter.
+
+
+[source, java]
+----
+// Sort first by city and then by name 
+grid.sort(Sort.by("city", SortDirection.ASCENDING)
+              .then("name", SortDirection.DESCENDING));
+----
+
+The container data source must support sorting. At least, it must implement
+[interfacename]#Container.Sortable#. Note that when using
+[classname]#GeneratedPropertyContainer#, as described in
+<<components.grid.generatedcolumns>>, even though the container implements the
+interface, the wrapped container must also support it. Also, the generated
+properties are not normally sortable, but require special handling to enable
+sorting.
+
+
+[[components.grid.editing]]
+== Editing
+
+Grid supports line-based editing, where double-clicking a row opens the row
+editor. In the editor, the input fields can be edited, as well as navigated with
+kbd:[Tab] and kbd:[Shift+Tab] keys. If validation fails, an error is displayed and the user
+can correct the inputs.
+
+To enable editing, you need to call [methodname]#setEditorEnabled(true)# for the
+grid.
+
+
+[source, java]
+----
+Grid grid = new Grid(GridExample.exampleDataSource());
+grid.setEditorEnabled(true);
+----
+
+Grid supports two row editor modes - buffered and unbuffered. The default mode is
+buffered. The mode can be changed with [methodname]#setBuffered(false)#
+
+[[components.grid.editing.buffered]]
+=== Buffered Mode
+
+The editor has a [guibutton]#Save# button that commits
+the data item to the container data source and closes the editor. The
+[guibutton]#Cancel# button discards the changes and exits the editor.
+
+A row under editing is illustrated in <<figure.components.grid.editing>>.
+
+[[figure.components.grid.editing]]
+.Editing a Grid Row
+image::img/grid-editor-basic.png[]
+
+[[components.grid.editing.unbuffered]]
+=== Unbuffered Mode
+
+The editor has no buttons and all changed data is committed directly
+to the container. If another row is clicked, the editor for the current row is closed and
+a row editor for the clicked row is opened.
+
+[[components.grid.editing.fields]]
+=== Editor Fields
+
+The editor fields are by default generated with a [interfacename]#FieldFactory#
+and bound to the container data source with a [classname]#FieldGroup#, which
+also handles tasks such as validation, as explained later.
+
+To disable editing in a particular column, you can call
+[methodname]#setEditable()# in the [classname]#Column# object with
+[parameter]#false# parameter.
+
+[[components.grid.editing.editorfields]]
+=== Customizing Editor Fields
+
+The editor fields are normally created by the field factory of the editor's field
+group, which creates the fields according to the data types of their respective
+columns. To customize the editor fields of specific properties, such as to style
+them or to set up validation, you can provide them with
+[methodname]#setEditorField()# in the respective columns.
+
+In the following example, we configure a field with validation and styling:
+
+
+[source, java]
+----
+TextField nameEditor = new TextField();
+
+// Custom CSS style
+nameEditor.addStyleName("nameeditor");
+
+// Custom validation
+nameEditor.addValidator(new RegexpValidator(
+    "^\\p{Alpha}+ \\p{Alpha}+$",
+    "Need first and last name"));
+
+grid.getColumn("name").setEditorField(nameEditor);
+----
+
+Setting an editor field to [parameter]#null# deletes the currently existing
+editor field, whether it was automatically generated or set explicitly with the
+setter. It will be regenerated with the factory the next time it is needed.
+
+
+ifdef::web[]
+[[components.grid.editing.captions]]
+=== Customizing Editor Buttons
+
+In the buffered mode, the editor has two buttons: [guibutton]#Save# and [guibutton]#Cancel#. You can
+set their captions with [methodname]#setEditorSaveCaption()# and
+[methodname]#setEditorCancelCaption()#, respectively.
+
+In the following example, we demonstrate one way to translate the captions:
+
+
+[source, java]
+----
+// Captions are stored in a resource bundle
+ResourceBundle bundle = ResourceBundle.getBundle(
+    MyAppCaptions.class.getName(),
+    Locale.forLanguageTag("fi")); // Finnish
+
+// Localize the editor button captions
+grid.setEditorSaveCaption(
+    bundle.getString(MyAppCaptions.SaveKey));
+grid.setEditorCancelCaption(
+    bundle.getString(MyAppCaptions.CancelKey));
+----
+
+endif::web[]
+
+[[components.grid.editing.fieldgroup]]
+=== Binding to Data with a Field Group
+
+Data binding to the item under editing is handled with a
+[classname]#FieldGroup#, which you need to set with
+[methodname]#setEditorFieldGroup#. This is mostly useful when using
+special-purpose field groups, such as [classname]#BeanFieldGroup# to enable bean
+validation.
+
+For example, assuming that we want to enable bean validation for a bean such as
+the following:
+
+
+[source, java]
+----
+public class Person implements Serializable {
+    @NotNull
+    @Size(min=2, max=10)
+    private String name;
+    
+    @Min(1)
+    @Max(130)       
+    private int age;
+    ...]
+----
+
+We can now use a [classname]#BeanFieldGroup# in the [classname]#Grid# as
+follows:
+
+
+[source, java]
+----
+Grid grid = new Grid(exampleBeanDataSource());
+grid.setColumnOrder("name", "age");
+grid.setEditorEnabled(true);
+
+// Enable bean validation for the data
+grid.setEditorFieldGroup(
+    new BeanFieldGroup<Person>(Person.class));
+
+// Have some extra validation in a field
+TextField nameEditor = new TextField();
+nameEditor.addValidator(new RegexpValidator(
+    "^\\p{Alpha}+ \\p{Alpha}+$",
+    "Need first and last name"));
+grid.setEditorField("name", nameEditor);
+----
+
+To use bean validation as in the example above, you need to include an
+implementation of the Bean Validation API in the classpath, as described in
+<<dummy/../../../framework/datamodel/datamodel-itembinding#datamodel.itembinding.beanvalidation,"Bean
+Validation">>.
+
+
+ifdef::web[]
+[[components.grid.editing.validation]]
+=== Handling Validation Errors
+
+The input fields are validated when the value is updated. The default
+error handler displays error indicators in the invalid fields, as well as the
+first error in the editor.
+
+[[figure.components.grid.errors]]
+.Editing a Grid Row
+image::img/grid-editor-errors.png[]
+
+You can modify the error handling by implementing a custom
+[interfacename]#EditorErrorHandler# or by extending the
+[classname]#DefaultEditorErrorHandler#.
+
+endif::web[]
+
+[[components.grid.editing.fieldfactory]]
+=== Editor Field Factory
+
+The fields are generated by the [classname]#FieldFactory# of the field group;
+you can also set it with [methodname]#setEditorFieldFactory()#. Alternatively,
+you can create the editor fields explicitly with [methodname]#setEditorField()#.
+
+[[components.grid.scrolling]]
+== Programmatic Scrolling
+
+You can scroll to first item with [methodname]#scrollToStart()#, to end with
+[methodname]#scrollToEnd()#, or to a specific row with [methodname]#scrollTo()#.
+
+
+[[components.grid.stylegeneration]]
+== Generating Row or Cell Styles
+
+You can style entire rows with a [interfacename]#RowStyleGenerator# or
+individual cells with a [interfacename]#CellStyleGenerator#.
+
+[[components.grid.stylegeneration.row]]
+=== Generating Row Styles
+
+You set a [interfacename]#RowStyleGenerator# to a grid with
+[methodname]#setRowStyleGenerator()#. The [methodname]#getStyle()# method gets a
+[classname]#RowReference#, which contains various information about the row and
+a reference to the grid, and should return a style name or [parameter]#null# if
+no style is generated.
+
+For example, to add a style names to rows having certain values in one column,
+you can style them as follows:
+
+
+[source, java]
+----
+grid.setRowStyleGenerator(rowRef -> {// Java 8
+    if (! ((Boolean) rowRef.getItem()
+                           .getItemProperty("alive")
+                           .getValue()).booleanValue())
+        return "grayed";
+    else
+        return null;
+});
+----
+
+You could then style the rows with CSS as follows:
+
+
+[source, css]
+----
+.v-grid-row.grayed {
+    color: gray;
+}
+----
+
+
+[[components.grid.stylegeneration.cell]]
+=== Generating Cell Styles
+
+You set a [interfacename]#CellStyleGenerator# to a grid with
+[methodname]#setCellStyleGenerator()#. The [methodname]#getStyle()# method gets
+a [classname]#CellReference#, which contains various information about the cell
+and a reference to the grid, and should return a style name or [parameter]#null#
+if no style is generated.
+
+For example, to add a style name to a specific column, you can match on the
+property ID of the column as follows:
+
+
+[source, java]
+----
+grid.setCellStyleGenerator(cellRef -> // Java 8
+    "born".equals(cellRef.getPropertyId())?
+        "rightalign" : null);
+----
+
+You could then style the cells with a CSS rule as follows:
+
+
+[source, css]
+----
+.v-grid-cell.rightalign {
+    text-align: right;
+}
+----
+
+
+
+[[components.grid.css]]
+== Styling with CSS
+
+
+[source, css]
+----
+.v-grid {
+  .v-grid-scroller, .v-grid-scroller-horizontal { }
+  .v-grid-tablewrapper {
+    .v-grid-header {
+      .v-grid-row {
+        .v-grid-cell, .frozen, .v-grid-cell-focused { }
+      }
+    }
+    .v-grid-body {
+      .v-grid-row,
+      .v-grid-row-stripe,
+      .v-grid-row-has-data {
+        .v-grid-cell, .frozen, .v-grid-cell-focused { }
+      }
+    }
+    .v-grid-footer {
+      .v-grid-row {
+        .v-grid-cell, .frozen, .v-grid-cell-focused { }
+      }
+    }
+  }
+  .v-grid-header-deco { }
+  .v-grid-footer-deco { }
+  .v-grid-horizontal-scrollbar-deco { }
+  .v-grid-editor {
+    .v-grid-editor-cells { }
+    .v-grid-editor-footer {
+      .v-grid-editor-message { }
+      .v-grid-editor-buttons {
+        .v-grid-editor-save { }
+        .v-grid-editor-cancel { }
+      }
+    }
+  }
+}
+----
+
+A [classname]#Grid# has an overall [literal]#++v-grid++# style. The actual grid
+has three parts: a header, a body, and a footer. The scrollbar is a custom
+element with [literal]#++v-grid-scroller++# style. In addition, there are some
+decoration elements.
+
+Grid cells, whether thay are in the header, body, or footer, have a basic
+[literal]#++v-grid-cell++# style. Cells in a frozen column additionally have a
+[literal]#++frozen++# style. Rows have [literal]#++v-grid-row++# style, and
+every other row has additionally a [literal]#++v-grid-row-stripe++# style.
+
+The focused row has additionally [literal]#++v-grid-row-focused++# style and
+focused cell [literal]#++v-grid-cell-focused++#. By default, cell focus is
+visible, with the border stylable with [parameter]#$v-grid-cell-focused-border#
+parameter in Sass. Row focus has no visible styling, but can be made visible
+with the [parameter]#$v-grid-row-focused-background-color# parameter or with a
+custom style rule.
+
+In editing mode, a [literal]#++v-grid-editor++# overlay is placed on the row
+under editing. In addition to the editor field cells, it has an error message
+element, as well as the buttons.
+
+
+((()))
+
+
diff --git a/documentation/components/components-interfaces.asciidoc b/documentation/components/components-interfaces.asciidoc
new file mode 100644
index 0000000000..4801ec52b1
--- /dev/null
+++ b/documentation/components/components-interfaces.asciidoc
@@ -0,0 +1,117 @@
+---
+title: Interfaces and Abstractions
+order: 2
+layout: page
+---
+
+[[components.interfaces]]
+= Interfaces and Abstractions
+
+((("interfaces")))
+Vaadin user interface components are built on a skeleton of interfaces and
+abstract classes that define and implement the features common to all components
+and the basic logic how the component states are serialized between the server
+and the client.
+
+This section gives details on the basic component interfaces and abstractions.
+The layout and other component container abstractions are described in
+<<dummy/../../../framework/layout/layout-overview.asciidoc#layout.overview,"Managing
+Layout">>. The interfaces that define the Vaadin data model are described in
+<<dummy/../../../framework/datamodel/datamodel-overview.asciidoc#datamodel.overview,"Binding
+Components to Data">>.
+
+[[figure.components.interfaces]]
+.Component Interfaces and Abstractions
+image::img/component-abstractions-hi.png[]
+
+((("[classname]#Paintable#")))
+((("[classname]#VariableOwner#")))
+All components also implement the [classname]#Paintable# interface, which is
+used for serializing ("painting") the components to the client, and the reverse
+[classname]#VariableOwner# interface, which is needed for deserializing
+component state or user interaction from the client.
+
+((("[classname]#Serializable#")))
+In addition to the interfaces defined within the Vaadin framework, all
+components implement the [classname]#java.io.Serializable# interface to allow
+serialization. Serialization is needed in many clustering and cloud computing
+solutions.
+
+[[components.interfaces.component]]
+== [classname]#Component# Interface
+
+((("[interfacename]#Component# interface")))
+The [interfacename]#Component# interface is paired with the
+[classname]#AbstractComponent# class, which implements all the methods defined
+in the interface.
+
+=== Component Tree Management
+
+Components are laid out in the user interface hierarchically. The layout is
+managed by layout components, or more generally components that implement the
+[classname]#ComponentContainer# interface. Such a container is the parent of the
+contained components.
+
+The [methodname]#getParent()# method allows retrieving the parent component of a
+component. While there is a [methodname]#setParent()#, you rarely need it as you
+usually add components with the [methodname]#addComponent()# method of the
+[classname]#ComponentContainer# interface, which automatically sets the parent.
+
+A component does not know its parent when the component is still being created,
+so you can not refer to the parent in the constructor with
+[methodname]#getParent()#.
+
+Attaching a component to an UI triggers a call to its [methodname]#attach()#
+method. Correspondingly, removing a component from a container triggers calling
+the [methodname]#detach()# method. If the parent of an added component is
+already connected to the UI, the [methodname]#attach()# is called immediately
+from [methodname]#setParent()#.
+
+
+[source, java]
+----
+public class AttachExample extends CustomComponent {
+    public AttachExample() {
+    }
+    
+    @Override
+    public void attach() {
+        super.attach(); // Must call.
+        
+        // Now we know who ultimately owns us.
+        ClassResource r = new ClassResource("smiley.jpg");
+        Image image = new Image("Image:", r); 
+        setCompositionRoot(image);
+    }
+}
+----
+
+The attachment logic is implemented in [classname]#AbstractComponent#, as
+described in <<components.interfaces.abstractcomponent>>.
+
+
+((("[classname]#Component# interface")))
+
+[[components.interfaces.abstractcomponent]]
+== [classname]#AbstractComponent#
+
+((("[classname]#AbstractComponent#", id="term.components.interfaces.abstractcomponent", range="startofrange")))
+
+
+[classname]#AbstractComponent# is the base class for all user interface
+components. It is the (only) implementation of the [classname]#Component#
+interface, implementing all the methods defined in the interface.
+
+[classname]#AbstractComponent# has a single abstract method,
+[methodname]#getTag()#, which returns the serialization identifier of a
+particular component class. It needs to be implemented when (and only when)
+creating entirely new components. [classname]#AbstractComponent# manages much of
+the serialization of component states between the client and the server.
+Creation of new components and serialization is described in
+<<dummy/../../../framework/gwt/gwt-overview.asciidoc#gwt.overview,"Integrating
+with the Server-Side">>.
+
+(((range="endofrange", startref="term.components.interfaces.abstractcomponent")))
+
+
+
diff --git a/documentation/components/components-label.asciidoc b/documentation/components/components-label.asciidoc
new file mode 100644
index 0000000000..115de5b376
--- /dev/null
+++ b/documentation/components/components-label.asciidoc
@@ -0,0 +1,311 @@
+---
+title: Label
+order: 7
+layout: page
+---
+
+[[components.label]]
+= [classname]#Label#
+
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-presentation/label]
+endif::web[]
+
+[classname]#Label# component displays non-editable text. This text can be used
+for short simple labels or for displaying long text, such as paragraphs. The
+text can be formatted in HTML or as preformatted text, depending on the
+__content mode__ of the label.
+
+You can give the label text most conviniently in the constructor, as is done in
+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
+VerticalLayout layout = new VerticalLayout();
+
+Label label = new Label("Labeling can be dangerous");
+layout.addComponent(label);
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.label.basic[on-line example, window="_blank"].
+
+[classname]#Label# implements the [interfacename]#Property# interface to allow
+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()));
+editor.setImmediate(true); // Send on Enter
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.label.basic[on-line example, window="_blank"].
+
+Label also supports data binding to a property data source, as described later
+in <<components.label.databinding>>. However, in that case the value can not be
+set through the label, as [classname]#Label# is not a
+[interfacename]#Property.Editor# and is not allowed to write to a bound
+property.
+
+Even though [classname]#Label# is text and is often used as a caption, it is a
+normal component and therefore also has a caption that you can set with
+[methodname]#setCaption()#. As with most other components, the caption is
+managed by the containing layout.
+
+[[components.label.wrap]]
+== Text Width and Wrapping
+
+[classname]#Label# has 100% default width, so the containing layout must also
+have a defined width. If the width of the label's text exceeds the width of the
+label, the text will wrap around and continue on the next line. Some layout
+components have undefined width by default, such as
+[classname]#HorizontalLayout#, so you need to pay special care with them.
+
+
+[source, java]
+----
+// A container with a defined width.
+Panel panel = new Panel("Panel Containing a Label");
+panel.setWidth("300px");
+
+panel.setContent(
+    new Label("This is a Label inside a Panel. There is " +
+              "enough text in the label to make the text " +
+              "wrap when it exceeds the width of the panel."));
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.label.wrap[on-line example, window="_blank"].
+
+As the size of the [classname]#Panel# in the above example is fixed and the
+width of [classname]#Label# is the default 100%, the text in the
+[classname]#Label# will wrap to fit the panel, as shown in
+<<figure.components.label>>.
+
+[[figure.components.label]]
+.The Label Component
+image::img/label-example1.png[]
+
+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
+a layout with defined width, the [classname]#Label# will overflow the layout
+horizontally and, normally, be truncated.
+
+
+[[components.label.content-mode]]
+== Content Mode
+
+The content of a label is formatted depending on a __content mode__. By default,
+the text is assumed to be plain text and any contained XML-specific characters
+will be quoted appropriately to allow rendering the contents of a label in HTML
+in a web browser. The content mode can be set in the constructor or with
+[methodname]#setContentMode()#, and can have the values defined in the
+[classname]#ContentMode# enumeration type in
+[package]#com.vaadin.shared.ui.label# package:
+
+TEXT:: The default content mode where the label contains only plain text. All
+characters are allowed, including the special [literal]#++<++#,
+[literal]#++>++#, and [literal]#++&++# characters in XML or HTML, which are
+quoted properly in HTML while rendering the component. This is the default mode.
+
+PREFORMATTED:: Content mode where the label contains preformatted text. It will be, by default,
+rendered with a fixed-width typewriter font. Preformatted text can contain line
+breaks, written in Java with the [literal]#++\n++# escape sequence for a newline
+character (ASCII 0x0a), or tabulator characters written with [literal]#++\t++#
+(ASCII 0x09).
+
+HTML:: Content mode where the label contains HTML.
+
++
+Please note the following security and validity warnings regarding the HTML
+content mode.
+
+
+
+
+[WARNING]
+.Cross-Site Scripting Warning
+====
+Having [classname]#Label# in HTML content mode allows pure HTML content. If the
+content comes from user input, you should always carefully sanitize it to
+prevent cross-site scripting (XSS) attacks. Please see
+<<dummy/../../../framework/advanced/advanced-security#advanced.security.sanitizing,"Sanitizing
+User Input to Prevent Cross-Site Scripting">>.
+
+Also, the validity of the HTML content is not checked when rendering the
+component and any errors can result in an error in the browser. If the content
+comes from an uncertain source, you should always validate it before displaying
+it in the component.
+
+====
+
+
+
+The following example demonstrates the use of [classname]#Label# in different
+modes.
+
+
+[source, java]
+----
+Label textLabel = new Label(
+    "Text where formatting characters, such as \\n, " +
+    "and HTML, such as <b>here</b>, are quoted.",
+    ContentMode.TEXT);
+
+Label preLabel = new Label(
+    "Preformatted text is shown in an HTML <pre> tag.\n" +
+    "Formatting such as\n" +
+    "  * newlines\n" + 
+    "  * whitespace\n" +
+    "and such are preserved. HTML tags, \n"+
+    "such as <b>bold</b>, are quoted.",
+    ContentMode.PREFORMATTED);
+
+Label htmlLabel = new Label(
+    "In HTML mode, all HTML formatting tags, such as \n" +
+    "<ul>"+
+    "  <li><b>bold</b></li>"+
+    "  <li>itemized lists</li>"+
+    "  <li>etc.</li>"+
+    "</ul> "+
+    "are preserved.",
+    ContentMode.HTML);
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.label.content-modes.contentmodes[on-line example, window="_blank"].
+
+The rendering will look as shown in <<figure.components.label.content-mode>>.
+
+[[figure.components.label.content-mode]]
+.Label Content Modes
+image::img/label-modes.png[]
+
+
+ifdef::web[]
+[[components.label.spacing]]
+== Spacing with a [classname]#Label#
+
+You can use a [classname]#Label# to create vertical or horizontal space in a
+layout. If you need a empty "line" in a vertical layout, having just a label
+with empty text is not enough, as it will collapse to zero height. The same goes
+for a label with only whitespace as the label text. You need to use a
+non-breaking space character, either [literal]#++&nbsp;++# or
+[literal]#++&#160;++#:
+
+
+[source, java]
+----
+layout.addComponent(new Label("&nbsp;", ContentMode.HTML));
+----
+
+Using the [parameter]#ContentMode.PREFORMATTED# mode has the same effect;
+preformatted spaces do not collapse in a vertical layout. In a
+[classname]#HorizontalLayout#, the width of a space character may be
+unpredictable if the label font is proportional, so you can use the preformatted
+mode to add em-width wide spaces.
+
+If you want a gap that has adjustable width or height, you can use an empty
+label if you specify a height or width for it. For example, to create vertical
+space in a [classname]#VerticalLayout#:
+
+
+[source, java]
+----
+Label gap = new Label();
+gap.setHeight("1em");
+verticalLayout.addComponent(gap);
+----
+
+You can make a flexible expanding spacer by having a relatively sized empty
+label with [literal]#++100%++# height or width and setting the label as
+expanding in the layout.
+
+
+[source, java]
+----
+// A wide component bar
+HorizontalLayout horizontal = new HorizontalLayout();
+horizontal.setWidth("100%");
+
+// Have a component before the gap (a collapsing cell)
+Button button1 = new Button("I'm on the left");
+horizontal.addComponent(button1);
+
+// An expanding gap spacer
+Label expandingGap = new Label();
+expandingGap.setWidth("100%");
+horizontal.addComponent(expandingGap);
+horizontal.setExpandRatio(expandingGap, 1.0f);
+
+// A component after the gap (a collapsing cell)
+Button button2 = new Button("I'm on the right");
+horizontal.addComponent(button2);
+----
+
+endif::web[]
+
+[[components.label.databinding]]
+== Data Binding
+
+While [classname]#Label# is not a field component, it is a
+[interfacename]#Property.Viewer# and can be bound to a property data source,
+described in
+<<dummy/../../../framework/datamodel/datamodel-properties#datamodel.properties,"Properties">>.
+You can specify the data source either in the constructor or by the
+[methodname]#setPropertyDataSource()# method.
+
+
+[source, java]
+----
+// Some property
+ObjectProperty<String> property =
+    new ObjectProperty<String>("some value");
+        
+// Label that is bound to the property
+Label label = new Label(property);
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.label.binding[on-line example, window="_blank"].
+
+Further, as [classname]#Label# is a [interfacename]#Property#, you can edit its
+value with a property editor, such as a field:
+
+
+[source, java]
+----
+Label label = new Label("some value");
+TextField editor = new TextField();
+editor.setPropertyDataSource(label);
+editor.setImmediate(true);
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.label.delegation[on-line example, window="_blank"].
+
+However, [classname]#Label# is __not__ a [interfacename]#Property.Editor#, so it
+is read-only when bound to a data source. Therefore, you can not use
+[methodname]#setValue()# to set the value of a connected data source through a
+[classname]#Label# nor bind the label to an editor field, in which case writes
+would be delegated through the label.
+
+
+[[components.label.css]]
+== CSS Style Rules
+
+
+[source, css]
+----
+.v-label { }
+  pre { } /* In PREFORMATTED content mode */
+----
+
+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.
+
+
+
+
diff --git a/documentation/components/components-link.asciidoc b/documentation/components/components-link.asciidoc
new file mode 100644
index 0000000000..b2da97a39f
--- /dev/null
+++ b/documentation/components/components-link.asciidoc
@@ -0,0 +1,161 @@
+---
+title: Link
+order: 8
+layout: page
+---
+
+[[components.link]]
+= [classname]#Link#
+
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/interaction/link]
+endif::web[]
+
+The [classname]#Link# component allows making hyperlinks. References to
+locations are represented as resource objects, explained in
+<<dummy/../../../framework/application/application-resources#application.resources,"Images
+and Other Resources">>. The [classname]#Link# is a regular HTML hyperlink, that
+is, an [literal]#++<a href>++# anchor element that is handled natively by the
+browser. Unlike when clicking a [classname]#Button#, clicking a
+[classname]#Link# does not cause an event on the server-side.
+
+Links to an arbitrary URL can be made by using an [classname]#ExternalResource#
+as follows:
+
+
+[source, java]
+----
+// Textual link
+Link link = new Link("Click Me!",
+        new ExternalResource("http://vaadin.com/"));
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.link.basic[on-line example, window="_blank"].
+
+You can use [methodname]#setIcon()# to make image links as follows:
+
+
+[source, java]
+----
+// Image link
+Link iconic = new Link(null,
+        new ExternalResource("http://vaadin.com/"));
+iconic.setIcon(new ThemeResource("img/nicubunu_Chain.png"));
+
+// Image + caption
+Link combo = new Link("To appease both literal and visual",
+        new ExternalResource("http://vaadin.com/"));
+combo.setIcon(new ThemeResource("img/nicubunu_Chain.png"));
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.link.basic[on-line example, window="_blank"].
+
+The resulting links are shown in <<figure.components.link.basic>>. You could add
+a " [literal]#++display: block++#" style for the icon element to place the
+caption below it.
+
+[[figure.components.link.basic]]
+.[classname]#Link# Example
+image::img/link.png[]
+
+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
+parameter, or by setting the target window with [methodname]#setTargetName()#,
+you can open the resource in another window, such as a popup browser window/tab.
+As the target name is an HTML [literal]#++target++# string managed by the
+browser, the target can be any window, including windows not managed by the
+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
+Link link = new Link("Take me a away to a faraway land",
+        new ExternalResource("http://vaadin.com/"));
+
+// 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[]
+
+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
+window with [methodname]#setTargetWidth()# and [methodname]#setTargetHeight()#.
+You can control the window border style with [methodname]#setTargetBorder()#,
+which takes any of the defined border styles [parameter]#TARGET_BORDER_DEFAULT#,
+[parameter]#TARGET_BORDER_MINIMAL#, and [parameter]#TARGET_BORDER_NONE#. The
+exact result depends on the browser.
+
+
+[source, java]
+----
+// Open the URL in a popup
+link.setTargetName("_blank");
+link.setTargetBorder(Link.TARGET_BORDER_NONE);
+link.setTargetHeight(300);
+link.setTargetWidth(400);
+----
+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.
+
+== CSS Style Rules
+
+
+[source, css]
+----
+.v-link { }
+  a { }
+    .v-icon {}
+    span {}
+----
+
+The overall style for the [classname]#Link# component is [literal]#++v-link++#.
+The root element contains the [literal]#++<a href>++# hyperlink anchor. Inside
+the anchor are the icon, with [literal]#++v-icon++# style, and the caption in a
+text span.
+
+Hyperlink anchors have a number of __pseudo-classes__ that are active at
+different times. An unvisited link has [literal]#++a:link++# class and a visited
+link [literal]#++a:visited++#. When the mouse pointer hovers over the link, it
+will have a:hover, and when the mouse button is being pressed over the link, the
+[literal]#++a:active++# class. When combining the pseudo-classes in a selector,
+please notice that [literal]#++a:hover++# must come after an
+[literal]#++a:link++# and [literal]#++a:visited++#, and [literal]#++a:active++#
+after the [literal]#++a:hover++#.
+
+
+
+
diff --git a/documentation/components/components-listselect.asciidoc b/documentation/components/components-listselect.asciidoc
new file mode 100644
index 0000000000..24f1bebc03
--- /dev/null
+++ b/documentation/components/components-listselect.asciidoc
@@ -0,0 +1,62 @@
+---
+title: ListSelect
+order: 17
+layout: page
+---
+
+[[components.listselect]]
+= [classname]#ListSelect#
+
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/multiple-value/list-select]
+endif::web[]
+
+The [classname]#ListSelect# component is list box that shows the selectable
+items in a vertical list. If the number of items exceeds the height of the
+component, a scrollbar is shown. The component allows both single and multiple
+selection modes, which you can set with [methodname]#setMultiSelect()#. It is
+visually identical in both modes.
+
+
+[source, java]
+----
+// 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", ...);
+
+select.setNullSelectionAllowed(false);
+
+// Show 5 items and a scrollbar if there are more
+select.setRows(5);
+----
+
+The number of visible items is set with [methodname]#setRows()#.
+
+[[figure.components.listselect.basic]]
+.The [classname]#ListSelect# Component
+image::img/listselect-basic.png[]
+
+Common selection component features are described in
+<<dummy/../../../framework/components/components-selection#components.selection,"Selection
+Components">>.
+
+== CSS Style Rules
+
+
+[source, css]
+----
+.v-select {}
+  .v-select-select {}
+    option {}
+----
+
+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.
+
+
+
+
diff --git a/documentation/components/components-menubar.asciidoc b/documentation/components/components-menubar.asciidoc
new file mode 100644
index 0000000000..c70b16497d
--- /dev/null
+++ b/documentation/components/components-menubar.asciidoc
@@ -0,0 +1,223 @@
+---
+title: MenuBar
+order: 25
+layout: page
+---
+
+[[components.menubar]]
+= [classname]#MenuBar#
+
+ifdef::web[]
+[.sampler]
+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.
+
+[[figure.components.menubar]]
+.Menu Bar
+image::img/menubar-example1.png[]
+
+[[components.menubar.creation]]
+== Creating a Menu
+
+The actual menu bar component is first created as follows:
+
+
+[source, java]
+----
+MenuBar barmenu = new MenuBar();
+main.addComponent(barmenu);
+----
+
+You insert the top-level menu items to the [classname]#MenuBar# object with the
+[methodname]#addItem()# method. It takes a string label, an icon resource, and a
+command as its parameters. The icon and command are not required and can be
+[parameter]#null#. The [methodname]#addItem()# method returns a
+[classname]#MenuBar.MenuItem# object, which you can use to add sub-menu items.
+The [classname]#MenuItem# has an identical [methodname]#addItem()# method.
+
+For example (the command is explained later):
+
+
+[source, java]
+----
+// A top-level menu item that opens a submenu
+MenuItem drinks = barmenu.addItem("Beverages", null, null);
+
+// Submenu item with a sub-submenu
+MenuItem hots = drinks.addItem("Hot", null, null);
+hots.addItem("Tea",
+    new ThemeResource("icons/tea-16px.png"),    mycommand);
+hots.addItem("Coffee",
+    new ThemeResource("icons/coffee-16px.png"), mycommand);
+
+// Another submenu item with a sub-submenu
+MenuItem colds = drinks.addItem("Cold", null, null);
+colds.addItem("Milk",      null, mycommand);
+colds.addItem("Weissbier", null, mycommand);
+
+// Another top-level item
+MenuItem snacks = barmenu.addItem("Snacks", null, null);
+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);
+----
+
+
+[[components.menubar.commands]]
+== Handling Menu Selection
+
+Menu selection is handled by executing a __command__ when the user selects an
+item from the menu. A command is a call-back class that implements the
+[classname]#MenuBar.Command# interface.
+
+
+[source, java]
+----
+// A feedback component
+final Label selection = new Label("-");
+main.addComponent(selection);
+
+// Define a common menu command for all the menu items.
+MenuBar.Command mycommand = new MenuBar.Command() {
+    public void menuSelected(MenuItem selectedItem) {
+        selection.setValue("Ordered a " +
+                           selectedItem.getText() +
+                           " from menu.");
+    }  
+};
+----
+
+
+ifdef::web[]
+[[components.menubar.menuitem]]
+== Menu Items
+
+Menu items have properties such as a caption, icon, enabled, visible, and
+description (tooltip). The meaning of these is the same as for components.
+
+Submenus are created by adding sub-items to an item with [methodname]#addItem()#
+or [methodname]#addItemBefore()#.
+
+The __command__ property is a [classname]#MenuBar.Command# that is called when
+the particular menu item is selected. The [methodname]#menuSelected()# callback
+gets the clicked menu item as its parameter.
+
+Menus can have __separators__, which are defined before or after an item with
+[methodname]#addSeparatorBefore()# or [methodname]#addSeparator()# on the item,
+respectively.
+
+
+[source, java]
+----
+MenuItem drinks = barmenu.addItem("Beverages", null, null);
+...
+
+// A sub-menu item after a separator
+drinks.addSeparator();
+drinks.addItem("Quit Drinking", null, null);
+----
+
+Enabling __checkable__ on an menu item with [methodname]#setCheckable()# allows
+the user to switch between checked and unchecked state by clicking on the item.
+You can set the checked state with [methodname]#setChecked()#. Note that if such
+an item has a command, the checked state is not flipped automatically, but you
+need to do it explicitly.
+
+Menu items have various other properties as well, see the API documentation for
+more details.
+
+endif::web[]
+
+[[components.menubar.css]]
+== CSS Style Rules
+
+
+[source, css]
+----
+.v-menubar { }
+  .v-menubar-submenu { }
+    .v-menubar-menuitem { }
+      .v-menubar-menuitem-caption { }
+    .v-menubar-menuitem-selected { }
+    .v-menubar-submenu-indicator { }
+----
+
+The menu bar has the overall style name [literal]#++.v-menubar++#. Each menu
+item has [literal]#++.v-menubar-menuitem++# style normally and additionally
+[literal]#++.v-menubar-selected++# when the item is selected, that is, when the
+mouse pointer hovers over it. The item caption is inside a
+[literal]#++v-menubar-menuitem-caption++#. In the top-level menu bar, the items
+are directly under the component element.
+
+Submenus are floating [literal]#++v-menubar-submenu++# elements outside the menu
+bar element. Therefore, you should not try to match on the component element for
+the submenu popups. In submenus, any further submenu levels are indicated with a
+[literal]#++v-menubar-submenu-indicator++#.
+
+ifdef::web[]
+[[components.menubar.css.menuitems]]
+=== Styling Menu Items
+
+You can set the CSS style name for the menu items with
+[methodname]#setStyleName()#, just like for components. The style name will be
+prepended with [literal]#++v-menubar-menuitem-++#. As [classname]#MenuBar# does
+not indicate the previous selection in any way, you can do that by highlighting
+the previously selected item. However, beware that the [literal]#++selected++#
+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);
+
+// Define a common menu command for all the menu items
+MenuBar.Command mycommand = new MenuBar.Command() {
+    MenuItem previous = null;
+
+    public void menuSelected(MenuItem selectedItem) {
+        selection.setValue("Ordered a " +
+                selectedItem.getText() +
+                " from menu.");
+
+        if (previous != null)
+            previous.setStyleName(null);
+        selectedItem.setStyleName("highlight");
+        previous = selectedItem;
+    }  
+};
+        
+// Put some items in the menu
+barmenu.addItem("Beverages", null, mycommand);
+barmenu.addItem("Snacks", null, mycommand);
+barmenu.addItem("Services", null, mycommand);
+----
+
+You could then style the highlighting in CSS as follows:
+
+
+[source, css]
+----
+.mybarmenu .v-menubar-menuitem-highlight {
+    background: #000040; /* Dark blue */
+}
+----
+
+endif::web[]
+
+
+
+
diff --git a/documentation/components/components-nativeselect.asciidoc b/documentation/components/components-nativeselect.asciidoc
new file mode 100644
index 0000000000..2b0bea66f7
--- /dev/null
+++ b/documentation/components/components-nativeselect.asciidoc
@@ -0,0 +1,54 @@
+---
+title: NativeSelect
+order: 18
+layout: page
+---
+
+[[components.nativeselect]]
+= [classname]#NativeSelect#
+
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/multiple-value/drop-down-menu]
+endif::web[]
+
+[classname]#NativeSelect# is a drop-down selection component implemented with
+the native selection input of web browsers, using the HTML
+[literal]#++<select>++# element.
+
+
+[source, java]
+----
+// Create the selection component
+NativeSelect select = new NativeSelect("Native Selection");
+        
+// Add some items
+select.addItems("Mercury", "Venus", ...);
+----
+
+The [methodname]#setColumns()# allows setting the width of the list as
+"columns", which is a measure that depends on the browser.
+
+[[figure.components.nativeselect.basic]]
+.The [classname]#NativeSelect# Component
+image::img/nativeselect-basic.png[]
+
+Common selection component features are described in
+<<dummy/../../../framework/components/components-selection#components.selection,"Selection
+Components">>.
+
+== CSS Style Rules
+
+
+[source, css]
+----
+.v-select {}
+  .v-select-select {}
+----
+
+The component has a [literal]#++v-select++# overall style. The native
+[literal]#++select++# element has [literal]#++v-select-select++# style.
+
+
+
+
diff --git a/documentation/components/components-optiongroup.asciidoc b/documentation/components/components-optiongroup.asciidoc
new file mode 100644
index 0000000000..8c4c0e2963
--- /dev/null
+++ b/documentation/components/components-optiongroup.asciidoc
@@ -0,0 +1,146 @@
+---
+title: OptionGroup
+order: 19
+layout: page
+---
+
+[[components.optiongroup]]
+= [classname]#OptionGroup#
+
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/multiple-value/option-group]
+endif::web[]
+
+[classname]#OptionGroup# is a selection component that allows selection from a
+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">>.
+
+[[figure.components.optiongroup]]
+.Option Button Group in Single and Multiple Selection Mode
+image::img/optiongroup-basic.png[]
+
+Option group is by default in single selection mode. Multiple selection is
+enabled with [methodname]#setMultiSelect()#.
+
+
+[source, java]
+----
+// A single-select radio button group
+OptionGroup single = new OptionGroup("Single Selection");
+single.addItems("Single", "Sola", "Yksi");
+
+// A multi-select check box group
+OptionGroup multi = new OptionGroup("Multiple Selection");
+multi.setMultiSelect(true);
+multi.addItems("Many", "Muchos", "Monta");
+----
+
+<<figure.components.optiongroup>> shows the [classname]#OptionGroup# in both
+single and multiple selection mode.
+
+You can also create check boxes individually using the [classname]#CheckBox#
+class, as described in
+<<dummy/../../../framework/components/components-checkbox#components.checkbox,"CheckBox">>.
+The advantages of the [classname]#OptionGroup# component are that as it
+maintains the individual check box objects, you can get an array of the
+currently selected items easily, and that you can easily change the appearance
+of a single component.
+
+[[components.optiongroup.disabling]]
+== Disabling Items
+
+You can disable individual items in an [classname]#OptionGroup# with
+[methodname]#setItemEnabled()#. The user can not select or deselect disabled
+items in multi-select mode, but in single-select mode the use can change the
+selection from a disabled to an enabled item. The selections can be changed
+programmatically regardless of whether an item is enabled or disabled. You can
+find out whether an item is enabled with [methodname]#isItemEnabled()#.
+
+The [methodname]#setItemEnabled()# identifies the item to be disabled by its
+item ID.
+
+
+[source, java]
+----
+// Have an option group with some items
+OptionGroup group = new OptionGroup("My Disabled Group");
+group.addItems("One", "Two", "Three");
+
+// Disable one item by its item ID
+group.setItemEnabled("Two", false);
+----
+
+The item IDs are also used for the captions in this example. The result is shown
+in <<figure.components.optiongroup.disabling>>.
+
+[[figure.components.optiongroup.disabling]]
+.[classname]#OptionGroup# with a Disabled Item
+image::img/optiongroup-disabling.png[]
+
+Setting an item as disabled turns on the [literal]#++v-disabled++# style for it.
+
+
+[[components.optiongroup.css]]
+== CSS Style Rules
+
+
+[source, css]
+----
+.v-select-optiongroup {}
+  .v-select-option.v-checkbox {}
+  .v-select-option.v-radiobutton {}
+----
+
+The [literal]#++v-select-optiongroup++# is the overall style for the component.
+Each check box will have the [literal]#++v-checkbox++# style, borrowed from the
+[classname]#CheckBox# component, and each radio button the
+[literal]#++v-radiobutton++# style. Both the radio buttons and check boxes will
+also have the [literal]#++v-select-option++# style that allows styling
+regardless of the option type. Disabled items have additionally the
+[literal]#++v-disabled++# style.
+
+[[components.optiongroup.css.horizontal]]
+=== Horizontal Layout
+
+The options are normally laid out vertically. You can use horizontal layout by
+setting [literal]#++display: inline-block++# for the options. The
+[literal]#++nowrap++# setting for the overall element prevents wrapping if there
+is not enough horizontal space in the layout, or if the horizontal width is
+undefined.
+
+
+[source, css]
+----
+/* Lay the options horizontally */
+.v-select-optiongroup-horizontal .v-select-option {
+    display: inline-block;
+}
+
+/* Avoid wrapping if the layout is too tight */
+.v-select-optiongroup-horizontal {
+    white-space: nowrap;
+}
+
+/* Some extra spacing is needed */
+.v-select-optiongroup-horizontal
+  .v-select-option.v-radiobutton {
+    padding-right: 10px;
+}
+----
+
+Use of the above rules requires setting a custom [literal]#++horizontal++# style
+name for the component. The result is shown in
+<<figure.components.optiongroup.horizontal>>.
+
+[[figure.components.optiongroup.horizontal]]
+.Horizontal [classname]#OptionGroup#
+image::img/optiongroup-horizontal.png[]
+
+
+
+
+
diff --git a/documentation/components/components-overview.asciidoc b/documentation/components/components-overview.asciidoc
new file mode 100644
index 0000000000..c1d133f9f9
--- /dev/null
+++ b/documentation/components/components-overview.asciidoc
@@ -0,0 +1,81 @@
+---
+title: Overview
+order: 1
+layout: page
+---
+
+[[components.overview]]
+= Overview
+
+Vaadin provides a comprehensive set of user interface components and allows you
+to define custom components. <<figure.uicomponents>> illustrates the inheritance
+hierarchy of the UI component classes and interfaces. Interfaces are displayed
+in gray, abstract classes in orange, and regular classes in blue. An annotated
+version of the diagram is featured in the __Vaadin Cheat Sheet__.
+
+[[figure.uicomponents]]
+.User Interface Component Class Hierarchy
+image::img/component-diagram-hi.png[]
+
+((("[classname]#Component#")))
+At the top of the interface hierarchy, we have the [classname]#Component#
+interface.
+((("[classname]#AbstractComponent#")))
+At the top of the class hierarchy, we have the [classname]#AbstractComponent#
+class.
+((("[classname]#AbstractField#")))
+((("[classname]#AbstractComponentContainer#")))
+It is inherited by two other abstract classes: [classname]#AbstractField#,
+inherited further by field components, and
+[classname]#AbstractComponentContainer#, inherited by various container and
+layout components. Components that are not bound to a content data model, such
+as labels and links, inherit [classname]#AbstractComponent# directly.
+
+((("layout")))
+((("[classname]#Layout#")))
+The layout of the various components in a window is controlled, logically, by
+layout components, just like in conventional Java UI toolkits for desktop
+applications. In addition, with the [classname]#CustomLayout# component, you can
+write a custom layout as an HTML template that includes the locations of any
+contained components. Looking at the inheritance diagram, we can see that layout
+components inherit the [classname]#AbstractComponentContainer# and the
+[classname]#Layout# interface. Layout components are described in detail in
+<<dummy/../../../framework/layout/layout-overview.asciidoc#layout.overview,"Managing
+Layout">>.
+
+((("[classname]#Window#")))
+Looking at it from the perspective of an object hierarchy, we would have a
+[classname]#Window# object, which contains a hierachy of layout components,
+which again contain other layout components, field components, and other visible
+components.
+
+((("Sampler")))
+((("JavaDoc")))
+You can browse the built-in UI components of Vaadin library in the Sampler
+application of the Vaadin Demo. The Sampler shows a description, JavaDoc
+documentation, and a code samples for each of the components.
+
+In addition to the built-in components, many components are available as
+add-ons, either from the Vaadin Directory or from independent sources. Both
+commercial and free components exist. The installation of add-ons is described
+in
+<<dummy/../../../framework/addons/addons-overview.asciidoc#addons.overview,"Using
+Vaadin Add-ons">>.
+
+
+[NOTE]
+.Vaadin Cheat Sheet and Refcard
+====
+<<figure.uicomponents>> is included in the Vaadin Cheat Sheet that illustrates
+the basic relationship hierarchy of the user interface components and data
+binding classes and interfaces. You can download it at http://vaadin.com/book.
+
+The diagram is also included in the six-page DZone Refcard, which you can find
+at https://vaadin.com/refcard.
+
+====
+
+
+
+
+
diff --git a/documentation/components/components-passwordfield.asciidoc b/documentation/components/components-passwordfield.asciidoc
new file mode 100644
index 0000000000..1280de7529
--- /dev/null
+++ b/documentation/components/components-passwordfield.asciidoc
@@ -0,0 +1,54 @@
+---
+title: PasswordField
+order: 11
+layout: page
+---
+
+[[components.passwordfield]]
+= [classname]#PasswordField#
+
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/text-input/password-field]
+endif::web[]
+
+The [classname]#PasswordField# is a variant of [classname]#TextField# that hides
+the typed input from visual inspection.
+
+
+[source, java]
+----
+PasswordField tf = new PasswordField("Keep it secret");
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.passwordfield.basic[on-line example, window="_blank"].
+
+The result is shown in <<figure.components.passwordfield.basic>>.
+
+[[figure.components.passwordfield.basic]]
+.[classname]#PasswordField#
+image::img/passwordfield-basic.png[]
+
+You should note that the [classname]#PasswordField# hides the input only from
+"over the shoulder" visual observation. Unless the server connection is
+encrypted with a secure connection, such as HTTPS, the input is transmitted in
+clear text and may be intercepted by anyone with low-level access to the
+network. Also phishing attacks that intercept the input in the browser may be
+possible by exploiting JavaScript execution security holes in the browser.
+
+[[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
+
+
diff --git a/documentation/components/components-popupview.asciidoc b/documentation/components/components-popupview.asciidoc
new file mode 100644
index 0000000000..8f67c392d8
--- /dev/null
+++ b/documentation/components/components-popupview.asciidoc
@@ -0,0 +1,92 @@
+---
+title: PopupView
+order: 29
+layout: page
+---
+
+[[components.popupview]]
+= [classname]#PopupView#
+
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/structure/popup-view]
+endif::web[]
+
+The [classname]#PopupView# component allows opening a pop-up view either by
+clicking on a link or programmatically. The component has two representations: a
+minimized textual representation and the popped-up content. The view can contain
+any components. The view closes automatically when the mouse pointer moves
+outside the view.
+
+In the following, we have a popup view with a text field and a button that opens
+automatically when the user clicks on a "Open the popup" link:
+
+
+[source, java]
+----
+// Content for the PopupView
+VerticalLayout popupContent = new VerticalLayout();
+popupContent.addComponent(new TextField("Textfield"));
+popupContent.addComponent(new Button("Button"));
+
+// The component itself
+PopupView popup = new PopupView("Pop it up", popupContent);
+layout.addComponent(popup);
+----
+
+If the textual minimized representation is not given (a null is given), the
+component is invisible in the minimized state. The pop-up can be opened
+programmatically by calling [methodname]#setPopupVisible(true)#. For example:
+
+
+[source, java]
+----
+// A pop-up view without minimalized representation
+PopupView popup = new PopupView(null,
+    new Table(null, TableExample.generateContent()));
+
+// A component to open the view
+Button button = new Button("Show table", click -> // Java 8
+     popup.setPopupVisible(true));
+
+layout.addComponents(button, popup);
+----
+
+When the pop-up is opened or closed, a [classname]#PopupVisibilityEvent# is
+fired, which can be handled with a [interfacename]#PopupVisibilityListener#
+added with [methodname]#setPopupVisibilityListener()#.
+
+
+[source, java]
+----
+// Fill the pop-up content when it's popped up
+popup.addPopupVisibilityListener(event -> { 
+    if (event.isPopupVisible()) {
+        popupContent.removeAllComponents();
+        popupContent.addComponent(new Table(null,
+            TableExample.generateContent()));
+    }});
+----
+
+[[components.popupview.css]]
+== CSS Style Rules
+
+
+[source, css]
+----
+.v-popupview {}
+.v-overlay-container {
+  .v-popupview-popup {
+    .popupContent { }
+  }
+}
+----
+
+In minimalized state, the component has [literal]#++v-popupview++# style. When
+popped up, the pop-up content is shown in a [literal]#++v-popupview-popup++#
+overlay element under the [literal]#++v-overlay-container++#, which is contains
+all floating overlays outside the component hierarchy.
+
+
+
+
diff --git a/documentation/components/components-progressbar.asciidoc b/documentation/components/components-progressbar.asciidoc
new file mode 100644
index 0000000000..389855babf
--- /dev/null
+++ b/documentation/components/components-progressbar.asciidoc
@@ -0,0 +1,214 @@
+---
+title: ProgressBar
+order: 27
+layout: page
+---
+
+[[components.progressbar]]
+= [classname]#ProgressBar#
+
+ifdef::web[]
+[.sampler]
+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.
+
+[[figure.components.progressbar.basic]]
+.The Progress Bar Component
+image::img/progressbar-basic.png[]
+
+To display upload progress with the [classname]#Upload# component, you can
+update the progress bar in a [interfacename]#ProgressListener#.
+
+When the position of a progress bar is done in a background thread, the change
+is not shown in the browser immediately. You need to use either polling or
+server push to update the browser. You can enable polling with
+[methodname]#setPollInterval()# in the current UI instance. See
+<<dummy/../../../framework/advanced/advanced-push#advanced.push,"Server Push">>
+for instructions about using server push. Whichever method you use to update the
+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">>.
+
+
+[source, java]
+----
+final ProgressBar bar = new ProgressBar(0.0f);
+layout.addComponent(bar);
+        
+layout.addComponent(new Button("Increase",
+    new ClickListener() {
+    @Override
+    public void buttonClick(ClickEvent event) {
+        float current = bar.getValue();
+        if (current < 1.0f)
+            bar.setValue(current + 0.10f);
+    }
+}));
+----
+
+[[components.progressbar.indeterminate]]
+== Indeterminate Mode
+
+In the indeterminate mode, a non-progressive indicator is displayed
+continuously. The indeterminate indicator is a circular wheel in the built-in
+themes. The progress value has no meaning in the indeterminate mode.
+
+
+[source, java]
+----
+ProgressBar bar = new ProgressBar();
+bar.setIndeterminate(true);
+----
+
+[[figure.components.progressbar.indeterminate]]
+.Indeterminate Progress Bar
+image::img/progressbar-indeterminate.png[]
+
+
+ifdef::web[]
+[[components.progressbar.thread]]
+== Doing Heavy Computation
+
+The progress indicator is often 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
+updating the UI inside a [methodname]#UI.access()# call in a
+[interfacename]#Runnable#, as described in
+<<dummy/../../../framework/advanced/advanced-push#advanced.push.running,"Accessing
+UI from Another Thread">>.
+
+In the following example, we create a thread in the server to do some "heavy
+work" and use polling to update the UI. All the thread needs to do is to set the
+value of the progress bar with [methodname]#setValue()# and the current progress
+is displayed automatically when the browser polls the server.
+
+
+[source, java]
+----
+HorizontalLayout barbar = new HorizontalLayout();
+layout.addComponent(barbar);
+        
+// Create the indicator, 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);
+
+// A button to start progress
+final Button button = new Button("Click to start");
+layout.addComponent(button);
+
+// A thread to do some work
+class WorkThread extends Thread {
+    // Volatile because read in another thread in access()
+    volatile double current = 0.0;
+
+    @Override
+    public void run() {
+        // Count up until 1.0 is reached
+        while (current < 1.0) {
+            current += 0.01;
+
+            // Do some "heavy work"
+            try {
+                sleep(50); // Sleep for 50 milliseconds
+            } catch (InterruptedException e) {}
+
+            // Update the UI thread-safely
+            UI.getCurrent().access(new Runnable() {
+                @Override
+                public void run() {
+                    progress.setValue(new Float(current));
+                    if (current < 1.0)
+                        status.setValue("" +
+                            ((int)(current*100)) + "% done");
+                    else
+                        status.setValue("all done");
+                }
+            });
+        }
+        
+        // Show the "all done" for a while
+        try {
+            sleep(2000); // Sleep for 2 seconds
+        } catch (InterruptedException e) {}
+
+        // Update the UI thread-safely
+        UI.getCurrent().access(new Runnable() {
+            @Override
+            public void run() {
+                // 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");
+            }
+        });
+    }
+}
+
+// Clicking the button creates and runs a work thread
+button.addClickListener(new Button.ClickListener() {
+    public void buttonClick(ClickEvent event) {
+        final WorkThread thread = new WorkThread();
+        thread.start();
+
+        // Enable polling and set frequency to 0.5 seconds
+        UI.getCurrent().setPollInterval(500);
+
+        // Disable the button until the work is done
+        progress.setEnabled(true);
+        button.setEnabled(false);
+
+        status.setValue("running...");
+    }
+});
+----
+
+The example is illustrated in <<figure.components.progressbar.thread>>.
+
+[[figure.components.progressbar.thread]]
+.Doing Heavy Work
+image::img/progressbar-thread.png[]
+
+endif::web[]
+
+[[components.progressbar.css]]
+== CSS Style Rules
+
+
+[source, css]
+----
+.v-progressbar, v-progressbar-indeterminate {}
+  .v-progressbar-wrapper {}
+    .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.
+
+
+
+
diff --git a/documentation/components/components-richtextarea.asciidoc b/documentation/components/components-richtextarea.asciidoc
new file mode 100644
index 0000000000..ff354cfe8d
--- /dev/null
+++ b/documentation/components/components-richtextarea.asciidoc
@@ -0,0 +1,128 @@
+---
+title: RichTextArea
+order: 12
+layout: page
+---
+
+[[components.richtextarea]]
+= [classname]#RichTextArea#
+
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/text-input/rich-text-area]
+endif::web[]
+
+The [classname]#RichTextArea# field allows entering or editing formatted text.
+The toolbar provides all basic editing functionalities. The text content of
+[classname]#RichTextArea# is represented in HTML format.
+[classname]#RichTextArea# inherits [classname]#TextField# and does not add any
+API functionality over it. You can add new functionality by extending the
+client-side components [classname]#VRichTextArea# and
+[classname]#VRichTextToolbar#.
+
+As with [classname]#TextField#, the textual content of the rich text area is the
+[classname]#Property# of the field and can be set with [methodname]#setValue()#
+and read with [methodname]#getValue()#.
+
+
+[source, java]
+----
+// Create a rich text area
+final RichTextArea rtarea = new RichTextArea();
+rtarea.setCaption("My Rich Text Area");
+
+// Set initial content as HTML
+rtarea.setValue("<h1>Hello</h1>\n" +
+    "<p>This rich text area contains some text.</p>");
+----
+
+.Rich Text Area Component
+image::img/richtextarea-example1.png[]
+
+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,
+only formatting tags, but it does preserve them unless the user edits them away.
+Any non-visible whitespace such as the new line character ( [literal]#++\n++#)
+are removed from the content. For example, the value set above will be as
+follows when read from the field with [methodname]#getValue()#:
+
+
+[source, html]
+----
+<h1>Hello</h1> <p>This rich text area contains some text.</p>
+----
+
+
+[WARNING]
+.Cross-Site Scripting Warning
+====
+The user input from a [classname]#RichTextArea# is transmitted as HTML from the
+browser to server-side and is not sanitized. As the entire purpose of the
+[classname]#RichTextArea# component is to allow input of formatted text, you can
+not sanitize it just by removing all HTML tags. Also many attributes, such as
+[parameter]#style#, should pass through the sanitization.
+
+See
+<<dummy/../../../framework/advanced/advanced-security#advanced.security.sanitizing,"Sanitizing
+User Input to Prevent Cross-Site Scripting">> for more details on Cross-Site
+scripting vulnerabilities and sanitization of user input.
+
+====
+
+
+
+ifdef::web[]
+[[components.richtextarea.localization]]
+== Localizing RichTextArea Toolbars
+
+The rich text area is one of the few components in Vaadin that contain textual
+labels. The selection boxes in the toolbar are in English and currently can not
+be localized in any other way than by inheriting or reimplementing the
+client-side [classname]#VRichTextToolbar# widget. The buttons can be localized
+simply with CSS by downloading a copy of the toolbar background image, editing
+it, and replacing the default toolbar. The toolbar is a single image file from
+which the individual button icons are picked, so the order of the icons is
+different from the rendered. The image file depends on the client-side
+implementation of the toolbar.
+
+
+[source, css]
+----
+.v-richtextarea-richtextexample .gwt-ToggleButton
+.gwt-Image {
+  background-image: url(img/richtextarea-toolbar-fi.png)
+                    !important;
+}
+----
+
+.Regular English and a Localized Rich Text Area Toolbar
+image::img/richtextarea-toolbar-whitebg.png[]
+
+endif::web[]
+
+== CSS Style Rules
+
+
+[source, css]
+----
+.v-richtextarea { }
+.v-richtextarea .gwt-RichTextToolbar { }
+.v-richtextarea .gwt-RichTextArea { }
+----
+
+The rich text area consists of two main parts: the toolbar with overall style
+[literal]#++.gwt-RichTextToolbar++# and the editor area with style
+[literal]#++.gwt-RichTextArea++#. The editor area obviously contains all the
+elements and their styles that the HTML content contains. The toolbar contains
+buttons and drop-down list boxes with the following respective style names:
+
+
+[source, css]
+----
+.gwt-ToggleButton { }
+.gwt-ListBox { }
+----
+
+
+
+
diff --git a/documentation/components/components-selection.asciidoc b/documentation/components/components-selection.asciidoc
new file mode 100644
index 0000000000..5ad422555d
--- /dev/null
+++ b/documentation/components/components-selection.asciidoc
@@ -0,0 +1,464 @@
+---
+title: Selection Components
+order: 5
+layout: page
+---
+
+[[components.selection]]
+= Selection Components
+
+Vaadin offers many alternative ways for selecting one or more items. The core
+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.
+
+
+In addition, the [classname]#Tree#, [classname]#Table#, and
+[classname]#TreeTable# components allow special forms of selection. They also
+inherit the [classname]#AbstractSelect#.
+
+[[components.selection.databinding]]
+== Binding Selection Components to Data
+
+The selection components are strongly coupled with the Vaadin Data Model,
+described in
+<<dummy/../../../framework/datamodel/datamodel-overview.asciidoc#datamodel.overview,"Binding
+Components to Data">>. The selectable items in all selection components are
+objects that implement the [classname]#Item# interface. The items are contained
+in a [classname]#Container#.
+
+All selection components are containers themselves and simply forward all
+container operations to the underlying container data source. You can give the
+container in the constructor or set it set
+[methodname]#setContainerDataSource()#. This is further described in
+<<dummy/../../../framework/datamodel/datamodel-container#datamodel.container.intro,"Basic
+Use of Containers">>.
+
+
+[source, java]
+----
+// Have a container data source of some kind
+IndexedContainer container = new IndexedContainer();
+container.addContainerProperty("name", String.class, null);
+...
+
+// Create a selection component bound to the container
+OptionGroup group = new OptionGroup("My Select", container);
+----
+
+If you do not bind a selection component to a container data source, a default
+container is used. It is usually either an [classname]#IndexedContainer# or a
+[classname]#HierarchicalContainer#.
+
+The current selection of a selection component is bound to the
+[classname]#Property# interface, so you can get the current selection as the
+value of the selection component. Also selection changes are handled as value
+change events, as is described later.
+
+
+[[components.selection.adding]]
+== Adding New Items
+
+New items are added with the [methodname]#addItem()# method defined in the
+[classname]#Container# interface, described in
+<<dummy/../../../framework/datamodel/datamodel-container#datamodel.container.intro,"Basic
+Use of Containers">>.
+
+
+[source, java]
+----
+// Create a selection component
+ComboBox select = new ComboBox("My ComboBox");
+
+// Add items with given item IDs
+select.addItem("Mercury");
+select.addItem("Venus");
+select.addItem("Earth");
+----
+
+The [methodname]#addItem()# method creates an empty [classname]#Item#, which is
+identified by its __item identifier__ (IID) object, given as the parameter. This
+item ID is by default used also as the caption of the item, as described in more
+detail later.
+
+We emphasize that [methodname]#addItem()# is a factory method that __takes an
+item ID, not the actual item__ as the parameter - the item is returned by the
+method. The item is of a type that is specific to the container and has itself
+little relevance for most selection components, as the properties of an item may
+not be used in any way (except in [classname]#Table#), only the item ID.
+
+The item identifier is typically a string, in which case it can be used as the
+caption, but can be any object type. We could as well have given integers for
+the item identifiers and set the captions explicitly with
+[methodname]#setItemCaption()#. You could also add an item with the
+parameterless [methodname]#addItem()#, which returns an automatically generated
+item ID.
+
+
+[source, java]
+----
+// Create a selection component
+ComboBox select = new ComboBox("My Select");
+
+// Add an item with a generated ID
+Object itemId = select.addItem();
+select.setItemCaption(itemId, "The Sun");
+
+// Select the item
+select.setValue(itemId);
+----
+
+Some container types may support passing the actual data object to the add
+method. For example, you can add items to a [classname]#BeanItemContainer# with
+[methodname]#addBean()#. Such implementations can use a separate item ID object,
+or the data object itself as the item ID, as is done in [methodname]#addBean()#.
+In the latter case you can not depend on the default way of acquiring the item
+caption; see the description of the different caption modes later.
+
+The next section describes the different options for determining the item
+captions.
+
+
+[[components.selection.captions]]
+== Item Captions
+
+The displayed captions of items in a selection component can be set explicitly
+with [methodname]#setItemCaption()# or determined from the item IDs or item
+properties. The caption determination is defined with the __caption mode__, any
+of the modes in the [classname]#AbstractSelect.ItemCaptionMode# enum, which you
+can set with [methodname]#setItemCaptionMode()#. The default mode is
+[parameter]#EXPLICIT_DEFAULTS_ID#, which uses the item identifiers for the
+captions, unless given explicitly.
+
+In addition to a caption, an item can have an icon. The icon is set with
+[methodname]#setItemIcon()#.
+
+The caption modes defined in [classname]#ItemCaptionMode# are the following:
+
+EXPLICIT_DEFAULTS_ID:: This is the default caption mode and its flexibility allows using it in most
+cases. By default, the item identifier will be used as the caption. The
+identifier object does not necessarily have to be a string; the caption is
+retrieved with [methodname]#toString()# method. If the caption is specified
+explicitly with [methodname]#setItemCaption()#, it overrides the item
+identifier.
+
+
++
+[source, java]
+----
+// Create a selection component
+ComboBox select = new ComboBox("Moons of Mars");
+select.setItemCaptionMode(ItemCaptionMode.EXPLICIT_DEFAULTS_ID);
+
+// Use the item ID also as the caption of this item
+select.addItem(new Integer(1));
+
+// Set item caption for this item explicitly
+select.addItem(2); // same as "new Integer(2)"
+select.setItemCaption(2, "Deimos");
+----
+EXPLICIT:: Captions must be explicitly specified with [methodname]#setItemCaption()#. If
+they are not, the caption will be empty. Such items with empty captions will
+nevertheless be displayed in the selection component as empty items. If they
+have an icon, they will be visible.
+
+ICON_ONLY:: Only icons are shown, captions are hidden.
+
+ID:: String representation of the item identifier object is used as caption. This is
+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]
+----
+ComboBox select = new ComboBox("Inner Planets");
+select.setItemCaptionMode(ItemCaptionMode.ID);
+
+// A class that implements toString()
+class PlanetId extends Object implements Serializable {
+    String planetName;
+
+    PlanetId (String name) {
+        planetName = name;
+    }
+    public String toString () {
+        return "The Planet " + planetName;
+    }
+}
+
+// Use such objects as item identifiers
+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.
+
+ITEM:: [classname]#String# representation of item, acquired with
+[methodname]#toString()#, is used as the caption. This is applicable mainly when
+using a custom [classname]#Item# class, which also requires using a custom
+[classname]#Container# that is used as a data source for the selection
+component.
+
+PROPERTY:: Item captions are read from the [classname]#String# representation of the
+property with the identifier specified with
+[methodname]#setItemCaptionPropertyId()#. This is useful, for example, when you
+have a container that you use as the data source for the selection component,
+and you want to use a specific property for caption.
+
++
+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]
+----
+/** A bean with a "name" property. */
+public class Planet implements Serializable {
+    int    id;
+    String name;
+
+    public Planet(int id, String name) {
+        this.id   = id;
+        this.name = name;
+    }
+
+    ... setters and getters ...
+}
+
+public void captionproperty(VerticalLayout layout) {
+    // Have a bean container to put the beans in
+    BeanItemContainer<Planet> container =
+        new BeanItemContainer<Planet>(Planet.class);
+
+    // Put some example data in it
+    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);
+
+    // 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
+
+A selection component provides the current selection as the property of the
+component (with the [classname]#Property# interface). The property value is an
+item identifier object that identifies the selected item. You can get the
+identifier with [methodname]#getValue()# of the [classname]#Property# interface.
+
+You can select an item with the corresponding [methodname]#setValue()# method.
+In multiselect mode, the property will be an unmodifiable set of item
+identifiers. If no item is selected, the property will be [parameter]#null# in
+single selection mode or an empty collection in multiselect mode.
+
+The [classname]#ComboBox# and [classname]#NativeSelect# will show empty
+selection when no actual item is selected. This is the __null selection item
+identifier__. You can set an alternative ID with
+[methodname]#setNullSelectionItemId()#. Setting the alternative null ID is
+merely a visual text; the [methodname]#getValue()# will still return
+[parameter]#null# value if no item is selected, or an empty set in multiselect
+mode.
+
+
+[[components.selection.valuechange]]
+== Handling Selection Changes
+
+The item identifier of the currently selected item will be set as the property
+of the selection component. You can access it with the [methodname]#getValue()#
+method of the [classname]#Property# interface of the component. Also, when
+handling selection changes with a [classname]#Property.ValueChangeListener#, the
+[classname]#ValueChangeEvent# will have the selected item as the property of the
+event, accessible with the [methodname]#getProperty()# method.
+
+
+[source, java]
+----
+// Create a selection component with some items
+ComboBox select = new ComboBox("My Select");
+select.addItems("Io", "Europa", "Ganymedes", "Callisto");
+
+// Handle selection change
+select.addValueChangeListener(event -> // Java 8
+    layout.addComponent(new Label("Selected " +
+        event.getProperty().getValue())));
+----
+
+The result of user interaction is shown in
+<<figure.components.selection.valuechange>>.
+
+[[figure.components.selection.valuechange]]
+.Selected Item
+image::img/select-selected1.png[]
+
+
+[[components.selection.newitems]]
+== Allowing Adding New Items
+
+Some selection components can allow the user to add new items. Currently, only
+[classname]#ComboBox# allows it, when the user types in a value and presses
+kbd:[Enter]. You need to enable the mode with [methodname]#setNewItemsAllowed(true)#.
+Setting the component also in immediate mode may be necessary, as otherwise the
+item would not be added immediately when the user interacts with the component,
+but after some other component causes a server
+request.////
+TODO This could be a
+bug
+////
+
+
+[source, java]
+----
+myselect.setNewItemsAllowed(true);
+myselect.setImmediate(true);
+----
+
+The user interface for adding new items depends on the selection component. The
+regular [classname]#ComboBox# component allows you to simply type the new item
+in the combo box and hit kbd:[Enter] to add it.
+
+Adding new items is not possible if the selection component is read-only or is
+bound to a [classname]#Container# that does not allow adding new items. An
+attempt to do so may result in an exception.
+
+[[components.selection.newitems.handling]]
+=== Handling New Items
+
+Adding new items is handled by a [interfacename]#NewItemHandler#, which gets the
+item caption string as parameter for the [methodname]#addNewItem()# method. The
+default implementation, [classname]#DefaultNewItemHandler#, checks for read-only
+state, adds the item using the entered caption as the item ID, and if the
+selection component gets the captions from a property, copies the caption to
+that property. It also selects the item. The default implementation may not be
+suitable for all container types, in which case you need to define a custom
+handler. For example, a [classname]#BeanItemContainer# expects the items to have
+the bean object itself as the ID, not a string.
+
+ifdef::web[]
+
+[source, java]
+----
+// Have a bean container to put the beans in
+final BeanItemContainer<Planet> container =
+    new BeanItemContainer<Planet>(Planet.class);
+
+// Put some example data in it
+container.addItem(new Planet(1, "Mercury"));
+container.addItem(new Planet(2, "Venus"));
+container.addItem(new Planet(3, "Earth"));
+container.addItem(new Planet(4, "Mars"));
+
+final ComboBox select =
+    new ComboBox("Select or Add a Planet", container);
+select.setNullSelectionAllowed(false);
+
+// Use the name property for item captions
+select.setItemCaptionPropertyId("name");
+
+// Allow adding new items
+select.setNewItemsAllowed(true);
+select.setImmediate(true);
+
+// Custom handling for new items
+select.setNewItemHandler(new NewItemHandler() {
+    @Override
+    public void addNewItem(String newItemCaption) {
+        // Create a new bean - can't set all properties
+        Planet newPlanet = new Planet(0, newItemCaption);
+        container.addBean(newPlanet);
+
+        // Remember to set the selection to the new item
+        select.select(newPlanet);
+
+        Notification.show("Added new planet called " +
+                          newItemCaption);
+    }
+});
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.select.combobox.newitemhandler[on-line example, window="_blank"].
+endif::web[]
+
+
+
+[[components.selection.multiple]]
+== Multiple Selection
+
+Some selection components, such as [classname]#OptionGroup# and
+[classname]#ListSelect# support a multiple selection mode, which you can enable
+with [methodname]#setMultiSelect()#. For [classname]#TwinColSelect#, which is
+especially intended for multiple selection, it is enabled by default.
+
+
+[source, java]
+----
+myselect.setMultiSelect(true);
+----
+
+As in single selection mode, the property value of the component indicates the
+selection. In multiple selection mode, however, the property value is a
+[classname]#Collection# of the item IDs of the currently selected items. You can
+get and set the property with the [methodname]#getValue()# and
+[methodname]#setValue()# methods as usual.
+
+A change in the selection will trigger a [classname]#ValueChangeEvent#, which
+you can handle with a [classname]#Propery.ValueChangeListener#. As usual, you
+should use [methodname]#setImmediate(true)# to trigger the event immediately
+when the user changes the selection. The following example shows how to handle
+selection changes with a listener.
+
+
+[source, java]
+----
+// A selection component with some items
+ListSelect select = new ListSelect("My Selection");
+select.addItems("Mercury", "Venus", "Earth",
+    "Mars", "Jupiter", "Saturn", "Uranus", "Neptune");
+
+// Multiple selection mode
+select.setMultiSelect(true);
+
+// Feedback on value changes
+select.addValueChangeListener(
+    new Property.ValueChangeListener() {
+    public void valueChange(ValueChangeEvent event) {
+        // Some feedback
+        layout.addComponent(new Label("Selected: " +
+            event.getProperty().getValue().toString()));
+    }
+});
+select.setImmediate(true);
+----
+
+
+[[components.selection.item-icons]]
+== Item Icons
+
+You can set an icon for each item with [methodname]#setItemIcon()#, or define an
+item property that provides the icon resource with
+[methodname]#setItemIconPropertyId()#, in a fashion similar to captions. Notice,
+however, that icons are not supported in [classname]#NativeSelect#,
+[classname]#TwinColSelect#, and some other selection components and modes. This
+is because HTML does not support images inside the native [literal]#++select++#
+elements. Icons are also not really visually applicable.
diff --git a/documentation/components/components-slider.asciidoc b/documentation/components/components-slider.asciidoc
new file mode 100644
index 0000000000..a2c99f4b5c
--- /dev/null
+++ b/documentation/components/components-slider.asciidoc
@@ -0,0 +1,117 @@
+---
+title: Slider
+order: 28
+layout: page
+---
+
+[[components.slider]]
+= [classname]#Slider#
+
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/other/slider]
+endif::web[]
+
+The [classname]#Slider# is a vertical or horizontal bar that allows setting a
+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.
+
+
+[source, java]
+----
+// Create a vertical slider
+final Slider vertslider = new Slider(1, 100);
+vertslider.setOrientation(SliderOrientation.VERTICAL);
+----
+
+__min__:: Minimum value of the slider range. The default is 0.0.
+
+__max__:: Maximum value of the slider range. The default is 100.0.
+
+__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.
+
+
+
+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
+final Label vertvalue = new Label();
+vertvalue.setSizeUndefined();
+
+// Handle changes in slider value.
+vertslider.addValueChangeListener(
+    new Property.ValueChangeListener() {
+    public void valueChange(ValueChangeEvent event) {
+        double value = (Double) vertslider.getValue();
+
+        // Use the value
+        box.setHeight((float) value, Sizeable.UNITS_PERCENTAGE);
+        vertvalue.setValue(String.valueOf(value));
+    }
+});
+
+// The slider has to be immediate to send the changes
+// immediately after the user drags the handle.
+vertslider.setImmediate(true);
+----
+
+You can set the value with the [methodname]#setValue()# method defined in
+[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);
+} catch (ValueOutOfBoundsException e) {
+}
+----
+
+Alternatively, you can use the regular [methodname]#setValue(Object)#, which
+does not do bounds checking.
+
+<<figure.components.slider.example1>> shows both vertical (from the code
+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
+
+
+[source, css]
+----
+.v-slider {}
+.v-slider-base {}
+.v-slider-handle {}
+----
+
+The enclosing style for the [classname]#Slider# is [literal]#++v-slider++#. The
+slider bar has style [literal]#++v-slider-base++#. Even though the handle is
+higher (for horizontal slider) or wider (for vertical slider) than the bar, the
+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.
+
+
+
+
diff --git a/documentation/components/components-table.asciidoc b/documentation/components/components-table.asciidoc
new file mode 100644
index 0000000000..43d5653868
--- /dev/null
+++ b/documentation/components/components-table.asciidoc
@@ -0,0 +1,1166 @@
+---
+title: Table
+order: 21
+layout: page
+---
+
+[[components.table]]
+= [classname]#Table#
+
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/grids-and-trees/table]
+endif::web[]
+
+((("[classname]#Table#", id="term.components.table", range="startofrange")))
+
+
+The [classname]#Table# component is intended for presenting tabular data
+organized in rows and columns. The [classname]#Table# is one of the most
+versatile components in Vaadin. Table cells can include text or arbitrary UI
+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
+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
+the table are __items__ in the container and the columns are __properties__.
+Each table row (item) is identified with an __item identifier__ (IID), and each
+column (property) with a __property identifier__ (PID).
+
+When creating a table, you first need to define columns with
+[methodname]#addContainerProperty()#. This method comes in two flavors. The
+simpler one takes the property ID of the column and uses it also as the caption
+of the column. The more complex one allows differing PID and header for the
+column. This may make, for example, internationalization of table headers
+easier, because if a PID is internationalized, the internationalization has to
+be used everywhere where the PID is used. The complex form of the method also
+allows defining an icon for the column from a resource. The "default value"
+parameter is used when new properties (columns) are added to the table, to fill
+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");
+
+// Define two columns for the built-in container
+table.addContainerProperty("Name", String.class, null);
+table.addContainerProperty("Mag",  Float.class, null);
+
+// Add a row the hard way
+Object newItemId = table.addItem();
+Item row1 = table.getItem(newItemId);
+row1.getItemProperty("Name").setValue("Sirius");
+row1.getItemProperty("Mag").setValue(-1.46f);
+
+// Add a few other rows using shorthand addItem()
+table.addItem(new Object[]{"Canopus",        -0.72f}, 2);
+table.addItem(new Object[]{"Arcturus",       -0.04f}, 3);
+table.addItem(new Object[]{"Alpha Centauri", -0.01f}, 4);
+
+// Show exactly the currently contained rows (items)
+table.setPageLength(table.size());
+----
+
+In this example, we used an increasing [classname]#Integer# object as the Item
+Identifier, given as the second parameter to [methodname]#addItem()#. The actual
+rows are given simply as object arrays, in the same order in which the
+properties were added. The objects must be of the correct class, as defined in
+the [methodname]#addContainerProperty()# calls.
+
+.Basic Table Example
+image::img/table-example1.png[]
+
+Scalability of the [classname]#Table# is largely dictated by the container. The
+default [classname]#IndexedContainer# is relatively heavy and can cause
+scalability problems, for example, when updating the values. Use of an optimized
+application-specific container is recommended. Table does not have a limit for
+the number of items and is just as fast with hundreds of thousands of items as
+with just a few. With the current implementation of scrolling, there is a limit
+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">>.
+
+[[components.table.selecting]]
+== Selecting Items in a Table
+
+The [classname]#Table# allows selecting one or more items by clicking them with
+the mouse. When the user selects an item, the IID of the item will be set as the
+property of the table and a [classname]#ValueChangeEvent# is triggered. To
+enable selection, you need to set the table __selectable__. You will also need
+to set it as __immediate__ in most cases, as we do below, because without it,
+the change in the property will not be communicated immediately to the server.
+
+The following example shows how to enable the selection of items in a
+[classname]#Table# and how to handle [classname]#ValueChangeEvent# events that
+are caused by changes in selection. You need to handle the event with the
+[methodname]#valueChange()# method of the
+[classname]#Property.ValueChangeListener# interface.
+
+
+[source, java]
+----
+// Allow selecting items from the table.
+table.setSelectable(true);
+
+// Send changes in selection immediately to server.
+table.setImmediate(true);
+
+// Shows feedback from selection.
+final Label current = new Label("Selected: -");
+
+// Handle selection change.
+table.addValueChangeListener(new Property.ValueChangeListener() {
+    public void valueChange(ValueChangeEvent event) {
+        current.setValue("Selected: " + table.getValue());
+    }
+});
+----
+
+.Table Selection Example
+image::img/table-example2.png[]
+
+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
+behaviour by setting [methodname]#setNullSelectionAllowed(false)# for the table.
+
+The selection is the value of the table's property, so you can get it with
+[methodname]#getValue()#. You can get it also from a reference to the table
+itself. In single selection mode, the value is the item identifier of the
+selected item or [parameter]#null# if no item is selected. In multiple selection
+mode (see below), the value is a [classname]#Set# of item identifiers. Notice
+that the set is unmodifiable, so you can not simply change it to change the
+selection.
+
+=== Multiple Selection Mode
+
+A table can also be in __multiselect__ mode, where a user can select multiple
+items by clicking them with left mouse button while holding the kbd:[Ctrl] key (or kbd:[Meta] key) pressed. If kbd:[Ctrl] is not held, clicking an item will select it and
+other selected items are deselected. The user can select a range by selecting an
+item, holding the kbd:[Shift] key pressed, and clicking another item, in which case
+all the items between the two are also selected. Multiple ranges can be selected
+by first selecting a range, then selecting an item while holding kbd:[Ctrl], and then
+selecting another item with both kbd:[Ctrl] and kbd:[Shift] pressed.
+
+The multiselect mode is enabled with the [methodname]#setMultiSelect()# method
+of the [classname]#AbstractSelect# superclass of [classname]#Table#. Setting
+table in multiselect mode does not implicitly set it as __selectable__, so it
+must be set separately.
+
+The [methodname]#setMultiSelectMode()# property affects the control of multiple
+selection: [parameter]#MultiSelectMode.DEFAULT# is the default behaviour, which
+requires holding the kbd:[Ctrl] (or kbd:[Meta]) key pressed while selecting items, while in
+[parameter]#MultiSelectMode.SIMPLE# holding the kbd:[Ctrl] key is not needed. In the
+simple mode, items can only be deselected by clicking them.
+
+
+
+[[components.table.features]]
+== Table Features
+
+=== Page Length and Scrollbar
+
+The default style for [classname]#Table# provides a table with a scrollbar. The
+scrollbar is located at the right side of the table and becomes visible when the
+number of items in the table exceeds the page length, that is, the number of
+visible items. You can set the page length with [methodname]#setPageLength()#.
+
+Setting the page length to zero makes all the rows in a table visible, no matter
+how many rows there are. Notice that this also effectively disables buffering,
+as all the entire table is loaded to the browser at once. Using such tables to
+generate reports does not scale up very well, as there is some inevitable
+overhead in rendering a table with Ajax. For very large reports, generating HTML
+directly is a more scalable solution.
+
+
+[[components.table.features.resizing]]
+=== Resizing Columns
+
+You can set the width of a column programmatically from the server-side with
+[methodname]#setColumnWidth()#. The column is identified by the property ID and
+the width is given in pixels.
+
+The user can resize table columns by dragging the resize handle between two
+columns. Resizing a table column causes a [classname]#ColumnResizeEvent#, which
+you can handle with a [classname]#Table.ColumnResizeListener#. The table must be
+set in immediate mode if you want to receive the resize events immediately,
+which is typical.
+
+
+[source, java]
+----
+table.addColumnResizeListener(new Table.ColumnResizeListener(){
+    public void columnResize(ColumnResizeEvent event) {
+        // Get the new width of the resized column
+        int width = event.getCurrentWidth();
+
+        // Get the property ID of the resized column
+        String column = (String) event.getPropertyId();
+
+        // Do something with the information
+        table.setColumnFooter(column, String.valueOf(width) + "px");
+    }
+});
+
+// Must be immediate to send the resize events immediately
+table.setImmediate(true);
+----
+
+See <<figure.component.table.columnresize>> for a result after the columns of a
+table has been resized.
+
+[[figure.component.table.columnresize]]
+.Resizing Columns
+image::img/table-column-resize.png[]
+
+
+[[components.table.features.reordering]]
+=== Reordering Columns
+
+If [methodname]#setColumnReorderingAllowed(true)# is set, the user can reorder
+table columns by dragging them with the mouse from the column header,
+
+
+[[components.table.features.collapsing]]
+=== Collapsing Columns
+
+When [methodname]#setColumnCollapsingAllowed(true)# is set, the right side of
+the table header shows a drop-down list that allows selecting which columns are
+shown. Collapsing columns is different than hiding columns with
+[methodname]#setVisibleColumns()#, which hides the columns completely so that
+they can not be made visible (uncollapsed) from the user interface.
+
+You can collapse columns programmatically with
+[methodname]#setColumnCollapsed()#. Collapsing must be enabled before collapsing
+columns with the method or it will throw an [classname]#IllegalAccessException#.
+
+
+[source, java]
+----
+// Allow the user to collapse and uncollapse columns
+table.setColumnCollapsingAllowed(true);
+
+// Collapse this column programmatically
+try {
+    table.setColumnCollapsed("born", true);
+} catch (IllegalAccessException e) {
+    // Can't occur - collapsing was allowed above
+    System.err.println("Something horrible occurred");
+}
+
+// Give enough width for the table to accommodate the
+// initially collapsed column later
+table.setWidth("250px");
+----
+
+See <<figure.component.table.columncollapsing>>.
+
+[[figure.component.table.columncollapsing]]
+.Collapsing Columns
+image::img/table-column-collapsing.png[]
+
+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
+may not be enough to accomodate them later, which will result in an ugly
+horizontal scrollbar. You should consider giving the table enough width to
+accomodate columns uncollapsed by the user.
+
+
+[[components.table.features.components]]
+=== Components Inside a Table
+
+The cells of a [classname]#Table# can contain any user interface components, not
+just strings. If the rows are higher than the row height defined in the default
+theme, you have to define the proper row height in a custom theme.
+
+When handling events for components inside a [classname]#Table#, such as for the
+[classname]#Button# in the example below, you usually need to know the item the
+component belongs to. Components do not themselves know about the table or the
+specific item in which a component is contained. Therefore, the handling method
+must use some other means for finding out the Item ID of the item. There are a
+few possibilities. Usually the easiest way is to use the [methodname]#setData()#
+method to attach an arbitrary object to a component. You can subclass the
+component and include the identity information there. You can also simply search
+the entire table for the item with the component, although that solution may not
+be so scalable.
+
+The example below includes table rows with a [classname]#Label# in HTML content
+mode, a multiline [classname]#TextField#, a [classname]#CheckBox#, and a
+[classname]#Button# that shows as a link.
+
+
+[source, java]
+----
+// Create a table and add a style to allow setting the row height in theme.
+final Table table = new Table();
+table.addStyleName("components-inside");
+
+/* Define the names and data types of columns.
+ * The "default value" parameter is meaningless here. */
+table.addContainerProperty("Sum",            Label.class,     null);
+table.addContainerProperty("Is Transferred", CheckBox.class,  null);
+table.addContainerProperty("Comments",       TextField.class, null);
+table.addContainerProperty("Details",        Button.class,    null);
+
+/* Add a few items in the table. */
+for (int i=0; i<100; i++) {
+    // Create the fields for the current table row
+    Label sumField = new Label(String.format(
+                   "Sum is <b>$%04.2f</b><br/><i>(VAT incl.)</i>",
+                   new Object[] {new Double(Math.random()*1000)}),
+                               ContentMode.HTML);
+    CheckBox transferredField = new CheckBox("is transferred");
+
+    // Multiline text field. This required modifying the
+    // height of the table row.
+    TextField commentsField = new TextField();
+    commentsField.setRows(3);
+
+    // The Table item identifier for the row.
+    Integer itemId = new Integer(i);
+
+    // Create a button and handle its click. A Button does not
+    // know the item it is contained in, so we have to store the
+    // item ID as user-defined data.
+    Button detailsField = new Button("show details");
+    detailsField.setData(itemId);
+    detailsField.addClickListener(new Button.ClickListener() {
+        public void buttonClick(ClickEvent event) {
+            // Get the item identifier from the user-defined data.
+            Integer iid = (Integer)event.getButton().getData();
+            Notification.show("Link " +
+                              iid.intValue() + " clicked.");
+        }
+    });
+    detailsField.addStyleName("link");
+
+    // Create the table row.
+    table.addItem(new Object[] {sumField, transferredField,
+                                commentsField, detailsField},
+                  itemId);
+}
+
+// Show just three rows because they are so high.
+table.setPageLength(3);
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.table.components.components2[on-line example, window="_blank"].
+
+The row height has to be set higher than the default with a style rule such as
+the following:
+
+
+[source, css]
+----
+/* Table rows contain three-row TextField components. */
+.v-table-components-inside .v-table-cell-content {
+	height: 54px;
+}
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.table.components.components2[on-line example, window="_blank"].
+
+The table will look as shown in <<figure.components.table.components-inside>>.
+
+[[figure.components.table.components-inside]]
+.Components in a Table
+image::img/table-components.png[]
+
+
+[[components.table.features.iterating]]
+=== Iterating Over a Table
+
+As the items in a [classname]#Table# are not indexed, iterating over the items
+has to be done using an iterator. The [methodname]#getItemIds()# method of the
+[classname]#Container# interface of [classname]#Table# returns a
+[classname]#Collection# of item identifiers over which you can iterate using an
+[classname]#Iterator#. For an example about iterating over a [classname]#Table#,
+please see
+<<dummy/../../../framework/datamodel/datamodel-container#datamodel.container,"Collecting
+Items in Containers">>. Notice that you may not modify the [classname]#Table#
+during iteration, that is, add or remove items. Changing the data is allowed.
+
+
+[[components.table.features.filtering]]
+=== Filtering Table Contents
+
+A table can be filtered if its container data source implements the
+[classname]#Filterable# interface, as the default [classname]#IndexedContainer#
+does. See
+<<dummy/../../../framework/datamodel/datamodel-container#datamodel.container.filtered,"Filterable
+Containers">>. ((("Container",
+"Filterable")))
+
+
+
+[[components.table.editing]]
+== Editing the Values in a Table
+
+Normally, a [classname]#Table# simply displays the items and their fields as
+text. If you want to allow the user to edit the values, you can either put them
+inside components as we did earlier or simply call
+[methodname]#setEditable(true)#, in which case the cells are automatically
+turned into editable fields.
+
+Let us begin with a regular table with a some columns with usual Java types,
+namely a [classname]#Date#, [classname]#Boolean#, and a [classname]#String#.
+
+
+[source, java]
+----
+// Create a table. It is by default not editable.
+Table table = new Table();
+
+// Define the names and data types of columns.
+table.addContainerProperty("Date",     Date.class,  null);
+table.addContainerProperty("Work",     Boolean.class, null);
+table.addContainerProperty("Comments", String.class,  null);
+
+...
+----
+
+You could put the table in editable mode right away. We continue the example by
+adding a check box to switch the table between normal and editable modes:
+
+
+[source, java]
+----
+CheckBox editable = new CheckBox("Editable", true);
+editable.addValueChangeListener(valueChange -> // Java 8
+    table.setEditable((Boolean) editable.getValue()));
+----
+
+Now, when you check to checkbox, the components in the table turn into editable
+fields, as shown in <<figure.component.table.editable>>.
+
+[[figure.component.table.editable]]
+.A Table in Normal and Editable Mode
+image::img/table-editable3.png[]
+
+[[components.table.editing.fieldfactories]]
+=== Field Factories
+
+The field components that allow editing the values of particular types in a
+table are defined in a field factory that implements the
+[classname]#TableFieldFactory# interface. The default implementation is
+[classname]#DefaultFieldFactory#, which offers the following crude mappings:
+
+.Type to Field Mappings in [classname]#DefaultFieldFactory#
+[options="header"]
+|===============
+|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.
+
+|===============
+
+
+
+Field factories are covered with more detail in
+<<dummy/../../../framework/datamodel/datamodel-itembinding#datamodel.itembinding,"Creating
+Forms by Binding Fields to Items">>. You could just implement the
+[classname]#TableFieldFactory# interface, but we recommend that you extend the
+[classname]#DefaultFieldFactory# according to your needs. In the default
+implementation, the mappings are defined in the
+[methodname]#createFieldByPropertyType()# method (you might want to look at the
+source code) both for tables and forms.
+
+
+ifdef::web[]
+[[components.table.editing.navigation]]
+=== Navigation in Editable Mode
+
+In the editable mode, the editor fields can have focus. Pressing Tab moves the
+focus to next column or, at the last column, to the first column of the next
+item. Respectively, pressing kbd:[Shift+Tab] moves the focus backward. If the focus is
+in the last column of the last visible item, the pressing kbd:[Tab] moves the focus
+outside the table. Moving backward from the first column of the first item moves
+the focus to the table itself. Some updates to the table, such as changing the
+headers or footers or regenerating a column, can move the focus from an editor
+component to the table itself.
+
+The default behaviour may be undesirable in many cases. For example, the focus
+also goes through any read-only editor fields and can move out of the table
+inappropriately. You can provide better navigation is to use event handler for
+shortcut keys such as kbd:[Tab], kbd:[Arrow Up], kbd:[Arrow Down], and kbd:[Enter].
+
+
+[source, java]
+----
+// Keyboard navigation
+class KbdHandler implements Handler {
+    Action tab_next = new ShortcutAction("Tab",
+            ShortcutAction.KeyCode.TAB, null);
+    Action tab_prev = new ShortcutAction("Shift+Tab",
+            ShortcutAction.KeyCode.TAB,
+            new int[] {ShortcutAction.ModifierKey.SHIFT});
+    Action cur_down = new ShortcutAction("Down",
+            ShortcutAction.KeyCode.ARROW_DOWN, null);
+    Action cur_up   = new ShortcutAction("Up",
+            ShortcutAction.KeyCode.ARROW_UP,   null);
+    Action enter   = new ShortcutAction("Enter",
+            ShortcutAction.KeyCode.ENTER,      null);
+    public Action[] getActions(Object target, Object sender) {
+        return new Action[] {tab_next, tab_prev, cur_down,
+                             cur_up, enter};
+    }
+
+    public void handleAction(Action action, Object sender,
+                             Object target) {
+        if (target instanceof TextField) {
+            // Move according to keypress
+            int itemid = (Integer) ((TextField) target).getData();
+            if (action == tab_next || action == cur_down)
+                itemid++;
+            else if (action == tab_prev || action == cur_up)
+                itemid--;
+            // On enter, just stay where you were. If we did
+            // not catch the enter action, the focus would be
+            // moved to wrong place.
+
+            if (itemid >= 0 && itemid < table.size()) {
+                TextField newTF = valueFields.get(itemid);
+                if (newTF != null)
+                    newTF.focus();
+            }
+        }
+    }
+}
+
+// Panel that handles keyboard navigation
+Panel navigator = new Panel();
+navigator.addStyleName(Reindeer.PANEL_LIGHT);
+navigator.addComponent(table);
+navigator.addActionHandler(new KbdHandler());
+----
+
+The main issue in implementing keyboard navigation in an editable table is that
+the editor fields do not know the table they are in. To find the parent table,
+you can either look up in the component container hierarchy or simply store a
+reference to the table with [methodname]#setData()# in the field component. The
+other issue is that you can not acquire a reference to an editor field from the
+[classname]#Table# component. One solution is to use some external collection,
+such as a [classname]#HashMap#, to map item IDs to the editor fields.
+
+
+[source, java]
+----
+// Can't access the editable components from the table so
+// must store the information
+final HashMap<Integer,TextField> valueFields =
+    new HashMap<Integer,TextField>();
+----
+
+The map has to be filled in a [classname]#TableFieldFactory#, such as in the
+following. You also need to set the reference to the table there and you can
+also set the initial focus there.
+
+
+[source, java]
+----
+table.setTableFieldFactory(new TableFieldFactory () {
+    public Field createField(Container container, Object itemId,
+            Object propertyId, Component uiContext) {
+        TextField field = new TextField((String) propertyId);
+
+        // User can only edit the numeric column
+        if ("Source of Fear".equals(propertyId))
+            field.setReadOnly(true);
+        else { // The numeric column
+            // The field needs to know the item it is in
+            field.setData(itemId);
+
+            // Remember the field
+            valueFields.put((Integer) itemId, field);
+
+            // Focus the first editable value
+            if (((Integer)itemId) == 0)
+                field.focus();
+        }
+        return field;
+    }
+});
+----
+
+The issues are complicated by the fact that the editor fields are not generated
+for the entire table, but only for a cache window that includes the visible
+items and some items above and below it. For example, if the beginning of a big
+scrollable table is visible, the editor component for the last item does not
+exist. This issue is relevant mostly if you want to have wrap-around navigation
+that jumps from the last to first item and vice versa.
+
+endif::web[]
+
+
+[[components.table.headersfooters]]
+== Column Headers and Footers
+
+[classname]#Table# supports both column headers and footers; the headers are
+enabled by default.
+
+[[components.table.headersfooters.headers]]
+=== Headers
+
+The table header displays the column headers at the top of the table. You can
+use the column headers to reorder or resize the columns, as described earlier.
+By default, the header of a column is the property ID of the column, unless
+given explicitly with [methodname]#setColumnHeader()#.
+
+
+[source, java]
+----
+// Define the properties
+table.addContainerProperty("lastname", String.class, null);
+table.addContainerProperty("born", Integer.class, null);
+table.addContainerProperty("died", Integer.class, null);
+
+// Set nicer header names
+table.setColumnHeader("lastname", "Name");
+table.setColumnHeader("born", "Born");
+table.setColumnHeader("died", "Died");
+----
+
+The text of the column headers and the visibility of the header depends on the
+__column header mode__. The header is visible by default, but you can disable it
+with [methodname]#setColumnHeaderMode(Table.COLUMN_HEADER_MODE_HIDDEN)#.
+
+
+[[components.table.headersfooters.footers]]
+=== Footers
+
+The table footer can be useful for displaying sums or averages of values in a
+column, and so on. The footer is not visible by default; you can enable it with
+[methodname]#setFooterVisible(true)#. Unlike in the header, the column headers
+are empty by default. You can set their value with
+[methodname]#setColumnFooter()#. The columns are identified by their property
+ID.
+
+The following example shows how to calculate average of the values in a column:
+
+
+[source, java]
+----
+// Have a table with a numeric column
+Table table = new Table("Custom Table Footer");
+table.addContainerProperty("Name", String.class, null);
+table.addContainerProperty("Died At Age", Integer.class, null);
+
+// Insert some data
+Object people[][] = { {"Galileo",  77},
+                      {"Monnier",  83},
+                      {"Vaisala",  79},
+                      {"Oterma",   86}};
+for (int i=0; i<people.length; i++)
+    table.addItem(people[i], new Integer(i));
+
+// Calculate the average of the numeric column
+double avgAge = 0;
+for (int i=0; i<people.length; i++)
+    avgAge += (Integer) people[i][1];
+avgAge /= people.length;
+
+// Set the footers
+table.setFooterVisible(true);
+table.setColumnFooter("Name", "Average");
+table.setColumnFooter("Died At Age", String.valueOf(avgAge));
+
+// Adjust the table height a bit
+table.setPageLength(table.size());
+----
+
+The resulting table is shown in
+<<figure.components.table.headersfooters.footer>>.
+
+[[figure.components.table.headersfooters.footer]]
+.A Table with a Footer
+image::img/table-footer.png[]
+
+
+[[components.table.headersfooters.clicks]]
+=== Handling Mouse Clicks on Headers and Footers
+
+Normally, when the user clicks a column header, the table will be sorted by the
+column, assuming that the data source is [classname]#Sortable# and sorting is
+not disabled. In some cases, you might want some other functionality when the
+user clicks the column header, such as selecting the column in some way.
+
+Clicks in the header cause a [classname]#HeaderClickEvent#, which you can handle
+with a [classname]#Table.HeaderClickListener#. Click events on the table header
+(and footer) are, like button clicks, sent immediately to server, so there is no
+need to set [methodname]#setImmediate()#.
+
+
+[source, java]
+----
+// Handle the header clicks
+table.addHeaderClickListener(new Table.HeaderClickListener() {
+    public void headerClick(HeaderClickEvent event) {
+        String column = (String) event.getPropertyId();
+        Notification.show("Clicked " + column +
+                "with " + event.getButtonName());
+    }
+});
+
+// Disable the default sorting behavior
+table.setSortDisabled(true);
+----
+
+Setting a click handler does not automatically disable the sorting behavior of
+the header; you need to disable it explicitly with
+[methodname]#setSortDisabled(true)#. Header click events are not sent when the
+user clicks the column resize handlers to drag them.
+
+The [classname]#HeaderClickEvent# object provides the identity of the clicked
+column with [methodname]#getPropertyId()#. The [methodname]#getButton()# reports
+the mouse button with which the click was made: [parameter]#BUTTON_LEFT#,
+[parameter]#BUTTON_RIGHT#, or [parameter]#BUTTON_MIDDLE#. The
+[methodname]#getButtonName()# a human-readable button name in English: "
+[parameter]#left#", " [parameter]#right#", or " [parameter]#middle#". The
+[methodname]#isShiftKey()#, [methodname]#isCtrlKey()#, etc., methods indicate if
+the kbd:[Shift], kbd:[Ctrl], kbd:[Alt] or other modifier keys were pressed during the click.
+
+Clicks in the footer cause a [classname]#FooterClickEvent#, which you can handle
+with a [classname]#Table.FooterClickListener#. Footers do not have any default
+click behavior, like the sorting in the header. Otherwise, handling clicks in
+the footer is equivalent to handling clicks in the header.
+
+
+
+[[components.table.columngenerator]]
+== Generated Table Columns
+
+A table can have generated columns which values can be calculated based on the
+values in other columns. The columns are generated with a class implementing the
+[interfacename]#Table.ColumnGenerator# interface.
+
+The [classname]#GeneratedPropertyContainer# described in
+<<dummy/../../../framework/datamodel/datamodel-container#datamodel.container.gpc,"GeneratedPropertyContainer">>
+is another way to accomplish the same task at container level. In addition to
+generating values, you can also use the feature for formatting or styling
+columns.
+
+ifdef::web[]
+[[components.table.columngenerator.generator]]
+=== Defining a Column Generator
+
+Column generators are objects that implement the
+[classname]#Table.ColumnGenerator# interface and its
+[methodname]#generateCell()# method. The method gets the identity of the item
+and column as its parameters, in addition to the table object, and has to return
+a component. The interface is functional, so you can also define it by a lambda
+expression or a method reference in Java 8.
+
+The following example defines a generator for formatting [classname]#Double#
+valued fields according to a format string (as in
+[classname]#java.util.Formatter#).
+
+
+[source, java]
+----
+/** Formats the value in a column containing Double objects. */
+class ValueColumnGenerator implements Table.ColumnGenerator {
+    String format; /* Format string for the Double values. */
+
+    /**
+     * Creates double value column formatter with the given
+     * format string.
+     */
+    public ValueColumnGenerator(String format) {
+        this.format = format;
+    }
+
+    /**
+     * Generates the cell containing the Double value.
+     * The column is irrelevant in this use case.
+     */
+    public Component generateCell(Table source, Object itemId,
+                                  Object columnId) {
+        // Get the object stored in the cell as a property
+        Property prop =
+            source.getItem(itemId).getItemProperty(columnId);
+        if (prop.getType().equals(Double.class)) {
+            Label label = new Label(String.format(format,
+                    new Object[] { (Double) prop.getValue() }));
+
+            // Set styles for the column: one indicating that it's
+            // a value and a more specific one with the column
+            // name in it. This assumes that the column name
+            // is proper for CSS.
+            label.addStyleName("column-type-value");
+            label.addStyleName("column-" + (String) columnId);
+            return label;
+        }
+        return null;
+    }
+}
+----
+
+The column generator is called for all the visible (or more accurately cached)
+items in a table. If the user scrolls the table to another position in the
+table, the columns of the new visible rows are generated dynamically.
+
+Generated column cells are automatically updated when a property value in the
+table row changes. Note that a generated cell, even if it is a field, does not
+normally have a property value bound to the table's container, so changes in
+generated columns do not trigger updates in other generated columns. It should
+also be noted that if a generated column cell depends on values in other rows,
+changes in the other rows do not trigger automatic update. You can get notified
+of such value changes by listening for them with a
+[interfacename]#ValueChangeListener# in the generated components. If you do so,
+you must remove such listeners when the generated components are detached from
+the UI or otherwise the listeners will accumulate in the container when the
+table is scrolled back and forth, causing possibly severe memory leak.
+
+endif::web[]
+
+ifdef::web[]
+[[components.table.columngenerator.adding]]
+=== Adding Generated Columns
+
+You add new generated columns to a [classname]#Table# with
+[methodname]#addGeneratedColumn()#. It takes a property ID of the generated
+column as the first parameter and the generator as the second.
+
+
+[source, java]
+----
+// Define the generated columns and their generators
+table.addGeneratedColumn("date", // Java 8:
+                         this::generateNonEditableCell);
+table.addGeneratedColumn("price",
+                         new PriceColumnGenerator());
+table.addGeneratedColumn("consumption",
+                         new ConsumptionColumnGenerator());
+table.addGeneratedColumn("dailycost",
+                         new DailyCostColumnGenerator());
+----
+
+Notice that the [methodname]#addGeneratedColumn()# always places the generated
+columns as the last column, even if you defined some other order previously. You
+will have to set the proper order with [methodname]#setVisibleColumns()#.
+
+
+[source, java]
+----
+table.setVisibleColumns("date", "quantity", "price", "total");
+----
+
+endif::web[]
+
+ifdef::web[]
+[[components.table.columngenerator.editable]]
+=== Generators in Editable Table
+
+When you set a table as [parameter]#editable#, table cells change to editable
+fields. When the user changes the values in the fields, the generated cells in
+the same row are updated automatically. However, putting a table with generated
+columns in editable mode has a few quirks. One is that the editable mode does
+not affect generated columns. You have two alternatives: either you generate the
+editing fields in the generator or, in case of formatter generators, remove the
+generators in the editable mode to allow editing the values. The following
+example uses the latter approach.
+
+
+[source, java]
+----
+// Have a check box that allows the user
+// to make the quantity and total columns editable.
+final CheckBox editable = new CheckBox(
+    "Edit the input values - calculated columns are regenerated");
+
+editable.setImmediate(true);
+editable.addClickListener(new ClickListener() {
+    public void buttonClick(ClickEvent event) {
+        table.setEditable(editable.booleanValue());
+
+        // The columns may not be generated when we want to
+        // have them editable.
+        if (editable.booleanValue()) {
+            table.removeGeneratedColumn("quantity");
+            table.removeGeneratedColumn("total");
+        } else { // Not editable
+            // Show the formatted values.
+            table.addGeneratedColumn("quantity",
+                new ValueColumnGenerator("%.2f l"));
+            table.addGeneratedColumn("total",
+                new ValueColumnGenerator("%.2f e"));
+        }
+        // The visible columns are affected by removal
+        // and addition of generated columns so we have
+        // to redefine them.
+        table.setVisibleColumns("date", "quantity",
+                 "price", "total", "consumption", "dailycost");
+    }
+});
+----
+
+You will also have to set the editing fields in [parameter]#immediate# mode to
+have the update occur immediately when an edit field loses the focus. You can
+set the fields in [parameter]#immediate# mode with the a custom
+[classname]#TableFieldFactory#, such as the one given below, that just extends
+the default implementation to set the mode:
+
+
+[source, java]
+----
+public class ImmediateFieldFactory extends DefaultFieldFactory {
+    public Field createField(Container container,
+                             Object itemId,
+                             Object propertyId,
+                             Component uiContext) {
+        // Let the DefaultFieldFactory create the fields...
+        Field field = super.createField(container, itemId,
+                                        propertyId, uiContext);
+
+        // ...and just set them as immediate.
+        ((AbstractField)field).setImmediate(true);
+
+        return field;
+    }
+}
+...
+table.setTableFieldFactory(new ImmediateFieldFactory());
+----
+
+If you generate the editing fields with the column generator, you avoid having
+to use such a field factory, but of course have to generate the fields for both
+normal and editable modes.
+
+<<figure.ui.table.generated>> shows a table with columns calculated (blue) and
+simply formatted (black) with column generators.
+
+[[figure.ui.table.generated]]
+.Table with Generated Columns in Normal and Editable Mode
+image::img/table-generatedcolumns1.png[]
+
+endif::web[]
+
+
+[[components.table.columnformatting]]
+== Formatting Table Columns
+
+The displayed values of properties shown in a table are normally formatted using
+the [methodname]#toString()# method of each property. Customizing the format in
+a table column can be done in several ways:
+
+* Using [classname]#ColumnGenerator# to generate a second column that is formatted. The original column needs to be set invisible. See <<components.table.columngenerator>>.
+* Using a [classname]#Converter# to convert between the property data model and its representation in the table.
+* Using a [classname]#GeneratedPropertyContainer# as a wrapper around the actual container to provide formatting.
+* Overriding the default [methodname]#formatPropertyValue()# in [classname]#Table#.
+
+As using a [classname]#PropertyFormatter# is generally much more awkward than
+overriding the [methodname]#formatPropertyValue()#, its use is not described
+here.
+
+You can override [methodname]#formatPropertyValue()# as is done in the following
+example:
+
+
+[source, java]
+----
+// Create a table that overrides the default
+// property (column) format
+final Table table = new Table("Formatted Table") {
+    @Override
+    protected String formatPropertyValue(Object rowId,
+            Object colId, Property property) {
+        // Format by property type
+        if (property.getType() == Date.class) {
+            SimpleDateFormat df =
+                new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
+            return df.format((Date)property.getValue());
+        }
+
+        return super.formatPropertyValue(rowId, colId, property);
+    }
+};
+
+// The table has some columns
+table.addContainerProperty("Time", Date.class, null);
+
+... Fill the table with data ...
+----
+
+You can also distinguish between columns by the [parameter]#colId# parameter,
+which is the property ID of the column. [classname]#DecimalFormat# is useful for
+formatting decimal values.
+
+
+[source, java]
+----
+... in formatPropertyValue() ...
+} else if ("Value".equals(pid)) {
+    // Format a decimal value for a specific locale
+    DecimalFormat df = new DecimalFormat("#.00",
+            new DecimalFormatSymbols(locale));
+    return df.format((Double) property.getValue());
+}
+...
+table.addContainerProperty("Value", Double.class, null);
+----
+
+A table with the formatted date and decimal value columns is shown in
+<<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>>.
+
+
+[[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 {}
+  .v-table-header-wrap {}
+    .v-table-header {}
+      .v-table-header-cell {}
+        .v-table-resizer {} /* Column resizer handle. */
+        .v-table-caption-container {}
+  .v-table-body {}
+    .v-table-row-spacer {}
+    .v-table-table {}
+      .v-table-row {}
+        .v-table-cell-content {}
+----
+
+Notice that some of the widths and heights in a table are calculated dynamically
+and can not be set in CSS.
+
+ifdef::web[]
+[[components.table.css.cellstylegenerator]]
+=== Generating Cell Styles With [interfacename]#CellStyleGenerator#
+
+The [classname]#Table.CellStyleGenerator# interface allows you to set the CSS
+style for each individual cell in a table. You need to implement the
+[methodname]#getStyle()#, which gets the row (item) and column (property)
+identifiers as parameters and can return a style name for the cell. The returned
+style name will be concatenated to prefix "
+[literal]#++v-table-cell-content-++#".
+
+The [methodname]#getStyle()# is called also for each row, so that the
+[parameter]#propertyId# parameter is [literal]#++null++#. This allows setting a
+row style.
+
+Alternatively, you can use a [classname]#Table.ColumnGenerator# (see
+<<components.table.columngenerator>>) to generate the actual UI components of
+the cells and add style names to them.
+
+
+[source, java]
+----
+Table table = new Table("Table with Cell Styles");
+table.addStyleName("checkerboard");
+
+// Add some columns in the table. In this example, the property
+// IDs of the container are integers so we can determine the
+// column number easily.
+table.addContainerProperty("0", String.class, null, "", null, null);
+for (int i=0; i<8; i++)
+    table.addContainerProperty(""+(i+1), String.class, null,
+                         String.valueOf((char) (65+i)), null, null);
+
+// Add some items in the table.
+table.addItem(new Object[]{
+    "1", "R", "N", "B", "Q", "K", "B", "N", "R"}, new Integer(0));
+table.addItem(new Object[]{
+    "2", "P", "P", "P", "P", "P", "P", "P", "P"}, new Integer(1));
+for (int i=2; i<6; i++)
+    table.addItem(new Object[]{String.valueOf(i+1),
+                 "", "", "", "", "", "", "", ""}, new Integer(i));
+table.addItem(new Object[]{
+    "7", "P", "P", "P", "P", "P", "P", "P", "P"}, new Integer(6));
+table.addItem(new Object[]{
+    "8", "R", "N", "B", "Q", "K", "B", "N", "R"}, new Integer(7));
+table.setPageLength(8);
+
+// Set cell style generator
+table.setCellStyleGenerator(new Table.CellStyleGenerator() {
+    public String getStyle(Object itemId, Object propertyId) {
+        // Row style setting, not relevant in this example.
+        if (propertyId == null)
+            return "green"; // Will not actually be visible
+
+        int row = ((Integer)itemId).intValue();
+        int col = Integer.parseInt((String)propertyId);
+
+        // The first column.
+        if (col == 0)
+            return "rowheader";
+
+        // Other cells.
+        if ((row+col)%2 == 0)
+            return "black";
+        else
+            return "white";
+    }
+});
+----
+
+You can then style the cells, for example, as follows:
+
+
+[source, css]
+----
+/* Center the text in header. */
+.v-table-header-cell {
+    text-align: center;
+}
+
+/* Basic style for all cells. */
+.v-table-checkerboard .v-table-cell-content {
+    text-align: center;
+    vertical-align: middle;
+    padding-top: 12px;
+    width: 20px;
+    height: 28px;
+}
+
+/* Style specifically for the row header cells. */
+.v-table-cell-content-rowheader {
+	background: #E7EDF3
+     url(../default/table/img/header-bg.png) repeat-x scroll 0 0;
+}
+
+/* Style specifically for the "white" cells. */
+.v-table-cell-content-white {
+    background: white;
+    color: black;
+}
+
+/* Style specifically for the "black" cells. */
+.v-table-cell-content-black {
+    background: black;
+    color: white;
+}
+----
+
+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[]
+
+endif::web[]
+
+
+(((range="endofrange", startref="term.components.table")))
diff --git a/documentation/components/components-textarea.asciidoc b/documentation/components/components-textarea.asciidoc
new file mode 100644
index 0000000000..2c219cc8dc
--- /dev/null
+++ b/documentation/components/components-textarea.asciidoc
@@ -0,0 +1,96 @@
+---
+title: TextArea
+order: 10
+layout: page
+---
+
+[[components.textarea]]
+= [classname]#TextArea#
+
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/text-input/text-area]
+endif::web[]
+
+[classname]#TextArea# is a multi-line version of the [classname]#TextField#
+component described in
+<<dummy/../../../framework/components/components-textfield#components.textfield,"TextField">>.
+
+The following example creates a simple text area:
+
+
+[source, java]
+----
+// Create the area
+TextArea area = new TextArea("Big Area");
+        
+// Put some content in it
+area.setValue("A row\n"+
+              "Another row\n"+
+              "Yet another row");
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.textarea.basic[on-line example, window="_blank"].
+
+The result is shown in <<figure.components.textarea>>.
+
+[[figure.components.textarea]]
+.[classname]#TextArea# Example
+image::img/textarea-basic.png[]
+
+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
+actual number of rows exceeds the number, a vertical scrollbar will appear.
+Setting the height with [methodname]#setRows()# leaves space for a horizontal
+scrollbar, so the actual number of visible rows may be one higher if the
+scrollbar is not visible.
+
+You can set the width with the regular [methodname]#setWidth()# method. Setting
+the size with the __em__ unit, which is relative to the used font size, is
+recommended.
+
+[[components.textarea.wordwrap]]
+== Word Wrap
+
+The [methodname]#setWordwrap()# sets whether long lines are wrapped (
+[literal]#++true++# - default) when the line length reaches the width of the
+writing area. If the word wrap is disabled ( [literal]#++false++#), a vertical
+scrollbar will appear instead. The word wrap is only a visual feature and
+wrapping a long line does not insert line break characters in the field value;
+shortening a wrapped line will undo the wrapping.
+
+
+[source, java]
+----
+TextArea area1 = new TextArea("Wrapping");
+area1.setWordwrap(true); // The default
+area1.setValue("A quick brown fox jumps over the lazy dog");
+
+TextArea area2 = new TextArea("Nonwrapping");
+area2.setWordwrap(false);
+area2.setValue("Victor jagt zw&ouml;lf Boxk&auml;mpfer quer "+
+               "&uuml;ber den Sylter Deich");
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.textarea.wordwrap[on-line example, window="_blank"].
+
+The result is shown in <<figure.components.textarea.wordwrap>>.
+
+[[figure.components.textarea.wordwrap]]
+.Word Wrap in [classname]#TextArea#
+image::img/textarea-wordwrap.png[]
+
+
+[[components.textarea.css]]
+== CSS Style Rules
+
+
+[source, css]
+----
+.v-textarea { }
+----
+
+The HTML structure of [classname]#TextArea# is extremely simple, consisting only
+of an element with [literal]#++v-textarea++# style.
+
+CSS Styling
+
+
diff --git a/documentation/components/components-textfield.asciidoc b/documentation/components/components-textfield.asciidoc
new file mode 100644
index 0000000000..db3d93aeba
--- /dev/null
+++ b/documentation/components/components-textfield.asciidoc
@@ -0,0 +1,307 @@
+---
+title: TextField
+order: 9
+layout: page
+---
+
+[[components.textfield]]
+= [classname]#TextField#
+
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/text-input/text-field]
+endif::web[]
+
+((("[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.
+
+The following example creates a simple text field:
+
+[source, java]
+----
+// Create a text field
+TextField tf = new TextField("A Field");
+        
+// Put some initial content in it
+tf.setValue("Stuff in the field");
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.textfield.basic[on-line example, window="_blank"].
+
+The result is shown in <<figure.components.textfield.basic>>.
+
+[[figure.components.textfield.basic]]
+.[classname]#TextField# Example
+image::img/textfield-example.png[]
+
+Value changes are handled with a [classname]#Property.ValueChangeListener#, as
+in most other fields. The value can be acquired with [methodname]#getValue()#
+directly from the text field, as is done in the example below, or from the
+property reference of the event.
+
+[source, java]
+----
+// Handle changes in the value
+tf.addValueChangeListener(new Property.ValueChangeListener() {
+    public void valueChange(ValueChangeEvent event) {
+        // Assuming that the value type is a String
+        String value = (String) event.getProperty().getValue();
+
+        // Do something with the value
+        Notification.show("Value is: " + value);
+    }
+});
+
+// Fire value changes immediately when the field loses focus
+tf.setImmediate(true);
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.textfield.inputhandling[on-line example, window="_blank"].
+
+As with other event listeners, you can use lambda expression with one parameter
+to handle the events in Java 8.
+
+Much of the API of [classname]#TextField# is defined in
+[classname]#AbstractTextField#, which allows different kinds of text input
+fields, such as rich text editors, which do not share all the features of the
+single-line text fields.
+
+[[figure.components.textfield.api]]
+.Text Field Class Relationships
+image::img/textfield-diagram-hi.png[width=50%]
+
+[[components.textfield.databinding]]
+== Data Binding
+
+[classname]#TextField# edits [classname]#String# values, but you can bind it to
+any property type that has a proper converter, as described in
+<<dummy/../../../framework/datamodel/datamodel-properties#datamodel.properties.converter,"Converting
+Between Property Type and Representation">>.
+
+[source, java]
+----
+// Have an initial data model. As Double is unmodificable and
+// 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);
+tf.setImmediate(true);
+
+// Show that the value is really written back to the
+// data source when edited by user.
+Label feedback = new Label(property);
+feedback.setCaption("The Value");
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.textfield.databinding[on-line example, window="_blank"].
+
+When you put a [classname]#Table# in editable mode or create fields with a
+[classname]#FieldGroup#, the [classname]#DefaultFieldFactory# creates a
+[classname]#TextField# for almost every property type by default. You often need
+to make a custom factory to customize the creation and to set the field tooltip,
+validation, formatting, and so on.
+
+See
+<<dummy/../../../framework/datamodel/datamodel-overview.asciidoc#datamodel.overview,"Binding
+Components to Data">> for more details on data binding, field factories for
+[classname]#Table# in
+<<dummy/../../../framework/components/components-table#components.table.editing,"Editing
+the Values in a Table">>, and
+<<dummy/../../../framework/datamodel/datamodel-itembinding#datamodel.itembinding,"Creating
+Forms by Binding Fields to Items">> regarding forms.
+
+[[components.textfield.length]]
+== String Length
+
+The [methodname]#setMaxLength()# method sets the maximum length of the input
+string so that the browser prevents the user from entering a longer one. As a
+security feature, the input value is automatically truncated on the server-side,
+as the maximum length setting could be bypassed on the client-side. The maximum
+length property is defined at [classname]#AbstractTextField# level.
+
+Notice that the maximum length setting does not affect the width of the field.
+You can set the width with [methodname]#setWidth()#, as with other components.
+Using __em__ widths is recommended to better approximate the proper width in
+relation to the size of the used font, but the __em__ width is not exactly the
+width of a letter and varies by browser and operating system. There is no standard
+way in HTML for setting the width exactly to a number of letters (in a monospaced font).
+
+[[components.textfield.nullvalues]]
+== Handling Null Values
+
+((("Null representation", id="term.components.textfield.nullvalues", range="startofrange")))
+
+((("[methodname]#setNullRepresentation()#")))
+As with any field, the value of a [classname]#TextField# can be set as
+[parameter]#null#. This occurs most commonly when you create a new field without
+setting a value for it or bind the field value to a data source that allows null
+values. In such case, you might want to show a special value that stands for the
+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
+initialize your data objects properly.
+
+((("[methodname]#setNullSettingAllowed()#")))
+The [methodname]#setNullSettingAllowed()# controls whether the user can actually
+input a null value by using the null value representation. If the setting is
+[literal]#++false++#, which is the default, inputting the null value
+representation string sets the value as the literal value of the string, not
+null. This default assumption is a safeguard for data sources that may not allow
+null values.
+
+[source, java]
+----
+// Have a property with null value
+ObjectProperty<Double> dataModel =
+    new ObjectProperty<Double>(new Double(0.0));
+dataModel.setValue(null); // Have to set it null here
+
+// Create a text field bound to the null data
+TextField tf = new TextField("Field Energy (J)", dataModel);
+tf.setNullRepresentation("-- null-point --");
+
+// Allow user to input the null value by its representation
+tf.setNullSettingAllowed(true);
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.textfield.nullvaluerepresentation[on-line example, window="_blank"].
+
+The [classname]#Label#, which is bound to the value of the
+[classname]#TextField#, displays a null value as empty. The resulting user
+interface is shown in <<figure.components.textfield.nullvalues>>.
+
+[[figure.components.textfield.nullvalues]]
+.Null Value Representation
+image::img/textfield-nullrepresentation.png[]
+
+(((range="endofrange", startref="term.components.textfield.nullvalues")))
+
+[[components.textfield.textchangeevents]]
+== Text Change Events
+
+((("[classname]#Text change events#", id="term.components.textfield.textchangeevents", range="startofrange")))
+
+Often you want to receive a change event immediately when the text field value
+changes. The __immediate__ mode is not literally immediate, as the changes are
+transmitted only after the field loses focus. In the other extreme, using
+keyboard events for every keypress would make typing unbearably slow and also
+processing the keypresses is too complicated for most purposes. __Text change
+events__ are transmitted asynchronously soon after typing and do not block
+typing while an event is being processed.
+
+((([classname]#TextChangeListener#)))
+Text change events are received with a [classname]#TextChangeListener#, as is
+done in the following example that demonstrates how to create a text length
+counter:
+
+[source, java]
+----
+// Text field with maximum length
+final TextField tf = new TextField("My Eventful Field");
+tf.setValue("Initial content");
+tf.setMaxLength(20);
+
+// Counter for input length
+final Label counter = new Label();
+counter.setValue(tf.getValue().length() +
+                 " of " + tf.getMaxLength());
+
+// Display the current length interactively in the counter
+tf.addTextChangeListener(new TextChangeListener() {
+    public void textChange(TextChangeEvent event) {
+        int len = event.getText().length();
+        counter.setValue(len + " of " + tf.getMaxLength());
+    }
+});
+
+// The lazy mode is actually the default
+tf.setTextChangeEventMode(TextChangeEventMode.LAZY);
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.textfield.textchangeevents.counter[on-line example, window="_blank"].
+
+The result is shown in <<figure.components.textfield.textchangeevents>>.
+
+[[figure.components.textfield.textchangeevents]]
+.Text Change Events
+image::img/textfield-textchangeevents.png[]
+
+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
+larger changes in one event if the user is typing fast, thereby reducing server
+requests.
+
+((([classname]#TextChangeEventMode#)))
+You can set the text change event mode of a [classname]#TextField# with
+[methodname]#setTextChangeEventMode()#. The allowed modes are defined in
+[classname]#TextChangeEventMode# enum and are as follows:
+
+[parameter]#TextChangeEventMode.LAZY#(default):: An event is triggered when there is a pause in editing the text. The length of
+the pause can be modified with [methodname]#setInputEventTimeout()#. As with the
+[parameter]#TIMEOUT# mode, a text change event is forced before a possible
+[classname]#ValueChangeEvent#, even if the user did not keep a pause while
+entering the text.
+
++
+This is the default mode.
+
+[parameter]#TextChangeEventMode.TIMEOUT#:: A text change in the user interface causes the event to be communicated to the
+application after a timeout period. If more changes are made during this period,
+the event sent to the server-side includes the changes made up to the last
+change. The length of the timeout can be set with
+[methodname]#setInputEventTimeout()#.
+
++
+If a [classname]#ValueChangeEvent# would occur before the timeout period, a
+[classname]#TextChangeEvent# is triggered before it, on the condition that the
+text content has changed since the previous [classname]#TextChangeEvent#.
+
+[parameter]#TextChangeEventMode.EAGER#:: An event is triggered immediately for every change in the text content,
+typically caused by a key press. The requests are separate and are processed
+sequentially one after another. Change events are nevertheless communicated
+asynchronously to the server, so further input can be typed while event requests
+are being processed.
+
+(((range="endofrange", startref="term.components.textfield.textchangeevents")))
+
+[[components.textfield.css]]
+== CSS Style Rules
+
+[source, css]
+----
+.v-textfield { }
+----
+
+The HTML structure of [classname]#TextField# is extremely simple, consisting
+only of an element with the [literal]#++v-textfield++# style.
+
+For example, the following custom style uses dashed border:
+
+[source, css]
+----
+.v-textfield-dashing {
+    border:     thin dashed;
+    background: white; /* Has shading image by default */
+}
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.textfield.css[on-line example, window="_blank"].
+
+The result is shown in <<figure.components.textfield.css>>.
+
+[[figure.components.textfield.css]]
+.Styling TextField with CSS
+image::img/textfield-css.png[]
+
+The style name for [classname]#TextField# is also used in several components
+that contain a text input field, even if the text input is not an actual
+[classname]#TextField#. This ensures that the style of different text input
+boxes is similar.
+
+(((range="endofrange", startref="term.components.textfield")))
diff --git a/documentation/components/components-tree.asciidoc b/documentation/components/components-tree.asciidoc
new file mode 100644
index 0000000000..d983049576
--- /dev/null
+++ b/documentation/components/components-tree.asciidoc
@@ -0,0 +1,98 @@
+---
+title: Tree
+order: 22
+layout: page
+---
+
+[[components.tree]]
+= [classname]#Tree#
+
+ifdef::web[]
+[.sampler]
+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 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.
+
+
+[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);
+    }
+}
+
+main.addComponent(tree);
+----
+
+<<figure.components.tree>> below shows the tree from the code example in a
+practical situation.
+
+[[figure.components.tree]]
+.A [classname]#Tree# Component as a Menu
+image::img/tree-example1.png[]
+
+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)#.
+
+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.
+
+
+
diff --git a/documentation/components/components-treetable.asciidoc b/documentation/components/components-treetable.asciidoc
new file mode 100644
index 0000000000..15db0cdd3d
--- /dev/null
+++ b/documentation/components/components-treetable.asciidoc
@@ -0,0 +1,101 @@
+---
+title: TreeTable
+order: 23
+layout: page
+---
+
+[[components.treetable]]
+= [classname]#TreeTable#
+
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/grids-and-trees/tree-table]
+endif::web[]
+
+[classname]#TreeTable# is an extension of the [classname]#Table# component with
+support for a tree-like hierarchy in the first column. As with
+[classname]#Tree#, the hierarchy is determined by the parent-children
+relationships defined in the [interfacename]#Container.Hierarchical# interface.
+The default container is [classname]#HierarchicalContainer#, but you can bind
+[classname]#TreeTable# to any container implementing the interface.
+
+[[figure.components.treetable.basic]]
+.[classname]#TreeTable# Component
+image::img/treetable-basic.png[]
+
+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);
+ttable.setParent(1, 0);
+ttable.addItem(new Object[]{"Foods", null}, 2);
+ttable.setParent(2, 0);
+ttable.addItem(new Object[]{"Coffee", 23}, 3);
+ttable.addItem(new Object[]{"Tea", 42}, 4);
+ttable.setParent(3, 1);
+ttable.setParent(4, 1);
+ttable.addItem(new Object[]{"Bread", 13}, 5);
+ttable.addItem(new Object[]{"Cake", 11}, 6);
+ttable.setParent(5, 2);
+ttable.setParent(6, 2);
+----
+
+Some container types may allow defining hierarchies if the container data
+itself, without explicitly setting the parent-child relationships with
+[methodname]#setParent()#.
+
+Unlike [classname]#Tree#, a [classname]#TreeTable# can have components in the
+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">>.
+
+[[components.treetable.collapsed]]
+== Expanding and Collapsing Items
+
+As in [classname]#Tree#, you can set the expanded/collapsed state of an item
+programmatically with [methodname]#setCollapsed()#. Note that if you want to
+expand all items, there is no [methodname]#expandItemsRecursively()# like in
+[classname]#Tree#. Moreover, the [methodname]#getItemIds()# only returns the IDs
+of the currently visible items for ordinary [interfacename]#Hierarchical# (not
+[interfacename]#Collapsible#) containers. Hence you can not use that to iterate
+over all the items, but you need to get the IDs from the underlying container.
+
+
+[source, java]
+----
+// Expand the tree
+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))
+        ttable.setChildrenAllowed(itemId, false);
+}
+----
+
+In large tables, this explicit setting becomes infeasible, as it needs to be
+stored in the [classname]#TreeTable# (more exactly, in the
+[classname]#HierarchicalStrategy# object) for all the contained items. You can
+use a [interfacename]#Collapsible# container to store the collapsed states in
+the container, thereby avoiding the explicit settings and memory overhead. There
+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.
+
+
+
+
diff --git a/documentation/components/components-twincolselect.asciidoc b/documentation/components/components-twincolselect.asciidoc
new file mode 100644
index 0000000000..f87e4ec993
--- /dev/null
+++ b/documentation/components/components-twincolselect.asciidoc
@@ -0,0 +1,100 @@
+---
+title: TwinColSelect
+order: 20
+layout: page
+---
+
+[[components.twincolselect]]
+= [classname]#TwinColSelect#
+
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/multiple-value/list-builder]
+endif::web[]
+
+The [classname]#TwinColSelect# field provides a multiple selection component
+that shows two lists side by side, with the left column containing unselected
+items and the right column the selected items. The user can select items from
+the list on the left and click on the "&gt;&gt;" button to move them to the list on
+the right. Items can be deselected by selecting them in the right list and
+clicking on the "&lt;&lt;" button.
+
+[[figure.components.twincolselect.basic]]
+.Twin Column Selection
+image::img/twincolselect-basic.png[]
+
+[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
+in the right column.
+
+The selection columns can have their own captions, separate from the overall
+component caption, which is managed by the containing layout. You can set the
+column captions with [methodname]#setLeftColumnCaption()# and
+[methodname]#setRightColumnCaption()#.
+
+
+[source, java]
+----
+TwinColSelect select = new TwinColSelect("Select Targets");
+
+// Put some items in the select
+select.addItems("Mercury", "Venus", "Earth", "Mars",
+        "Jupiter", "Saturn", "Uranus", "Neptune");
+
+// Few items, so we can set rows to match item count
+select.setRows(select.size());
+
+// Preselect a few items by creating a set
+select.setValue(new HashSet<String>(
+    Arrays.asList("Venus", "Earth", "Mars")));
+
+// Handle value changes
+select.addValueChangeListener(event -> // Java 8
+    layout.addComponent(new Label("Selected: " +
+            event.getProperty().getValue())));
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.select.twincolselect.captions[on-line example, window="_blank"].
+
+The resulting component is shown in <<figure.components.twincolselect.basic>>.
+
+The [methodname]#setRows()# method sets the height of the component by the
+number of visible items in the selection boxes. Setting the height with
+[methodname]#setHeight()# to a defined value overrides the rows setting.
+
+Common selection component features are described in
+<<dummy/../../../framework/components/components-selection#components.selection,"Selection
+Components">>.
+
+== CSS Style Rules
+
+
+[source, css]
+----
+.v-select-twincol {}
+  .v-select-twincol-options-caption {}
+  .v-select-twincol-selections-caption {}
+  .v-select-twincol-options {}
+  .v-select-twincol-buttons {}
+    .v-button {}
+      .v-button-wrap {}
+        .v-button-caption {}
+    .v-select-twincol-deco {}
+  .v-select-twincol-selections {}
+----
+
+The [classname]#TwinColSelect# component has an overall
+[literal]#++v-select-twincol++# style. If set, the left and right column
+captions have [literal]#++v-select-twincol-options-caption++# and
+[literal]#++v-select-twincol-options-caption++# style names, respectively. The
+left box, which displays the unselected items, has
+[literal]#++v-select-twincol-options-caption++# style and the right box, which
+displays the selected items, has
+[literal]#++v-select-twincol-options-selections++# style. Between them is the
+button area, which has overall [literal]#++v-select-twincol-buttons++# style;
+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.
+
+
+
+
diff --git a/documentation/components/components-upload.asciidoc b/documentation/components/components-upload.asciidoc
new file mode 100644
index 0000000000..fa984e0db8
--- /dev/null
+++ b/documentation/components/components-upload.asciidoc
@@ -0,0 +1,172 @@
+---
+title: Upload
+order: 26
+layout: page
+---
+
+[[components.upload]]
+= [classname]#Upload#
+
+ifdef::web[]
+[.sampler]
+image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/other/upload]
+endif::web[]
+
+The [classname]#Upload# component allows a user to upload files to the server.
+It displays a file name entry box, a file selection button, and an upload submit
+button. The user can either write the filename in the text area or click the
+[guibutton]#Browse# button to select a file. After the file is selected, the
+user sends the file by clicking the upload submit button.
+
+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[]
+
+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
+[guibutton]#Browse# button. This is a security feature of web browsers. The
+language of the [guibutton]#Browse# button is determined by the browser, so if
+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");
+----
+
+You can also hide the upload button with [literal]#++.v-upload .v-button
+{display: none}++# in theme, have custom logic for starting the upload, and call
+[methodname]#startUpload()# to start it. If the upload component has
+[methodname]#setImmediate(true)# enabled, uploading starts immediately after
+choosing the file.
+
+[[components.upload.receiving]]
+== Receiving Upload Data
+
+The uploaded files are typically stored as files in a file system, in a
+database, or as temporary objects in memory. The upload component writes the
+received data to an [classname]#java.io.OutputStream# so you have plenty of
+freedom in how you can process the upload content.
+
+To use the [classname]#Upload# component, you need to implement the
+[classname]#Upload.Receiver# interface. The [methodname]#receiveUpload()# method
+of the receiver is called when the user clicks the submit button. The method
+must return an [classname]#OutputStream#. To do this, it typically creates a
+file or a memory buffer to which the stream is written. The method gets the file
+name and MIME type of the file, as reported by the browser.
+
+While uploading, the upload progress can be monitored with an
+[interfacename]#Upload.ProgressListener#. The [methodname]#updateProgress()#
+method gets the number of read bytes and the content length as parameters. The
+content length is reported by the browser, but the reported value is not
+reliable, and can also be unknown, in which case the value is -1. It is
+therefore recommended to follow the upload progress and check the allowed size
+in a progress listener. Upload can be terminated by calling
+[methodname]#interruptUpload()# on the upload component. You may want to use a
+[classname]#ProgressBar# to visualize the progress, and in indeterminate mode if
+the content length is not known.
+
+When an upload is finished, successfully or unsuccessfully, the
+[classname]#Upload# component will emit the [classname]#Upload.FinishedEvent#
+event, which you can handle with an [classname]#Upload.FinishedListener# added
+to the upload component. The event object will include the file name, MIME type,
+and final length of the file. More specific [classname]#Upload.FailedEvent# and
+[classname]#Upload.SucceededEvent# events will be called in the cases where the
+upload failed or succeeded, respectively.
+
+The following example uploads images to [filename]#/tmp/uploads# directory in
+(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
+final Embedded image = new Embedded("Uploaded Image");
+image.setVisible(false);
+
+// Implement both receiver that saves upload in a file and
+// listener for successful upload
+class ImageUploader implements Receiver, SucceededListener {
+    public File file;
+    
+    public OutputStream receiveUpload(String filename,
+                                      String mimeType) {
+        // Create upload stream
+        FileOutputStream fos = null; // Stream to write to
+        try {
+            // Open the file for writing.
+            file = new File("/tmp/uploads/" + filename);
+            fos = new FileOutputStream(file);
+        } catch (final java.io.FileNotFoundException e) {
+            new Notification("Could not open file<br/>",
+                             e.getMessage(),
+                             Notification.Type.ERROR_MESSAGE)
+                .show(Page.getCurrent());
+            return null;
+        }
+        return fos; // Return the output stream to write to
+    }
+
+    public void uploadSucceeded(SucceededEvent event) {
+        // Show the uploaded file in the image viewer
+        image.setVisible(true);
+        image.setSource(new FileResource(file));
+    }
+};
+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();
+panelContent.addComponents(upload, image);
+panel.setContent(panelContent);
+----
+See the http://demo.vaadin.com/book-examples-vaadin7/book#component.upload.basic[on-line example, window="_blank"].
+
+Note that the example does not check the type of the uploaded files in any way,
+which will cause an error if the content is anything else but an image. The
+program also assumes that the MIME type of the file is resolved correctly based
+on the file name extension. After uploading an image, the component will look as
+shown in <<figure.ui.upload.example>>.
+
+[[figure.ui.upload.example]]
+.Image Upload Example
+image::img/upload-example.png[]
+
+
+[[components.upload.css]]
+== CSS Style Rules
+
+
+[source, css]
+----
+.v-upload { }
+  .gwt-FileUpload { }
+  .v-button { }
+    .v-button-wrap { }
+      .v-button-caption { }
+----
+
+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.
+
+
+
+
diff --git a/documentation/components/img/button-example1.png b/documentation/components/img/button-example1.png
new file mode 100644
index 0000000000..e17d315f61
--- /dev/null
+++ b/documentation/components/img/button-example1.png
diff --git a/documentation/components/img/calendar-monthly.png b/documentation/components/img/calendar-monthly.png
new file mode 100644
index 0000000000..1b9b1c5a33
--- /dev/null
+++ b/documentation/components/img/calendar-monthly.png
diff --git a/documentation/components/img/calendar-weekly.png b/documentation/components/img/calendar-weekly.png
new file mode 100644
index 0000000000..d3b60aa08a
--- /dev/null
+++ b/documentation/components/img/calendar-weekly.png
diff --git a/documentation/components/img/checkbox-example1.png b/documentation/components/img/checkbox-example1.png
new file mode 100644
index 0000000000..998af7141c
--- /dev/null
+++ b/documentation/components/img/checkbox-example1.png
diff --git a/documentation/components/img/combobox-basic.png b/documentation/components/img/combobox-basic.png
new file mode 100644
index 0000000000..fbde2e28b2
--- /dev/null
+++ b/documentation/components/img/combobox-basic.png
diff --git a/documentation/components/img/combobox-filtering.png b/documentation/components/img/combobox-filtering.png
new file mode 100644
index 0000000000..cb57cce053
--- /dev/null
+++ b/documentation/components/img/combobox-filtering.png
diff --git a/documentation/components/img/component-abstractions-hi.png b/documentation/components/img/component-abstractions-hi.png
new file mode 100644
index 0000000000..1967cd17f6
--- /dev/null
+++ b/documentation/components/img/component-abstractions-hi.png
diff --git a/documentation/components/img/component-abstractions-lo.png b/documentation/components/img/component-abstractions-lo.png
new file mode 100644
index 0000000000..5f1987f97e
--- /dev/null
+++ b/documentation/components/img/component-abstractions-lo.png
diff --git a/documentation/components/img/component-diagram-hi.png b/documentation/components/img/component-diagram-hi.png
new file mode 100644
index 0000000000..534d3dcdd8
--- /dev/null
+++ b/documentation/components/img/component-diagram-hi.png
diff --git a/documentation/components/img/component-diagram-lo.png b/documentation/components/img/component-diagram-lo.png
new file mode 100644
index 0000000000..dff74ec62d
--- /dev/null
+++ b/documentation/components/img/component-diagram-lo.png
diff --git a/documentation/components/img/customcomponent-example1.png b/documentation/components/img/customcomponent-example1.png
new file mode 100644
index 0000000000..e02459bdf7
--- /dev/null
+++ b/documentation/components/img/customcomponent-example1.png
diff --git a/documentation/components/img/datefield-example1.png b/documentation/components/img/datefield-example1.png
new file mode 100644
index 0000000000..4141ae0185
--- /dev/null
+++ b/documentation/components/img/datefield-example1.png
diff --git a/documentation/components/img/datefield-formatting.png b/documentation/components/img/datefield-formatting.png
new file mode 100644
index 0000000000..570df9d6ea
--- /dev/null
+++ b/documentation/components/img/datefield-formatting.png
diff --git a/documentation/components/img/datefield-inlinedatefield.png b/documentation/components/img/datefield-inlinedatefield.png
new file mode 100644
index 0000000000..b87b119eed
--- /dev/null
+++ b/documentation/components/img/datefield-inlinedatefield.png
diff --git a/documentation/components/img/features-caption-layoutmanaged.png b/documentation/components/img/features-caption-layoutmanaged.png
new file mode 100644
index 0000000000..eb5f4e3467
--- /dev/null
+++ b/documentation/components/img/features-caption-layoutmanaged.png
diff --git a/documentation/components/img/features-enabled-simple.png b/documentation/components/img/features-enabled-simple.png
new file mode 100644
index 0000000000..9c2ac79796
--- /dev/null
+++ b/documentation/components/img/features-enabled-simple.png
diff --git a/documentation/components/img/features-icon.png b/documentation/components/img/features-icon.png
new file mode 100644
index 0000000000..22298b6271
--- /dev/null
+++ b/documentation/components/img/features-icon.png
diff --git a/documentation/components/img/features-locale-selection.png b/documentation/components/img/features-locale-selection.png
new file mode 100644
index 0000000000..c791aa2cd8
--- /dev/null
+++ b/documentation/components/img/features-locale-selection.png
diff --git a/documentation/components/img/features-locale-simple.png b/documentation/components/img/features-locale-simple.png
new file mode 100644
index 0000000000..8be3df72e1
--- /dev/null
+++ b/documentation/components/img/features-locale-simple.png
diff --git a/documentation/components/img/features-readonly-simple.png b/documentation/components/img/features-readonly-simple.png
new file mode 100644
index 0000000000..e79a3c065b
--- /dev/null
+++ b/documentation/components/img/features-readonly-simple.png
diff --git a/documentation/components/img/features-stylename-simple.png b/documentation/components/img/features-stylename-simple.png
new file mode 100644
index 0000000000..921732f0ee
--- /dev/null
+++ b/documentation/components/img/features-stylename-simple.png
diff --git a/documentation/components/img/features-visible-simple.png b/documentation/components/img/features-visible-simple.png
new file mode 100644
index 0000000000..bb4efaf261
--- /dev/null
+++ b/documentation/components/img/features-visible-simple.png
diff --git a/documentation/components/img/field-diagram-hi.png b/documentation/components/img/field-diagram-hi.png
new file mode 100644
index 0000000000..d4da08dfa2
--- /dev/null
+++ b/documentation/components/img/field-diagram-hi.png
diff --git a/documentation/components/img/field-diagram-lo.png b/documentation/components/img/field-diagram-lo.png
new file mode 100644
index 0000000000..540167b707
--- /dev/null
+++ b/documentation/components/img/field-diagram-lo.png
diff --git a/documentation/components/img/field-interface-hi.png b/documentation/components/img/field-interface-hi.png
new file mode 100644
index 0000000000..1b6579b846
--- /dev/null
+++ b/documentation/components/img/field-interface-hi.png
diff --git a/documentation/components/img/field-interface-lo.png b/documentation/components/img/field-interface-lo.png
new file mode 100644
index 0000000000..906dab7769
--- /dev/null
+++ b/documentation/components/img/field-interface-lo.png
diff --git a/documentation/components/img/grid-editor-basic.png b/documentation/components/img/grid-editor-basic.png
new file mode 100644
index 0000000000..205832dc9a
--- /dev/null
+++ b/documentation/components/img/grid-editor-basic.png
diff --git a/documentation/components/img/grid-editor-errors.png b/documentation/components/img/grid-editor-errors.png
new file mode 100644
index 0000000000..9f94903648
--- /dev/null
+++ b/documentation/components/img/grid-editor-errors.png
diff --git a/documentation/components/img/grid-features.png b/documentation/components/img/grid-features.png
new file mode 100644
index 0000000000..3ba9456352
--- /dev/null
+++ b/documentation/components/img/grid-features.png
diff --git a/documentation/components/img/grid-filtering.png b/documentation/components/img/grid-filtering.png
new file mode 100644
index 0000000000..921414135f
--- /dev/null
+++ b/documentation/components/img/grid-filtering.png
diff --git a/documentation/components/img/grid-renderers.png b/documentation/components/img/grid-renderers.png
new file mode 100644
index 0000000000..9eb8157fa7
--- /dev/null
+++ b/documentation/components/img/grid-renderers.png
diff --git a/documentation/components/img/grid-selection-multi.png b/documentation/components/img/grid-selection-multi.png
new file mode 100644
index 0000000000..59fbfe9a6b
--- /dev/null
+++ b/documentation/components/img/grid-selection-multi.png
diff --git a/documentation/components/img/grid-sorting.png b/documentation/components/img/grid-sorting.png
new file mode 100644
index 0000000000..b5846a74a1
--- /dev/null
+++ b/documentation/components/img/grid-sorting.png
diff --git a/documentation/components/img/label-example1.png b/documentation/components/img/label-example1.png
new file mode 100644
index 0000000000..1c3493af63
--- /dev/null
+++ b/documentation/components/img/label-example1.png
diff --git a/documentation/components/img/label-modes.png b/documentation/components/img/label-modes.png
new file mode 100644
index 0000000000..ada3955ee0
--- /dev/null
+++ b/documentation/components/img/label-modes.png
diff --git a/documentation/components/img/label-withimage.png b/documentation/components/img/label-withimage.png
new file mode 100644
index 0000000000..fecd9ef2ee
--- /dev/null
+++ b/documentation/components/img/label-withimage.png
diff --git a/documentation/components/img/link-new.png b/documentation/components/img/link-new.png
new file mode 100644
index 0000000000..04c4d37d02
--- /dev/null
+++ b/documentation/components/img/link-new.png
diff --git a/documentation/components/img/link.png b/documentation/components/img/link.png
new file mode 100644
index 0000000000..a903b60f3b
--- /dev/null
+++ b/documentation/components/img/link.png
diff --git a/documentation/components/img/listselect-basic.png b/documentation/components/img/listselect-basic.png
new file mode 100644
index 0000000000..375fbd48c9
--- /dev/null
+++ b/documentation/components/img/listselect-basic.png
diff --git a/documentation/components/img/menubar-example1.png b/documentation/components/img/menubar-example1.png
new file mode 100644
index 0000000000..939bbb27c1
--- /dev/null
+++ b/documentation/components/img/menubar-example1.png
diff --git a/documentation/components/img/nativeselect-basic.png b/documentation/components/img/nativeselect-basic.png
new file mode 100644
index 0000000000..0a1a55927c
--- /dev/null
+++ b/documentation/components/img/nativeselect-basic.png
diff --git a/documentation/components/img/optiongroup-basic.png b/documentation/components/img/optiongroup-basic.png
new file mode 100644
index 0000000000..946f4c484e
--- /dev/null
+++ b/documentation/components/img/optiongroup-basic.png
diff --git a/documentation/components/img/optiongroup-disabling.png b/documentation/components/img/optiongroup-disabling.png
new file mode 100644
index 0000000000..0660032339
--- /dev/null
+++ b/documentation/components/img/optiongroup-disabling.png
diff --git a/documentation/components/img/optiongroup-horizontal.png b/documentation/components/img/optiongroup-horizontal.png
new file mode 100644
index 0000000000..09d6e9d658
--- /dev/null
+++ b/documentation/components/img/optiongroup-horizontal.png
diff --git a/documentation/components/img/passwordfield-basic.png b/documentation/components/img/passwordfield-basic.png
new file mode 100644
index 0000000000..7b1c4d32d9
--- /dev/null
+++ b/documentation/components/img/passwordfield-basic.png
diff --git a/documentation/components/img/progressbar-basic.png b/documentation/components/img/progressbar-basic.png
new file mode 100644
index 0000000000..4db5657eda
--- /dev/null
+++ b/documentation/components/img/progressbar-basic.png
diff --git a/documentation/components/img/progressbar-indeterminate.png b/documentation/components/img/progressbar-indeterminate.png
new file mode 100644
index 0000000000..dd1bff5d98
--- /dev/null
+++ b/documentation/components/img/progressbar-indeterminate.png
diff --git a/documentation/components/img/progressbar-thread.png b/documentation/components/img/progressbar-thread.png
new file mode 100644
index 0000000000..00bb619505
--- /dev/null
+++ b/documentation/components/img/progressbar-thread.png
diff --git a/documentation/components/img/richtextarea-example1.png b/documentation/components/img/richtextarea-example1.png
new file mode 100644
index 0000000000..1f2b80ac8a
--- /dev/null
+++ b/documentation/components/img/richtextarea-example1.png
diff --git a/documentation/components/img/richtextarea-toolbar-mod-whitebg.png b/documentation/components/img/richtextarea-toolbar-mod-whitebg.png
new file mode 100644
index 0000000000..6a89e49143
--- /dev/null
+++ b/documentation/components/img/richtextarea-toolbar-mod-whitebg.png
diff --git a/documentation/components/img/richtextarea-toolbar-whitebg.png b/documentation/components/img/richtextarea-toolbar-whitebg.png
new file mode 100644
index 0000000000..571875a053
--- /dev/null
+++ b/documentation/components/img/richtextarea-toolbar-whitebg.png
diff --git a/documentation/components/img/select-selected1.png b/documentation/components/img/select-selected1.png
new file mode 100644
index 0000000000..c10e7855c9
--- /dev/null
+++ b/documentation/components/img/select-selected1.png
diff --git a/documentation/components/img/slider-example1-hi.png b/documentation/components/img/slider-example1-hi.png
new file mode 100644
index 0000000000..2c4694f826
--- /dev/null
+++ b/documentation/components/img/slider-example1-hi.png
diff --git a/documentation/components/img/slider-example1-lo.png b/documentation/components/img/slider-example1-lo.png
new file mode 100644
index 0000000000..efdf876994
--- /dev/null
+++ b/documentation/components/img/slider-example1-lo.png
diff --git a/documentation/components/img/slider-orig.png b/documentation/components/img/slider-orig.png
new file mode 100644
index 0000000000..2b135ce290
--- /dev/null
+++ b/documentation/components/img/slider-orig.png
diff --git a/documentation/components/img/table-cellstylegenerator1.png b/documentation/components/img/table-cellstylegenerator1.png
new file mode 100644
index 0000000000..a23bc6d38a
--- /dev/null
+++ b/documentation/components/img/table-cellstylegenerator1.png
diff --git a/documentation/components/img/table-column-collapsing.png b/documentation/components/img/table-column-collapsing.png
new file mode 100644
index 0000000000..5142fe0b93
--- /dev/null
+++ b/documentation/components/img/table-column-collapsing.png
diff --git a/documentation/components/img/table-column-resize.png b/documentation/components/img/table-column-resize.png
new file mode 100644
index 0000000000..86af196ae8
--- /dev/null
+++ b/documentation/components/img/table-column-resize.png
diff --git a/documentation/components/img/table-columnformatting.png b/documentation/components/img/table-columnformatting.png
new file mode 100644
index 0000000000..3367e49fb1
--- /dev/null
+++ b/documentation/components/img/table-columnformatting.png
diff --git a/documentation/components/img/table-components.png b/documentation/components/img/table-components.png
new file mode 100644
index 0000000000..e0071f9ddc
--- /dev/null
+++ b/documentation/components/img/table-components.png
diff --git a/documentation/components/img/table-editable3.png b/documentation/components/img/table-editable3.png
new file mode 100644
index 0000000000..610699e491
--- /dev/null
+++ b/documentation/components/img/table-editable3.png
diff --git a/documentation/components/img/table-example1.png b/documentation/components/img/table-example1.png
new file mode 100644
index 0000000000..3d091cfacb
--- /dev/null
+++ b/documentation/components/img/table-example1.png
diff --git a/documentation/components/img/table-example2.png b/documentation/components/img/table-example2.png
new file mode 100644
index 0000000000..f6830ff67c
--- /dev/null
+++ b/documentation/components/img/table-example2.png
diff --git a/documentation/components/img/table-footer.png b/documentation/components/img/table-footer.png
new file mode 100644
index 0000000000..fdc2c09674
--- /dev/null
+++ b/documentation/components/img/table-footer.png
diff --git a/documentation/components/img/table-generatedcolumns1.png b/documentation/components/img/table-generatedcolumns1.png
new file mode 100644
index 0000000000..11e7931624
--- /dev/null
+++ b/documentation/components/img/table-generatedcolumns1.png
diff --git a/documentation/components/img/table-generatedcolumns2.png b/documentation/components/img/table-generatedcolumns2.png
new file mode 100644
index 0000000000..0e0b42e665
--- /dev/null
+++ b/documentation/components/img/table-generatedcolumns2.png
diff --git a/documentation/components/img/textarea-basic.png b/documentation/components/img/textarea-basic.png
new file mode 100644
index 0000000000..2bd8e79d4b
--- /dev/null
+++ b/documentation/components/img/textarea-basic.png
diff --git a/documentation/components/img/textarea-wordwrap.png b/documentation/components/img/textarea-wordwrap.png
new file mode 100644
index 0000000000..c1515a7a64
--- /dev/null
+++ b/documentation/components/img/textarea-wordwrap.png
diff --git a/documentation/components/img/textfield-css.png b/documentation/components/img/textfield-css.png
new file mode 100644
index 0000000000..820fdeb19b
--- /dev/null
+++ b/documentation/components/img/textfield-css.png
diff --git a/documentation/components/img/textfield-diagram-hi.png b/documentation/components/img/textfield-diagram-hi.png
new file mode 100644
index 0000000000..f7f160e212
--- /dev/null
+++ b/documentation/components/img/textfield-diagram-hi.png
diff --git a/documentation/components/img/textfield-diagram-lo.png b/documentation/components/img/textfield-diagram-lo.png
new file mode 100644
index 0000000000..61f5dc03e7
--- /dev/null
+++ b/documentation/components/img/textfield-diagram-lo.png
diff --git a/documentation/components/img/textfield-example.png b/documentation/components/img/textfield-example.png
new file mode 100644
index 0000000000..e6fa2bfcc2
--- /dev/null
+++ b/documentation/components/img/textfield-example.png
diff --git a/documentation/components/img/textfield-nullrepresentation.png b/documentation/components/img/textfield-nullrepresentation.png
new file mode 100644
index 0000000000..426e57001b
--- /dev/null
+++ b/documentation/components/img/textfield-nullrepresentation.png
diff --git a/documentation/components/img/textfield-textchangeevents.png b/documentation/components/img/textfield-textchangeevents.png
new file mode 100644
index 0000000000..32003cf327
--- /dev/null
+++ b/documentation/components/img/textfield-textchangeevents.png
diff --git a/documentation/components/img/tooltip-plain-withpointer-hi.png b/documentation/components/img/tooltip-plain-withpointer-hi.png
new file mode 100644
index 0000000000..9ee3981e0b
--- /dev/null
+++ b/documentation/components/img/tooltip-plain-withpointer-hi.png
diff --git a/documentation/components/img/tooltip-plain-withpointer-lo.png b/documentation/components/img/tooltip-plain-withpointer-lo.png
new file mode 100644
index 0000000000..f9f4bbdd54
--- /dev/null
+++ b/documentation/components/img/tooltip-plain-withpointer-lo.png
diff --git a/documentation/components/img/tooltip-plain.png b/documentation/components/img/tooltip-plain.png
new file mode 100644
index 0000000000..601eb49e88
--- /dev/null
+++ b/documentation/components/img/tooltip-plain.png
diff --git a/documentation/components/img/tooltip-richtext-withpointer-hi.png b/documentation/components/img/tooltip-richtext-withpointer-hi.png
new file mode 100644
index 0000000000..d327a5fed8
--- /dev/null
+++ b/documentation/components/img/tooltip-richtext-withpointer-hi.png
diff --git a/documentation/components/img/tooltip-richtext-withpointer-lo.png b/documentation/components/img/tooltip-richtext-withpointer-lo.png
new file mode 100644
index 0000000000..f8893aa39b
--- /dev/null
+++ b/documentation/components/img/tooltip-richtext-withpointer-lo.png
diff --git a/documentation/components/img/tooltip-richtext.png b/documentation/components/img/tooltip-richtext.png
new file mode 100644
index 0000000000..de184fa20e
--- /dev/null
+++ b/documentation/components/img/tooltip-richtext.png
diff --git a/documentation/components/img/tree-example1.png b/documentation/components/img/tree-example1.png
new file mode 100644
index 0000000000..33a1b34291
--- /dev/null
+++ b/documentation/components/img/tree-example1.png
diff --git a/documentation/components/img/treetable-basic.png b/documentation/components/img/treetable-basic.png
new file mode 100644
index 0000000000..36caa81fcb
--- /dev/null
+++ b/documentation/components/img/treetable-basic.png
diff --git a/documentation/components/img/twincolselect-basic.png b/documentation/components/img/twincolselect-basic.png
new file mode 100644
index 0000000000..e3618b273a
--- /dev/null
+++ b/documentation/components/img/twincolselect-basic.png
diff --git a/documentation/components/img/upload-example.png b/documentation/components/img/upload-example.png
new file mode 100644
index 0000000000..756246986d
--- /dev/null
+++ b/documentation/components/img/upload-example.png
diff --git a/documentation/components/img/upload.png b/documentation/components/img/upload.png
new file mode 100644
index 0000000000..b64c9990fc
--- /dev/null
+++ b/documentation/components/img/upload.png
diff --git a/documentation/components/original-drawings/component-abstractions.svg b/documentation/components/original-drawings/component-abstractions.svg
new file mode 100644
index 0000000000..041bfd4596
--- /dev/null
+++ b/documentation/components/original-drawings/component-abstractions.svg
@@ -0,0 +1,1226 @@
+<?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="744.09448"

+   height="1052.3622"

+   id="svg2475"

+   sodipodi:version="0.32"

+   inkscape:version="0.46"

+   sodipodi:docname="component-abstractions.svg"

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

+   inkscape:export-filename="/home/magi/itmill/doc/cheatsheet/vaadin-cheatsheet.png"

+   inkscape:export-xdpi="300.01001"

+   inkscape:export-ydpi="300.01001"

+   version="1.0">

+  <sodipodi:namedview

+     id="base"

+     pagecolor="#ffffff"

+     bordercolor="#666666"

+     borderopacity="1.0"

+     gridtolerance="10000"

+     guidetolerance="10"

+     objecttolerance="10"

+     inkscape:pageopacity="0.0"

+     inkscape:pageshadow="2"

+     inkscape:zoom="2.4"

+     inkscape:cx="234.91691"

+     inkscape:cy="504.24301"

+     inkscape:document-units="mm"

+     inkscape:current-layer="layer1"

+     showgrid="true"

+     inkscape:window-width="1680"

+     inkscape:window-height="1026"

+     inkscape:window-x="1280"

+     inkscape:window-y="0"

+     inkscape:snap-nodes="true"

+     inkscape:snap-bbox="true"

+     units="mm"

+     inkscape:snap-global="true">

+    <inkscape:grid

+       spacingy="1mm"

+       spacingx="1mm"

+       empspacing="5"

+       units="mm"

+       enabled="true"

+       visible="true"

+       id="grid4674"

+       type="xygrid"

+       dotted="false" />

+  </sodipodi:namedview>

+  <defs

+     id="defs2477">

+    <marker

+       inkscape:stockid="Arrow1Lstart"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="Arrow1Lstart"

+       style="overflow:visible">

+      <path

+         id="path5210"

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

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

+         transform="matrix(0.8,0,0,0.8,10,0)" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="DotS"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="DotS">

+      <path

+         transform="matrix(0.2,0,0,0.2,1.48,0.2)"

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

+         d="M -2.5,-1 C -2.5,1.76 -4.74,4 -7.5,4 C -10.26,4 -12.5,1.76 -12.5,-1 C -12.5,-3.76 -10.26,-6 -7.5,-6 C -4.74,-6 -2.5,-3.76 -2.5,-1 z"

+         id="path3636" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutS"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutS"

+       style="overflow:visible">

+      <path

+         id="path3717"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <inkscape:path-effect

+       copytype="single_stretched"

+       pattern="M 349.202,225.086 L 405.895,331.386 L 370.462,338.472 "

+       prop_scale="1"

+       id="path-effect2503"

+       effect="skeletal" />

+    <inkscape:path-effect

+       prop_scale="1"

+       id="path-effect2499"

+       effect="skeletal" />

+    <inkscape:path-effect

+       pattern-nodetypes="cc"

+       pattern="M 432.28346,272.83462 L 403.93701,216.14171"

+       prop_scale="1"

+       id="path-effect2497"

+       effect="skeletal" />

+    <marker

+       style="overflow:visible"

+       id="Arrow1Send"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="Arrow1Send">

+      <path

+         transform="matrix(-0.2,0,0,-0.2,-1.2,0)"

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

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

+         id="path3641" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="Arrow1Lend"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="Arrow1Lend">

+      <path

+         transform="matrix(-0.8,0,0,-0.8,-10,0)"

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

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

+         id="path3629" />

+    </marker>

+    <inkscape:perspective

+       sodipodi:type="inkscape:persp3d"

+       inkscape:vp_x="0 : 526.18109 : 1"

+       inkscape:vp_y="0 : 1000 : 0"

+       inkscape:vp_z="744.09448 : 526.18109 : 1"

+       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"

+       id="perspective3487" />

+    <marker

+       style="overflow:visible"

+       id="Arrow2Sendp"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="Arrow2Sendp">

+      <path

+         transform="matrix(-0.3,0,0,-0.3,0.69,0)"

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

+         style="font-size:12px;fill:#f39300;fill-rule:evenodd;stroke:#f39300;stroke-width:0.625;stroke-linejoin:round"

+         id="path28139" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="TriangleOutSK"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="TriangleOutSK">

+      <path

+         transform="scale(0.2,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

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

+         id="path36611" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="TriangleOutSH"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="TriangleOutSH">

+      <path

+         transform="scale(0.2,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

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

+         id="path36614" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="TriangleOutSA"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="TriangleOutSA">

+      <path

+         transform="scale(0.2,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

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

+         id="path36617" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="TriangleOutSKF"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="TriangleOutSKF">

+      <path

+         transform="scale(0.2,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

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

+         id="path36620" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="TriangleOutS9"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="TriangleOutS9">

+      <path

+         transform="scale(0.2,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

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

+         id="path36623" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="Arrow2SendpA"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="Arrow2SendpA">

+      <path

+         transform="matrix(-0.3,0,0,-0.3,0.69,0)"

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

+         style="font-size:12px;fill:#d9d9cd;fill-rule:evenodd;stroke:#d9d9cd;stroke-width:0.625;stroke-linejoin:round"

+         id="path3396" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="Arrow2Sendpg"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="Arrow2Sendpg">

+      <path

+         transform="matrix(-0.3,0,0,-0.3,0.69,0)"

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

+         style="font-size:12px;fill:#fcc988;fill-rule:evenodd;stroke:#fcc988;stroke-width:0.625;stroke-linejoin:round"

+         id="path3360" />

+    </marker>

+    <filter

+       id="filter2780"

+       inkscape:label="White Halo"

+       width="1.1"

+       height="1.1">

+      <feMorphology

+         id="feMorphology2782"

+         operator="dilate"

+         radius="3"

+         result="result0" />

+      <feFlood

+         id="feFlood2786"

+         flood-color="rgb(255,255,255)"

+         flood-opacity="1"

+         in="result0"

+         result="result3" />

+      <feComposite

+         id="feComposite2623"

+         in="result3"

+         in2="result0"

+         operator="in"

+         result="result4" />

+      <feMerge

+         id="feMerge2629">

+        <feMergeNode

+           inkscape:collect="always"

+           id="feMergeNode2631"

+           in="result4" />

+        <feMergeNode

+           inkscape:collect="always"

+           id="feMergeNode2633"

+           in="SourceGraphic" />

+      </feMerge>

+    </filter>

+    <marker

+       inkscape:stockid="TriangleOutSn"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSn"

+       style="overflow:visible">

+      <path

+         id="path4441"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutS9F"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutS9F"

+       style="overflow:visible">

+      <path

+         id="path4444"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSI"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSI"

+       style="overflow:visible">

+      <path

+         id="path4447"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSO"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSO"

+       style="overflow:visible">

+      <path

+         id="path4450"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSW"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSW"

+       style="overflow:visible">

+      <path

+         id="path4453"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSB"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSB"

+       style="overflow:visible">

+      <path

+         id="path4456"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSZ"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSZ"

+       style="overflow:visible">

+      <path

+         id="path4459"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="DotSq"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="DotSq">

+      <path

+         transform="matrix(0.2,0,0,0.2,1.48,0.2)"

+         style="fill:#d9d9cd;fill-rule:evenodd;stroke:#d9d9cd;stroke-width:1pt;marker-start:none;marker-end:none"

+         d="M -2.5,-1 C -2.5,1.76 -4.74,4 -7.5,4 C -10.26,4 -12.5,1.76 -12.5,-1 C -12.5,-3.76 -10.26,-6 -7.5,-6 C -4.74,-6 -2.5,-3.76 -2.5,-1 z"

+         id="path5853" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSBO"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSBO"

+       style="overflow:visible">

+      <path

+         id="path7501"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="DotSu"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="DotSu">

+      <path

+         transform="matrix(0.2,0,0,0.2,1.48,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none;marker-end:none"

+         d="M -2.5,-1 C -2.5,1.76 -4.74,4 -7.5,4 C -10.26,4 -12.5,1.76 -12.5,-1 C -12.5,-3.76 -10.26,-6 -7.5,-6 C -4.74,-6 -2.5,-3.76 -2.5,-1 z"

+         id="path9463" />

+    </marker>

+    <filter

+       height="1.1"

+       width="1.1"

+       inkscape:label="Black Halo"

+       id="filter10694">

+      <feMorphology

+         result="result0"

+         radius="3"

+         operator="dilate"

+         id="feMorphology10696" />

+      <feFlood

+         result="result3"

+         in="result0"

+         flood-opacity="1"

+         flood-color="rgb(0,0,0)"

+         id="feFlood10698" />

+      <feComposite

+         result="result4"

+         operator="in"

+         in2="result0"

+         in="result3"

+         id="feComposite10700" />

+      <feMerge

+         id="feMerge10702">

+        <feMergeNode

+           in="result4"

+           id="feMergeNode10704"

+           inkscape:collect="always" />

+        <feMergeNode

+           in="SourceGraphic"

+           id="feMergeNode10706"

+           inkscape:collect="always" />

+      </feMerge>

+    </filter>

+    <marker

+       inkscape:stockid="TriangleOutSu"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSu"

+       style="overflow:visible">

+      <path

+         id="path8127"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSI8"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSI8"

+       style="overflow:visible">

+      <path

+         id="path8130"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSr"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSr"

+       style="overflow:visible">

+      <path

+         id="path8133"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSM"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSM"

+       style="overflow:visible">

+      <path

+         id="path8136"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSb"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSb"

+       style="overflow:visible">

+      <path

+         id="path8139"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       id="marker18095"

+       orient="auto"

+       markerHeight="5.7450776"

+       markerWidth="4.6297302">

+      <g

+         id="g11064"

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

+        <path

+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"

+           id="path11050"

+           d="M 370,508.65625 C 369.13933,508.715 368.39056,509.27755 368.09375,510.09375 C 367.82399,510.83551 368.03605,511.62868 368.53125,512.21875 L 366.78125,512.21875 C 366.73884,512.21408 366.69882,512.22093 366.65625,512.21875 L 366.65625,516.59375 L 366.78125,516.59375 L 368.53125,516.59375 C 367.85229,517.45345 367.83424,518.70924 368.625,519.5 C 369.47591,520.35091 370.89909,520.35091 371.75,519.5 L 375.09375,516.125 C 375.12672,516.09552 375.15802,516.06422 375.1875,516.03125 C 375.21972,516.01191 375.25101,515.99105 375.28125,515.96875 C 375.28162,515.96839 375.49976,515.68796 375.5,515.6875 C 375.50005,515.68741 375.49338,515.64282 375.5,515.625 C 375.5011,515.62203 375.53002,515.62832 375.53125,515.625 C 375.57039,515.57293 375.58228,515.57321 375.625,515.5 C 375.76199,515.26524 375.79184,515.12809 375.78125,515.15625 C 375.81807,515.06473 375.79977,515.04374 375.8125,515 C 375.82311,514.98978 375.83353,514.97936 375.84375,514.96875 C 375.90379,514.74477 375.93181,514.45186 375.90625,514.1875 C 375.89266,513.98387 375.84739,513.88985 375.84375,513.875 C 375.84389,513.86458 375.84389,513.85417 375.84375,513.84375 C 375.86975,513.94071 375.85901,513.85978 375.75,513.59375 C 375.69753,513.46336 375.66014,513.37439 375.625,513.3125 C 375.57262,513.22275 375.49154,513.05015 375.28125,512.84375 L 371.75,509.3125 C 371.29355,508.82579 370.66491,508.60087 370,508.65625 z"

+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1" />

+        <path

+           sodipodi:nodetypes="cccscccsssssssscccsccc"

+           id="path11035"

+           d="M 366.65625,515.40625 L 371.28125,515.40625 L 369.46875,517.21875 C 369.0718,517.6157 369.0718,518.2593 369.46875,518.65625 C 369.8657,519.0532 370.5093,519.0532 370.90625,518.65625 L 374.34375,515.1875 L 374.4375,515.125 C 374.44343,515.11918 374.43171,515.09972 374.4375,515.09375 C 374.49291,515.03659 374.5526,514.97676 374.59375,514.90625 C 374.62239,514.85717 374.63663,514.80216 374.65625,514.75 C 374.66861,514.71928 374.67831,514.68783 374.6875,514.65625 C 374.71862,514.54015 374.73024,514.43132 374.71875,514.3125 C 374.71489,514.25466 374.70138,514.21285 374.6875,514.15625 C 374.6766,514.1156 374.67237,514.07059 374.65625,514.03125 C 374.63982,513.99042 374.61578,513.94505 374.59375,513.90625 C 374.5483,513.82838 374.50015,513.74899 374.4375,513.6875 L 370.90625,510.15625 C 370.69734,509.93349 370.39809,509.8184 370.09375,509.84375 C 369.69897,509.8707 369.35398,510.12813 369.21875,510.5 C 369.08351,510.87187 369.18349,511.28826 369.46875,511.5625 L 371.34375,513.40625 L 366.65625,513.40625"

+           style="fill:#49c2f1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+      </g>

+    </marker>

+    <marker

+       id="marker44971"

+       orient="auto"

+       markerHeight="5.7450781"

+       markerWidth="4.6297355">

+      <g

+         id="g18059"

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

+        <path

+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"

+           id="path18061"

+           d="M 370,508.65625 C 369.13933,508.715 368.39056,509.27755 368.09375,510.09375 C 367.82399,510.83551 368.03605,511.62868 368.53125,512.21875 L 366.78125,512.21875 C 366.73884,512.21408 366.69882,512.22093 366.65625,512.21875 L 366.65625,516.59375 L 366.78125,516.59375 L 368.53125,516.59375 C 367.85229,517.45345 367.83424,518.70924 368.625,519.5 C 369.47591,520.35091 370.89909,520.35091 371.75,519.5 L 375.09375,516.125 C 375.12672,516.09552 375.15802,516.06422 375.1875,516.03125 C 375.21972,516.01191 375.25101,515.99105 375.28125,515.96875 C 375.28162,515.96839 375.49976,515.68796 375.5,515.6875 C 375.50005,515.68741 375.49338,515.64282 375.5,515.625 C 375.5011,515.62203 375.53002,515.62832 375.53125,515.625 C 375.57039,515.57293 375.58228,515.57321 375.625,515.5 C 375.76199,515.26524 375.79184,515.12809 375.78125,515.15625 C 375.81807,515.06473 375.79977,515.04374 375.8125,515 C 375.82311,514.98978 375.83353,514.97936 375.84375,514.96875 C 375.90379,514.74477 375.93181,514.45186 375.90625,514.1875 C 375.89266,513.98387 375.84739,513.88985 375.84375,513.875 C 375.84389,513.86458 375.84389,513.85417 375.84375,513.84375 C 375.86975,513.94071 375.85901,513.85978 375.75,513.59375 C 375.69753,513.46336 375.66014,513.37439 375.625,513.3125 C 375.57262,513.22275 375.49154,513.05015 375.28125,512.84375 L 371.75,509.3125 C 371.29355,508.82579 370.66491,508.60087 370,508.65625 z"

+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1" />

+        <path

+           sodipodi:nodetypes="cccscccsssssssscccsccc"

+           id="path18063"

+           d="M 366.65625,515.40625 L 371.28125,515.40625 L 369.46875,517.21875 C 369.0718,517.6157 369.0718,518.2593 369.46875,518.65625 C 369.8657,519.0532 370.5093,519.0532 370.90625,518.65625 L 374.34375,515.1875 L 374.4375,515.125 C 374.44343,515.11918 374.43171,515.09972 374.4375,515.09375 C 374.49291,515.03659 374.5526,514.97676 374.59375,514.90625 C 374.62239,514.85717 374.63663,514.80216 374.65625,514.75 C 374.66861,514.71928 374.67831,514.68783 374.6875,514.65625 C 374.71862,514.54015 374.73024,514.43132 374.71875,514.3125 C 374.71489,514.25466 374.70138,514.21285 374.6875,514.15625 C 374.6766,514.1156 374.67237,514.07059 374.65625,514.03125 C 374.63982,513.99042 374.61578,513.94505 374.59375,513.90625 C 374.5483,513.82838 374.50015,513.74899 374.4375,513.6875 L 370.90625,510.15625 C 370.69734,509.93349 370.39809,509.8184 370.09375,509.84375 C 369.69897,509.8707 369.35398,510.12813 369.21875,510.5 C 369.08351,510.87187 369.18349,511.28826 369.46875,511.5625 L 371.34375,513.40625 L 366.65625,513.40625"

+           style="fill:#d9d9cd;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+      </g>

+    </marker>

+    <marker

+       id="marker52016"

+       orient="auto"

+       markerHeight="5.7450786"

+       markerWidth="4.6297302">

+      <g

+         id="g52010"

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

+        <path

+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"

+           id="path52012"

+           d="M 370,508.65625 C 369.13933,508.715 368.39056,509.27755 368.09375,510.09375 C 367.82399,510.83551 368.03605,511.62868 368.53125,512.21875 L 366.78125,512.21875 C 366.73884,512.21408 366.69882,512.22093 366.65625,512.21875 L 366.65625,516.59375 L 366.78125,516.59375 L 368.53125,516.59375 C 367.85229,517.45345 367.83424,518.70924 368.625,519.5 C 369.47591,520.35091 370.89909,520.35091 371.75,519.5 L 375.09375,516.125 C 375.12672,516.09552 375.15802,516.06422 375.1875,516.03125 C 375.21972,516.01191 375.25101,515.99105 375.28125,515.96875 C 375.28162,515.96839 375.49976,515.68796 375.5,515.6875 C 375.50005,515.68741 375.49338,515.64282 375.5,515.625 C 375.5011,515.62203 375.53002,515.62832 375.53125,515.625 C 375.57039,515.57293 375.58228,515.57321 375.625,515.5 C 375.76199,515.26524 375.79184,515.12809 375.78125,515.15625 C 375.81807,515.06473 375.79977,515.04374 375.8125,515 C 375.82311,514.98978 375.83353,514.97936 375.84375,514.96875 C 375.90379,514.74477 375.93181,514.45186 375.90625,514.1875 C 375.89266,513.98387 375.84739,513.88985 375.84375,513.875 C 375.84389,513.86458 375.84389,513.85417 375.84375,513.84375 C 375.86975,513.94071 375.85901,513.85978 375.75,513.59375 C 375.69753,513.46336 375.66014,513.37439 375.625,513.3125 C 375.57262,513.22275 375.49154,513.05015 375.28125,512.84375 L 371.75,509.3125 C 371.29355,508.82579 370.66491,508.60087 370,508.65625 z"

+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1" />

+        <path

+           sodipodi:nodetypes="cccscccsssssssscccsccc"

+           id="path52014"

+           d="M 366.65625,515.40625 L 371.28125,515.40625 L 369.46875,517.21875 C 369.0718,517.6157 369.0718,518.2593 369.46875,518.65625 C 369.8657,519.0532 370.5093,519.0532 370.90625,518.65625 L 374.34375,515.1875 L 374.4375,515.125 C 374.44343,515.11918 374.43171,515.09972 374.4375,515.09375 C 374.49291,515.03659 374.5526,514.97676 374.59375,514.90625 C 374.62239,514.85717 374.63663,514.80216 374.65625,514.75 C 374.66861,514.71928 374.67831,514.68783 374.6875,514.65625 C 374.71862,514.54015 374.73024,514.43132 374.71875,514.3125 C 374.71489,514.25466 374.70138,514.21285 374.6875,514.15625 C 374.6766,514.1156 374.67237,514.07059 374.65625,514.03125 C 374.63982,513.99042 374.61578,513.94505 374.59375,513.90625 C 374.5483,513.82838 374.50015,513.74899 374.4375,513.6875 L 370.90625,510.15625 C 370.69734,509.93349 370.39809,509.8184 370.09375,509.84375 C 369.69897,509.8707 369.35398,510.12813 369.21875,510.5 C 369.08351,510.87187 369.18349,511.28826 369.46875,511.5625 L 371.34375,513.40625 L 366.65625,513.40625"

+           style="fill:#f39300;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+      </g>

+    </marker>

+    <marker

+       id="marker64887"

+       orient="auto"

+       markerHeight="5.745079"

+       markerWidth="4.6297255">

+      <g

+         id="g64855"

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

+        <path

+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"

+           id="path64857"

+           d="M 370,508.65625 C 369.13933,508.715 368.39056,509.27755 368.09375,510.09375 C 367.82399,510.83551 368.03605,511.62868 368.53125,512.21875 L 366.78125,512.21875 C 366.73884,512.21408 366.69882,512.22093 366.65625,512.21875 L 366.65625,516.59375 L 366.78125,516.59375 L 368.53125,516.59375 C 367.85229,517.45345 367.83424,518.70924 368.625,519.5 C 369.47591,520.35091 370.89909,520.35091 371.75,519.5 L 375.09375,516.125 C 375.12672,516.09552 375.15802,516.06422 375.1875,516.03125 C 375.21972,516.01191 375.25101,515.99105 375.28125,515.96875 C 375.28162,515.96839 375.49976,515.68796 375.5,515.6875 C 375.50005,515.68741 375.49338,515.64282 375.5,515.625 C 375.5011,515.62203 375.53002,515.62832 375.53125,515.625 C 375.57039,515.57293 375.58228,515.57321 375.625,515.5 C 375.76199,515.26524 375.79184,515.12809 375.78125,515.15625 C 375.81807,515.06473 375.79977,515.04374 375.8125,515 C 375.82311,514.98978 375.83353,514.97936 375.84375,514.96875 C 375.90379,514.74477 375.93181,514.45186 375.90625,514.1875 C 375.89266,513.98387 375.84739,513.88985 375.84375,513.875 C 375.84389,513.86458 375.84389,513.85417 375.84375,513.84375 C 375.86975,513.94071 375.85901,513.85978 375.75,513.59375 C 375.69753,513.46336 375.66014,513.37439 375.625,513.3125 C 375.57262,513.22275 375.49154,513.05015 375.28125,512.84375 L 371.75,509.3125 C 371.29355,508.82579 370.66491,508.60087 370,508.65625 z"

+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1" />

+        <path

+           sodipodi:nodetypes="cccscccsssssssscccsccc"

+           id="path64859"

+           d="M 366.65625,515.40625 L 371.28125,515.40625 L 369.46875,517.21875 C 369.0718,517.6157 369.0718,518.2593 369.46875,518.65625 C 369.8657,519.0532 370.5093,519.0532 370.90625,518.65625 L 374.34375,515.1875 L 374.4375,515.125 C 374.44343,515.11918 374.43171,515.09972 374.4375,515.09375 C 374.49291,515.03659 374.5526,514.97676 374.59375,514.90625 C 374.62239,514.85717 374.63663,514.80216 374.65625,514.75 C 374.66861,514.71928 374.67831,514.68783 374.6875,514.65625 C 374.71862,514.54015 374.73024,514.43132 374.71875,514.3125 C 374.71489,514.25466 374.70138,514.21285 374.6875,514.15625 C 374.6766,514.1156 374.67237,514.07059 374.65625,514.03125 C 374.63982,513.99042 374.61578,513.94505 374.59375,513.90625 C 374.5483,513.82838 374.50015,513.74899 374.4375,513.6875 L 370.90625,510.15625 C 370.69734,509.93349 370.39809,509.8184 370.09375,509.84375 C 369.69897,509.8707 369.35398,510.12813 369.21875,510.5 C 369.08351,510.87187 369.18349,511.28826 369.46875,511.5625 L 371.34375,513.40625 L 366.65625,513.40625"

+           style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+      </g>

+    </marker>

+    <marker

+       id="marker4057"

+       orient="auto"

+       markerHeight="5.745079"

+       markerWidth="4.6297302">

+      <g

+         id="g51986"

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

+        <path

+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"

+           id="path51988"

+           d="M 370,508.65625 C 369.13933,508.715 368.39056,509.27755 368.09375,510.09375 C 367.82399,510.83551 368.03605,511.62868 368.53125,512.21875 L 366.78125,512.21875 C 366.73884,512.21408 366.69882,512.22093 366.65625,512.21875 L 366.65625,516.59375 L 366.78125,516.59375 L 368.53125,516.59375 C 367.85229,517.45345 367.83424,518.70924 368.625,519.5 C 369.47591,520.35091 370.89909,520.35091 371.75,519.5 L 375.09375,516.125 C 375.12672,516.09552 375.15802,516.06422 375.1875,516.03125 C 375.21972,516.01191 375.25101,515.99105 375.28125,515.96875 C 375.28162,515.96839 375.49976,515.68796 375.5,515.6875 C 375.50005,515.68741 375.49338,515.64282 375.5,515.625 C 375.5011,515.62203 375.53002,515.62832 375.53125,515.625 C 375.57039,515.57293 375.58228,515.57321 375.625,515.5 C 375.76199,515.26524 375.79184,515.12809 375.78125,515.15625 C 375.81807,515.06473 375.79977,515.04374 375.8125,515 C 375.82311,514.98978 375.83353,514.97936 375.84375,514.96875 C 375.90379,514.74477 375.93181,514.45186 375.90625,514.1875 C 375.89266,513.98387 375.84739,513.88985 375.84375,513.875 C 375.84389,513.86458 375.84389,513.85417 375.84375,513.84375 C 375.86975,513.94071 375.85901,513.85978 375.75,513.59375 C 375.69753,513.46336 375.66014,513.37439 375.625,513.3125 C 375.57262,513.22275 375.49154,513.05015 375.28125,512.84375 L 371.75,509.3125 C 371.29355,508.82579 370.66491,508.60087 370,508.65625 z"

+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1" />

+        <path

+           sodipodi:nodetypes="cccscccsssssssscccsccc"

+           id="path51990"

+           d="M 366.65625,515.40625 L 371.28125,515.40625 L 369.46875,517.21875 C 369.0718,517.6157 369.0718,518.2593 369.46875,518.65625 C 369.8657,519.0532 370.5093,519.0532 370.90625,518.65625 L 374.34375,515.1875 L 374.4375,515.125 C 374.44343,515.11918 374.43171,515.09972 374.4375,515.09375 C 374.49291,515.03659 374.5526,514.97676 374.59375,514.90625 C 374.62239,514.85717 374.63663,514.80216 374.65625,514.75 C 374.66861,514.71928 374.67831,514.68783 374.6875,514.65625 C 374.71862,514.54015 374.73024,514.43132 374.71875,514.3125 C 374.71489,514.25466 374.70138,514.21285 374.6875,514.15625 C 374.6766,514.1156 374.67237,514.07059 374.65625,514.03125 C 374.63982,513.99042 374.61578,513.94505 374.59375,513.90625 C 374.5483,513.82838 374.50015,513.74899 374.4375,513.6875 L 370.90625,510.15625 C 370.69734,509.93349 370.39809,509.8184 370.09375,509.84375 C 369.69897,509.8707 369.35398,510.12813 369.21875,510.5 C 369.08351,510.87187 369.18349,511.28826 369.46875,511.5625 L 371.34375,513.40625 L 366.65625,513.40625"

+           style="fill:#49c2f1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+      </g>

+    </marker>

+    <marker

+       id="marker72805"

+       orient="auto"

+       markerHeight="4.5568175"

+       markerWidth="4.0334239">

+      <path

+         sodipodi:nodetypes="cccscccsssssssscccsccc"

+         id="path18057"

+         d="M -2.0167119,0.50456824 L 0.29578813,0.50456824 L -0.61046187,1.4108182 C -0.80893187,1.6092982 -0.80893187,1.9310982 -0.61046187,2.1295682 C -0.41198187,2.3280482 -0.090181874,2.3280482 0.10828813,2.1295682 L 1.8270381,0.39519824 L 1.8739181,0.36394824 C 1.8768781,0.36103824 1.8710181,0.35130824 1.8739181,0.34831824 C 1.9016181,0.31973824 1.9314681,0.28982824 1.9520381,0.25456824 C 1.9663581,0.23002824 1.9734781,0.20252824 1.9832881,0.17644824 C 1.9894681,0.16108824 1.9943181,0.14535824 1.9989181,0.12956824 C 2.0144781,0.07151824 2.0202881,0.01710824 2.0145381,-0.04230176 C 2.0126081,-0.07122176 2.0058581,-0.09213176 1.9989181,-0.12043176 C 1.9934681,-0.14075176 1.9913481,-0.16326176 1.9832881,-0.18293176 C 1.9750781,-0.20334176 1.9630581,-0.22603176 1.9520381,-0.24543176 C 1.9293181,-0.28436176 1.9052381,-0.32406176 1.8739181,-0.35480176 L 0.10828813,-2.1204318 C 0.003838126,-2.2318118 -0.14579187,-2.2893518 -0.29796187,-2.2766818 C -0.49535187,-2.2632018 -0.66784187,-2.1344918 -0.73546187,-1.9485518 C -0.80308187,-1.7626218 -0.75309187,-1.5544218 -0.61046187,-1.4173018 L 0.32703813,-0.49543176 L -2.0167119,-0.49543176"

+         style="fill:#f39300;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+    </marker>

+    <marker

+       id="marker72808"

+       orient="auto"

+       markerHeight="4.5568123"

+       markerWidth="4.0334177">

+      <path

+         sodipodi:nodetypes="cccscccsssssssscccsccc"

+         id="path72801"

+         d="M -2.016709,0.50457301 L 0.29579105,0.50457301 L -0.61045895,1.410823 C -0.80893895,1.609293 -0.80893895,1.931093 -0.61045895,2.129573 C -0.41198895,2.328043 -0.090188953,2.328043 0.10829105,2.129573 L 1.827041,0.39519301 L 1.873911,0.36394301 C 1.876881,0.36103301 1.871021,0.35130301 1.873911,0.34832301 C 1.901621,0.31974301 1.931461,0.28982301 1.952041,0.25457301 C 1.966361,0.23003301 1.973481,0.20252301 1.983291,0.17644301 C 1.989471,0.16108301 1.994321,0.14536301 1.998911,0.12957301 C 2.014471,0.071523013 2.020281,0.017103013 2.014541,-0.042306987 C 2.012611,-0.071226987 2.005851,-0.092126987 1.998911,-0.12042699 C 1.993461,-0.14075699 1.991351,-0.16325699 1.983291,-0.18292699 C 1.975071,-0.20334699 1.963051,-0.22602699 1.952041,-0.24542699 C 1.929311,-0.28436699 1.905241,-0.32405699 1.873911,-0.35480699 L 0.10829105,-2.120427 C 0.003831047,-2.231807 -0.14578895,-2.289357 -0.29795895,-2.276677 C -0.49534895,-2.263207 -0.66784895,-2.134487 -0.73545895,-1.948557 C -0.80307895,-1.762617 -0.75308895,-1.554427 -0.61045895,-1.417307 L 0.32704105,-0.49542699 L -2.016709,-0.49542699"

+         style="fill:#d9d9cd;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="DotSuN"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="DotSuN">

+      <path

+         transform="matrix(0.2,0,0,0.2,1.48,0.2)"

+         style="fill:#f39300;fill-rule:evenodd;stroke:#f39300;stroke-width:1pt;marker-start:none;marker-end:none"

+         d="M -2.5,-1 C -2.5,1.76 -4.74,4 -7.5,4 C -10.26,4 -12.5,1.76 -12.5,-1 C -12.5,-3.76 -10.26,-6 -7.5,-6 C -4.74,-6 -2.5,-3.76 -2.5,-1 z"

+         id="path81580" />

+    </marker>

+  </defs>

+  <metadata

+     id="metadata2480">

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

+     id="layer1"

+     inkscape:groupmode="layer"

+     inkscape:label="Layer 1">

+    <path

+       inkscape:connector-type="polyline"

+       id="path6652"

+       d="M 381.41871,676.33701 L 372.96626,661.4099"

+       style="fill:#ff8080;fill-opacity:1;fill-rule:evenodd;stroke:#f39300;stroke-width:2.83464575;stroke-linecap:butt;stroke-linejoin:miter;marker-start:none;marker-mid:none;marker-end:url(#marker52016);stroke-miterlimit:4;stroke-dasharray:2.83464575, 2.83464575;stroke-dashoffset:0;stroke-opacity:1;display:inline"

+       inkscape:connection-start="#g3796" />

+    <flowRoot

+       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+       id="flowRoot2485"

+       xml:space="preserve"><flowRegion

+         id="flowRegion2487"><rect

+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+           y="238.07646"

+           x="262.85715"

+           height="120"

+           width="184.28572"

+           id="rect2489" /></flowRegion><flowPara

+         id="flowPara2491" /></flowRoot>    <g

+       transform="translate(-3.5714286,23.214286)"

+       id="g3178" />

+    <g

+       id="g2547"

+       transform="translate(-95.25627,163.78482)">

+      <rect

+         ry="3.7880721"

+         y="233.06555"

+         x="166.12241"

+         height="35.433075"

+         width="85.039375"

+         id="rect2549"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot2551"

+         transform="translate(-5.2378947,106.19782)"><flowRegion

+           id="flowRegion2553"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use2555"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara2557">Sizeable</flowPara></flowRoot>    </g>

+    <path

+       inkscape:connection-end="#g2547"

+       inkscape:connector-type="polyline"

+       id="path3599"

+       d="M 184.43234,414.33305 L 155.90551,414.42695"

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

+       inkscape:connection-start="#g2492" />

+    <g

+       id="g2492"

+       transform="translate(21.259843,166.13857)">

+      <rect

+         ry="3.7880721"

+         y="230.31496"

+         x="163.1725"

+         height="35.433071"

+         width="99.032219"

+         id="rect4654"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot4664"

+         transform="translate(-2.7125132,103.67242)"><flowRegion

+           id="flowRegion4666"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use4668"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara4670">Component</flowPara></flowRoot>    </g>

+    <path

+       inkscape:connector-type="polyline"

+       id="path4676"

+       d="M 233.79563,471.55301 L 233.90127,431.8866"

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

+       inkscape:connection-start="#g2475"

+       inkscape:connection-end="#g2492" />

+    <g

+       id="g2475"

+       transform="translate(21.456693,262.49791)">

+      <rect

+         style="opacity:1;fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect4622"

+         width="141.11894"

+         height="35.433071"

+         x="141.73228"

+         y="209.0551"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:12px;font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:100%;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold Italic"

+         id="flowRoot4636"

+         transform="translate(-0.5922832,13.889135)"><flowRegion

+           id="flowRegion4638"><use

+             x="0"

+             y="0"

+             xlink:href="#rect4622"

+             id="use4640"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara4642">AbstractComponent</flowPara></flowRoot>    </g>

+    <g

+       id="g2834"

+       transform="translate(-80.706041,295.00072)">

+      <rect

+         ry="3.7880721"

+         y="225.8654"

+         x="151.57219"

+         height="35.433075"

+         width="131.10236"

+         id="rect2836"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <text

+         xml:space="preserve"

+         style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         x="217.32076"

+         y="248.13274"

+         id="text2846"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan2848"

+           x="217.32076"

+           y="248.13274">ComponentContainer</tspan></text>

+    </g>

+    <path

+       inkscape:connector-type="polyline"

+       id="path2850"

+       d="M 201.23647,574.01573 L 168.61468,556.2992"

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

+       inkscape:connection-start="#g2814"

+       inkscape:connection-end="#g2834" />

+    <path

+       inkscape:connector-type="polyline"

+       id="path2852"

+       d="M 233.83928,574.01573 L 233.76744,506.98608"

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

+       inkscape:connection-start="#g2814"

+       inkscape:connection-end="#g2475" />

+    <g

+       transform="translate(-10.317028,359.07199)"

+       id="g2814">

+      <rect

+         ry="3.7880721"

+         y="214.94374"

+         x="144.96269"

+         height="35.433071"

+         width="198.4252"

+         id="rect2816"

+         style="opacity:1;fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <text

+         xml:space="preserve"

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

+         x="244.1588"

+         y="236.17027"

+         id="text2830"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan2832"

+           x="244.1588"

+           y="236.17027">AbstractComponentContainer</tspan></text>

+    </g>

+    <path

+       inkscape:connector-type="polyline"

+       id="path2866"

+       d="M 348.38853,414.45941 L 283.46456,414.29526"

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

+       inkscape:connection-start="#g2854"

+       inkscape:connection-end="#g2492" />

+    <path

+       inkscape:connector-type="polyline"

+       id="path2882"

+       d="M 390.27242,396.85037 L 389.76378,382.67715"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#d9d9cd;stroke-width:2.83464575;stroke-linecap:butt;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:url(#marker44971);stroke-miterlimit:4;stroke-dasharray:2.83464575, 2.83464575;stroke-dashoffset:3.68503947;stroke-opacity:1;display:inline"

+       inkscape:connection-start="#g2854"

+       sodipodi:nodetypes="cc" />

+    <g

+       id="g5034"

+       transform="translate(67.015461,147.08619)">

+      <rect

+         ry="3.7880721"

+         y="235.59096"

+         x="182.48161"

+         height="17.716537"

+         width="62.31395"

+         id="rect5036"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.77165353;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:9px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot5038"

+         transform="translate(-0.8622551,101.2329)"><flowRegion

+           id="flowRegion5040"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use5042"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara5044">Focusable</flowPara></flowRoot>    </g>

+    <path

+       inkscape:connection-end="#g5034"

+       inkscape:connection-start="#g2854"

+       sodipodi:nodetypes="cc"

+       inkscape:connector-type="polyline"

+       id="path5050"

+       d="M 348.38853,405.68478 L 312.69685,398.22898"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#d9d9cd;stroke-width:2.83464575;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:url(#marker44971);stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline" />

+    <g

+       id="g2854"

+       transform="translate(182.26612,163.78482)">

+      <rect

+         ry="3.7880721"

+         y="233.06555"

+         x="166.12241"

+         height="35.433075"

+         width="85.039375"

+         id="rect2856"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot2858"

+         transform="translate(-6.2480473,106.19782)"><flowRegion

+           id="flowRegion2860"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use2862"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara2864">Field</flowPara></flowRoot>    </g>

+    <path

+       inkscape:connection-end="#g2854"

+       inkscape:connection-start="#g2802"

+       inkscape:connector-type="polyline"

+       id="path2868"

+       d="M 391.60532,471.25982 L 391.12606,432.28345"

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

+    <path

+       inkscape:connection-start="#g2802"

+       inkscape:connector-type="polyline"

+       id="path2639"

+       d="M 336.61418,489.2431 L 304.30792,489.2514"

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

+       inkscape:connection-end="#g2475" />

+    <g

+       transform="translate(164.18713,262.7098)"

+       id="g2802">

+      <rect

+         ry="3.7880721"

+         y="208.55002"

+         x="172.42705"

+         height="35.93816"

+         width="110.42418"

+         id="rect2804"

+         style="opacity:1;fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         transform="translate(14.774223,13.372598)"

+         id="flowRoot2806"

+         style="font-size:12px;font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:100%;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold Italic"

+         xml:space="preserve"><flowRegion

+           id="flowRegion2808"><use

+             height="1052.3622"

+             width="744.09448"

+             id="use2810"

+             xlink:href="#rect4622"

+             y="0"

+             x="0" /></flowRegion><flowPara

+           id="flowPara2812">AbstractField</flowPara></flowRoot>    </g>

+    <path

+       inkscape:connection-end="#g2802"

+       inkscape:connection-start="#g3796"

+       inkscape:connector-type="polyline"

+       id="path2641"

+       d="M 391.59581,676.33701 L 391.80413,507.19798"

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

+    <g

+       transform="translate(163.68204,467.71653)"

+       id="g3796">

+      <rect

+         ry="3.7880721"

+         y="208.62048"

+         x="172.93213"

+         height="35.867687"

+         width="109.9191"

+         id="rect3798"

+         style="opacity:1;fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         transform="translate(15.007639,14.331827)"

+         id="flowRoot3800"

+         style="font-size:12px;font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:100%;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold Italic"

+         xml:space="preserve"><flowRegion

+           id="flowRegion3802"><use

+             height="1052.3622"

+             width="744.09448"

+             id="use3804"

+             xlink:href="#rect4622"

+             y="0"

+             x="0" /></flowRegion><flowPara

+           id="flowPara3806">AbstractSelect</flowPara></flowRoot>    </g>

+    <g

+       id="g8538"

+       transform="translate(-13.288701,186.94839)">

+      <rect

+         ry="3.7880721"

+         y="235.59096"

+         x="182.48161"

+         height="17.716534"

+         width="49.6063"

+         id="rect8540"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.77165353;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:9px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot8542"

+         transform="translate(-7.1061187,101.2329)"><flowRegion

+           id="flowRegion8544"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use8546"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara8548">Event</flowPara></flowRoot>    </g>

+    <path

+       inkscape:connection-start="#g8550"

+       inkscape:connection-end="#g2814"

+       inkscape:connector-type="polyline"

+       id="path8562"

+       d="M 233.85827,623.62203 L 233.85827,609.4488"

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

+    <g

+       id="g8550"

+       transform="translate(21.259839,414.56693)">

+      <rect

+         style="opacity:1;fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect8552"

+         width="106.29921"

+         height="35.433067"

+         x="159.44882"

+         y="209.0551"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:12px;font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:100%;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold Italic"

+         id="flowRoot8554"

+         transform="translate(-0.2856121,13.205133)"><flowRegion

+           id="flowRegion8556"><use

+             x="0"

+             y="0"

+             xlink:href="#rect4622"

+             id="use8558"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara8560">AbstractLayout</flowPara></flowRoot>    </g>

+    <path

+       inkscape:connection-start="#g8564"

+       inkscape:connection-end="#g8550"

+       inkscape:connector-type="polyline"

+       id="path8580"

+       d="M 233.85827,676.77163 L 233.85827,659.0551"

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

+    <g

+       transform="translate(-10.016579,461.82789)"

+       id="g8564">

+      <rect

+         ry="3.7880721"

+         y="214.94374"

+         x="162.37878"

+         height="35.433071"

+         width="162.99213"

+         id="rect8566"

+         style="opacity:1;fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <text

+         xml:space="preserve"

+         style="font-size:12px;font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:100%;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold Italic"

+         x="243.28769"

+         y="236.54228"

+         id="text8568"

+         sodipodi:linespacing="100%"><tspan

+           sodipodi:role="line"

+           id="tspan8570"

+           x="243.28769"

+           y="236.54228">AbstractOrderedLayout</tspan></text>

+    </g>

+    <flowRoot

+       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"

+       id="flowRoot8724"

+       xml:space="preserve"><flowRegion

+         id="flowRegion8726"><rect

+           style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"

+           y="752.14441"

+           x="39.286312"

+           height="22.868153"

+           width="29.904507"

+           id="rect8728" /></flowRegion><flowPara

+         id="flowPara8730" /></flowRoot>    <text

+       xml:space="preserve"

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

+       x="361.58572"

+       y="654.78394"

+       id="text12159"

+       sodipodi:linespacing="125%"><tspan

+         sodipodi:role="line"

+         id="tspan12161"

+         x="361.58572"

+         y="654.78394">Container</tspan></text>

+    <g

+       transform="matrix(0.5,0,0,0.5,103.34299,0.7940752)"

+       id="g18053" />

+    <g

+       id="g80473"

+       transform="translate(-13.177371,204.30055)">

+      <rect

+         ry="3.7880721"

+         y="235.59096"

+         x="182.48161"

+         height="17.716534"

+         width="49.6063"

+         id="rect80475"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.77165353;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:9px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot80477"

+         transform="translate(-7.1061187,101.2329)"><flowRegion

+           id="flowRegion80479"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use80481"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara80483">Listener</flowPara></flowRoot>    </g>

+    <g

+       id="g84015"

+       transform="translate(-95.25627,390.55647)">

+      <rect

+         ry="3.7880721"

+         y="233.06555"

+         x="166.12241"

+         height="35.433075"

+         width="85.039375"

+         id="rect84017"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot84019"

+         transform="translate(-6.2480473,106.19782)"><flowRegion

+           id="flowRegion84021"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use84023"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara84025">Layout</flowPara></flowRoot>    </g>

+    <path

+       inkscape:connector-type="polyline"

+       id="path84027"

+       d="M 180.70866,641.33856 L 155.90551,641.33856"

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

+       inkscape:connection-start="#g8550"

+       inkscape:connection-end="#g84015" />

+    <path

+       inkscape:connector-type="polyline"

+       id="path84033"

+       d="M 113.41139,623.62202 L 113.38583,556.29919"

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

+       sodipodi:nodetypes="cc"

+       inkscape:connection-start="#g84015" />

+    <text

+       xml:space="preserve"

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

+       x="389.50186"

+       y="372.04721"

+       id="text3392"

+       sodipodi:linespacing="125%"><tspan

+         sodipodi:role="line"

+         id="tspan3394"

+         x="389.50186"

+         y="372.04721">Property</tspan></text>

+    <g

+       id="g4420"

+       transform="translate(25.216177,100.00529)">

+      <rect

+         ry="3.7880721"

+         y="233.06555"

+         x="166.12241"

+         height="35.433075"

+         width="85.039375"

+         id="rect4422"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot4424"

+         transform="translate(-5.2378947,106.19782)"><flowRegion

+           id="flowRegion4426"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use4428"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara4430">Paintable</flowPara></flowRoot>    </g>

+    <g

+       id="g4432"

+       transform="translate(-88.23199,99.080106)">

+      <rect

+         ry="3.7880721"

+         y="233.99074"

+         x="159.09813"

+         height="35.433071"

+         width="99.212601"

+         id="rect4434"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot4436"

+         transform="translate(-5.2378947,106.19782)"><flowRegion

+           id="flowRegion4438"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use4440"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara4442">VariableOwner</flowPara></flowRoot>    </g>

+    <path

+       inkscape:connector-type="polyline"

+       id="path4445"

+       d="M 233.92325,396.45353 L 233.88348,368.50392"

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

+       inkscape:connection-start="#g2492"

+       inkscape:connection-end="#g4420" />

+    <path

+       inkscape:connector-type="polyline"

+       id="path4448"

+       d="M 202.22998,396.45353 L 152.19091,368.50392"

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

+       inkscape:connection-start="#g2492"

+       inkscape:connection-end="#g4432" />

+  </g>

+</svg>

diff --git a/documentation/components/original-drawings/component-diagram.svg b/documentation/components/original-drawings/component-diagram.svg
new file mode 100644
index 0000000000..b6cca8813a
--- /dev/null
+++ b/documentation/components/original-drawings/component-diagram.svg
@@ -0,0 +1,2180 @@
+<?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="744.09448"

+   height="1052.3622"

+   id="svg2475"

+   sodipodi:version="0.32"

+   inkscape:version="0.46"

+   sodipodi:docname="component-diagram.svg"

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

+   inkscape:export-filename="/home/magi/itmill/doc/cheatsheet/vaadin-cheatsheet.png"

+   inkscape:export-xdpi="300.01001"

+   inkscape:export-ydpi="300.01001"

+   version="1.0">

+  <sodipodi:namedview

+     id="base"

+     pagecolor="#ffffff"

+     bordercolor="#666666"

+     borderopacity="1.0"

+     gridtolerance="10000"

+     guidetolerance="10"

+     objecttolerance="10"

+     inkscape:pageopacity="0.0"

+     inkscape:pageshadow="2"

+     inkscape:zoom="1.6970563"

+     inkscape:cx="424.16197"

+     inkscape:cy="468.86332"

+     inkscape:document-units="mm"

+     inkscape:current-layer="g2814"

+     showgrid="true"

+     inkscape:window-width="1680"

+     inkscape:window-height="1026"

+     inkscape:window-x="1280"

+     inkscape:window-y="0"

+     inkscape:snap-nodes="true"

+     inkscape:snap-bbox="true"

+     units="mm"

+     inkscape:snap-global="true">

+    <inkscape:grid

+       spacingy="1mm"

+       spacingx="1mm"

+       empspacing="5"

+       units="mm"

+       enabled="true"

+       visible="true"

+       id="grid4674"

+       type="xygrid"

+       dotted="false" />

+  </sodipodi:namedview>

+  <defs

+     id="defs2477">

+    <marker

+       inkscape:stockid="Arrow1Lstart"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="Arrow1Lstart"

+       style="overflow:visible">

+      <path

+         id="path5210"

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

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

+         transform="matrix(0.8,0,0,0.8,10,0)" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="DotS"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="DotS">

+      <path

+         transform="matrix(0.2,0,0,0.2,1.48,0.2)"

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

+         d="M -2.5,-1 C -2.5,1.76 -4.74,4 -7.5,4 C -10.26,4 -12.5,1.76 -12.5,-1 C -12.5,-3.76 -10.26,-6 -7.5,-6 C -4.74,-6 -2.5,-3.76 -2.5,-1 z"

+         id="path3636" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutS"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutS"

+       style="overflow:visible">

+      <path

+         id="path3717"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <inkscape:path-effect

+       copytype="single_stretched"

+       pattern="M 349.202,225.086 L 405.895,331.386 L 370.462,338.472 "

+       prop_scale="1"

+       id="path-effect2503"

+       effect="skeletal" />

+    <inkscape:path-effect

+       prop_scale="1"

+       id="path-effect2499"

+       effect="skeletal" />

+    <inkscape:path-effect

+       pattern-nodetypes="cc"

+       pattern="M 432.28346,272.83462 L 403.93701,216.14171"

+       prop_scale="1"

+       id="path-effect2497"

+       effect="skeletal" />

+    <marker

+       style="overflow:visible"

+       id="Arrow1Send"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="Arrow1Send">

+      <path

+         transform="matrix(-0.2,0,0,-0.2,-1.2,0)"

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

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

+         id="path3641" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="Arrow1Lend"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="Arrow1Lend">

+      <path

+         transform="matrix(-0.8,0,0,-0.8,-10,0)"

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

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

+         id="path3629" />

+    </marker>

+    <inkscape:perspective

+       sodipodi:type="inkscape:persp3d"

+       inkscape:vp_x="0 : 526.18109 : 1"

+       inkscape:vp_y="0 : 1000 : 0"

+       inkscape:vp_z="744.09448 : 526.18109 : 1"

+       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"

+       id="perspective3487" />

+    <marker

+       style="overflow:visible"

+       id="Arrow2Sendp"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="Arrow2Sendp">

+      <path

+         transform="matrix(-0.3,0,0,-0.3,0.69,0)"

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

+         style="font-size:12px;fill:#f39300;fill-rule:evenodd;stroke:#f39300;stroke-width:0.625;stroke-linejoin:round"

+         id="path28139" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="TriangleOutSK"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="TriangleOutSK">

+      <path

+         transform="scale(0.2,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

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

+         id="path36611" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="TriangleOutSH"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="TriangleOutSH">

+      <path

+         transform="scale(0.2,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

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

+         id="path36614" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="TriangleOutSA"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="TriangleOutSA">

+      <path

+         transform="scale(0.2,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

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

+         id="path36617" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="TriangleOutSKF"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="TriangleOutSKF">

+      <path

+         transform="scale(0.2,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

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

+         id="path36620" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="TriangleOutS9"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="TriangleOutS9">

+      <path

+         transform="scale(0.2,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

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

+         id="path36623" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="Arrow2SendpA"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="Arrow2SendpA">

+      <path

+         transform="matrix(-0.3,0,0,-0.3,0.69,0)"

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

+         style="font-size:12px;fill:#d9d9cd;fill-rule:evenodd;stroke:#d9d9cd;stroke-width:0.625;stroke-linejoin:round"

+         id="path3396" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="Arrow2Sendpg"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="Arrow2Sendpg">

+      <path

+         transform="matrix(-0.3,0,0,-0.3,0.69,0)"

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

+         style="font-size:12px;fill:#fcc988;fill-rule:evenodd;stroke:#fcc988;stroke-width:0.625;stroke-linejoin:round"

+         id="path3360" />

+    </marker>

+    <filter

+       id="filter2780"

+       inkscape:label="White Halo"

+       width="1.1"

+       height="1.1">

+      <feMorphology

+         id="feMorphology2782"

+         operator="dilate"

+         radius="3"

+         result="result0" />

+      <feFlood

+         id="feFlood2786"

+         flood-color="rgb(255,255,255)"

+         flood-opacity="1"

+         in="result0"

+         result="result3" />

+      <feComposite

+         id="feComposite2623"

+         in="result3"

+         in2="result0"

+         operator="in"

+         result="result4" />

+      <feMerge

+         id="feMerge2629">

+        <feMergeNode

+           inkscape:collect="always"

+           id="feMergeNode2631"

+           in="result4" />

+        <feMergeNode

+           inkscape:collect="always"

+           id="feMergeNode2633"

+           in="SourceGraphic" />

+      </feMerge>

+    </filter>

+    <marker

+       inkscape:stockid="TriangleOutSn"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSn"

+       style="overflow:visible">

+      <path

+         id="path4441"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutS9F"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutS9F"

+       style="overflow:visible">

+      <path

+         id="path4444"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSI"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSI"

+       style="overflow:visible">

+      <path

+         id="path4447"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSO"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSO"

+       style="overflow:visible">

+      <path

+         id="path4450"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSW"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSW"

+       style="overflow:visible">

+      <path

+         id="path4453"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSB"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSB"

+       style="overflow:visible">

+      <path

+         id="path4456"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSZ"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSZ"

+       style="overflow:visible">

+      <path

+         id="path4459"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="DotSq"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="DotSq">

+      <path

+         transform="matrix(0.2,0,0,0.2,1.48,0.2)"

+         style="fill:#d9d9cd;fill-rule:evenodd;stroke:#d9d9cd;stroke-width:1pt;marker-start:none;marker-end:none"

+         d="M -2.5,-1 C -2.5,1.76 -4.74,4 -7.5,4 C -10.26,4 -12.5,1.76 -12.5,-1 C -12.5,-3.76 -10.26,-6 -7.5,-6 C -4.74,-6 -2.5,-3.76 -2.5,-1 z"

+         id="path5853" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSBO"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSBO"

+       style="overflow:visible">

+      <path

+         id="path7501"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="DotSu"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="DotSu">

+      <path

+         transform="matrix(0.2,0,0,0.2,1.48,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none;marker-end:none"

+         d="M -2.5,-1 C -2.5,1.76 -4.74,4 -7.5,4 C -10.26,4 -12.5,1.76 -12.5,-1 C -12.5,-3.76 -10.26,-6 -7.5,-6 C -4.74,-6 -2.5,-3.76 -2.5,-1 z"

+         id="path9463" />

+    </marker>

+    <filter

+       height="1.1"

+       width="1.1"

+       inkscape:label="Black Halo"

+       id="filter10694">

+      <feMorphology

+         result="result0"

+         radius="3"

+         operator="dilate"

+         id="feMorphology10696" />

+      <feFlood

+         result="result3"

+         in="result0"

+         flood-opacity="1"

+         flood-color="rgb(0,0,0)"

+         id="feFlood10698" />

+      <feComposite

+         result="result4"

+         operator="in"

+         in2="result0"

+         in="result3"

+         id="feComposite10700" />

+      <feMerge

+         id="feMerge10702">

+        <feMergeNode

+           in="result4"

+           id="feMergeNode10704"

+           inkscape:collect="always" />

+        <feMergeNode

+           in="SourceGraphic"

+           id="feMergeNode10706"

+           inkscape:collect="always" />

+      </feMerge>

+    </filter>

+    <marker

+       inkscape:stockid="TriangleOutSu"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSu"

+       style="overflow:visible">

+      <path

+         id="path8127"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSI8"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSI8"

+       style="overflow:visible">

+      <path

+         id="path8130"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSr"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSr"

+       style="overflow:visible">

+      <path

+         id="path8133"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSM"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSM"

+       style="overflow:visible">

+      <path

+         id="path8136"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSb"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSb"

+       style="overflow:visible">

+      <path

+         id="path8139"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       id="marker18095"

+       orient="auto"

+       markerHeight="5.7450776"

+       markerWidth="4.6297302">

+      <g

+         id="g11064"

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

+        <path

+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"

+           id="path11050"

+           d="M 370,508.65625 C 369.13933,508.715 368.39056,509.27755 368.09375,510.09375 C 367.82399,510.83551 368.03605,511.62868 368.53125,512.21875 L 366.78125,512.21875 C 366.73884,512.21408 366.69882,512.22093 366.65625,512.21875 L 366.65625,516.59375 L 366.78125,516.59375 L 368.53125,516.59375 C 367.85229,517.45345 367.83424,518.70924 368.625,519.5 C 369.47591,520.35091 370.89909,520.35091 371.75,519.5 L 375.09375,516.125 C 375.12672,516.09552 375.15802,516.06422 375.1875,516.03125 C 375.21972,516.01191 375.25101,515.99105 375.28125,515.96875 C 375.28162,515.96839 375.49976,515.68796 375.5,515.6875 C 375.50005,515.68741 375.49338,515.64282 375.5,515.625 C 375.5011,515.62203 375.53002,515.62832 375.53125,515.625 C 375.57039,515.57293 375.58228,515.57321 375.625,515.5 C 375.76199,515.26524 375.79184,515.12809 375.78125,515.15625 C 375.81807,515.06473 375.79977,515.04374 375.8125,515 C 375.82311,514.98978 375.83353,514.97936 375.84375,514.96875 C 375.90379,514.74477 375.93181,514.45186 375.90625,514.1875 C 375.89266,513.98387 375.84739,513.88985 375.84375,513.875 C 375.84389,513.86458 375.84389,513.85417 375.84375,513.84375 C 375.86975,513.94071 375.85901,513.85978 375.75,513.59375 C 375.69753,513.46336 375.66014,513.37439 375.625,513.3125 C 375.57262,513.22275 375.49154,513.05015 375.28125,512.84375 L 371.75,509.3125 C 371.29355,508.82579 370.66491,508.60087 370,508.65625 z"

+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1" />

+        <path

+           sodipodi:nodetypes="cccscccsssssssscccsccc"

+           id="path11035"

+           d="M 366.65625,515.40625 L 371.28125,515.40625 L 369.46875,517.21875 C 369.0718,517.6157 369.0718,518.2593 369.46875,518.65625 C 369.8657,519.0532 370.5093,519.0532 370.90625,518.65625 L 374.34375,515.1875 L 374.4375,515.125 C 374.44343,515.11918 374.43171,515.09972 374.4375,515.09375 C 374.49291,515.03659 374.5526,514.97676 374.59375,514.90625 C 374.62239,514.85717 374.63663,514.80216 374.65625,514.75 C 374.66861,514.71928 374.67831,514.68783 374.6875,514.65625 C 374.71862,514.54015 374.73024,514.43132 374.71875,514.3125 C 374.71489,514.25466 374.70138,514.21285 374.6875,514.15625 C 374.6766,514.1156 374.67237,514.07059 374.65625,514.03125 C 374.63982,513.99042 374.61578,513.94505 374.59375,513.90625 C 374.5483,513.82838 374.50015,513.74899 374.4375,513.6875 L 370.90625,510.15625 C 370.69734,509.93349 370.39809,509.8184 370.09375,509.84375 C 369.69897,509.8707 369.35398,510.12813 369.21875,510.5 C 369.08351,510.87187 369.18349,511.28826 369.46875,511.5625 L 371.34375,513.40625 L 366.65625,513.40625"

+           style="fill:#49c2f1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+      </g>

+    </marker>

+    <marker

+       id="marker44971"

+       orient="auto"

+       markerHeight="5.7450781"

+       markerWidth="4.6297355">

+      <g

+         id="g18059"

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

+        <path

+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"

+           id="path18061"

+           d="M 370,508.65625 C 369.13933,508.715 368.39056,509.27755 368.09375,510.09375 C 367.82399,510.83551 368.03605,511.62868 368.53125,512.21875 L 366.78125,512.21875 C 366.73884,512.21408 366.69882,512.22093 366.65625,512.21875 L 366.65625,516.59375 L 366.78125,516.59375 L 368.53125,516.59375 C 367.85229,517.45345 367.83424,518.70924 368.625,519.5 C 369.47591,520.35091 370.89909,520.35091 371.75,519.5 L 375.09375,516.125 C 375.12672,516.09552 375.15802,516.06422 375.1875,516.03125 C 375.21972,516.01191 375.25101,515.99105 375.28125,515.96875 C 375.28162,515.96839 375.49976,515.68796 375.5,515.6875 C 375.50005,515.68741 375.49338,515.64282 375.5,515.625 C 375.5011,515.62203 375.53002,515.62832 375.53125,515.625 C 375.57039,515.57293 375.58228,515.57321 375.625,515.5 C 375.76199,515.26524 375.79184,515.12809 375.78125,515.15625 C 375.81807,515.06473 375.79977,515.04374 375.8125,515 C 375.82311,514.98978 375.83353,514.97936 375.84375,514.96875 C 375.90379,514.74477 375.93181,514.45186 375.90625,514.1875 C 375.89266,513.98387 375.84739,513.88985 375.84375,513.875 C 375.84389,513.86458 375.84389,513.85417 375.84375,513.84375 C 375.86975,513.94071 375.85901,513.85978 375.75,513.59375 C 375.69753,513.46336 375.66014,513.37439 375.625,513.3125 C 375.57262,513.22275 375.49154,513.05015 375.28125,512.84375 L 371.75,509.3125 C 371.29355,508.82579 370.66491,508.60087 370,508.65625 z"

+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1" />

+        <path

+           sodipodi:nodetypes="cccscccsssssssscccsccc"

+           id="path18063"

+           d="M 366.65625,515.40625 L 371.28125,515.40625 L 369.46875,517.21875 C 369.0718,517.6157 369.0718,518.2593 369.46875,518.65625 C 369.8657,519.0532 370.5093,519.0532 370.90625,518.65625 L 374.34375,515.1875 L 374.4375,515.125 C 374.44343,515.11918 374.43171,515.09972 374.4375,515.09375 C 374.49291,515.03659 374.5526,514.97676 374.59375,514.90625 C 374.62239,514.85717 374.63663,514.80216 374.65625,514.75 C 374.66861,514.71928 374.67831,514.68783 374.6875,514.65625 C 374.71862,514.54015 374.73024,514.43132 374.71875,514.3125 C 374.71489,514.25466 374.70138,514.21285 374.6875,514.15625 C 374.6766,514.1156 374.67237,514.07059 374.65625,514.03125 C 374.63982,513.99042 374.61578,513.94505 374.59375,513.90625 C 374.5483,513.82838 374.50015,513.74899 374.4375,513.6875 L 370.90625,510.15625 C 370.69734,509.93349 370.39809,509.8184 370.09375,509.84375 C 369.69897,509.8707 369.35398,510.12813 369.21875,510.5 C 369.08351,510.87187 369.18349,511.28826 369.46875,511.5625 L 371.34375,513.40625 L 366.65625,513.40625"

+           style="fill:#d9d9cd;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+      </g>

+    </marker>

+    <marker

+       id="marker52016"

+       orient="auto"

+       markerHeight="5.7450786"

+       markerWidth="4.6297302">

+      <g

+         id="g52010"

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

+        <path

+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"

+           id="path52012"

+           d="M 370,508.65625 C 369.13933,508.715 368.39056,509.27755 368.09375,510.09375 C 367.82399,510.83551 368.03605,511.62868 368.53125,512.21875 L 366.78125,512.21875 C 366.73884,512.21408 366.69882,512.22093 366.65625,512.21875 L 366.65625,516.59375 L 366.78125,516.59375 L 368.53125,516.59375 C 367.85229,517.45345 367.83424,518.70924 368.625,519.5 C 369.47591,520.35091 370.89909,520.35091 371.75,519.5 L 375.09375,516.125 C 375.12672,516.09552 375.15802,516.06422 375.1875,516.03125 C 375.21972,516.01191 375.25101,515.99105 375.28125,515.96875 C 375.28162,515.96839 375.49976,515.68796 375.5,515.6875 C 375.50005,515.68741 375.49338,515.64282 375.5,515.625 C 375.5011,515.62203 375.53002,515.62832 375.53125,515.625 C 375.57039,515.57293 375.58228,515.57321 375.625,515.5 C 375.76199,515.26524 375.79184,515.12809 375.78125,515.15625 C 375.81807,515.06473 375.79977,515.04374 375.8125,515 C 375.82311,514.98978 375.83353,514.97936 375.84375,514.96875 C 375.90379,514.74477 375.93181,514.45186 375.90625,514.1875 C 375.89266,513.98387 375.84739,513.88985 375.84375,513.875 C 375.84389,513.86458 375.84389,513.85417 375.84375,513.84375 C 375.86975,513.94071 375.85901,513.85978 375.75,513.59375 C 375.69753,513.46336 375.66014,513.37439 375.625,513.3125 C 375.57262,513.22275 375.49154,513.05015 375.28125,512.84375 L 371.75,509.3125 C 371.29355,508.82579 370.66491,508.60087 370,508.65625 z"

+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1" />

+        <path

+           sodipodi:nodetypes="cccscccsssssssscccsccc"

+           id="path52014"

+           d="M 366.65625,515.40625 L 371.28125,515.40625 L 369.46875,517.21875 C 369.0718,517.6157 369.0718,518.2593 369.46875,518.65625 C 369.8657,519.0532 370.5093,519.0532 370.90625,518.65625 L 374.34375,515.1875 L 374.4375,515.125 C 374.44343,515.11918 374.43171,515.09972 374.4375,515.09375 C 374.49291,515.03659 374.5526,514.97676 374.59375,514.90625 C 374.62239,514.85717 374.63663,514.80216 374.65625,514.75 C 374.66861,514.71928 374.67831,514.68783 374.6875,514.65625 C 374.71862,514.54015 374.73024,514.43132 374.71875,514.3125 C 374.71489,514.25466 374.70138,514.21285 374.6875,514.15625 C 374.6766,514.1156 374.67237,514.07059 374.65625,514.03125 C 374.63982,513.99042 374.61578,513.94505 374.59375,513.90625 C 374.5483,513.82838 374.50015,513.74899 374.4375,513.6875 L 370.90625,510.15625 C 370.69734,509.93349 370.39809,509.8184 370.09375,509.84375 C 369.69897,509.8707 369.35398,510.12813 369.21875,510.5 C 369.08351,510.87187 369.18349,511.28826 369.46875,511.5625 L 371.34375,513.40625 L 366.65625,513.40625"

+           style="fill:#f39300;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+      </g>

+    </marker>

+    <marker

+       id="marker64887"

+       orient="auto"

+       markerHeight="5.745079"

+       markerWidth="4.6297255">

+      <g

+         id="g64855"

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

+        <path

+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"

+           id="path64857"

+           d="M 370,508.65625 C 369.13933,508.715 368.39056,509.27755 368.09375,510.09375 C 367.82399,510.83551 368.03605,511.62868 368.53125,512.21875 L 366.78125,512.21875 C 366.73884,512.21408 366.69882,512.22093 366.65625,512.21875 L 366.65625,516.59375 L 366.78125,516.59375 L 368.53125,516.59375 C 367.85229,517.45345 367.83424,518.70924 368.625,519.5 C 369.47591,520.35091 370.89909,520.35091 371.75,519.5 L 375.09375,516.125 C 375.12672,516.09552 375.15802,516.06422 375.1875,516.03125 C 375.21972,516.01191 375.25101,515.99105 375.28125,515.96875 C 375.28162,515.96839 375.49976,515.68796 375.5,515.6875 C 375.50005,515.68741 375.49338,515.64282 375.5,515.625 C 375.5011,515.62203 375.53002,515.62832 375.53125,515.625 C 375.57039,515.57293 375.58228,515.57321 375.625,515.5 C 375.76199,515.26524 375.79184,515.12809 375.78125,515.15625 C 375.81807,515.06473 375.79977,515.04374 375.8125,515 C 375.82311,514.98978 375.83353,514.97936 375.84375,514.96875 C 375.90379,514.74477 375.93181,514.45186 375.90625,514.1875 C 375.89266,513.98387 375.84739,513.88985 375.84375,513.875 C 375.84389,513.86458 375.84389,513.85417 375.84375,513.84375 C 375.86975,513.94071 375.85901,513.85978 375.75,513.59375 C 375.69753,513.46336 375.66014,513.37439 375.625,513.3125 C 375.57262,513.22275 375.49154,513.05015 375.28125,512.84375 L 371.75,509.3125 C 371.29355,508.82579 370.66491,508.60087 370,508.65625 z"

+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1" />

+        <path

+           sodipodi:nodetypes="cccscccsssssssscccsccc"

+           id="path64859"

+           d="M 366.65625,515.40625 L 371.28125,515.40625 L 369.46875,517.21875 C 369.0718,517.6157 369.0718,518.2593 369.46875,518.65625 C 369.8657,519.0532 370.5093,519.0532 370.90625,518.65625 L 374.34375,515.1875 L 374.4375,515.125 C 374.44343,515.11918 374.43171,515.09972 374.4375,515.09375 C 374.49291,515.03659 374.5526,514.97676 374.59375,514.90625 C 374.62239,514.85717 374.63663,514.80216 374.65625,514.75 C 374.66861,514.71928 374.67831,514.68783 374.6875,514.65625 C 374.71862,514.54015 374.73024,514.43132 374.71875,514.3125 C 374.71489,514.25466 374.70138,514.21285 374.6875,514.15625 C 374.6766,514.1156 374.67237,514.07059 374.65625,514.03125 C 374.63982,513.99042 374.61578,513.94505 374.59375,513.90625 C 374.5483,513.82838 374.50015,513.74899 374.4375,513.6875 L 370.90625,510.15625 C 370.69734,509.93349 370.39809,509.8184 370.09375,509.84375 C 369.69897,509.8707 369.35398,510.12813 369.21875,510.5 C 369.08351,510.87187 369.18349,511.28826 369.46875,511.5625 L 371.34375,513.40625 L 366.65625,513.40625"

+           style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+      </g>

+    </marker>

+    <marker

+       id="marker4057"

+       orient="auto"

+       markerHeight="5.745079"

+       markerWidth="4.6297302">

+      <g

+         id="g51986"

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

+        <path

+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"

+           id="path51988"

+           d="M 370,508.65625 C 369.13933,508.715 368.39056,509.27755 368.09375,510.09375 C 367.82399,510.83551 368.03605,511.62868 368.53125,512.21875 L 366.78125,512.21875 C 366.73884,512.21408 366.69882,512.22093 366.65625,512.21875 L 366.65625,516.59375 L 366.78125,516.59375 L 368.53125,516.59375 C 367.85229,517.45345 367.83424,518.70924 368.625,519.5 C 369.47591,520.35091 370.89909,520.35091 371.75,519.5 L 375.09375,516.125 C 375.12672,516.09552 375.15802,516.06422 375.1875,516.03125 C 375.21972,516.01191 375.25101,515.99105 375.28125,515.96875 C 375.28162,515.96839 375.49976,515.68796 375.5,515.6875 C 375.50005,515.68741 375.49338,515.64282 375.5,515.625 C 375.5011,515.62203 375.53002,515.62832 375.53125,515.625 C 375.57039,515.57293 375.58228,515.57321 375.625,515.5 C 375.76199,515.26524 375.79184,515.12809 375.78125,515.15625 C 375.81807,515.06473 375.79977,515.04374 375.8125,515 C 375.82311,514.98978 375.83353,514.97936 375.84375,514.96875 C 375.90379,514.74477 375.93181,514.45186 375.90625,514.1875 C 375.89266,513.98387 375.84739,513.88985 375.84375,513.875 C 375.84389,513.86458 375.84389,513.85417 375.84375,513.84375 C 375.86975,513.94071 375.85901,513.85978 375.75,513.59375 C 375.69753,513.46336 375.66014,513.37439 375.625,513.3125 C 375.57262,513.22275 375.49154,513.05015 375.28125,512.84375 L 371.75,509.3125 C 371.29355,508.82579 370.66491,508.60087 370,508.65625 z"

+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1" />

+        <path

+           sodipodi:nodetypes="cccscccsssssssscccsccc"

+           id="path51990"

+           d="M 366.65625,515.40625 L 371.28125,515.40625 L 369.46875,517.21875 C 369.0718,517.6157 369.0718,518.2593 369.46875,518.65625 C 369.8657,519.0532 370.5093,519.0532 370.90625,518.65625 L 374.34375,515.1875 L 374.4375,515.125 C 374.44343,515.11918 374.43171,515.09972 374.4375,515.09375 C 374.49291,515.03659 374.5526,514.97676 374.59375,514.90625 C 374.62239,514.85717 374.63663,514.80216 374.65625,514.75 C 374.66861,514.71928 374.67831,514.68783 374.6875,514.65625 C 374.71862,514.54015 374.73024,514.43132 374.71875,514.3125 C 374.71489,514.25466 374.70138,514.21285 374.6875,514.15625 C 374.6766,514.1156 374.67237,514.07059 374.65625,514.03125 C 374.63982,513.99042 374.61578,513.94505 374.59375,513.90625 C 374.5483,513.82838 374.50015,513.74899 374.4375,513.6875 L 370.90625,510.15625 C 370.69734,509.93349 370.39809,509.8184 370.09375,509.84375 C 369.69897,509.8707 369.35398,510.12813 369.21875,510.5 C 369.08351,510.87187 369.18349,511.28826 369.46875,511.5625 L 371.34375,513.40625 L 366.65625,513.40625"

+           style="fill:#49c2f1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+      </g>

+    </marker>

+    <marker

+       id="marker72805"

+       orient="auto"

+       markerHeight="4.5568175"

+       markerWidth="4.0334239">

+      <path

+         sodipodi:nodetypes="cccscccsssssssscccsccc"

+         id="path18057"

+         d="M -2.0167119,0.50456824 L 0.29578813,0.50456824 L -0.61046187,1.4108182 C -0.80893187,1.6092982 -0.80893187,1.9310982 -0.61046187,2.1295682 C -0.41198187,2.3280482 -0.090181874,2.3280482 0.10828813,2.1295682 L 1.8270381,0.39519824 L 1.8739181,0.36394824 C 1.8768781,0.36103824 1.8710181,0.35130824 1.8739181,0.34831824 C 1.9016181,0.31973824 1.9314681,0.28982824 1.9520381,0.25456824 C 1.9663581,0.23002824 1.9734781,0.20252824 1.9832881,0.17644824 C 1.9894681,0.16108824 1.9943181,0.14535824 1.9989181,0.12956824 C 2.0144781,0.07151824 2.0202881,0.01710824 2.0145381,-0.04230176 C 2.0126081,-0.07122176 2.0058581,-0.09213176 1.9989181,-0.12043176 C 1.9934681,-0.14075176 1.9913481,-0.16326176 1.9832881,-0.18293176 C 1.9750781,-0.20334176 1.9630581,-0.22603176 1.9520381,-0.24543176 C 1.9293181,-0.28436176 1.9052381,-0.32406176 1.8739181,-0.35480176 L 0.10828813,-2.1204318 C 0.003838126,-2.2318118 -0.14579187,-2.2893518 -0.29796187,-2.2766818 C -0.49535187,-2.2632018 -0.66784187,-2.1344918 -0.73546187,-1.9485518 C -0.80308187,-1.7626218 -0.75309187,-1.5544218 -0.61046187,-1.4173018 L 0.32703813,-0.49543176 L -2.0167119,-0.49543176"

+         style="fill:#f39300;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+    </marker>

+    <marker

+       id="marker72808"

+       orient="auto"

+       markerHeight="4.5568123"

+       markerWidth="4.0334177">

+      <path

+         sodipodi:nodetypes="cccscccsssssssscccsccc"

+         id="path72801"

+         d="M -2.016709,0.50457301 L 0.29579105,0.50457301 L -0.61045895,1.410823 C -0.80893895,1.609293 -0.80893895,1.931093 -0.61045895,2.129573 C -0.41198895,2.328043 -0.090188953,2.328043 0.10829105,2.129573 L 1.827041,0.39519301 L 1.873911,0.36394301 C 1.876881,0.36103301 1.871021,0.35130301 1.873911,0.34832301 C 1.901621,0.31974301 1.931461,0.28982301 1.952041,0.25457301 C 1.966361,0.23003301 1.973481,0.20252301 1.983291,0.17644301 C 1.989471,0.16108301 1.994321,0.14536301 1.998911,0.12957301 C 2.014471,0.071523013 2.020281,0.017103013 2.014541,-0.042306987 C 2.012611,-0.071226987 2.005851,-0.092126987 1.998911,-0.12042699 C 1.993461,-0.14075699 1.991351,-0.16325699 1.983291,-0.18292699 C 1.975071,-0.20334699 1.963051,-0.22602699 1.952041,-0.24542699 C 1.929311,-0.28436699 1.905241,-0.32405699 1.873911,-0.35480699 L 0.10829105,-2.120427 C 0.003831047,-2.231807 -0.14578895,-2.289357 -0.29795895,-2.276677 C -0.49534895,-2.263207 -0.66784895,-2.134487 -0.73545895,-1.948557 C -0.80307895,-1.762617 -0.75308895,-1.554427 -0.61045895,-1.417307 L 0.32704105,-0.49542699 L -2.016709,-0.49542699"

+         style="fill:#d9d9cd;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="DotSuN"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="DotSuN">

+      <path

+         transform="matrix(0.2,0,0,0.2,1.48,0.2)"

+         style="fill:#f39300;fill-rule:evenodd;stroke:#f39300;stroke-width:1pt;marker-start:none;marker-end:none"

+         d="M -2.5,-1 C -2.5,1.76 -4.74,4 -7.5,4 C -10.26,4 -12.5,1.76 -12.5,-1 C -12.5,-3.76 -10.26,-6 -7.5,-6 C -4.74,-6 -2.5,-3.76 -2.5,-1 z"

+         id="path81580" />

+    </marker>

+  </defs>

+  <metadata

+     id="metadata2480">

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

+     id="layer1"

+     inkscape:groupmode="layer"

+     inkscape:label="Layer 1">

+    <g

+       id="g8676"

+       transform="translate(21.456674,439.66327)">

+      <rect

+         ry="3.7880721"

+         y="237.40155"

+         x="14.173247"

+         height="35.139881"

+         width="84.842522"

+         id="rect8678"

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         transform="translate(-3.5898053,12.655528)"

+         id="flowRoot8680"

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

+         xml:space="preserve"><flowRegion

+           id="flowRegion8682"><use

+             height="1052.3622"

+             width="744.09448"

+             id="use8684"

+             xlink:href="#rect28346"

+             y="0"

+             x="0" /></flowRegion><flowPara

+           id="flowPara8686">Panel</flowPara></flowRoot>    </g>

+    <flowRoot

+       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+       id="flowRoot2485"

+       xml:space="preserve"><flowRegion

+         id="flowRegion2487"><rect

+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+           y="238.07646"

+           x="262.85715"

+           height="120"

+           width="184.28572"

+           id="rect2489" /></flowRegion><flowPara

+         id="flowPara2491" /></flowRoot>    <g

+       transform="translate(-3.5714286,23.214286)"

+       id="g3178" />

+    <path

+       inkscape:connector-type="polyline"

+       id="path28387"

+       d="M 191.53543,563.67899 L 190.15217,563.81168"

+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />

+    <g

+       id="g2492"

+       transform="translate(21.259843,162.59526)">

+      <rect

+         ry="3.7880721"

+         y="230.31496"

+         x="163.1725"

+         height="35.433071"

+         width="99.032219"

+         id="rect4654"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot4664"

+         transform="translate(-2.7125132,103.67242)"><flowRegion

+           id="flowRegion4666"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use4668"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara4670">Component</flowPara></flowRoot>    </g>

+    <path

+       inkscape:connector-type="polyline"

+       id="path4676"

+       d="M 233.79351,471.55301 L 233.9034,428.34329"

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

+       inkscape:connection-start="#g2475"

+       inkscape:connection-end="#g2492" />

+    <g

+       id="g2475"

+       transform="translate(21.456693,262.49791)">

+      <rect

+         style="opacity:1;fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect4622"

+         width="141.11894"

+         height="35.433071"

+         x="141.73228"

+         y="209.0551"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:12px;font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:100%;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold Italic"

+         id="flowRoot4636"

+         transform="translate(-1.2813438,13.082604)"><flowRegion

+           id="flowRegion4638"><use

+             x="0"

+             y="0"

+             xlink:href="#rect4622"

+             id="use4640"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara4642">AbstractComponent</flowPara></flowRoot>    </g>

+    <path

+       inkscape:connection-start="#g28366"

+       inkscape:connector-type="polyline"

+       id="path28356"

+       d="M 113.58268,489.31784 L 163.18898,489.2979"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:3.89763784;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:url(#marker18095);stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       inkscape:connection-end="#g2475" />

+    <path

+       sodipodi:nodetypes="cc"

+       inkscape:connection-start="#g28410"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:3.89763784;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:url(#marker18095);stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 191.33858,556.29919 L 191.33858,506.69289"

+       id="path28422"

+       inkscape:connector-type="polyline"

+       inkscape:connection-end="#g2475" />

+    <g

+       transform="translate(14.370099,248.85827)"

+       id="g28403">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect4680"

+         width="77.952736"

+         height="35.433075"

+         x="21.259842"

+         y="179.88187"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot3307"

+         transform="translate(-0.1536719,27.14058)"><flowRegion

+           id="flowRegion3309"><use

+             x="0"

+             y="0"

+             xlink:href="#rect4680"

+             id="use3311"

+             width="744.09448"

+             height="1052.3622"

+             transform="translate(-8.3132958e-2,-13.857718)" /></flowRegion><flowPara

+           id="flowPara3313">Embedded</flowPara></flowRoot>    </g>

+    <g

+       transform="translate(14.370099,234.21542)"

+       id="g28366">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect28346"

+         width="77.952736"

+         height="35.433075"

+         x="21.259842"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot28358"

+         transform="translate(0,13.484772)"><flowRegion

+           id="flowRegion28360"><use

+             x="0"

+             y="0"

+             xlink:href="#rect28346"

+             id="use28362"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara28364">Link</flowPara></flowRoot>    </g>

+    <g

+       transform="translate(14.370099,276.37795)"

+       id="g28373">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect28375"

+         width="77.952736"

+         height="35.433075"

+         x="21.259842"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot28377"

+         transform="translate(0,13.484772)"><flowRegion

+           id="flowRegion28379"><use

+             x="0"

+             y="0"

+             xlink:href="#rect28346"

+             id="use28381"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara28383">Label</flowPara></flowRoot>    </g>

+    <g

+       transform="translate(21.456674,318.89764)"

+       id="g28389">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect28391"

+         width="77.952736"

+         height="35.433075"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot28393"

+         transform="translate(-7.3232607,13.484772)"><flowRegion

+           id="flowRegion28395"><use

+             x="0"

+             y="0"

+             xlink:href="#rect28346"

+             id="use28397"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara28399">MenuBar</flowPara></flowRoot>    </g>

+    <g

+       id="g28410"

+       transform="translate(128.79419,319.19082)">

+      <rect

+         ry="3.7880721"

+         y="237.40155"

+         x="14.173247"

+         height="35.433075"

+         width="77.952736"

+         id="rect28412"

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         transform="translate(-6.2438636,13.070151)"

+         id="flowRoot28414"

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

+         xml:space="preserve"><flowRegion

+           id="flowRegion28416"><use

+             height="1052.3622"

+             width="744.09448"

+             id="use28418"

+             xlink:href="#rect28346"

+             y="0"

+             x="0" /></flowRegion><flowPara

+           id="flowPara28420">Upload</flowPara></flowRoot>    </g>

+    <g

+       id="g2834"

+       transform="translate(-105.31234,394.21331)">

+      <rect

+         ry="3.7880721"

+         y="226.1586"

+         x="140.94226"

+         height="35.139877"

+         width="152.16536"

+         id="rect2836"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <text

+         xml:space="preserve"

+         style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         x="217.32076"

+         y="248.13274"

+         id="text2846"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan2848"

+           x="217.32076"

+           y="248.13274">ComponentContainer</tspan></text>

+    </g>

+    <path

+       inkscape:connector-type="polyline"

+       id="path2850"

+       d="M 193.98254,677.25322 L 146.07134,655.80498"

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

+       inkscape:connection-start="#g2814"

+       inkscape:connection-end="#g2834" />

+    <path

+       inkscape:connector-type="polyline"

+       id="path2852"

+       d="M 233.57424,677.25322 L 233.73203,506.98608"

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

+       inkscape:connection-start="#g2814"

+       inkscape:connection-end="#g2475" />

+    <g

+       transform="translate(-10.317025,462.30948)"

+       id="g2814">

+      <rect

+         ry="3.7880721"

+         y="214.94374"

+         x="144.96269"

+         height="35.43309"

+         width="201.96851"

+         id="rect2816"

+         style="opacity:1;fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <text

+         xml:space="preserve"

+         style="font-size:12px;font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold Italic"

+         x="244.37701"

+         y="236.20358"

+         id="text2830"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan2832"

+           x="244.37701"

+           y="236.20358">AbstractComponentContainer</tspan></text>

+    </g>

+    <path

+       inkscape:connector-type="polyline"

+       id="path2866"

+       d="M 389.76378,410.77475 L 283.46456,410.67378"

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

+       inkscape:connection-start="#g2854"

+       inkscape:connection-end="#g2492" />

+    <g

+       id="g2854"

+       transform="translate(223.64137,160.03305)">

+      <rect

+         ry="3.7880721"

+         y="233.06555"

+         x="166.12241"

+         height="35.433075"

+         width="85.039375"

+         id="rect2856"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot2858"

+         transform="translate(-6.2480473,106.19782)"><flowRegion

+           id="flowRegion2860"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use2862"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara2864">Field</flowPara></flowRoot>    </g>

+    <path

+       inkscape:connection-end="#g2854"

+       inkscape:connection-start="#g2802"

+       inkscape:connector-type="polyline"

+       id="path2868"

+       d="M 432.25441,471.55301 L 432.27499,428.53168"

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

+    <path

+       inkscape:connection-start="#g2802"

+       inkscape:connector-type="polyline"

+       id="path2639"

+       d="M 377.03373,489.45184 L 304.30792,489.35932"

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

+       inkscape:connection-end="#g2475" />

+    <g

+       transform="translate(204.60668,263.00299)"

+       id="g2802">

+      <rect

+         ry="3.7880721"

+         y="208.55002"

+         x="172.42705"

+         height="35.93816"

+         width="110.42418"

+         id="rect2804"

+         style="opacity:1;fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         transform="translate(17.153521,11.90988)"

+         id="flowRoot2806"

+         style="font-size:12px;font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:100%;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold Italic"

+         xml:space="preserve"><flowRegion

+           id="flowRegion2808"><use

+             height="1052.3622"

+             width="744.09448"

+             id="use2810"

+             xlink:href="#rect4622"

+             y="0"

+             x="0" /></flowRegion><flowPara

+           id="flowPara2812">AbstractField</flowPara></flowRoot>    </g>

+    <path

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

+       d="M 502.24448,489.52209 L 487.45791,489.52209"

+       id="path3832"

+       inkscape:connector-type="polyline"

+       inkscape:connection-end="#g2802"

+       inkscape:connection-start="#g3808" />

+    <g

+       transform="translate(488.07123,234.404)"

+       id="g3808">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect3810"

+         width="77.952736"

+         height="35.433075"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot3812"

+         transform="translate(-7.2728429,12.47462)"><flowRegion

+           id="flowRegion3814"><use

+             x="0"

+             y="0"

+             xlink:href="#rect28346"

+             id="use3816"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara3818">Button</flowPara></flowRoot>    </g>

+    <path

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

+       d="M 606.26013,489.28635 L 580.19721,489.38082"

+       id="path3834"

+       inkscape:connector-type="polyline"

+       inkscape:connection-start="#g3820"

+       inkscape:connection-end="#g3808" />

+    <g

+       transform="translate(592.08688,234.02699)"

+       id="g3820">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect3822"

+         width="77.952736"

+         height="35.433075"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot3824"

+         transform="translate(-5.7576143,12.222082)"><flowRegion

+           id="flowRegion3826"><use

+             x="0"

+             y="0"

+             xlink:href="#rect28346"

+             id="use3828"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara3830">CheckBox</flowPara></flowRoot>    </g>

+    <g

+       transform="translate(488.57632,283.75775)"

+       id="g3836">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect3838"

+         width="77.952736"

+         height="35.433075"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot3840"

+         transform="translate(-7.2728429,12.47462)"><flowRegion

+           id="flowRegion3842"><use

+             x="0"

+             y="0"

+             xlink:href="#rect28346"

+             id="use3844"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara3846">TextField</flowPara></flowRoot>    </g>

+    <path

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

+       d="M 606.05763,538.80562 L 580.7023,538.8333"

+       id="path3866"

+       inkscape:connector-type="polyline"

+       inkscape:connection-start="#g3848"

+       inkscape:connection-end="#g3836" />

+    <g

+       transform="translate(595.22522,296.06299)"

+       id="g3848">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect3850"

+         width="99.41507"

+         height="35.433071"

+         x="10.832414"

+         y="224.97185"

+         ry="3.7880721" />

+      <text

+         xml:space="preserve"

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

+         x="59.819889"

+         y="246.23169"

+         id="text3860"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan3862"

+           x="59.819889"

+           y="246.23169">RichTextArea</tspan></text>

+    </g>

+    <g

+       transform="translate(487.91913,333.28084)"

+       id="g3870">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect3872"

+         width="77.952736"

+         height="35.433075"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot3874"

+         transform="translate(-7.2728429,12.47462)"><flowRegion

+           id="flowRegion3876"><use

+             x="0"

+             y="0"

+             xlink:href="#rect28346"

+             id="use3878"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara3880">DateField</flowPara></flowRoot>    </g>

+    <path

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

+       d="M 605.90551,588.32848 L 580.04511,588.35658"

+       id="path3910"

+       inkscape:connector-type="polyline"

+       inkscape:connection-start="#g3894"

+       inkscape:connection-end="#g3870" />

+    <g

+       transform="translate(595.0731,345.58608)"

+       id="g3894">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect3896"

+         width="99.41507"

+         height="35.433071"

+         x="10.832414"

+         y="224.97185"

+         ry="3.7880721" />

+      <text

+         xml:space="preserve"

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

+         x="60.61198"

+         y="246.73676"

+         id="text3898"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan3900"

+           x="60.61198"

+           y="246.73676">InlineDateField</tspan></text>

+    </g>

+    <path

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

+       d="M 614.53048,620.07872 L 580.04511,605.20718"

+       id="path3912"

+       inkscape:connector-type="polyline"

+       inkscape:connection-start="#g3902"

+       inkscape:connection-end="#g3870" />

+    <g

+       transform="translate(595.0731,395.10687)"

+       id="g3902">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect3904"

+         width="99.41507"

+         height="35.433067"

+         x="10.832414"

+         y="224.97185"

+         ry="3.7880721" />

+      <text

+         xml:space="preserve"

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

+         x="60.561245"

+         y="246.98929"

+         id="text3906"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan3908"

+           x="60.561245"

+           y="246.98929">PopupDateField</tspan></text>

+    </g>

+    <path

+       inkscape:connection-end="#g2802"

+       inkscape:connection-start="#g3796"

+       inkscape:connector-type="polyline"

+       id="path2641"

+       d="M 432.01532,677.06481 L 432.22373,507.49117"

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

+    <g

+       transform="translate(204.1016,468.44433)"

+       id="g3796">

+      <rect

+         ry="3.7880721"

+         y="208.62048"

+         x="172.93213"

+         height="35.867687"

+         width="109.9191"

+         id="rect3798"

+         style="opacity:1;fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         transform="translate(15.70397,13.082604)"

+         id="flowRoot3800"

+         style="font-size:12px;font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:100%;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold Italic"

+         xml:space="preserve"><flowRegion

+           id="flowRegion3802"><use

+             height="1052.3622"

+             width="744.09448"

+             id="use3804"

+             xlink:href="#rect4622"

+             y="0"

+             x="0" /></flowRegion><flowPara

+           id="flowPara3806">AbstractSelect</flowPara></flowRoot>    </g>

+    <path

+       sodipodi:nodetypes="cc"

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

+       d="M 460.82677,602.65537 L 460.82677,506.98608"

+       id="path2679"

+       inkscape:connector-type="polyline" />

+    <g

+       transform="translate(487.94392,383.46348)"

+       id="g2667">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect2669"

+         width="77.952736"

+         height="35.433075"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot2671"

+         transform="translate(-7.2728429,12.47462)"><flowRegion

+           id="flowRegion2673"><use

+             x="0"

+             y="0"

+             xlink:href="#rect28346"

+             id="use2675"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara2677">Form</flowPara></flowRoot>    </g>

+    <g

+       transform="translate(329.52756,340.15748)"

+       id="g2655">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect2657"

+         width="77.952736"

+         height="35.433075"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot2659"

+         transform="translate(-7.2728429,12.47462)"><flowRegion

+           id="flowRegion2661"><use

+             x="0"

+             y="0"

+             xlink:href="#rect28346"

+             id="use2663"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara2665">Slider</flowPara></flowRoot>    </g>

+    <g

+       transform="translate(209.05513,248.0315)"

+       id="g2643">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect2645"

+         width="120.47243"

+         height="35.433071"

+         x="42.519691"

+         y="279.92123"

+         ry="3.7880721" />

+      <text

+         xml:space="preserve"

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

+         x="102.11802"

+         y="301.18109"

+         id="text2685"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan2687"

+           x="102.11802"

+           y="301.18109">ProgressIndicator</tspan></text>

+    </g>

+    <g

+       transform="translate(486.87623,485.72626)"

+       id="g6708">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect6710"

+         width="88.58268"

+         height="35.433067"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot6712"

+         transform="translate(-2.0143046,12.47462)"><flowRegion

+           id="flowRegion6714"><use

+             x="0"

+             y="0"

+             xlink:href="#rect28346"

+             id="use6716"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara6718">ListSelect</flowPara></flowRoot>    </g>

+    <g

+       transform="translate(486.87623,531.78925)"

+       id="g6732">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect6734"

+         width="88.58268"

+         height="35.433071"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot6736"

+         transform="translate(-1.9955771,12.47462)"><flowRegion

+           id="flowRegion6738"><use

+             x="0"

+             y="0"

+             xlink:href="#rect28346"

+             id="use6740"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara6742">NativeSelect</flowPara></flowRoot>    </g>

+    <g

+       transform="translate(486.87623,577.85224)"

+       id="g6744">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect6746"

+         width="88.58268"

+         height="35.433075"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <text

+         xml:space="preserve"

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

+         x="58.338272"

+         y="258.7847"

+         id="text6756"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan6758"

+           x="58.338272"

+           y="258.7847">TwinColSelect</tspan></text>

+    </g>

+    <g

+       transform="translate(486.87623,623.91523)"

+       id="g6760">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect6762"

+         width="88.58268"

+         height="35.433075"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <text

+         xml:space="preserve"

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

+         x="58.338272"

+         y="258.7847"

+         id="text6764"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan6766"

+           x="58.338272"

+           y="258.7847">OptionGroup</tspan></text>

+    </g>

+    <g

+       transform="translate(486.87623,669.97822)"

+       id="g6768">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect6770"

+         width="88.58268"

+         height="35.433075"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <text

+         xml:space="preserve"

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

+         x="58.338272"

+         y="258.7847"

+         id="text6772"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan6774"

+           x="58.338272"

+           y="258.7847">Table</tspan></text>

+    </g>

+    <g

+       transform="translate(486.87623,716.04121)"

+       id="g6776">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect6778"

+         width="88.58268"

+         height="35.433075"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <text

+         xml:space="preserve"

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

+         x="58.338272"

+         y="258.7847"

+         id="text6780"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan6782"

+           x="58.338272"

+           y="258.7847">Tree</tspan></text>

+    </g>

+    <path

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

+       d="M 501.04948,694.86626 L 486.95283,694.89329"

+       id="path6784"

+       inkscape:connector-type="polyline"

+       inkscape:connection-end="#g3796"

+       inkscape:connection-start="#g6696" />

+    <path

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

+       d="M 435.98823,971.20333 L 436.36735,712.9325"

+       id="path6792"

+       inkscape:connector-type="polyline" />

+    <g

+       transform="translate(486.87623,439.66326)"

+       id="g6696">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect6698"

+         width="88.58268"

+         height="35.433079"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot6700"

+         transform="translate(-1.8746946,12.47462)"><flowRegion

+           id="flowRegion6702"><use

+             x="0"

+             y="0"

+             xlink:href="#rect28346"

+             id="use6704"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara6706">Select</flowPara></flowRoot>    </g>

+    <path

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

+       d="M 605.90551,694.6091 L 589.63216,694.65538"

+       id="path7439"

+       inkscape:connector-type="polyline"

+       inkscape:connection-end="#g6696"

+       inkscape:connection-start="#g6720" />

+    <g

+       transform="translate(591.73226,439.37008)"

+       id="g6720">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect6722"

+         width="85.039375"

+         height="35.433067"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot6724"

+         transform="translate(-2.2828618,12.796385)"><flowRegion

+           id="flowRegion6726"><use

+             x="0"

+             y="0"

+             xlink:href="#rect28346"

+             id="use6728"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara6730">ComboBox</flowPara></flowRoot>    </g>

+    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 501.04948,971.1593 L 437.26995,971.1593"

+       id="path6796"

+       inkscape:connector-type="polyline"

+       inkscape:connection-start="#g6776" />

+    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 501.04948,925.09631 L 437.26995,925.09631"

+       id="path7429"

+       inkscape:connector-type="polyline"

+       inkscape:connection-start="#g6768" />

+    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 501.04948,879.03332 L 437.26995,879.03332"

+       id="path7431"

+       inkscape:connector-type="polyline"

+       inkscape:connection-start="#g6760" />

+    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 501.04948,832.97033 L 437.26995,832.97033"

+       id="path7433"

+       inkscape:connector-type="polyline"

+       inkscape:connection-start="#g6744" />

+    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 501.04948,786.90734 L 437.26995,786.90734"

+       id="path7435"

+       inkscape:connector-type="polyline"

+       inkscape:connection-start="#g6732" />

+    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 501.04948,740.84434 L 437.26995,740.84434"

+       id="path7437"

+       inkscape:connector-type="polyline"

+       inkscape:connection-start="#g6708" />

+    <path

+       inkscape:connection-start="#g8550"

+       inkscape:connection-end="#g2814"

+       inkscape:connector-type="polyline"

+       id="path8562"

+       d="M 234.05047,779.8548 L 235.30027,712.68631"

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

+    <g

+       id="g8550"

+       transform="translate(21.429068,570.7997)">

+      <rect

+         style="opacity:1;fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect8552"

+         width="141.11894"

+         height="35.433071"

+         x="141.73228"

+         y="209.0551"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:12px;font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:100%;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold Italic"

+         id="flowRoot8554"

+         transform="translate(-1.2813438,13.082604)"><flowRegion

+           id="flowRegion8556"><use

+             x="0"

+             y="0"

+             xlink:href="#rect4622"

+             id="use8558"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara8560">AbstractLayout</flowPara></flowRoot>    </g>

+    <path

+       inkscape:connection-start="#g8564"

+       inkscape:connection-end="#g8550"

+       inkscape:connector-type="polyline"

+       id="path8580"

+       d="M 233.99587,879.82072 L 233.78007,815.28787"

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

+    <g

+       transform="translate(-9.8197298,664.87698)"

+       id="g8564">

+      <rect

+         ry="3.7880721"

+         y="214.94374"

+         x="162.37878"

+         height="35.433071"

+         width="162.99213"

+         id="rect8566"

+         style="opacity:1;fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <text

+         xml:space="preserve"

+         style="font-size:12px;font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:100%;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold Italic"

+         x="244.37701"

+         y="236.20358"

+         id="text8568"

+         sodipodi:linespacing="100%"><tspan

+           sodipodi:role="line"

+           id="tspan8570"

+           x="244.37701"

+           y="236.20358">AbstractOrderedLayout</tspan></text>

+    </g>

+    <path

+       inkscape:connection-start="#g8572"

+       inkscape:connection-end="#g8550"

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

+       d="M 318.89763,797.36721 L 304.28029,797.40224"

+       id="path8582"

+       inkscape:connector-type="polyline" />

+    <g

+       transform="translate(311.81099,542.12599)"

+       id="g8572">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect8574"

+         width="102.75591"

+         height="35.433071"

+         x="7.0866356"

+         y="237.40155"

+         ry="3.7880721" />

+      <text

+         xml:space="preserve"

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

+         x="58.338272"

+         y="258.7847"

+         id="text8576"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan8578"

+           x="58.338272"

+           y="258.7847">AbsoluteLayout</tspan></text>

+    </g>

+    <path

+       sodipodi:nodetypes="cc"

+       inkscape:connection-start="#g8596"

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

+       d="M 135.18474,829.4611 L 173.81889,815.2538"

+       id="path8584"

+       inkscape:connector-type="polyline" />

+    <path

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4.00039387;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:url(#marker18095);stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 276.47008,829.53592 L 276.1769,815.17003"

+       id="path8594"

+       inkscape:connector-type="polyline" />

+    <path

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

+       d="M 195.84519,830.41547 L 195.84519,817.51548"

+       id="path8604"

+       inkscape:connector-type="polyline" />

+    <g

+       transform="translate(28.543273,592.05955)"

+       id="g8596">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect8598"

+         width="102.75591"

+         height="35.433071"

+         x="7.0866356"

+         y="237.40155"

+         ry="3.7880721" />

+      <text

+         xml:space="preserve"

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

+         x="58.338272"

+         y="258.7847"

+         id="text8600"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan8602"

+           x="58.338272"

+           y="258.7847">CustomLayout</tspan></text>

+    </g>

+    <g

+       transform="translate(127.55903,591.73228)"

+       id="g8606">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect8608"

+         width="74.409439"

+         height="35.433067"

+         x="21.259869"

+         y="237.40157"

+         ry="3.7880721" />

+      <text

+         xml:space="preserve"

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

+         x="58.338272"

+         y="258.7847"

+         id="text8610"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan8612"

+           x="58.338272"

+           y="258.7847">SplitPanel</tspan></text>

+    </g>

+    <g

+       transform="translate(240.94485,591.73229)"

+       id="g8586">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect8588"

+         width="102.75591"

+         height="35.433071"

+         x="7.0866356"

+         y="237.40155"

+         ry="3.7880721" />

+      <text

+         xml:space="preserve"

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

+         x="58.338272"

+         y="258.7847"

+         id="text8590"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan8592"

+           x="58.338272"

+           y="258.7847">GridLayout</tspan></text>

+    </g>

+    <path

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

+       d="M 407.13268,594.83161 L 406.8395,508.04991"

+       id="path8616"

+       inkscape:connector-type="polyline" />

+    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 403.93701,545.66927 L 372.04724,545.66927"

+       id="path8620"

+       inkscape:connector-type="polyline" />

+    <path

+       inkscape:connection-start="#g8638"

+       inkscape:connection-end="#g8564"

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

+       d="M 274.71923,938.0097 L 251.85556,915.25379"

+       id="path8662"

+       inkscape:connector-type="polyline" />

+    <path

+       inkscape:connection-end="#g8564"

+       inkscape:connection-start="#g8622"

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

+       d="M 193.39099,938.0097 L 216.25467,915.25379"

+       id="path8664"

+       inkscape:connector-type="polyline" />

+    <path

+       inkscape:connection-end="#g8564"

+       inkscape:connection-start="#g8646"

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

+       d="M 138.38582,897.9727 L 152.55905,897.90819"

+       id="path8666"

+       inkscape:connector-type="polyline" />

+    <g

+       transform="translate(234.05508,700.60815)"

+       id="g8638">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect8640"

+         width="102.75591"

+         height="35.433071"

+         x="7.0866356"

+         y="237.40155"

+         ry="3.7880721" />

+      <text

+         xml:space="preserve"

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

+         x="58.338272"

+         y="258.7847"

+         id="text8642"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan8644"

+           x="58.338272"

+           y="258.7847">VerticalLayout</tspan></text>

+    </g>

+    <g

+       transform="translate(117.12595,700.60815)"

+       id="g8622">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect8624"

+         width="116.92913"

+         height="35.433071"

+         x="2.3858267e-05"

+         y="237.40155"

+         ry="3.7880721" />

+      <text

+         xml:space="preserve"

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

+         x="58.338272"

+         y="258.7847"

+         id="text8626"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan8628"

+           x="58.338272"

+           y="258.7847">HorizontalLayout</tspan></text>

+    </g>

+    <g

+       transform="translate(28.543273,643.08847)"

+       id="g8646">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect8648"

+         width="102.75591"

+         height="35.433071"

+         x="7.0866356"

+         y="237.40155"

+         ry="3.7880721" />

+      <text

+         xml:space="preserve"

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

+         x="58.338272"

+         y="258.7847"

+         id="text8650"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan8652"

+           x="58.338272"

+           y="258.7847">FormLayout</tspan></text>

+    </g>

+    <g

+       id="g8712"

+       transform="translate(333.07087,488.97638)">

+      <rect

+         ry="3.7880721"

+         y="237.40155"

+         x="14.173247"

+         height="35.433075"

+         width="77.952736"

+         id="rect8714"

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         transform="translate(-6.8657954,12.655528)"

+         id="flowRoot8716"

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

+         xml:space="preserve"><flowRegion

+           id="flowRegion8718"><use

+             height="1052.3622"

+             width="744.09448"

+             id="use8720"

+             xlink:href="#rect28346"

+             y="0"

+             x="0" /></flowRegion><flowPara

+           id="flowPara8722">Accordion</flowPara></flowRoot>    </g>

+    <flowRoot

+       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"

+       id="flowRoot8724"

+       xml:space="preserve"><flowRegion

+         id="flowRegion8726"><rect

+           style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"

+           y="752.14441"

+           x="39.286312"

+           height="22.868153"

+           width="29.904507"

+           id="rect8728" /></flowRegion><flowPara

+         id="flowPara8730" /></flowRoot>    <g

+       id="g8744"

+       transform="translate(124.01575,491.43307)">

+      <rect

+         ry="3.7880721"

+         y="237.40155"

+         x="14.173247"

+         height="35.433075"

+         width="77.952736"

+         id="rect8746"

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         transform="translate(-6.8657954,12.655528)"

+         id="flowRoot8748"

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

+         xml:space="preserve"><flowRegion

+           id="flowRegion8750"><use

+             height="1052.3622"

+             width="744.09448"

+             id="use8752"

+             xlink:href="#rect28346"

+             y="0"

+             x="0" /></flowRegion><flowPara

+           id="flowPara8754">PopupView</flowPara></flowRoot>    </g>

+    <g

+       id="g8700"

+       transform="translate(237.59841,489.26957)">

+      <rect

+         ry="3.7880721"

+         y="237.40155"

+         x="14.173247"

+         height="35.433075"

+         width="77.952736"

+         id="rect8702"

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         transform="translate(-6.8657954,12.655528)"

+         id="flowRoot8704"

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

+         xml:space="preserve"><flowRegion

+           id="flowRegion8706"><use

+             height="1052.3622"

+             width="744.09448"

+             id="use8708"

+             xlink:href="#rect28346"

+             y="0"

+             x="0" /></flowRegion><flowPara

+           id="flowPara8710">TabSheet</flowPara></flowRoot>    </g>

+    <path

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

+       d="M 347.24412,744.21416 L 329.72439,744.26796"

+       id="path10680"

+       inkscape:connector-type="polyline"

+       inkscape:connection-start="#g8712"

+       inkscape:connection-end="#g8700" />

+    <path

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

+       d="M 290.79654,726.67112 L 290.83598,712.27172"

+       id="path10682"

+       inkscape:connector-type="polyline"

+       inkscape:connection-start="#g8700" />

+    <path

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

+       d="M 120.47244,694.72711 L 134.64567,694.75797"

+       id="path10684"

+       inkscape:connector-type="polyline"

+       inkscape:connection-start="#g8676"

+       sodipodi:nodetypes="cc"

+       inkscape:connection-end="#g2814" />

+    <path

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

+       d="M 78.051187,729.1278 L 78.051185,712.2047"

+       id="path10686"

+       inkscape:connector-type="polyline"

+       inkscape:connection-start="#g8688"

+       inkscape:connection-end="#g8676" />

+    <path

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

+       d="M 290.24962,662.72406 L 290.24962,677.08995"

+       id="path10688"

+       inkscape:connector-type="polyline" />

+    <g

+       id="g8688"

+       transform="translate(21.456693,491.72625)">

+      <rect

+         ry="3.7880721"

+         y="237.40155"

+         x="14.173247"

+         height="35.139893"

+         width="84.842499"

+         id="rect8690"

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         transform="translate(-3.6498167,12.655528)"

+         id="flowRoot8692"

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

+         xml:space="preserve"><flowRegion

+           id="flowRegion8694"><use

+             height="1052.3622"

+             width="744.09448"

+             id="use8696"

+             xlink:href="#rect28346"

+             y="0"

+             x="0" /></flowRegion><flowPara

+           id="flowPara8698">Window</flowPara></flowRoot>    </g>

+    <g

+       transform="translate(244.48816,389.76378)"

+       id="g8736">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect8738"

+         width="124.01575"

+         height="35.433071"

+         x="7.0866356"

+         y="237.40155"

+         ry="3.7880721" />

+      <text

+         xml:space="preserve"

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

+         x="68.338272"

+         y="258.7847"

+         id="text8740"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan8742"

+           x="68.338272"

+           y="258.7847">CustomComponent</tspan></text>

+    </g>

+    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 141.73228,538.58266 L 141.73228,446.45668"

+       id="path48282"

+       inkscape:connector-type="polyline" />

+    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 141.92913,531.78923 L 112.19216,532.09079"

+       id="path48284"

+       inkscape:connector-type="polyline" />

+    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 141.92913,538.87584 L 113.36488,565.22029"

+       id="path48286"

+       inkscape:connector-type="polyline" />

+    <path

+       sodipodi:nodetypes="cc"

+       inkscape:connector-type="polyline"

+       id="path48288"

+       d="M 112.19216,446.48181 L 141.92913,446.74986"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:3.89763784;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline" />

+    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 503.34646,588.48214 L 460.82677,588.48214"

+       id="path49764"

+       inkscape:connector-type="polyline" />

+    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 503.34646,623.91521 L 460.82677,602.65537"

+       id="path49766"

+       inkscape:connector-type="polyline" />

+    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 503.34646,538.87584 L 460.82677,538.87584"

+       id="path49768"

+       inkscape:connector-type="polyline" />

+    <path

+       inkscape:connection-start="#g8744"

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

+       d="M 177.27177,728.83462 L 177.37477,711.68536"

+       id="path53455"

+       inkscape:connector-type="polyline" />

+    <g

+       transform="matrix(0.5,0,0,0.5,103.34299,0.7940752)"

+       id="g18053" />

+    <path

+       sodipodi:open="true"

+       transform="translate(-409.24547,426.33482)"

+       sodipodi:end="6.2827149"

+       sodipodi:start="0"

+       d="M 491.37734,228.54329 A 4.1726308,4.3281136 0 1 1 491.37734,228.54125"

+       sodipodi:ry="4.3281136"

+       sodipodi:rx="4.1726308"

+       sodipodi:cy="228.54329"

+       sodipodi:cx="487.20471"

+       id="path80520"

+       style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:2.12598419;stroke-linecap:round;stroke-linejoin:round;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:2.12598425, 2.12598425;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+       sodipodi:type="arc" />

+    <path

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:2.83464575;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:url(#DotSu);stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;display:inline"

+       d="M 78.063207,677.06482 L 77.986256,654.80816"

+       id="path80518"

+       inkscape:connector-type="polyline" />

+    <flowRoot

+       xml:space="preserve"

+       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#49c2f1;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+       id="flowRoot80522"

+       transform="translate(-129.86464,517.05381)"><flowRegion

+         id="flowRegion80524"><use

+           transform="translate(1.467046,-91.03536)"

+           x="0"

+           y="0"

+           xlink:href="#rect4654"

+           id="use80526"

+           width="744.09448"

+           height="1052.3622" /></flowRegion><flowPara

+         id="flowPara80528">1</flowPara></flowRoot>    <g

+       id="g84015"

+       transform="translate(-130.68935,546.46199)">

+      <rect

+         ry="3.7880721"

+         y="233.06555"

+         x="166.12241"

+         height="35.433075"

+         width="85.039375"

+         id="rect84017"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot84019"

+         transform="translate(-6.2480473,106.19782)"><flowRegion

+           id="flowRegion84021"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use84023"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara84025">Layout</flowPara></flowRoot>    </g>

+    <path

+       inkscape:connector-type="polyline"

+       id="path84027"

+       d="M 163.16135,797.4231 L 120.47243,797.33341"

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

+       inkscape:connection-start="#g8550"

+       inkscape:connection-end="#g84015" />

+    <path

+       inkscape:connector-type="polyline"

+       id="path84033"

+       d="M 35.433071,797.24407 L 24.80315,797.24407 L 24.80315,637.79525 L 35.433071,637.79525"

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

+       sodipodi:nodetypes="cccc" />

+    <g

+       transform="translate(237.40158,340.15748)"

+       id="g116498">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect116500"

+         width="77.952736"

+         height="35.433075"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot116502"

+         transform="translate(-7.2728429,12.47462)"><flowRegion

+           id="flowRegion116504"><use

+             x="0"

+             y="0"

+             xlink:href="#rect28346"

+             id="use116506"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara116508">LoginForm</flowPara></flowRoot>    </g>

+    <path

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

+       d="M 290.82026,612.99211 L 291.04167,627.57052"

+       id="path116516"

+       inkscape:connector-type="polyline"

+       inkscape:connection-start="#g116498" />

+  </g>

+</svg>

diff --git a/documentation/components/original-drawings/field-diagram.svg b/documentation/components/original-drawings/field-diagram.svg
new file mode 100644
index 0000000000..f838704abb
--- /dev/null
+++ b/documentation/components/original-drawings/field-diagram.svg
@@ -0,0 +1,1488 @@
+<?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="744.09448"

+   height="1052.3622"

+   id="svg2475"

+   sodipodi:version="0.32"

+   inkscape:version="0.46"

+   sodipodi:docname="field-diagram.svg"

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

+   inkscape:export-filename="/home/magi/itmill/doc/cheatsheet/vaadin-cheatsheet.png"

+   inkscape:export-xdpi="300.01001"

+   inkscape:export-ydpi="300.01001"

+   version="1.0">

+  <sodipodi:namedview

+     id="base"

+     pagecolor="#ffffff"

+     bordercolor="#666666"

+     borderopacity="1.0"

+     gridtolerance="10000"

+     guidetolerance="10"

+     objecttolerance="10"

+     inkscape:pageopacity="0.0"

+     inkscape:pageshadow="2"

+     inkscape:zoom="3.3941125"

+     inkscape:cx="419.34213"

+     inkscape:cy="324.14661"

+     inkscape:document-units="mm"

+     inkscape:current-layer="layer1"

+     showgrid="true"

+     inkscape:window-width="1680"

+     inkscape:window-height="1026"

+     inkscape:window-x="1280"

+     inkscape:window-y="0"

+     inkscape:snap-nodes="true"

+     inkscape:snap-bbox="true"

+     units="mm"

+     inkscape:snap-global="true">

+    <inkscape:grid

+       spacingy="1mm"

+       spacingx="1mm"

+       empspacing="5"

+       units="mm"

+       enabled="true"

+       visible="true"

+       id="grid4674"

+       type="xygrid"

+       dotted="false" />

+  </sodipodi:namedview>

+  <defs

+     id="defs2477">

+    <marker

+       inkscape:stockid="Arrow1Lstart"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="Arrow1Lstart"

+       style="overflow:visible">

+      <path

+         id="path5210"

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

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

+         transform="matrix(0.8,0,0,0.8,10,0)" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="DotS"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="DotS">

+      <path

+         transform="matrix(0.2,0,0,0.2,1.48,0.2)"

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

+         d="M -2.5,-1 C -2.5,1.76 -4.74,4 -7.5,4 C -10.26,4 -12.5,1.76 -12.5,-1 C -12.5,-3.76 -10.26,-6 -7.5,-6 C -4.74,-6 -2.5,-3.76 -2.5,-1 z"

+         id="path3636" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutS"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutS"

+       style="overflow:visible">

+      <path

+         id="path3717"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <inkscape:path-effect

+       copytype="single_stretched"

+       pattern="M 349.202,225.086 L 405.895,331.386 L 370.462,338.472 "

+       prop_scale="1"

+       id="path-effect2503"

+       effect="skeletal" />

+    <inkscape:path-effect

+       prop_scale="1"

+       id="path-effect2499"

+       effect="skeletal" />

+    <inkscape:path-effect

+       pattern-nodetypes="cc"

+       pattern="M 432.28346,272.83462 L 403.93701,216.14171"

+       prop_scale="1"

+       id="path-effect2497"

+       effect="skeletal" />

+    <marker

+       style="overflow:visible"

+       id="Arrow1Send"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="Arrow1Send">

+      <path

+         transform="matrix(-0.2,0,0,-0.2,-1.2,0)"

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

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

+         id="path3641" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="Arrow1Lend"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="Arrow1Lend">

+      <path

+         transform="matrix(-0.8,0,0,-0.8,-10,0)"

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

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

+         id="path3629" />

+    </marker>

+    <inkscape:perspective

+       sodipodi:type="inkscape:persp3d"

+       inkscape:vp_x="0 : 526.18109 : 1"

+       inkscape:vp_y="0 : 1000 : 0"

+       inkscape:vp_z="744.09448 : 526.18109 : 1"

+       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"

+       id="perspective3487" />

+    <marker

+       style="overflow:visible"

+       id="Arrow2Sendp"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="Arrow2Sendp">

+      <path

+         transform="matrix(-0.3,0,0,-0.3,0.69,0)"

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

+         style="font-size:12px;fill:#f39300;fill-rule:evenodd;stroke:#f39300;stroke-width:0.625;stroke-linejoin:round"

+         id="path28139" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="TriangleOutSK"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="TriangleOutSK">

+      <path

+         transform="scale(0.2,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

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

+         id="path36611" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="TriangleOutSH"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="TriangleOutSH">

+      <path

+         transform="scale(0.2,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

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

+         id="path36614" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="TriangleOutSA"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="TriangleOutSA">

+      <path

+         transform="scale(0.2,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

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

+         id="path36617" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="TriangleOutSKF"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="TriangleOutSKF">

+      <path

+         transform="scale(0.2,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

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

+         id="path36620" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="TriangleOutS9"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="TriangleOutS9">

+      <path

+         transform="scale(0.2,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

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

+         id="path36623" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="Arrow2SendpA"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="Arrow2SendpA">

+      <path

+         transform="matrix(-0.3,0,0,-0.3,0.69,0)"

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

+         style="font-size:12px;fill:#d9d9cd;fill-rule:evenodd;stroke:#d9d9cd;stroke-width:0.625;stroke-linejoin:round"

+         id="path3396" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="Arrow2Sendpg"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="Arrow2Sendpg">

+      <path

+         transform="matrix(-0.3,0,0,-0.3,0.69,0)"

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

+         style="font-size:12px;fill:#fcc988;fill-rule:evenodd;stroke:#fcc988;stroke-width:0.625;stroke-linejoin:round"

+         id="path3360" />

+    </marker>

+    <filter

+       id="filter2780"

+       inkscape:label="White Halo"

+       width="1.1"

+       height="1.1">

+      <feMorphology

+         id="feMorphology2782"

+         operator="dilate"

+         radius="3"

+         result="result0" />

+      <feFlood

+         id="feFlood2786"

+         flood-color="rgb(255,255,255)"

+         flood-opacity="1"

+         in="result0"

+         result="result3" />

+      <feComposite

+         id="feComposite2623"

+         in="result3"

+         in2="result0"

+         operator="in"

+         result="result4" />

+      <feMerge

+         id="feMerge2629">

+        <feMergeNode

+           inkscape:collect="always"

+           id="feMergeNode2631"

+           in="result4" />

+        <feMergeNode

+           inkscape:collect="always"

+           id="feMergeNode2633"

+           in="SourceGraphic" />

+      </feMerge>

+    </filter>

+    <marker

+       inkscape:stockid="TriangleOutSn"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSn"

+       style="overflow:visible">

+      <path

+         id="path4441"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutS9F"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutS9F"

+       style="overflow:visible">

+      <path

+         id="path4444"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSI"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSI"

+       style="overflow:visible">

+      <path

+         id="path4447"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSO"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSO"

+       style="overflow:visible">

+      <path

+         id="path4450"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSW"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSW"

+       style="overflow:visible">

+      <path

+         id="path4453"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSB"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSB"

+       style="overflow:visible">

+      <path

+         id="path4456"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSZ"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSZ"

+       style="overflow:visible">

+      <path

+         id="path4459"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="DotSq"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="DotSq">

+      <path

+         transform="matrix(0.2,0,0,0.2,1.48,0.2)"

+         style="fill:#d9d9cd;fill-rule:evenodd;stroke:#d9d9cd;stroke-width:1pt;marker-start:none;marker-end:none"

+         d="M -2.5,-1 C -2.5,1.76 -4.74,4 -7.5,4 C -10.26,4 -12.5,1.76 -12.5,-1 C -12.5,-3.76 -10.26,-6 -7.5,-6 C -4.74,-6 -2.5,-3.76 -2.5,-1 z"

+         id="path5853" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSBO"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSBO"

+       style="overflow:visible">

+      <path

+         id="path7501"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="DotSu"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="DotSu">

+      <path

+         transform="matrix(0.2,0,0,0.2,1.48,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none;marker-end:none"

+         d="M -2.5,-1 C -2.5,1.76 -4.74,4 -7.5,4 C -10.26,4 -12.5,1.76 -12.5,-1 C -12.5,-3.76 -10.26,-6 -7.5,-6 C -4.74,-6 -2.5,-3.76 -2.5,-1 z"

+         id="path9463" />

+    </marker>

+    <filter

+       height="1.1"

+       width="1.1"

+       inkscape:label="Black Halo"

+       id="filter10694">

+      <feMorphology

+         result="result0"

+         radius="3"

+         operator="dilate"

+         id="feMorphology10696" />

+      <feFlood

+         result="result3"

+         in="result0"

+         flood-opacity="1"

+         flood-color="rgb(0,0,0)"

+         id="feFlood10698" />

+      <feComposite

+         result="result4"

+         operator="in"

+         in2="result0"

+         in="result3"

+         id="feComposite10700" />

+      <feMerge

+         id="feMerge10702">

+        <feMergeNode

+           in="result4"

+           id="feMergeNode10704"

+           inkscape:collect="always" />

+        <feMergeNode

+           in="SourceGraphic"

+           id="feMergeNode10706"

+           inkscape:collect="always" />

+      </feMerge>

+    </filter>

+    <marker

+       inkscape:stockid="TriangleOutSu"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSu"

+       style="overflow:visible">

+      <path

+         id="path8127"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSI8"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSI8"

+       style="overflow:visible">

+      <path

+         id="path8130"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSr"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSr"

+       style="overflow:visible">

+      <path

+         id="path8133"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSM"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSM"

+       style="overflow:visible">

+      <path

+         id="path8136"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSb"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSb"

+       style="overflow:visible">

+      <path

+         id="path8139"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       id="marker18095"

+       orient="auto"

+       markerHeight="5.7450776"

+       markerWidth="4.6297302">

+      <g

+         id="g11064"

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

+        <path

+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"

+           id="path11050"

+           d="M 370,508.65625 C 369.13933,508.715 368.39056,509.27755 368.09375,510.09375 C 367.82399,510.83551 368.03605,511.62868 368.53125,512.21875 L 366.78125,512.21875 C 366.73884,512.21408 366.69882,512.22093 366.65625,512.21875 L 366.65625,516.59375 L 366.78125,516.59375 L 368.53125,516.59375 C 367.85229,517.45345 367.83424,518.70924 368.625,519.5 C 369.47591,520.35091 370.89909,520.35091 371.75,519.5 L 375.09375,516.125 C 375.12672,516.09552 375.15802,516.06422 375.1875,516.03125 C 375.21972,516.01191 375.25101,515.99105 375.28125,515.96875 C 375.28162,515.96839 375.49976,515.68796 375.5,515.6875 C 375.50005,515.68741 375.49338,515.64282 375.5,515.625 C 375.5011,515.62203 375.53002,515.62832 375.53125,515.625 C 375.57039,515.57293 375.58228,515.57321 375.625,515.5 C 375.76199,515.26524 375.79184,515.12809 375.78125,515.15625 C 375.81807,515.06473 375.79977,515.04374 375.8125,515 C 375.82311,514.98978 375.83353,514.97936 375.84375,514.96875 C 375.90379,514.74477 375.93181,514.45186 375.90625,514.1875 C 375.89266,513.98387 375.84739,513.88985 375.84375,513.875 C 375.84389,513.86458 375.84389,513.85417 375.84375,513.84375 C 375.86975,513.94071 375.85901,513.85978 375.75,513.59375 C 375.69753,513.46336 375.66014,513.37439 375.625,513.3125 C 375.57262,513.22275 375.49154,513.05015 375.28125,512.84375 L 371.75,509.3125 C 371.29355,508.82579 370.66491,508.60087 370,508.65625 z"

+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1" />

+        <path

+           sodipodi:nodetypes="cccscccsssssssscccsccc"

+           id="path11035"

+           d="M 366.65625,515.40625 L 371.28125,515.40625 L 369.46875,517.21875 C 369.0718,517.6157 369.0718,518.2593 369.46875,518.65625 C 369.8657,519.0532 370.5093,519.0532 370.90625,518.65625 L 374.34375,515.1875 L 374.4375,515.125 C 374.44343,515.11918 374.43171,515.09972 374.4375,515.09375 C 374.49291,515.03659 374.5526,514.97676 374.59375,514.90625 C 374.62239,514.85717 374.63663,514.80216 374.65625,514.75 C 374.66861,514.71928 374.67831,514.68783 374.6875,514.65625 C 374.71862,514.54015 374.73024,514.43132 374.71875,514.3125 C 374.71489,514.25466 374.70138,514.21285 374.6875,514.15625 C 374.6766,514.1156 374.67237,514.07059 374.65625,514.03125 C 374.63982,513.99042 374.61578,513.94505 374.59375,513.90625 C 374.5483,513.82838 374.50015,513.74899 374.4375,513.6875 L 370.90625,510.15625 C 370.69734,509.93349 370.39809,509.8184 370.09375,509.84375 C 369.69897,509.8707 369.35398,510.12813 369.21875,510.5 C 369.08351,510.87187 369.18349,511.28826 369.46875,511.5625 L 371.34375,513.40625 L 366.65625,513.40625"

+           style="fill:#49c2f1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+      </g>

+    </marker>

+    <marker

+       id="marker44971"

+       orient="auto"

+       markerHeight="5.7450781"

+       markerWidth="4.6297355">

+      <g

+         id="g18059"

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

+        <path

+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"

+           id="path18061"

+           d="M 370,508.65625 C 369.13933,508.715 368.39056,509.27755 368.09375,510.09375 C 367.82399,510.83551 368.03605,511.62868 368.53125,512.21875 L 366.78125,512.21875 C 366.73884,512.21408 366.69882,512.22093 366.65625,512.21875 L 366.65625,516.59375 L 366.78125,516.59375 L 368.53125,516.59375 C 367.85229,517.45345 367.83424,518.70924 368.625,519.5 C 369.47591,520.35091 370.89909,520.35091 371.75,519.5 L 375.09375,516.125 C 375.12672,516.09552 375.15802,516.06422 375.1875,516.03125 C 375.21972,516.01191 375.25101,515.99105 375.28125,515.96875 C 375.28162,515.96839 375.49976,515.68796 375.5,515.6875 C 375.50005,515.68741 375.49338,515.64282 375.5,515.625 C 375.5011,515.62203 375.53002,515.62832 375.53125,515.625 C 375.57039,515.57293 375.58228,515.57321 375.625,515.5 C 375.76199,515.26524 375.79184,515.12809 375.78125,515.15625 C 375.81807,515.06473 375.79977,515.04374 375.8125,515 C 375.82311,514.98978 375.83353,514.97936 375.84375,514.96875 C 375.90379,514.74477 375.93181,514.45186 375.90625,514.1875 C 375.89266,513.98387 375.84739,513.88985 375.84375,513.875 C 375.84389,513.86458 375.84389,513.85417 375.84375,513.84375 C 375.86975,513.94071 375.85901,513.85978 375.75,513.59375 C 375.69753,513.46336 375.66014,513.37439 375.625,513.3125 C 375.57262,513.22275 375.49154,513.05015 375.28125,512.84375 L 371.75,509.3125 C 371.29355,508.82579 370.66491,508.60087 370,508.65625 z"

+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1" />

+        <path

+           sodipodi:nodetypes="cccscccsssssssscccsccc"

+           id="path18063"

+           d="M 366.65625,515.40625 L 371.28125,515.40625 L 369.46875,517.21875 C 369.0718,517.6157 369.0718,518.2593 369.46875,518.65625 C 369.8657,519.0532 370.5093,519.0532 370.90625,518.65625 L 374.34375,515.1875 L 374.4375,515.125 C 374.44343,515.11918 374.43171,515.09972 374.4375,515.09375 C 374.49291,515.03659 374.5526,514.97676 374.59375,514.90625 C 374.62239,514.85717 374.63663,514.80216 374.65625,514.75 C 374.66861,514.71928 374.67831,514.68783 374.6875,514.65625 C 374.71862,514.54015 374.73024,514.43132 374.71875,514.3125 C 374.71489,514.25466 374.70138,514.21285 374.6875,514.15625 C 374.6766,514.1156 374.67237,514.07059 374.65625,514.03125 C 374.63982,513.99042 374.61578,513.94505 374.59375,513.90625 C 374.5483,513.82838 374.50015,513.74899 374.4375,513.6875 L 370.90625,510.15625 C 370.69734,509.93349 370.39809,509.8184 370.09375,509.84375 C 369.69897,509.8707 369.35398,510.12813 369.21875,510.5 C 369.08351,510.87187 369.18349,511.28826 369.46875,511.5625 L 371.34375,513.40625 L 366.65625,513.40625"

+           style="fill:#d9d9cd;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+      </g>

+    </marker>

+    <marker

+       id="marker52016"

+       orient="auto"

+       markerHeight="5.7450786"

+       markerWidth="4.6297302">

+      <g

+         id="g52010"

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

+        <path

+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"

+           id="path52012"

+           d="M 370,508.65625 C 369.13933,508.715 368.39056,509.27755 368.09375,510.09375 C 367.82399,510.83551 368.03605,511.62868 368.53125,512.21875 L 366.78125,512.21875 C 366.73884,512.21408 366.69882,512.22093 366.65625,512.21875 L 366.65625,516.59375 L 366.78125,516.59375 L 368.53125,516.59375 C 367.85229,517.45345 367.83424,518.70924 368.625,519.5 C 369.47591,520.35091 370.89909,520.35091 371.75,519.5 L 375.09375,516.125 C 375.12672,516.09552 375.15802,516.06422 375.1875,516.03125 C 375.21972,516.01191 375.25101,515.99105 375.28125,515.96875 C 375.28162,515.96839 375.49976,515.68796 375.5,515.6875 C 375.50005,515.68741 375.49338,515.64282 375.5,515.625 C 375.5011,515.62203 375.53002,515.62832 375.53125,515.625 C 375.57039,515.57293 375.58228,515.57321 375.625,515.5 C 375.76199,515.26524 375.79184,515.12809 375.78125,515.15625 C 375.81807,515.06473 375.79977,515.04374 375.8125,515 C 375.82311,514.98978 375.83353,514.97936 375.84375,514.96875 C 375.90379,514.74477 375.93181,514.45186 375.90625,514.1875 C 375.89266,513.98387 375.84739,513.88985 375.84375,513.875 C 375.84389,513.86458 375.84389,513.85417 375.84375,513.84375 C 375.86975,513.94071 375.85901,513.85978 375.75,513.59375 C 375.69753,513.46336 375.66014,513.37439 375.625,513.3125 C 375.57262,513.22275 375.49154,513.05015 375.28125,512.84375 L 371.75,509.3125 C 371.29355,508.82579 370.66491,508.60087 370,508.65625 z"

+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1" />

+        <path

+           sodipodi:nodetypes="cccscccsssssssscccsccc"

+           id="path52014"

+           d="M 366.65625,515.40625 L 371.28125,515.40625 L 369.46875,517.21875 C 369.0718,517.6157 369.0718,518.2593 369.46875,518.65625 C 369.8657,519.0532 370.5093,519.0532 370.90625,518.65625 L 374.34375,515.1875 L 374.4375,515.125 C 374.44343,515.11918 374.43171,515.09972 374.4375,515.09375 C 374.49291,515.03659 374.5526,514.97676 374.59375,514.90625 C 374.62239,514.85717 374.63663,514.80216 374.65625,514.75 C 374.66861,514.71928 374.67831,514.68783 374.6875,514.65625 C 374.71862,514.54015 374.73024,514.43132 374.71875,514.3125 C 374.71489,514.25466 374.70138,514.21285 374.6875,514.15625 C 374.6766,514.1156 374.67237,514.07059 374.65625,514.03125 C 374.63982,513.99042 374.61578,513.94505 374.59375,513.90625 C 374.5483,513.82838 374.50015,513.74899 374.4375,513.6875 L 370.90625,510.15625 C 370.69734,509.93349 370.39809,509.8184 370.09375,509.84375 C 369.69897,509.8707 369.35398,510.12813 369.21875,510.5 C 369.08351,510.87187 369.18349,511.28826 369.46875,511.5625 L 371.34375,513.40625 L 366.65625,513.40625"

+           style="fill:#f39300;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+      </g>

+    </marker>

+    <marker

+       id="marker64887"

+       orient="auto"

+       markerHeight="5.745079"

+       markerWidth="4.6297255">

+      <g

+         id="g64855"

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

+        <path

+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"

+           id="path64857"

+           d="M 370,508.65625 C 369.13933,508.715 368.39056,509.27755 368.09375,510.09375 C 367.82399,510.83551 368.03605,511.62868 368.53125,512.21875 L 366.78125,512.21875 C 366.73884,512.21408 366.69882,512.22093 366.65625,512.21875 L 366.65625,516.59375 L 366.78125,516.59375 L 368.53125,516.59375 C 367.85229,517.45345 367.83424,518.70924 368.625,519.5 C 369.47591,520.35091 370.89909,520.35091 371.75,519.5 L 375.09375,516.125 C 375.12672,516.09552 375.15802,516.06422 375.1875,516.03125 C 375.21972,516.01191 375.25101,515.99105 375.28125,515.96875 C 375.28162,515.96839 375.49976,515.68796 375.5,515.6875 C 375.50005,515.68741 375.49338,515.64282 375.5,515.625 C 375.5011,515.62203 375.53002,515.62832 375.53125,515.625 C 375.57039,515.57293 375.58228,515.57321 375.625,515.5 C 375.76199,515.26524 375.79184,515.12809 375.78125,515.15625 C 375.81807,515.06473 375.79977,515.04374 375.8125,515 C 375.82311,514.98978 375.83353,514.97936 375.84375,514.96875 C 375.90379,514.74477 375.93181,514.45186 375.90625,514.1875 C 375.89266,513.98387 375.84739,513.88985 375.84375,513.875 C 375.84389,513.86458 375.84389,513.85417 375.84375,513.84375 C 375.86975,513.94071 375.85901,513.85978 375.75,513.59375 C 375.69753,513.46336 375.66014,513.37439 375.625,513.3125 C 375.57262,513.22275 375.49154,513.05015 375.28125,512.84375 L 371.75,509.3125 C 371.29355,508.82579 370.66491,508.60087 370,508.65625 z"

+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1" />

+        <path

+           sodipodi:nodetypes="cccscccsssssssscccsccc"

+           id="path64859"

+           d="M 366.65625,515.40625 L 371.28125,515.40625 L 369.46875,517.21875 C 369.0718,517.6157 369.0718,518.2593 369.46875,518.65625 C 369.8657,519.0532 370.5093,519.0532 370.90625,518.65625 L 374.34375,515.1875 L 374.4375,515.125 C 374.44343,515.11918 374.43171,515.09972 374.4375,515.09375 C 374.49291,515.03659 374.5526,514.97676 374.59375,514.90625 C 374.62239,514.85717 374.63663,514.80216 374.65625,514.75 C 374.66861,514.71928 374.67831,514.68783 374.6875,514.65625 C 374.71862,514.54015 374.73024,514.43132 374.71875,514.3125 C 374.71489,514.25466 374.70138,514.21285 374.6875,514.15625 C 374.6766,514.1156 374.67237,514.07059 374.65625,514.03125 C 374.63982,513.99042 374.61578,513.94505 374.59375,513.90625 C 374.5483,513.82838 374.50015,513.74899 374.4375,513.6875 L 370.90625,510.15625 C 370.69734,509.93349 370.39809,509.8184 370.09375,509.84375 C 369.69897,509.8707 369.35398,510.12813 369.21875,510.5 C 369.08351,510.87187 369.18349,511.28826 369.46875,511.5625 L 371.34375,513.40625 L 366.65625,513.40625"

+           style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+      </g>

+    </marker>

+    <marker

+       id="marker4057"

+       orient="auto"

+       markerHeight="5.745079"

+       markerWidth="4.6297302">

+      <g

+         id="g51986"

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

+        <path

+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"

+           id="path51988"

+           d="M 370,508.65625 C 369.13933,508.715 368.39056,509.27755 368.09375,510.09375 C 367.82399,510.83551 368.03605,511.62868 368.53125,512.21875 L 366.78125,512.21875 C 366.73884,512.21408 366.69882,512.22093 366.65625,512.21875 L 366.65625,516.59375 L 366.78125,516.59375 L 368.53125,516.59375 C 367.85229,517.45345 367.83424,518.70924 368.625,519.5 C 369.47591,520.35091 370.89909,520.35091 371.75,519.5 L 375.09375,516.125 C 375.12672,516.09552 375.15802,516.06422 375.1875,516.03125 C 375.21972,516.01191 375.25101,515.99105 375.28125,515.96875 C 375.28162,515.96839 375.49976,515.68796 375.5,515.6875 C 375.50005,515.68741 375.49338,515.64282 375.5,515.625 C 375.5011,515.62203 375.53002,515.62832 375.53125,515.625 C 375.57039,515.57293 375.58228,515.57321 375.625,515.5 C 375.76199,515.26524 375.79184,515.12809 375.78125,515.15625 C 375.81807,515.06473 375.79977,515.04374 375.8125,515 C 375.82311,514.98978 375.83353,514.97936 375.84375,514.96875 C 375.90379,514.74477 375.93181,514.45186 375.90625,514.1875 C 375.89266,513.98387 375.84739,513.88985 375.84375,513.875 C 375.84389,513.86458 375.84389,513.85417 375.84375,513.84375 C 375.86975,513.94071 375.85901,513.85978 375.75,513.59375 C 375.69753,513.46336 375.66014,513.37439 375.625,513.3125 C 375.57262,513.22275 375.49154,513.05015 375.28125,512.84375 L 371.75,509.3125 C 371.29355,508.82579 370.66491,508.60087 370,508.65625 z"

+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1" />

+        <path

+           sodipodi:nodetypes="cccscccsssssssscccsccc"

+           id="path51990"

+           d="M 366.65625,515.40625 L 371.28125,515.40625 L 369.46875,517.21875 C 369.0718,517.6157 369.0718,518.2593 369.46875,518.65625 C 369.8657,519.0532 370.5093,519.0532 370.90625,518.65625 L 374.34375,515.1875 L 374.4375,515.125 C 374.44343,515.11918 374.43171,515.09972 374.4375,515.09375 C 374.49291,515.03659 374.5526,514.97676 374.59375,514.90625 C 374.62239,514.85717 374.63663,514.80216 374.65625,514.75 C 374.66861,514.71928 374.67831,514.68783 374.6875,514.65625 C 374.71862,514.54015 374.73024,514.43132 374.71875,514.3125 C 374.71489,514.25466 374.70138,514.21285 374.6875,514.15625 C 374.6766,514.1156 374.67237,514.07059 374.65625,514.03125 C 374.63982,513.99042 374.61578,513.94505 374.59375,513.90625 C 374.5483,513.82838 374.50015,513.74899 374.4375,513.6875 L 370.90625,510.15625 C 370.69734,509.93349 370.39809,509.8184 370.09375,509.84375 C 369.69897,509.8707 369.35398,510.12813 369.21875,510.5 C 369.08351,510.87187 369.18349,511.28826 369.46875,511.5625 L 371.34375,513.40625 L 366.65625,513.40625"

+           style="fill:#49c2f1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+      </g>

+    </marker>

+    <marker

+       id="marker72805"

+       orient="auto"

+       markerHeight="4.5568175"

+       markerWidth="4.0334239">

+      <path

+         sodipodi:nodetypes="cccscccsssssssscccsccc"

+         id="path18057"

+         d="M -2.0167119,0.50456824 L 0.29578813,0.50456824 L -0.61046187,1.4108182 C -0.80893187,1.6092982 -0.80893187,1.9310982 -0.61046187,2.1295682 C -0.41198187,2.3280482 -0.090181874,2.3280482 0.10828813,2.1295682 L 1.8270381,0.39519824 L 1.8739181,0.36394824 C 1.8768781,0.36103824 1.8710181,0.35130824 1.8739181,0.34831824 C 1.9016181,0.31973824 1.9314681,0.28982824 1.9520381,0.25456824 C 1.9663581,0.23002824 1.9734781,0.20252824 1.9832881,0.17644824 C 1.9894681,0.16108824 1.9943181,0.14535824 1.9989181,0.12956824 C 2.0144781,0.07151824 2.0202881,0.01710824 2.0145381,-0.04230176 C 2.0126081,-0.07122176 2.0058581,-0.09213176 1.9989181,-0.12043176 C 1.9934681,-0.14075176 1.9913481,-0.16326176 1.9832881,-0.18293176 C 1.9750781,-0.20334176 1.9630581,-0.22603176 1.9520381,-0.24543176 C 1.9293181,-0.28436176 1.9052381,-0.32406176 1.8739181,-0.35480176 L 0.10828813,-2.1204318 C 0.003838126,-2.2318118 -0.14579187,-2.2893518 -0.29796187,-2.2766818 C -0.49535187,-2.2632018 -0.66784187,-2.1344918 -0.73546187,-1.9485518 C -0.80308187,-1.7626218 -0.75309187,-1.5544218 -0.61046187,-1.4173018 L 0.32703813,-0.49543176 L -2.0167119,-0.49543176"

+         style="fill:#f39300;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+    </marker>

+    <marker

+       id="marker72808"

+       orient="auto"

+       markerHeight="4.5568123"

+       markerWidth="4.0334177">

+      <path

+         sodipodi:nodetypes="cccscccsssssssscccsccc"

+         id="path72801"

+         d="M -2.016709,0.50457301 L 0.29579105,0.50457301 L -0.61045895,1.410823 C -0.80893895,1.609293 -0.80893895,1.931093 -0.61045895,2.129573 C -0.41198895,2.328043 -0.090188953,2.328043 0.10829105,2.129573 L 1.827041,0.39519301 L 1.873911,0.36394301 C 1.876881,0.36103301 1.871021,0.35130301 1.873911,0.34832301 C 1.901621,0.31974301 1.931461,0.28982301 1.952041,0.25457301 C 1.966361,0.23003301 1.973481,0.20252301 1.983291,0.17644301 C 1.989471,0.16108301 1.994321,0.14536301 1.998911,0.12957301 C 2.014471,0.071523013 2.020281,0.017103013 2.014541,-0.042306987 C 2.012611,-0.071226987 2.005851,-0.092126987 1.998911,-0.12042699 C 1.993461,-0.14075699 1.991351,-0.16325699 1.983291,-0.18292699 C 1.975071,-0.20334699 1.963051,-0.22602699 1.952041,-0.24542699 C 1.929311,-0.28436699 1.905241,-0.32405699 1.873911,-0.35480699 L 0.10829105,-2.120427 C 0.003831047,-2.231807 -0.14578895,-2.289357 -0.29795895,-2.276677 C -0.49534895,-2.263207 -0.66784895,-2.134487 -0.73545895,-1.948557 C -0.80307895,-1.762617 -0.75308895,-1.554427 -0.61045895,-1.417307 L 0.32704105,-0.49542699 L -2.016709,-0.49542699"

+         style="fill:#d9d9cd;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="DotSuN"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="DotSuN">

+      <path

+         transform="matrix(0.2,0,0,0.2,1.48,0.2)"

+         style="fill:#f39300;fill-rule:evenodd;stroke:#f39300;stroke-width:1pt;marker-start:none;marker-end:none"

+         d="M -2.5,-1 C -2.5,1.76 -4.74,4 -7.5,4 C -10.26,4 -12.5,1.76 -12.5,-1 C -12.5,-3.76 -10.26,-6 -7.5,-6 C -4.74,-6 -2.5,-3.76 -2.5,-1 z"

+         id="path81580" />

+    </marker>

+  </defs>

+  <metadata

+     id="metadata2480">

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

+     id="layer1"

+     inkscape:groupmode="layer"

+     inkscape:label="Layer 1">

+    <g

+       id="g2870"

+       transform="translate(177.07986,127.32848)">

+      <rect

+         ry="3.7880721"

+         y="181.8969"

+         x="205.84985"

+         height="35.433067"

+         width="99.212601"

+         id="rect2872"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot2874"

+         transform="translate(41.217308,55.775189)"><flowRegion

+           id="flowRegion2876"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use2878"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara2880">Property</flowPara></flowRoot>    </g>

+    <g

+       id="g2886"

+       transform="translate(157.67586,103.78352)">

+      <rect

+         ry="3.7880721"

+         y="235.59096"

+         x="182.48161"

+         height="17.716534"

+         width="49.6063"

+         id="rect2888"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.77165353;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:9px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot2890"

+         transform="translate(-7.1061187,101.2329)"><flowRegion

+           id="flowRegion2892"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use2894"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara2896">Editor</flowPara></flowRoot>    </g>

+    <g

+       id="g3740"

+       transform="translate(292.32154,103.78352)">

+      <rect

+         ry="3.7880721"

+         y="235.59096"

+         x="182.48161"

+         height="17.716536"

+         width="102.75591"

+         id="rect3742"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.77165353;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:9px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot3744"

+         transform="translate(19.725317,101.70214)"><flowRegion

+           id="flowRegion3746"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use3748"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara3750">ValueChangeListener</flowPara></flowRoot>    </g>

+    <path

+       inkscape:connector-type="polyline"

+       id="path3776"

+       d="M 413.22495,393.0986 L 375.44281,357.97684"

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

+       inkscape:connection-end="#g2886"

+       inkscape:connection-start="#g2854" />

+    <flowRoot

+       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+       id="flowRoot2485"

+       xml:space="preserve"><flowRegion

+         id="flowRegion2487"><rect

+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+           y="238.07646"

+           x="262.85715"

+           height="120"

+           width="184.28572"

+           id="rect2489" /></flowRegion><flowPara

+         id="flowPara2491" /></flowRoot>    <g

+       transform="translate(-3.5714286,23.214286)"

+       id="g3178" />

+    <path

+       inkscape:connector-type="polyline"

+       id="path28387"

+       d="M 191.53543,563.67899 L 190.15217,563.81168"

+       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />

+    <g

+       id="g2492"

+       transform="translate(45.259843,162.59526)">

+      <rect

+         ry="3.7880721"

+         y="230.31496"

+         x="163.1725"

+         height="35.433071"

+         width="99.032219"

+         id="rect4654"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot4664"

+         transform="translate(-2.7125132,103.67242)"><flowRegion

+           id="flowRegion4666"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use4668"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara4670">Component</flowPara></flowRoot>    </g>

+    <path

+       inkscape:connector-type="polyline"

+       id="path4676"

+       d="M 257.79351,471.55301 L 257.9034,428.34329"

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

+       inkscape:connection-start="#g2475"

+       inkscape:connection-end="#g2492" />

+    <g

+       id="g2475"

+       transform="translate(45.456693,262.49791)">

+      <rect

+         style="opacity:1;fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect4622"

+         width="141.11894"

+         height="35.433071"

+         x="141.73228"

+         y="209.0551"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:12px;font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:100%;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold Italic"

+         id="flowRoot4636"

+         transform="translate(-1.2813438,13.082604)"><flowRegion

+           id="flowRegion4638"><use

+             x="0"

+             y="0"

+             xlink:href="#rect4622"

+             id="use4640"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara4642">AbstractComponent</flowPara></flowRoot>    </g>

+    <path

+       inkscape:connector-type="polyline"

+       id="path2866"

+       d="M 389.76378,410.76919 L 307.46456,410.68026"

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

+       inkscape:connection-start="#g2854"

+       inkscape:connection-end="#g2492" />

+    <path

+       inkscape:connection-end="#g2870"

+       inkscape:connector-type="polyline"

+       id="path2882"

+       d="M 432.33681,393.0986 L 432.48267,344.65844"

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

+       inkscape:connection-start="#g2854" />

+    <path

+       inkscape:connection-start="#g2854"

+       inkscape:connection-end="#g3740"

+       inkscape:connector-type="polyline"

+       id="path5048"

+       d="M 458.86508,393.0986 L 511.56122,357.97684"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#d9d9cd;stroke-width:2.83464575;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:url(#marker44971);stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline" />

+    <g

+       id="g5034"

+       transform="translate(91.01546,143.54288)">

+      <rect

+         ry="3.7880721"

+         y="235.59096"

+         x="182.48161"

+         height="17.716537"

+         width="62.31395"

+         id="rect5036"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.77165353;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:9px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot5038"

+         transform="translate(-0.8622551,101.2329)"><flowRegion

+           id="flowRegion5040"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use5042"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara5044">Focusable</flowPara></flowRoot>    </g>

+    <path

+       inkscape:connection-end="#g5034"

+       inkscape:connection-start="#g2854"

+       sodipodi:nodetypes="cc"

+       inkscape:connector-type="polyline"

+       id="path5050"

+       d="M 389.76378,403.21166 L 336.69685,393.72209"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#d9d9cd;stroke-width:2.83464575;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:url(#marker44971);stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline" />

+    <g

+       id="g2854"

+       transform="translate(223.64137,160.03305)">

+      <rect

+         ry="3.7880721"

+         y="233.06555"

+         x="166.12241"

+         height="35.433075"

+         width="85.039375"

+         id="rect2856"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot2858"

+         transform="translate(-6.2480473,106.19782)"><flowRegion

+           id="flowRegion2860"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use2862"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara2864">Field</flowPara></flowRoot>    </g>

+    <path

+       inkscape:connection-end="#g2854"

+       inkscape:connection-start="#g2802"

+       inkscape:connector-type="polyline"

+       id="path2868"

+       d="M 432.25441,471.55301 L 432.27499,428.53168"

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

+    <path

+       inkscape:connection-start="#g2802"

+       inkscape:connector-type="polyline"

+       id="path2639"

+       d="M 377.03373,489.44218 L 328.30792,489.37166"

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

+       inkscape:connection-end="#g2475" />

+    <g

+       transform="translate(204.60668,263.00299)"

+       id="g2802">

+      <rect

+         ry="3.7880721"

+         y="208.55002"

+         x="172.42705"

+         height="35.93816"

+         width="110.42418"

+         id="rect2804"

+         style="opacity:1;fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         transform="translate(17.153521,11.90988)"

+         id="flowRoot2806"

+         style="font-size:12px;font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:100%;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold Italic"

+         xml:space="preserve"><flowRegion

+           id="flowRegion2808"><use

+             height="1052.3622"

+             width="744.09448"

+             id="use2810"

+             xlink:href="#rect4622"

+             y="0"

+             x="0" /></flowRegion><flowPara

+           id="flowPara2812">AbstractField</flowPara></flowRoot>    </g>

+    <path

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

+       d="M 503.14963,489.16994 L 487.45791,489.24787"

+       id="path3832"

+       inkscape:connector-type="polyline"

+       inkscape:connection-end="#g2802"

+       inkscape:connection-start="#g3808" />

+    <g

+       transform="translate(488.97638,233.85827)"

+       id="g3808">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect3810"

+         width="77.952736"

+         height="35.433075"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot3812"

+         transform="translate(52.923584,259.59409)"><flowRegion

+           id="flowRegion3814" /><flowPara

+           id="flowPara3818">Button</flowPara></flowRoot>    </g>

+    <path

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

+       d="M 594.37048,489.34882 L 581.10236,489.25423"

+       id="path3834"

+       inkscape:connector-type="polyline"

+       inkscape:connection-start="#g3820"

+       inkscape:connection-end="#g3808" />

+    <g

+       transform="translate(580.19723,234.5086)"

+       id="g3820">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect3822"

+         width="77.952736"

+         height="35.433075"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot3824"

+         transform="translate(54.586428,258.88009)"><flowRegion

+           id="flowRegion3826" /><flowPara

+           id="flowPara3830">CheckBox</flowPara></flowRoot>    </g>

+    <g

+       transform="translate(488.97638,283.46457)"

+       id="g3836">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect3838"

+         width="77.952736"

+         height="35.433075"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot3840"

+         transform="translate(53.349584,258.36409)"><flowRegion

+           id="flowRegion3842" /><flowPara

+           id="flowPara3846">TextField</flowPara></flowRoot>    </g>

+    <path

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

+       d="M 594.16798,538.91528 L 581.10236,538.83177"

+       id="path3866"

+       inkscape:connector-type="polyline"

+       inkscape:connection-start="#g3848"

+       inkscape:connection-end="#g3836" />

+    <g

+       transform="translate(583.33557,296.5446)"

+       id="g3848">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect3850"

+         width="99.41507"

+         height="35.433071"

+         x="10.832414"

+         y="224.97185"

+         ry="3.7880721" />

+      <text

+         xml:space="preserve"

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

+         x="59.819889"

+         y="246.23169"

+         id="text3860"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan3862"

+           x="59.819889"

+           y="246.23169">RichTextArea</tspan></text>

+    </g>

+    <g

+       transform="translate(488.97638,333.07086)"

+       id="g3870">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect3872"

+         width="77.952736"

+         height="35.433075"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot3874"

+         transform="translate(53.097584,260.41009)"><flowRegion

+           id="flowRegion3876" /><flowPara

+           id="flowPara3880">DateField</flowPara></flowRoot>    </g>

+    <path

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

+       d="M 594.01586,588.4786 L 581.10236,588.40652"

+       id="path3910"

+       inkscape:connector-type="polyline"

+       inkscape:connection-start="#g3894"

+       inkscape:connection-end="#g3870" />

+    <g

+       transform="translate(583.18345,346.06769)"

+       id="g3894">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect3896"

+         width="99.41507"

+         height="35.433071"

+         x="10.832414"

+         y="224.97185"

+         ry="3.7880721" />

+      <text

+         xml:space="preserve"

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

+         x="60.61198"

+         y="246.73676"

+         id="text3898"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan3900"

+           x="60.61198"

+           y="246.73676">InlineDateField</tspan></text>

+    </g>

+    <path

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

+       d="M 607.78751,620.56033 L 578.06189,605.90549"

+       id="path3912"

+       inkscape:connector-type="polyline"

+       inkscape:connection-start="#g3902"

+       inkscape:connection-end="#g3870" />

+    <g

+       transform="translate(583.18345,395.58848)"

+       id="g3902">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect3904"

+         width="99.41507"

+         height="35.433067"

+         x="10.832414"

+         y="224.97185"

+         ry="3.7880721" />

+      <text

+         xml:space="preserve"

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

+         x="60.561245"

+         y="246.98929"

+         id="text3906"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan3908"

+           x="60.561245"

+           y="246.98929">PopupDateField</tspan></text>

+    </g>

+    <path

+       inkscape:connection-end="#g2802"

+       inkscape:connection-start="#g3796"

+       inkscape:connector-type="polyline"

+       id="path2641"

+       d="M 432.01532,677.06481 L 432.22373,507.49117"

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

+    <g

+       transform="translate(204.1016,468.44433)"

+       id="g3796">

+      <rect

+         ry="3.7880721"

+         y="208.62048"

+         x="172.93213"

+         height="35.867687"

+         width="109.9191"

+         id="rect3798"

+         style="opacity:1;fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         transform="translate(15.70397,13.082604)"

+         id="flowRoot3800"

+         style="font-size:12px;font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:100%;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold Italic"

+         xml:space="preserve"><flowRegion

+           id="flowRegion3802"><use

+             height="1052.3622"

+             width="744.09448"

+             id="use3804"

+             xlink:href="#rect4622"

+             y="0"

+             x="0" /></flowRegion><flowPara

+           id="flowPara3806">AbstractSelect</flowPara></flowRoot>    </g>

+    <path

+       sodipodi:nodetypes="cc"

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

+       d="M 460.82677,602.65537 L 460.82677,506.98608"

+       id="path2679"

+       inkscape:connector-type="polyline" />

+    <g

+       transform="translate(488.97638,382.67717)"

+       id="g2667">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect2669"

+         width="77.952736"

+         height="35.433075"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot2671"

+         transform="translate(52.758303,259.12009)"><flowRegion

+           id="flowRegion2673" /><flowPara

+           id="flowPara2677">Form</flowPara></flowRoot>    </g>

+    <g

+       transform="translate(329.52756,340.15748)"

+       id="g2655">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect2657"

+         width="77.952736"

+         height="35.433075"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot2659"

+         transform="translate(54.507115,259.28809)"><flowRegion

+           id="flowRegion2661" /><flowPara

+           id="flowPara2665">Slider</flowPara></flowRoot>    </g>

+    <g

+       transform="translate(209.05513,248.0315)"

+       id="g2643">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect2645"

+         width="120.47243"

+         height="35.433071"

+         x="42.519691"

+         y="279.92123"

+         ry="3.7880721" />

+      <text

+         xml:space="preserve"

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

+         x="102.11802"

+         y="301.18109"

+         id="text2685"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan2687"

+           x="102.11802"

+           y="301.18109">ProgressIndicator</tspan></text>

+    </g>

+    <g

+       transform="translate(486.87623,485.72626)"

+       id="g6708">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect6710"

+         width="88.58268"

+         height="35.433067"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot6712"

+         transform="translate(57.955431,259.85208)"><flowRegion

+           id="flowRegion6714" /><flowPara

+           id="flowPara6718">ListSelect</flowPara></flowRoot>    </g>

+    <g

+       transform="translate(486.87623,531.78925)"

+       id="g6732">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect6734"

+         width="88.58268"

+         height="35.433071"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot6736"

+         transform="translate(58.147431,259.85209)"><flowRegion

+           id="flowRegion6738" /><flowPara

+           id="flowPara6742">NativeSelect</flowPara></flowRoot>    </g>

+    <g

+       transform="translate(486.87623,577.85224)"

+       id="g6744">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect6746"

+         width="88.58268"

+         height="35.433075"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <text

+         xml:space="preserve"

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

+         x="58.338272"

+         y="258.7847"

+         id="text6756"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan6758"

+           x="58.338272"

+           y="258.7847">TwinColSelect</tspan></text>

+    </g>

+    <g

+       transform="translate(262.2047,485.43307)"

+       id="g6760">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect6762"

+         width="88.58268"

+         height="35.433075"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <text

+         xml:space="preserve"

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

+         x="58.338272"

+         y="258.7847"

+         id="text6764"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan6766"

+           x="58.338272"

+           y="258.7847">OptionGroup</tspan></text>

+    </g>

+    <g

+       transform="translate(262.2047,531.49606)"

+       id="g6768">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect6770"

+         width="88.58268"

+         height="35.433075"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <text

+         xml:space="preserve"

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

+         x="58.338272"

+         y="258.7847"

+         id="text6772"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan6774"

+           x="58.338272"

+           y="258.7847">Table</tspan></text>

+    </g>

+    <g

+       transform="translate(262.82007,577.43575)"

+       id="g6776">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect6778"

+         width="88.58268"

+         height="35.433075"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <text

+         xml:space="preserve"

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

+         x="58.338272"

+         y="258.7847"

+         id="text6780"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan6782"

+           x="58.338272"

+           y="258.7847">Tree</tspan></text>

+    </g>

+    <path

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

+       d="M 501.04948,694.86626 L 486.95283,694.89329"

+       id="path6784"

+       inkscape:connector-type="polyline"

+       inkscape:connection-end="#g3796"

+       inkscape:connection-start="#g6696" />

+    <path

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

+       d="M 435.82677,832.67714 L 436.36735,712.9325"

+       id="path6792"

+       inkscape:connector-type="polyline"

+       sodipodi:nodetypes="cc" />

+    <g

+       transform="translate(486.87623,439.66326)"

+       id="g6696">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect6698"

+         width="88.58268"

+         height="35.433079"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot6700"

+         transform="translate(59.617431,259.85209)"><flowRegion

+           id="flowRegion6702" /><flowPara

+           id="flowPara6706">Select</flowPara></flowRoot>    </g>

+    <path

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

+       d="M 607.34869,695.02731 L 589.63216,694.95704"

+       id="path7439"

+       inkscape:connector-type="polyline"

+       inkscape:connection-end="#g6696"

+       inkscape:connection-start="#g6720" />

+    <g

+       transform="translate(593.17544,440.07789)"

+       id="g6720">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect6722"

+         width="85.039375"

+         height="35.433067"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot6724"

+         transform="translate(58.129747,258.88008)"><flowRegion

+           id="flowRegion6726" /><flowPara

+           id="flowPara6730">ComboBox</flowPara></flowRoot>    </g>

+    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 364.96063,832.67714 L 435.82677,832.67714"

+       id="path6796"

+       inkscape:connector-type="polyline"

+       inkscape:connection-start="#g6776" />

+    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 364.96063,786.61415 C nan,nan nan,nan 435.82677,786.61415"

+       id="path7429"

+       inkscape:connector-type="polyline"

+       inkscape:connection-start="#g6768" />

+    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 364.96063,740.55116 L 435.82677,740.55116"

+       id="path7431"

+       inkscape:connector-type="polyline"

+       inkscape:connection-start="#g6760" />

+    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 501.04948,832.97033 L 437.26995,832.97033"

+       id="path7433"

+       inkscape:connector-type="polyline"

+       inkscape:connection-start="#g6744" />

+    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 501.04948,786.90734 L 437.26995,786.90734"

+       id="path7435"

+       inkscape:connector-type="polyline"

+       inkscape:connection-start="#g6732" />

+    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 501.04948,740.84434 L 437.26995,740.84434"

+       id="path7437"

+       inkscape:connector-type="polyline"

+       inkscape:connection-start="#g6708" />

+    <path

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

+       d="M 407.13268,594.83161 L 406.8395,508.04991"

+       id="path8616"

+       inkscape:connector-type="polyline" />

+    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 403.93701,545.66927 L 372.04724,545.66927"

+       id="path8620"

+       inkscape:connector-type="polyline" />

+    <flowRoot

+       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"

+       id="flowRoot8724"

+       xml:space="preserve"><flowRegion

+         id="flowRegion8726"><rect

+           style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"

+           y="752.14441"

+           x="39.286312"

+           height="22.868153"

+           width="29.904507"

+           id="rect8728" /></flowRegion><flowPara

+         id="flowPara8730" /></flowRoot>    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 503.34646,588.48214 L 460.82677,588.48214"

+       id="path49764"

+       inkscape:connector-type="polyline" />

+    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 503.34646,623.91521 L 460.82677,602.65537"

+       id="path49766"

+       inkscape:connector-type="polyline" />

+    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 503.34646,538.87584 L 460.82677,538.87584"

+       id="path49768"

+       inkscape:connector-type="polyline" />

+    <g

+       transform="matrix(0.5,0,0,0.5,103.34299,0.7940752)"

+       id="g18053" />

+    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 364.96063,786.61415 L 435.82677,786.61415"

+       id="path2657"

+       inkscape:connector-type="polyline" />

+  </g>

+</svg>

diff --git a/documentation/components/original-drawings/field-interface.svg b/documentation/components/original-drawings/field-interface.svg
new file mode 100644
index 0000000000..205bbe11b0
--- /dev/null
+++ b/documentation/components/original-drawings/field-interface.svg
@@ -0,0 +1,1222 @@
+<?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="744.09448"

+   height="1052.3622"

+   id="svg2475"

+   sodipodi:version="0.32"

+   inkscape:version="0.46"

+   sodipodi:docname="field-interface.svg"

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

+   inkscape:export-filename="/home/magi/itmill/doc/cheatsheet/vaadin-cheatsheet.png"

+   inkscape:export-xdpi="300.01001"

+   inkscape:export-ydpi="300.01001"

+   version="1.0">

+  <sodipodi:namedview

+     id="base"

+     pagecolor="#ffffff"

+     bordercolor="#666666"

+     borderopacity="1.0"

+     gridtolerance="10000"

+     guidetolerance="10"

+     objecttolerance="10"

+     inkscape:pageopacity="0.0"

+     inkscape:pageshadow="2"

+     inkscape:zoom="1.6970563"

+     inkscape:cx="543.70494"

+     inkscape:cy="597.63673"

+     inkscape:document-units="mm"

+     inkscape:current-layer="layer1"

+     showgrid="true"

+     inkscape:window-width="1680"

+     inkscape:window-height="1026"

+     inkscape:window-x="1280"

+     inkscape:window-y="0"

+     inkscape:snap-nodes="true"

+     inkscape:snap-bbox="true"

+     units="mm"

+     inkscape:snap-global="true">

+    <inkscape:grid

+       spacingy="1mm"

+       spacingx="1mm"

+       empspacing="5"

+       units="mm"

+       enabled="true"

+       visible="true"

+       id="grid4674"

+       type="xygrid"

+       dotted="false" />

+  </sodipodi:namedview>

+  <defs

+     id="defs2477">

+    <linearGradient

+       id="linearGradient4410">

+      <stop

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

+         offset="0"

+         id="stop4412" />

+      <stop

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

+         offset="1"

+         id="stop4414" />

+    </linearGradient>

+    <marker

+       inkscape:stockid="Arrow1Lstart"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="Arrow1Lstart"

+       style="overflow:visible">

+      <path

+         id="path5210"

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

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

+         transform="matrix(0.8,0,0,0.8,10,0)" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="DotS"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="DotS">

+      <path

+         transform="matrix(0.2,0,0,0.2,1.48,0.2)"

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

+         d="M -2.5,-1 C -2.5,1.76 -4.74,4 -7.5,4 C -10.26,4 -12.5,1.76 -12.5,-1 C -12.5,-3.76 -10.26,-6 -7.5,-6 C -4.74,-6 -2.5,-3.76 -2.5,-1 z"

+         id="path3636" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutS"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutS"

+       style="overflow:visible">

+      <path

+         id="path3717"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <inkscape:path-effect

+       copytype="single_stretched"

+       pattern="M 349.202,225.086 L 405.895,331.386 L 370.462,338.472 "

+       prop_scale="1"

+       id="path-effect2503"

+       effect="skeletal" />

+    <inkscape:path-effect

+       prop_scale="1"

+       id="path-effect2499"

+       effect="skeletal" />

+    <inkscape:path-effect

+       pattern-nodetypes="cc"

+       pattern="M 432.28346,272.83462 L 403.93701,216.14171"

+       prop_scale="1"

+       id="path-effect2497"

+       effect="skeletal" />

+    <marker

+       style="overflow:visible"

+       id="Arrow1Send"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="Arrow1Send">

+      <path

+         transform="matrix(-0.2,0,0,-0.2,-1.2,0)"

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

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

+         id="path3641" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="Arrow1Lend"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="Arrow1Lend">

+      <path

+         transform="matrix(-0.8,0,0,-0.8,-10,0)"

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

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

+         id="path3629" />

+    </marker>

+    <inkscape:perspective

+       sodipodi:type="inkscape:persp3d"

+       inkscape:vp_x="0 : 526.18109 : 1"

+       inkscape:vp_y="0 : 1000 : 0"

+       inkscape:vp_z="744.09448 : 526.18109 : 1"

+       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"

+       id="perspective3487" />

+    <marker

+       style="overflow:visible"

+       id="Arrow2Sendp"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="Arrow2Sendp">

+      <path

+         transform="matrix(-0.3,0,0,-0.3,0.69,0)"

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

+         style="font-size:12px;fill:#f39300;fill-rule:evenodd;stroke:#f39300;stroke-width:0.625;stroke-linejoin:round"

+         id="path28139" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="TriangleOutSK"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="TriangleOutSK">

+      <path

+         transform="scale(0.2,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

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

+         id="path36611" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="TriangleOutSH"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="TriangleOutSH">

+      <path

+         transform="scale(0.2,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

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

+         id="path36614" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="TriangleOutSA"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="TriangleOutSA">

+      <path

+         transform="scale(0.2,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

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

+         id="path36617" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="TriangleOutSKF"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="TriangleOutSKF">

+      <path

+         transform="scale(0.2,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

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

+         id="path36620" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="TriangleOutS9"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="TriangleOutS9">

+      <path

+         transform="scale(0.2,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

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

+         id="path36623" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="Arrow2SendpA"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="Arrow2SendpA">

+      <path

+         transform="matrix(-0.3,0,0,-0.3,0.69,0)"

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

+         style="font-size:12px;fill:#d9d9cd;fill-rule:evenodd;stroke:#d9d9cd;stroke-width:0.625;stroke-linejoin:round"

+         id="path3396" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="Arrow2Sendpg"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="Arrow2Sendpg">

+      <path

+         transform="matrix(-0.3,0,0,-0.3,0.69,0)"

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

+         style="font-size:12px;fill:#fcc988;fill-rule:evenodd;stroke:#fcc988;stroke-width:0.625;stroke-linejoin:round"

+         id="path3360" />

+    </marker>

+    <filter

+       id="filter2780"

+       inkscape:label="White Halo"

+       width="1.1"

+       height="1.1">

+      <feMorphology

+         id="feMorphology2782"

+         operator="dilate"

+         radius="3"

+         result="result0" />

+      <feFlood

+         id="feFlood2786"

+         flood-color="rgb(255,255,255)"

+         flood-opacity="1"

+         in="result0"

+         result="result3" />

+      <feComposite

+         id="feComposite2623"

+         in="result3"

+         in2="result0"

+         operator="in"

+         result="result4" />

+      <feMerge

+         id="feMerge2629">

+        <feMergeNode

+           inkscape:collect="always"

+           id="feMergeNode2631"

+           in="result4" />

+        <feMergeNode

+           inkscape:collect="always"

+           id="feMergeNode2633"

+           in="SourceGraphic" />

+      </feMerge>

+    </filter>

+    <marker

+       inkscape:stockid="TriangleOutSn"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSn"

+       style="overflow:visible">

+      <path

+         id="path4441"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutS9F"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutS9F"

+       style="overflow:visible">

+      <path

+         id="path4444"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSI"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSI"

+       style="overflow:visible">

+      <path

+         id="path4447"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSO"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSO"

+       style="overflow:visible">

+      <path

+         id="path4450"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSW"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSW"

+       style="overflow:visible">

+      <path

+         id="path4453"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSB"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSB"

+       style="overflow:visible">

+      <path

+         id="path4456"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSZ"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSZ"

+       style="overflow:visible">

+      <path

+         id="path4459"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="DotSq"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="DotSq">

+      <path

+         transform="matrix(0.2,0,0,0.2,1.48,0.2)"

+         style="fill:#d9d9cd;fill-rule:evenodd;stroke:#d9d9cd;stroke-width:1pt;marker-start:none;marker-end:none"

+         d="M -2.5,-1 C -2.5,1.76 -4.74,4 -7.5,4 C -10.26,4 -12.5,1.76 -12.5,-1 C -12.5,-3.76 -10.26,-6 -7.5,-6 C -4.74,-6 -2.5,-3.76 -2.5,-1 z"

+         id="path5853" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSBO"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSBO"

+       style="overflow:visible">

+      <path

+         id="path7501"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="DotSu"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="DotSu">

+      <path

+         transform="matrix(0.2,0,0,0.2,1.48,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none;marker-end:none"

+         d="M -2.5,-1 C -2.5,1.76 -4.74,4 -7.5,4 C -10.26,4 -12.5,1.76 -12.5,-1 C -12.5,-3.76 -10.26,-6 -7.5,-6 C -4.74,-6 -2.5,-3.76 -2.5,-1 z"

+         id="path9463" />

+    </marker>

+    <filter

+       height="1.1"

+       width="1.1"

+       inkscape:label="Black Halo"

+       id="filter10694">

+      <feMorphology

+         result="result0"

+         radius="3"

+         operator="dilate"

+         id="feMorphology10696" />

+      <feFlood

+         result="result3"

+         in="result0"

+         flood-opacity="1"

+         flood-color="rgb(0,0,0)"

+         id="feFlood10698" />

+      <feComposite

+         result="result4"

+         operator="in"

+         in2="result0"

+         in="result3"

+         id="feComposite10700" />

+      <feMerge

+         id="feMerge10702">

+        <feMergeNode

+           in="result4"

+           id="feMergeNode10704"

+           inkscape:collect="always" />

+        <feMergeNode

+           in="SourceGraphic"

+           id="feMergeNode10706"

+           inkscape:collect="always" />

+      </feMerge>

+    </filter>

+    <marker

+       inkscape:stockid="TriangleOutSu"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSu"

+       style="overflow:visible">

+      <path

+         id="path8127"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSI8"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSI8"

+       style="overflow:visible">

+      <path

+         id="path8130"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSr"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSr"

+       style="overflow:visible">

+      <path

+         id="path8133"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSM"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSM"

+       style="overflow:visible">

+      <path

+         id="path8136"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSb"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSb"

+       style="overflow:visible">

+      <path

+         id="path8139"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       id="marker18095"

+       orient="auto"

+       markerHeight="5.7450776"

+       markerWidth="4.6297302">

+      <g

+         id="g11064"

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

+        <path

+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"

+           id="path11050"

+           d="M 370,508.65625 C 369.13933,508.715 368.39056,509.27755 368.09375,510.09375 C 367.82399,510.83551 368.03605,511.62868 368.53125,512.21875 L 366.78125,512.21875 C 366.73884,512.21408 366.69882,512.22093 366.65625,512.21875 L 366.65625,516.59375 L 366.78125,516.59375 L 368.53125,516.59375 C 367.85229,517.45345 367.83424,518.70924 368.625,519.5 C 369.47591,520.35091 370.89909,520.35091 371.75,519.5 L 375.09375,516.125 C 375.12672,516.09552 375.15802,516.06422 375.1875,516.03125 C 375.21972,516.01191 375.25101,515.99105 375.28125,515.96875 C 375.28162,515.96839 375.49976,515.68796 375.5,515.6875 C 375.50005,515.68741 375.49338,515.64282 375.5,515.625 C 375.5011,515.62203 375.53002,515.62832 375.53125,515.625 C 375.57039,515.57293 375.58228,515.57321 375.625,515.5 C 375.76199,515.26524 375.79184,515.12809 375.78125,515.15625 C 375.81807,515.06473 375.79977,515.04374 375.8125,515 C 375.82311,514.98978 375.83353,514.97936 375.84375,514.96875 C 375.90379,514.74477 375.93181,514.45186 375.90625,514.1875 C 375.89266,513.98387 375.84739,513.88985 375.84375,513.875 C 375.84389,513.86458 375.84389,513.85417 375.84375,513.84375 C 375.86975,513.94071 375.85901,513.85978 375.75,513.59375 C 375.69753,513.46336 375.66014,513.37439 375.625,513.3125 C 375.57262,513.22275 375.49154,513.05015 375.28125,512.84375 L 371.75,509.3125 C 371.29355,508.82579 370.66491,508.60087 370,508.65625 z"

+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1" />

+        <path

+           sodipodi:nodetypes="cccscccsssssssscccsccc"

+           id="path11035"

+           d="M 366.65625,515.40625 L 371.28125,515.40625 L 369.46875,517.21875 C 369.0718,517.6157 369.0718,518.2593 369.46875,518.65625 C 369.8657,519.0532 370.5093,519.0532 370.90625,518.65625 L 374.34375,515.1875 L 374.4375,515.125 C 374.44343,515.11918 374.43171,515.09972 374.4375,515.09375 C 374.49291,515.03659 374.5526,514.97676 374.59375,514.90625 C 374.62239,514.85717 374.63663,514.80216 374.65625,514.75 C 374.66861,514.71928 374.67831,514.68783 374.6875,514.65625 C 374.71862,514.54015 374.73024,514.43132 374.71875,514.3125 C 374.71489,514.25466 374.70138,514.21285 374.6875,514.15625 C 374.6766,514.1156 374.67237,514.07059 374.65625,514.03125 C 374.63982,513.99042 374.61578,513.94505 374.59375,513.90625 C 374.5483,513.82838 374.50015,513.74899 374.4375,513.6875 L 370.90625,510.15625 C 370.69734,509.93349 370.39809,509.8184 370.09375,509.84375 C 369.69897,509.8707 369.35398,510.12813 369.21875,510.5 C 369.08351,510.87187 369.18349,511.28826 369.46875,511.5625 L 371.34375,513.40625 L 366.65625,513.40625"

+           style="fill:#49c2f1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+      </g>

+    </marker>

+    <marker

+       id="marker44971"

+       orient="auto"

+       markerHeight="5.7450781"

+       markerWidth="4.6297355">

+      <g

+         id="g18059"

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

+        <path

+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"

+           id="path18061"

+           d="M 370,508.65625 C 369.13933,508.715 368.39056,509.27755 368.09375,510.09375 C 367.82399,510.83551 368.03605,511.62868 368.53125,512.21875 L 366.78125,512.21875 C 366.73884,512.21408 366.69882,512.22093 366.65625,512.21875 L 366.65625,516.59375 L 366.78125,516.59375 L 368.53125,516.59375 C 367.85229,517.45345 367.83424,518.70924 368.625,519.5 C 369.47591,520.35091 370.89909,520.35091 371.75,519.5 L 375.09375,516.125 C 375.12672,516.09552 375.15802,516.06422 375.1875,516.03125 C 375.21972,516.01191 375.25101,515.99105 375.28125,515.96875 C 375.28162,515.96839 375.49976,515.68796 375.5,515.6875 C 375.50005,515.68741 375.49338,515.64282 375.5,515.625 C 375.5011,515.62203 375.53002,515.62832 375.53125,515.625 C 375.57039,515.57293 375.58228,515.57321 375.625,515.5 C 375.76199,515.26524 375.79184,515.12809 375.78125,515.15625 C 375.81807,515.06473 375.79977,515.04374 375.8125,515 C 375.82311,514.98978 375.83353,514.97936 375.84375,514.96875 C 375.90379,514.74477 375.93181,514.45186 375.90625,514.1875 C 375.89266,513.98387 375.84739,513.88985 375.84375,513.875 C 375.84389,513.86458 375.84389,513.85417 375.84375,513.84375 C 375.86975,513.94071 375.85901,513.85978 375.75,513.59375 C 375.69753,513.46336 375.66014,513.37439 375.625,513.3125 C 375.57262,513.22275 375.49154,513.05015 375.28125,512.84375 L 371.75,509.3125 C 371.29355,508.82579 370.66491,508.60087 370,508.65625 z"

+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1" />

+        <path

+           sodipodi:nodetypes="cccscccsssssssscccsccc"

+           id="path18063"

+           d="M 366.65625,515.40625 L 371.28125,515.40625 L 369.46875,517.21875 C 369.0718,517.6157 369.0718,518.2593 369.46875,518.65625 C 369.8657,519.0532 370.5093,519.0532 370.90625,518.65625 L 374.34375,515.1875 L 374.4375,515.125 C 374.44343,515.11918 374.43171,515.09972 374.4375,515.09375 C 374.49291,515.03659 374.5526,514.97676 374.59375,514.90625 C 374.62239,514.85717 374.63663,514.80216 374.65625,514.75 C 374.66861,514.71928 374.67831,514.68783 374.6875,514.65625 C 374.71862,514.54015 374.73024,514.43132 374.71875,514.3125 C 374.71489,514.25466 374.70138,514.21285 374.6875,514.15625 C 374.6766,514.1156 374.67237,514.07059 374.65625,514.03125 C 374.63982,513.99042 374.61578,513.94505 374.59375,513.90625 C 374.5483,513.82838 374.50015,513.74899 374.4375,513.6875 L 370.90625,510.15625 C 370.69734,509.93349 370.39809,509.8184 370.09375,509.84375 C 369.69897,509.8707 369.35398,510.12813 369.21875,510.5 C 369.08351,510.87187 369.18349,511.28826 369.46875,511.5625 L 371.34375,513.40625 L 366.65625,513.40625"

+           style="fill:#d9d9cd;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+      </g>

+    </marker>

+    <marker

+       id="marker52016"

+       orient="auto"

+       markerHeight="5.7450786"

+       markerWidth="4.6297302">

+      <g

+         id="g52010"

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

+        <path

+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"

+           id="path52012"

+           d="M 370,508.65625 C 369.13933,508.715 368.39056,509.27755 368.09375,510.09375 C 367.82399,510.83551 368.03605,511.62868 368.53125,512.21875 L 366.78125,512.21875 C 366.73884,512.21408 366.69882,512.22093 366.65625,512.21875 L 366.65625,516.59375 L 366.78125,516.59375 L 368.53125,516.59375 C 367.85229,517.45345 367.83424,518.70924 368.625,519.5 C 369.47591,520.35091 370.89909,520.35091 371.75,519.5 L 375.09375,516.125 C 375.12672,516.09552 375.15802,516.06422 375.1875,516.03125 C 375.21972,516.01191 375.25101,515.99105 375.28125,515.96875 C 375.28162,515.96839 375.49976,515.68796 375.5,515.6875 C 375.50005,515.68741 375.49338,515.64282 375.5,515.625 C 375.5011,515.62203 375.53002,515.62832 375.53125,515.625 C 375.57039,515.57293 375.58228,515.57321 375.625,515.5 C 375.76199,515.26524 375.79184,515.12809 375.78125,515.15625 C 375.81807,515.06473 375.79977,515.04374 375.8125,515 C 375.82311,514.98978 375.83353,514.97936 375.84375,514.96875 C 375.90379,514.74477 375.93181,514.45186 375.90625,514.1875 C 375.89266,513.98387 375.84739,513.88985 375.84375,513.875 C 375.84389,513.86458 375.84389,513.85417 375.84375,513.84375 C 375.86975,513.94071 375.85901,513.85978 375.75,513.59375 C 375.69753,513.46336 375.66014,513.37439 375.625,513.3125 C 375.57262,513.22275 375.49154,513.05015 375.28125,512.84375 L 371.75,509.3125 C 371.29355,508.82579 370.66491,508.60087 370,508.65625 z"

+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1" />

+        <path

+           sodipodi:nodetypes="cccscccsssssssscccsccc"

+           id="path52014"

+           d="M 366.65625,515.40625 L 371.28125,515.40625 L 369.46875,517.21875 C 369.0718,517.6157 369.0718,518.2593 369.46875,518.65625 C 369.8657,519.0532 370.5093,519.0532 370.90625,518.65625 L 374.34375,515.1875 L 374.4375,515.125 C 374.44343,515.11918 374.43171,515.09972 374.4375,515.09375 C 374.49291,515.03659 374.5526,514.97676 374.59375,514.90625 C 374.62239,514.85717 374.63663,514.80216 374.65625,514.75 C 374.66861,514.71928 374.67831,514.68783 374.6875,514.65625 C 374.71862,514.54015 374.73024,514.43132 374.71875,514.3125 C 374.71489,514.25466 374.70138,514.21285 374.6875,514.15625 C 374.6766,514.1156 374.67237,514.07059 374.65625,514.03125 C 374.63982,513.99042 374.61578,513.94505 374.59375,513.90625 C 374.5483,513.82838 374.50015,513.74899 374.4375,513.6875 L 370.90625,510.15625 C 370.69734,509.93349 370.39809,509.8184 370.09375,509.84375 C 369.69897,509.8707 369.35398,510.12813 369.21875,510.5 C 369.08351,510.87187 369.18349,511.28826 369.46875,511.5625 L 371.34375,513.40625 L 366.65625,513.40625"

+           style="fill:#f39300;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+      </g>

+    </marker>

+    <marker

+       id="marker64887"

+       orient="auto"

+       markerHeight="5.745079"

+       markerWidth="4.6297255">

+      <g

+         id="g64855"

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

+        <path

+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"

+           id="path64857"

+           d="M 370,508.65625 C 369.13933,508.715 368.39056,509.27755 368.09375,510.09375 C 367.82399,510.83551 368.03605,511.62868 368.53125,512.21875 L 366.78125,512.21875 C 366.73884,512.21408 366.69882,512.22093 366.65625,512.21875 L 366.65625,516.59375 L 366.78125,516.59375 L 368.53125,516.59375 C 367.85229,517.45345 367.83424,518.70924 368.625,519.5 C 369.47591,520.35091 370.89909,520.35091 371.75,519.5 L 375.09375,516.125 C 375.12672,516.09552 375.15802,516.06422 375.1875,516.03125 C 375.21972,516.01191 375.25101,515.99105 375.28125,515.96875 C 375.28162,515.96839 375.49976,515.68796 375.5,515.6875 C 375.50005,515.68741 375.49338,515.64282 375.5,515.625 C 375.5011,515.62203 375.53002,515.62832 375.53125,515.625 C 375.57039,515.57293 375.58228,515.57321 375.625,515.5 C 375.76199,515.26524 375.79184,515.12809 375.78125,515.15625 C 375.81807,515.06473 375.79977,515.04374 375.8125,515 C 375.82311,514.98978 375.83353,514.97936 375.84375,514.96875 C 375.90379,514.74477 375.93181,514.45186 375.90625,514.1875 C 375.89266,513.98387 375.84739,513.88985 375.84375,513.875 C 375.84389,513.86458 375.84389,513.85417 375.84375,513.84375 C 375.86975,513.94071 375.85901,513.85978 375.75,513.59375 C 375.69753,513.46336 375.66014,513.37439 375.625,513.3125 C 375.57262,513.22275 375.49154,513.05015 375.28125,512.84375 L 371.75,509.3125 C 371.29355,508.82579 370.66491,508.60087 370,508.65625 z"

+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1" />

+        <path

+           sodipodi:nodetypes="cccscccsssssssscccsccc"

+           id="path64859"

+           d="M 366.65625,515.40625 L 371.28125,515.40625 L 369.46875,517.21875 C 369.0718,517.6157 369.0718,518.2593 369.46875,518.65625 C 369.8657,519.0532 370.5093,519.0532 370.90625,518.65625 L 374.34375,515.1875 L 374.4375,515.125 C 374.44343,515.11918 374.43171,515.09972 374.4375,515.09375 C 374.49291,515.03659 374.5526,514.97676 374.59375,514.90625 C 374.62239,514.85717 374.63663,514.80216 374.65625,514.75 C 374.66861,514.71928 374.67831,514.68783 374.6875,514.65625 C 374.71862,514.54015 374.73024,514.43132 374.71875,514.3125 C 374.71489,514.25466 374.70138,514.21285 374.6875,514.15625 C 374.6766,514.1156 374.67237,514.07059 374.65625,514.03125 C 374.63982,513.99042 374.61578,513.94505 374.59375,513.90625 C 374.5483,513.82838 374.50015,513.74899 374.4375,513.6875 L 370.90625,510.15625 C 370.69734,509.93349 370.39809,509.8184 370.09375,509.84375 C 369.69897,509.8707 369.35398,510.12813 369.21875,510.5 C 369.08351,510.87187 369.18349,511.28826 369.46875,511.5625 L 371.34375,513.40625 L 366.65625,513.40625"

+           style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+      </g>

+    </marker>

+    <marker

+       id="marker4057"

+       orient="auto"

+       markerHeight="5.745079"

+       markerWidth="4.6297302">

+      <g

+         id="g51986"

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

+        <path

+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"

+           id="path51988"

+           d="M 370,508.65625 C 369.13933,508.715 368.39056,509.27755 368.09375,510.09375 C 367.82399,510.83551 368.03605,511.62868 368.53125,512.21875 L 366.78125,512.21875 C 366.73884,512.21408 366.69882,512.22093 366.65625,512.21875 L 366.65625,516.59375 L 366.78125,516.59375 L 368.53125,516.59375 C 367.85229,517.45345 367.83424,518.70924 368.625,519.5 C 369.47591,520.35091 370.89909,520.35091 371.75,519.5 L 375.09375,516.125 C 375.12672,516.09552 375.15802,516.06422 375.1875,516.03125 C 375.21972,516.01191 375.25101,515.99105 375.28125,515.96875 C 375.28162,515.96839 375.49976,515.68796 375.5,515.6875 C 375.50005,515.68741 375.49338,515.64282 375.5,515.625 C 375.5011,515.62203 375.53002,515.62832 375.53125,515.625 C 375.57039,515.57293 375.58228,515.57321 375.625,515.5 C 375.76199,515.26524 375.79184,515.12809 375.78125,515.15625 C 375.81807,515.06473 375.79977,515.04374 375.8125,515 C 375.82311,514.98978 375.83353,514.97936 375.84375,514.96875 C 375.90379,514.74477 375.93181,514.45186 375.90625,514.1875 C 375.89266,513.98387 375.84739,513.88985 375.84375,513.875 C 375.84389,513.86458 375.84389,513.85417 375.84375,513.84375 C 375.86975,513.94071 375.85901,513.85978 375.75,513.59375 C 375.69753,513.46336 375.66014,513.37439 375.625,513.3125 C 375.57262,513.22275 375.49154,513.05015 375.28125,512.84375 L 371.75,509.3125 C 371.29355,508.82579 370.66491,508.60087 370,508.65625 z"

+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1" />

+        <path

+           sodipodi:nodetypes="cccscccsssssssscccsccc"

+           id="path51990"

+           d="M 366.65625,515.40625 L 371.28125,515.40625 L 369.46875,517.21875 C 369.0718,517.6157 369.0718,518.2593 369.46875,518.65625 C 369.8657,519.0532 370.5093,519.0532 370.90625,518.65625 L 374.34375,515.1875 L 374.4375,515.125 C 374.44343,515.11918 374.43171,515.09972 374.4375,515.09375 C 374.49291,515.03659 374.5526,514.97676 374.59375,514.90625 C 374.62239,514.85717 374.63663,514.80216 374.65625,514.75 C 374.66861,514.71928 374.67831,514.68783 374.6875,514.65625 C 374.71862,514.54015 374.73024,514.43132 374.71875,514.3125 C 374.71489,514.25466 374.70138,514.21285 374.6875,514.15625 C 374.6766,514.1156 374.67237,514.07059 374.65625,514.03125 C 374.63982,513.99042 374.61578,513.94505 374.59375,513.90625 C 374.5483,513.82838 374.50015,513.74899 374.4375,513.6875 L 370.90625,510.15625 C 370.69734,509.93349 370.39809,509.8184 370.09375,509.84375 C 369.69897,509.8707 369.35398,510.12813 369.21875,510.5 C 369.08351,510.87187 369.18349,511.28826 369.46875,511.5625 L 371.34375,513.40625 L 366.65625,513.40625"

+           style="fill:#49c2f1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+      </g>

+    </marker>

+    <marker

+       id="marker72805"

+       orient="auto"

+       markerHeight="4.5568175"

+       markerWidth="4.0334239">

+      <path

+         sodipodi:nodetypes="cccscccsssssssscccsccc"

+         id="path18057"

+         d="M -2.0167119,0.50456824 L 0.29578813,0.50456824 L -0.61046187,1.4108182 C -0.80893187,1.6092982 -0.80893187,1.9310982 -0.61046187,2.1295682 C -0.41198187,2.3280482 -0.090181874,2.3280482 0.10828813,2.1295682 L 1.8270381,0.39519824 L 1.8739181,0.36394824 C 1.8768781,0.36103824 1.8710181,0.35130824 1.8739181,0.34831824 C 1.9016181,0.31973824 1.9314681,0.28982824 1.9520381,0.25456824 C 1.9663581,0.23002824 1.9734781,0.20252824 1.9832881,0.17644824 C 1.9894681,0.16108824 1.9943181,0.14535824 1.9989181,0.12956824 C 2.0144781,0.07151824 2.0202881,0.01710824 2.0145381,-0.04230176 C 2.0126081,-0.07122176 2.0058581,-0.09213176 1.9989181,-0.12043176 C 1.9934681,-0.14075176 1.9913481,-0.16326176 1.9832881,-0.18293176 C 1.9750781,-0.20334176 1.9630581,-0.22603176 1.9520381,-0.24543176 C 1.9293181,-0.28436176 1.9052381,-0.32406176 1.8739181,-0.35480176 L 0.10828813,-2.1204318 C 0.003838126,-2.2318118 -0.14579187,-2.2893518 -0.29796187,-2.2766818 C -0.49535187,-2.2632018 -0.66784187,-2.1344918 -0.73546187,-1.9485518 C -0.80308187,-1.7626218 -0.75309187,-1.5544218 -0.61046187,-1.4173018 L 0.32703813,-0.49543176 L -2.0167119,-0.49543176"

+         style="fill:#f39300;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+    </marker>

+    <marker

+       id="marker72808"

+       orient="auto"

+       markerHeight="4.5568123"

+       markerWidth="4.0334177">

+      <path

+         sodipodi:nodetypes="cccscccsssssssscccsccc"

+         id="path72801"

+         d="M -2.016709,0.50457301 L 0.29579105,0.50457301 L -0.61045895,1.410823 C -0.80893895,1.609293 -0.80893895,1.931093 -0.61045895,2.129573 C -0.41198895,2.328043 -0.090188953,2.328043 0.10829105,2.129573 L 1.827041,0.39519301 L 1.873911,0.36394301 C 1.876881,0.36103301 1.871021,0.35130301 1.873911,0.34832301 C 1.901621,0.31974301 1.931461,0.28982301 1.952041,0.25457301 C 1.966361,0.23003301 1.973481,0.20252301 1.983291,0.17644301 C 1.989471,0.16108301 1.994321,0.14536301 1.998911,0.12957301 C 2.014471,0.071523013 2.020281,0.017103013 2.014541,-0.042306987 C 2.012611,-0.071226987 2.005851,-0.092126987 1.998911,-0.12042699 C 1.993461,-0.14075699 1.991351,-0.16325699 1.983291,-0.18292699 C 1.975071,-0.20334699 1.963051,-0.22602699 1.952041,-0.24542699 C 1.929311,-0.28436699 1.905241,-0.32405699 1.873911,-0.35480699 L 0.10829105,-2.120427 C 0.003831047,-2.231807 -0.14578895,-2.289357 -0.29795895,-2.276677 C -0.49534895,-2.263207 -0.66784895,-2.134487 -0.73545895,-1.948557 C -0.80307895,-1.762617 -0.75308895,-1.554427 -0.61045895,-1.417307 L 0.32704105,-0.49542699 L -2.016709,-0.49542699"

+         style="fill:#d9d9cd;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="DotSuN"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="DotSuN">

+      <path

+         transform="matrix(0.2,0,0,0.2,1.48,0.2)"

+         style="fill:#f39300;fill-rule:evenodd;stroke:#f39300;stroke-width:1pt;marker-start:none;marker-end:none"

+         d="M -2.5,-1 C -2.5,1.76 -4.74,4 -7.5,4 C -10.26,4 -12.5,1.76 -12.5,-1 C -12.5,-3.76 -10.26,-6 -7.5,-6 C -4.74,-6 -2.5,-3.76 -2.5,-1 z"

+         id="path81580" />

+    </marker>

+    <radialGradient

+       inkscape:collect="always"

+       xlink:href="#linearGradient4410"

+       id="radialGradient4181"

+       cx="-61.679379"

+       cy="-342.53549"

+       fx="-61.679379"

+       fy="-342.53549"

+       r="240.94489"

+       gradientTransform="matrix(1,-3.7478987e-8,1.1023234e-8,0.2941177,5.335063e-6,-121.8624)"

+       gradientUnits="userSpaceOnUse" />

+  </defs>

+  <metadata

+     id="metadata2480">

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

+     id="layer1"

+     inkscape:groupmode="layer"

+     inkscape:label="Layer 1">

+    <rect

+       style="opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.83464575;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:2.83464575, 2.83464575;stroke-dashoffset:3.68503947;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+       id="rect4436"

+       width="499.60629"

+       height="237.40158"

+       x="198.4252"

+       y="322.44092"

+       ry="3.7880721" />

+    <g

+       transform="translate(204.60668,263.00299)"

+       id="g2802">

+      <rect

+         ry="3.7880721"

+         y="208.55002"

+         x="172.42705"

+         height="35.93816"

+         width="110.42418"

+         id="rect2804"

+         style="opacity:1;fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         transform="translate(227.07111,229.7651)"

+         id="flowRoot2806"

+         style="font-size:12px;font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:100%;writing-mode:lr-tb;text-anchor:middle;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold Italic"

+         xml:space="preserve"><flowRegion

+           id="flowRegion2808" /><flowPara

+           id="flowPara2812">AbstractField</flowPara></flowRoot>    </g>

+    <path

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

+       d="M 502.24448,489.52209 L 487.45791,489.52209"

+       id="path3832"

+       inkscape:connector-type="polyline"

+       inkscape:connection-end="#g2802"

+       inkscape:connection-start="#g3808" />

+    <g

+       transform="translate(488.07123,234.404)"

+       id="g3808">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect3810"

+         width="77.952736"

+         height="35.433075"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot3812"

+         transform="translate(52.923584,259.59409)"><flowRegion

+           id="flowRegion3814" /><flowPara

+           id="flowPara3818">Button</flowPara></flowRoot>    </g>

+    <path

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

+       d="M 594.37048,489.58243 L 580.19721,489.56634"

+       id="path3834"

+       inkscape:connector-type="polyline"

+       inkscape:connection-start="#g3820"

+       inkscape:connection-end="#g3808" />

+    <g

+       transform="translate(580.19723,234.5086)"

+       id="g3820">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect3822"

+         width="77.952736"

+         height="35.433075"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot3824"

+         transform="translate(54.586428,258.88009)"><flowRegion

+           id="flowRegion3826" /><flowPara

+           id="flowPara3830">CheckBox</flowPara></flowRoot>    </g>

+    <g

+       transform="translate(488.57632,283.75775)"

+       id="g3836">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect3838"

+         width="77.952736"

+         height="35.433075"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot3840"

+         transform="translate(53.349584,258.36409)"><flowRegion

+           id="flowRegion3842" /><flowPara

+           id="flowPara3846">TextField</flowPara></flowRoot>    </g>

+    <path

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

+       d="M 594.16798,539.05919 L 580.7023,539.01211"

+       id="path3866"

+       inkscape:connector-type="polyline"

+       inkscape:connection-start="#g3848"

+       inkscape:connection-end="#g3836" />

+    <g

+       transform="translate(583.33557,296.5446)"

+       id="g3848">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect3850"

+         width="99.41507"

+         height="35.433071"

+         x="10.832414"

+         y="224.97185"

+         ry="3.7880721" />

+      <text

+         xml:space="preserve"

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

+         x="59.819889"

+         y="246.23169"

+         id="text3860"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan3862"

+           x="59.819889"

+           y="246.23169">RichTextArea</tspan></text>

+    </g>

+    <path

+       inkscape:connection-end="#g2802"

+       inkscape:connector-type="polyline"

+       id="path2641"

+       d="M 432.28346,552.75588 L 432.22373,507.49117"

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

+       sodipodi:nodetypes="cc" />

+    <path

+       sodipodi:nodetypes="cc"

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

+       d="M 460.62992,552.75588 L 460.82677,506.98608"

+       id="path2679"

+       inkscape:connector-type="polyline" />

+    <g

+       id="g5008"

+       transform="translate(316.15294,225.23928)">

+      <rect

+         ry="3.7880721"

+         y="238.7607"

+         x="204.7132"

+         height="14.173233"

+         width="67.322838"

+         id="rect5010"

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.77165353;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot5012"

+         transform="translate(24.523539,102.7123)"><flowRegion

+           id="flowRegion5014"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use5016"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara5018">ClickEvent</flowPara></flowRoot>    </g>

+    <g

+       id="g5020"

+       transform="translate(316.46063,210.7839)">

+      <rect

+         ry="3.7880721"

+         y="238.7607"

+         x="204.7132"

+         height="14.173233"

+         width="67.322838"

+         id="rect5022"

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.77165353;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot5024"

+         transform="translate(24.523539,102.7123)"><flowRegion

+           id="flowRegion5026"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use5028"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara5030">ClickListener</flowPara></flowRoot>    </g>

+    <path

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

+       d="M 407.48031,552.75588 L 406.8395,508.04991"

+       id="path8616"

+       inkscape:connector-type="polyline"

+       sodipodi:nodetypes="cc" />

+    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 503.34646,538.87584 L 460.82677,538.87584"

+       id="path49768"

+       inkscape:connector-type="polyline" />

+    <g

+       transform="translate(486.87623,708.04121)"

+       id="g6776"

+       style="fill-opacity:1;fill:url(#radialGradient4181)">

+      <rect

+         style="opacity:1;fill:url(#radialGradient4181);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.83464575;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:2.83464575, 2.83464575;stroke-dashoffset:3.68503947;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect3392"

+         width="481.88977"

+         height="127.55907"

+         x="-274.2778"

+         y="-275.75778"

+         ry="3.7880721" />

+    </g>

+    <g

+       id="g2870"

+       transform="translate(177.07986,143.37191)">

+      <rect

+         ry="3.7880721"

+         y="181.8969"

+         x="205.84985"

+         height="35.433067"

+         width="99.212601"

+         id="rect2872"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot2874"

+         transform="translate(41.217308,55.775189)"><flowRegion

+           id="flowRegion2876"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use2878"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara2880">Property</flowPara></flowRoot>    </g>

+    <g

+       id="g2886"

+       transform="translate(157.67586,119.82696)">

+      <rect

+         ry="3.7880721"

+         y="235.59096"

+         x="182.48161"

+         height="17.716534"

+         width="49.6063"

+         id="rect2888"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.77165353;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:9px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot2890"

+         transform="translate(-7.1061187,101.2329)"><flowRegion

+           id="flowRegion2892"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use2894"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara2896">Editor</flowPara></flowRoot>    </g>

+    <g

+       id="g3740"

+       transform="translate(292.32154,119.82696)">

+      <rect

+         ry="3.7880721"

+         y="235.59096"

+         x="182.48161"

+         height="17.716536"

+         width="102.75591"

+         id="rect3742"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.77165353;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:9px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot3744"

+         transform="translate(19.725317,101.70214)"><flowRegion

+           id="flowRegion3746"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use3748"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara3750">ValueChangeListener</flowPara></flowRoot>    </g>

+    <path

+       inkscape:connector-type="polyline"

+       id="path3776"

+       d="M 411.42023,403.72853 L 376.4354,374.02028"

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

+       inkscape:connection-end="#g2886"

+       inkscape:connection-start="#g2854" />

+    <flowRoot

+       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+       id="flowRoot2485"

+       xml:space="preserve"><flowRegion

+         id="flowRegion2487"><rect

+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+           y="238.07646"

+           x="262.85715"

+           height="120"

+           width="184.28572"

+           id="rect2489" /></flowRegion><flowPara

+         id="flowPara2491" /></flowRoot>    <g

+       transform="translate(-3.5714286,23.214286)"

+       id="g3178" />

+    <g

+       id="g2492"

+       transform="translate(77.952761,177.16534)">

+      <rect

+         ry="3.7880721"

+         y="230.31496"

+         x="163.1725"

+         height="35.433071"

+         width="99.032219"

+         id="rect4654"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot4664"

+         transform="translate(-2.7125132,103.67242)"><flowRegion

+           id="flowRegion4666"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use4668"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara4670">Component</flowPara></flowRoot>    </g>

+    <path

+       inkscape:connector-type="polyline"

+       id="path2866"

+       d="M 389.76378,422.57131 L 340.15748,423.88527"

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

+       inkscape:connection-start="#g2854"

+       inkscape:connection-end="#g2492" />

+    <path

+       inkscape:connection-end="#g2870"

+       inkscape:connector-type="polyline"

+       id="path2882"

+       d="M 432.34049,403.72853 L 432.47899,360.70187"

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

+       inkscape:connection-start="#g2854" />

+    <path

+       inkscape:connection-start="#g2854"

+       inkscape:connection-end="#g3740"

+       inkscape:connector-type="polyline"

+       id="path5048"

+       d="M 461.38218,403.72853 L 510.17682,374.02028"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#d9d9cd;stroke-width:2.83464575;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:url(#marker44971);stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline" />

+    <g

+       id="g5034"

+       transform="translate(123.70837,158.11296)">

+      <rect

+         ry="3.7880721"

+         y="235.59096"

+         x="182.48161"

+         height="17.716537"

+         width="62.31395"

+         id="rect5036"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.77165353;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:9px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot5038"

+         transform="translate(-0.8622551,101.2329)"><flowRegion

+           id="flowRegion5040"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use5042"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara5044">Focusable</flowPara></flowRoot>    </g>

+    <path

+       inkscape:connection-end="#g5034"

+       inkscape:connection-start="#g2854"

+       sodipodi:nodetypes="cc"

+       inkscape:connector-type="polyline"

+       id="path5050"

+       d="M 389.76378,412.9879 L 369.38976,408.9355"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#d9d9cd;stroke-width:2.83464575;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:url(#marker44971);stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline" />

+    <g

+       id="g2854"

+       transform="translate(223.64137,170.66298)">

+      <rect

+         ry="3.7880721"

+         y="233.06555"

+         x="166.12241"

+         height="35.433075"

+         width="85.039375"

+         id="rect2856"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot2858"

+         transform="translate(-6.2480473,106.19782)"><flowRegion

+           id="flowRegion2860"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use2862"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara2864">Field</flowPara></flowRoot>    </g>

+    <path

+       inkscape:connection-end="#g2854"

+       inkscape:connection-start="#g2802"

+       inkscape:connector-type="polyline"

+       id="path2868"

+       d="M 432.25575,471.55301 L 432.27367,439.16161"

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

+    <g

+       id="g3752"

+       transform="translate(292.32154,100.30776)">

+      <rect

+         ry="3.7880721"

+         y="235.59096"

+         x="182.48161"

+         height="17.716536"

+         width="102.75591"

+         id="rect3754"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.77165353;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:9px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot3756"

+         transform="translate(19.725317,101.70214)"><flowRegion

+           id="flowRegion3758"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use3760"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara3762">ValueChangeEvent</flowPara></flowRoot>    </g>

+    <g

+       id="g3764"

+       transform="translate(157.67587,100.30776)">

+      <rect

+         ry="3.7880721"

+         y="235.59096"

+         x="182.48161"

+         height="17.716534"

+         width="49.6063"

+         id="rect3766"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.77165353;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:9px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot3768"

+         transform="translate(-7.1061187,101.2329)"><flowRegion

+           id="flowRegion3770"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use3772"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara3774">Viewer</flowPara></flowRoot>    </g>

+    <g

+       id="g8538"

+       transform="translate(18.028345,180.41896)">

+      <rect

+         ry="3.7880721"

+         y="235.59096"

+         x="182.48161"

+         height="17.716534"

+         width="49.6063"

+         id="rect8540"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.77165353;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:9px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot8542"

+         transform="translate(-7.1061187,101.2329)"><flowRegion

+           id="flowRegion8544"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use8546"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara8548">Event</flowPara></flowRoot>    </g>

+    <flowRoot

+       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"

+       id="flowRoot8724"

+       xml:space="preserve"><flowRegion

+         id="flowRegion8726"><rect

+           style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"

+           y="752.14441"

+           x="39.286312"

+           height="22.868153"

+           width="29.904507"

+           id="rect8728" /></flowRegion><flowPara

+         id="flowPara8730" /></flowRoot>    <g

+       transform="matrix(0.5,0,0,0.5,103.34299,0.7940752)"

+       id="g18053" />

+    <g

+       id="g80473"

+       transform="translate(18.601067,201.51847)">

+      <rect

+         ry="3.7880721"

+         y="235.59096"

+         x="182.48161"

+         height="17.716534"

+         width="49.6063"

+         id="rect80475"

+         style="opacity:1;fill:#d9d9cd;fill-opacity:1;fill-rule:nonzero;stroke:#ffffff;stroke-width:1.77165353;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         xml:space="preserve"

+         style="font-size:9px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:center;line-height:125%;writing-mode:lr-tb;text-anchor:middle;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+         id="flowRoot80477"

+         transform="translate(-7.1061187,101.2329)"><flowRegion

+           id="flowRegion80479"><use

+             transform="translate(1.467046,-91.03536)"

+             x="0"

+             y="0"

+             xlink:href="#rect4654"

+             id="use80481"

+             width="744.09448"

+             height="1052.3622" /></flowRegion><flowPara

+           id="flowPara80483">Listener</flowPara></flowRoot>    </g>

+  </g>

+</svg>

diff --git a/documentation/components/original-drawings/slider-example1.svg b/documentation/components/original-drawings/slider-example1.svg
new file mode 100644
index 0000000000..a624789c13
--- /dev/null
+++ b/documentation/components/original-drawings/slider-example1.svg
@@ -0,0 +1,127 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>

+<!-- Created with Inkscape (http://www.inkscape.org/) -->

+

+<svg

+   xmlns:dc="http://purl.org/dc/elements/1.1/"

+   xmlns:cc="http://creativecommons.org/ns#"

+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

+   xmlns:svg="http://www.w3.org/2000/svg"

+   xmlns="http://www.w3.org/2000/svg"

+   xmlns:xlink="http://www.w3.org/1999/xlink"

+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"

+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"

+   width="210mm"

+   height="297mm"

+   id="svg1901"

+   sodipodi:version="0.32"

+   inkscape:version="0.48.4 r9939"

+   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.979899"

+     inkscape:cx="258.73755"

+     inkscape:cy="889.25792"

+     inkscape:document-units="px"

+     inkscape:current-layer="layer1"

+     gridtolerance="10000"

+     inkscape:window-width="877"

+     inkscape:window-height="739"

+     inkscape:window-x="1039"

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

+    <image

+       y="56.505013"

+       x="74.071419"

+       id="image2463"

+       height="236"

+       width="249"

+       sodipodi:absref="/home/magi/itmill/book-7/manual/img/components/slider-orig.png"

+       xlink:href="/home/magi/itmill/book-7/manual/img/components/slider-orig.png" />

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

diff --git a/documentation/components/original-drawings/textfield-diagram.svg b/documentation/components/original-drawings/textfield-diagram.svg
new file mode 100644
index 0000000000..f732bcb7de
--- /dev/null
+++ b/documentation/components/original-drawings/textfield-diagram.svg
@@ -0,0 +1,868 @@
+<?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="744.09448"

+   height="1052.3622"

+   id="svg2475"

+   sodipodi:version="0.32"

+   inkscape:version="0.46"

+   sodipodi:docname="textfield-diagram.svg"

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

+   inkscape:export-filename="/home/magi/itmill/doc/cheatsheet/vaadin-cheatsheet.png"

+   inkscape:export-xdpi="300.01001"

+   inkscape:export-ydpi="300.01001"

+   version="1.0">

+  <sodipodi:namedview

+     id="base"

+     pagecolor="#ffffff"

+     bordercolor="#666666"

+     borderopacity="1.0"

+     gridtolerance="10000"

+     guidetolerance="10"

+     objecttolerance="10"

+     inkscape:pageopacity="0.0"

+     inkscape:pageshadow="2"

+     inkscape:zoom="2.4"

+     inkscape:cx="519.84496"

+     inkscape:cy="506.2857"

+     inkscape:document-units="mm"

+     inkscape:current-layer="layer1"

+     showgrid="true"

+     inkscape:window-width="1680"

+     inkscape:window-height="1026"

+     inkscape:window-x="1280"

+     inkscape:window-y="0"

+     inkscape:snap-nodes="true"

+     inkscape:snap-bbox="true"

+     units="mm"

+     inkscape:snap-global="false"

+     showguides="true"

+     inkscape:guide-bbox="true">

+    <inkscape:grid

+       spacingy="1mm"

+       spacingx="1mm"

+       empspacing="5"

+       units="mm"

+       enabled="true"

+       visible="true"

+       id="grid4674"

+       type="xygrid"

+       dotted="false" />

+  </sodipodi:namedview>

+  <defs

+     id="defs2477">

+    <marker

+       inkscape:stockid="Arrow1Lstart"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="Arrow1Lstart"

+       style="overflow:visible">

+      <path

+         id="path5210"

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

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

+         transform="matrix(0.8,0,0,0.8,10,0)" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="DotS"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="DotS">

+      <path

+         transform="matrix(0.2,0,0,0.2,1.48,0.2)"

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

+         d="M -2.5,-1 C -2.5,1.76 -4.74,4 -7.5,4 C -10.26,4 -12.5,1.76 -12.5,-1 C -12.5,-3.76 -10.26,-6 -7.5,-6 C -4.74,-6 -2.5,-3.76 -2.5,-1 z"

+         id="path3636" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutS"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutS"

+       style="overflow:visible">

+      <path

+         id="path3717"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <inkscape:path-effect

+       copytype="single_stretched"

+       pattern="M 349.202,225.086 L 405.895,331.386 L 370.462,338.472 "

+       prop_scale="1"

+       id="path-effect2503"

+       effect="skeletal" />

+    <inkscape:path-effect

+       prop_scale="1"

+       id="path-effect2499"

+       effect="skeletal" />

+    <inkscape:path-effect

+       pattern-nodetypes="cc"

+       pattern="M 432.28346,272.83462 L 403.93701,216.14171"

+       prop_scale="1"

+       id="path-effect2497"

+       effect="skeletal" />

+    <marker

+       style="overflow:visible"

+       id="Arrow1Send"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="Arrow1Send">

+      <path

+         transform="matrix(-0.2,0,0,-0.2,-1.2,0)"

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

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

+         id="path3641" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="Arrow1Lend"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="Arrow1Lend">

+      <path

+         transform="matrix(-0.8,0,0,-0.8,-10,0)"

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

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

+         id="path3629" />

+    </marker>

+    <inkscape:perspective

+       sodipodi:type="inkscape:persp3d"

+       inkscape:vp_x="0 : 526.18109 : 1"

+       inkscape:vp_y="0 : 1000 : 0"

+       inkscape:vp_z="744.09448 : 526.18109 : 1"

+       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"

+       id="perspective3487" />

+    <marker

+       style="overflow:visible"

+       id="Arrow2Sendp"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="Arrow2Sendp">

+      <path

+         transform="matrix(-0.3,0,0,-0.3,0.69,0)"

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

+         style="font-size:12px;fill:#f39300;fill-rule:evenodd;stroke:#f39300;stroke-width:0.625;stroke-linejoin:round"

+         id="path28139" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="TriangleOutSK"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="TriangleOutSK">

+      <path

+         transform="scale(0.2,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

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

+         id="path36611" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="TriangleOutSH"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="TriangleOutSH">

+      <path

+         transform="scale(0.2,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

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

+         id="path36614" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="TriangleOutSA"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="TriangleOutSA">

+      <path

+         transform="scale(0.2,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

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

+         id="path36617" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="TriangleOutSKF"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="TriangleOutSKF">

+      <path

+         transform="scale(0.2,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

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

+         id="path36620" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="TriangleOutS9"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="TriangleOutS9">

+      <path

+         transform="scale(0.2,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

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

+         id="path36623" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="Arrow2SendpA"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="Arrow2SendpA">

+      <path

+         transform="matrix(-0.3,0,0,-0.3,0.69,0)"

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

+         style="font-size:12px;fill:#d9d9cd;fill-rule:evenodd;stroke:#d9d9cd;stroke-width:0.625;stroke-linejoin:round"

+         id="path3396" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="Arrow2Sendpg"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="Arrow2Sendpg">

+      <path

+         transform="matrix(-0.3,0,0,-0.3,0.69,0)"

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

+         style="font-size:12px;fill:#fcc988;fill-rule:evenodd;stroke:#fcc988;stroke-width:0.625;stroke-linejoin:round"

+         id="path3360" />

+    </marker>

+    <filter

+       id="filter2780"

+       inkscape:label="White Halo"

+       width="1.1"

+       height="1.1">

+      <feMorphology

+         id="feMorphology2782"

+         operator="dilate"

+         radius="3"

+         result="result0" />

+      <feFlood

+         id="feFlood2786"

+         flood-color="rgb(255,255,255)"

+         flood-opacity="1"

+         in="result0"

+         result="result3" />

+      <feComposite

+         id="feComposite2623"

+         in="result3"

+         in2="result0"

+         operator="in"

+         result="result4" />

+      <feMerge

+         id="feMerge2629">

+        <feMergeNode

+           inkscape:collect="always"

+           id="feMergeNode2631"

+           in="result4" />

+        <feMergeNode

+           inkscape:collect="always"

+           id="feMergeNode2633"

+           in="SourceGraphic" />

+      </feMerge>

+    </filter>

+    <marker

+       inkscape:stockid="TriangleOutSn"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSn"

+       style="overflow:visible">

+      <path

+         id="path4441"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutS9F"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutS9F"

+       style="overflow:visible">

+      <path

+         id="path4444"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSI"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSI"

+       style="overflow:visible">

+      <path

+         id="path4447"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSO"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSO"

+       style="overflow:visible">

+      <path

+         id="path4450"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSW"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSW"

+       style="overflow:visible">

+      <path

+         id="path4453"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSB"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSB"

+       style="overflow:visible">

+      <path

+         id="path4456"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSZ"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSZ"

+       style="overflow:visible">

+      <path

+         id="path4459"

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

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

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="DotSq"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="DotSq">

+      <path

+         transform="matrix(0.2,0,0,0.2,1.48,0.2)"

+         style="fill:#d9d9cd;fill-rule:evenodd;stroke:#d9d9cd;stroke-width:1pt;marker-start:none;marker-end:none"

+         d="M -2.5,-1 C -2.5,1.76 -4.74,4 -7.5,4 C -10.26,4 -12.5,1.76 -12.5,-1 C -12.5,-3.76 -10.26,-6 -7.5,-6 C -4.74,-6 -2.5,-3.76 -2.5,-1 z"

+         id="path5853" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSBO"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSBO"

+       style="overflow:visible">

+      <path

+         id="path7501"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="DotSu"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="DotSu">

+      <path

+         transform="matrix(0.2,0,0,0.2,1.48,0.2)"

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none;marker-end:none"

+         d="M -2.5,-1 C -2.5,1.76 -4.74,4 -7.5,4 C -10.26,4 -12.5,1.76 -12.5,-1 C -12.5,-3.76 -10.26,-6 -7.5,-6 C -4.74,-6 -2.5,-3.76 -2.5,-1 z"

+         id="path9463" />

+    </marker>

+    <filter

+       height="1.1"

+       width="1.1"

+       inkscape:label="Black Halo"

+       id="filter10694">

+      <feMorphology

+         result="result0"

+         radius="3"

+         operator="dilate"

+         id="feMorphology10696" />

+      <feFlood

+         result="result3"

+         in="result0"

+         flood-opacity="1"

+         flood-color="rgb(0,0,0)"

+         id="feFlood10698" />

+      <feComposite

+         result="result4"

+         operator="in"

+         in2="result0"

+         in="result3"

+         id="feComposite10700" />

+      <feMerge

+         id="feMerge10702">

+        <feMergeNode

+           in="result4"

+           id="feMergeNode10704"

+           inkscape:collect="always" />

+        <feMergeNode

+           in="SourceGraphic"

+           id="feMergeNode10706"

+           inkscape:collect="always" />

+      </feMerge>

+    </filter>

+    <marker

+       inkscape:stockid="TriangleOutSu"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSu"

+       style="overflow:visible">

+      <path

+         id="path8127"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSI8"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSI8"

+       style="overflow:visible">

+      <path

+         id="path8130"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSr"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSr"

+       style="overflow:visible">

+      <path

+         id="path8133"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSM"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSM"

+       style="overflow:visible">

+      <path

+         id="path8136"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       inkscape:stockid="TriangleOutSb"

+       orient="auto"

+       refY="0"

+       refX="0"

+       id="TriangleOutSb"

+       style="overflow:visible">

+      <path

+         id="path8139"

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

+         style="fill:#49c2f1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:1pt;marker-start:none"

+         transform="scale(0.2,0.2)" />

+    </marker>

+    <marker

+       id="marker18095"

+       orient="auto"

+       markerHeight="5.7450776"

+       markerWidth="4.6297302">

+      <g

+         id="g11064"

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

+        <path

+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"

+           id="path11050"

+           d="M 370,508.65625 C 369.13933,508.715 368.39056,509.27755 368.09375,510.09375 C 367.82399,510.83551 368.03605,511.62868 368.53125,512.21875 L 366.78125,512.21875 C 366.73884,512.21408 366.69882,512.22093 366.65625,512.21875 L 366.65625,516.59375 L 366.78125,516.59375 L 368.53125,516.59375 C 367.85229,517.45345 367.83424,518.70924 368.625,519.5 C 369.47591,520.35091 370.89909,520.35091 371.75,519.5 L 375.09375,516.125 C 375.12672,516.09552 375.15802,516.06422 375.1875,516.03125 C 375.21972,516.01191 375.25101,515.99105 375.28125,515.96875 C 375.28162,515.96839 375.49976,515.68796 375.5,515.6875 C 375.50005,515.68741 375.49338,515.64282 375.5,515.625 C 375.5011,515.62203 375.53002,515.62832 375.53125,515.625 C 375.57039,515.57293 375.58228,515.57321 375.625,515.5 C 375.76199,515.26524 375.79184,515.12809 375.78125,515.15625 C 375.81807,515.06473 375.79977,515.04374 375.8125,515 C 375.82311,514.98978 375.83353,514.97936 375.84375,514.96875 C 375.90379,514.74477 375.93181,514.45186 375.90625,514.1875 C 375.89266,513.98387 375.84739,513.88985 375.84375,513.875 C 375.84389,513.86458 375.84389,513.85417 375.84375,513.84375 C 375.86975,513.94071 375.85901,513.85978 375.75,513.59375 C 375.69753,513.46336 375.66014,513.37439 375.625,513.3125 C 375.57262,513.22275 375.49154,513.05015 375.28125,512.84375 L 371.75,509.3125 C 371.29355,508.82579 370.66491,508.60087 370,508.65625 z"

+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1" />

+        <path

+           sodipodi:nodetypes="cccscccsssssssscccsccc"

+           id="path11035"

+           d="M 366.65625,515.40625 L 371.28125,515.40625 L 369.46875,517.21875 C 369.0718,517.6157 369.0718,518.2593 369.46875,518.65625 C 369.8657,519.0532 370.5093,519.0532 370.90625,518.65625 L 374.34375,515.1875 L 374.4375,515.125 C 374.44343,515.11918 374.43171,515.09972 374.4375,515.09375 C 374.49291,515.03659 374.5526,514.97676 374.59375,514.90625 C 374.62239,514.85717 374.63663,514.80216 374.65625,514.75 C 374.66861,514.71928 374.67831,514.68783 374.6875,514.65625 C 374.71862,514.54015 374.73024,514.43132 374.71875,514.3125 C 374.71489,514.25466 374.70138,514.21285 374.6875,514.15625 C 374.6766,514.1156 374.67237,514.07059 374.65625,514.03125 C 374.63982,513.99042 374.61578,513.94505 374.59375,513.90625 C 374.5483,513.82838 374.50015,513.74899 374.4375,513.6875 L 370.90625,510.15625 C 370.69734,509.93349 370.39809,509.8184 370.09375,509.84375 C 369.69897,509.8707 369.35398,510.12813 369.21875,510.5 C 369.08351,510.87187 369.18349,511.28826 369.46875,511.5625 L 371.34375,513.40625 L 366.65625,513.40625"

+           style="fill:#49c2f1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+      </g>

+    </marker>

+    <marker

+       id="marker44971"

+       orient="auto"

+       markerHeight="5.7450781"

+       markerWidth="4.6297355">

+      <g

+         id="g18059"

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

+        <path

+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"

+           id="path18061"

+           d="M 370,508.65625 C 369.13933,508.715 368.39056,509.27755 368.09375,510.09375 C 367.82399,510.83551 368.03605,511.62868 368.53125,512.21875 L 366.78125,512.21875 C 366.73884,512.21408 366.69882,512.22093 366.65625,512.21875 L 366.65625,516.59375 L 366.78125,516.59375 L 368.53125,516.59375 C 367.85229,517.45345 367.83424,518.70924 368.625,519.5 C 369.47591,520.35091 370.89909,520.35091 371.75,519.5 L 375.09375,516.125 C 375.12672,516.09552 375.15802,516.06422 375.1875,516.03125 C 375.21972,516.01191 375.25101,515.99105 375.28125,515.96875 C 375.28162,515.96839 375.49976,515.68796 375.5,515.6875 C 375.50005,515.68741 375.49338,515.64282 375.5,515.625 C 375.5011,515.62203 375.53002,515.62832 375.53125,515.625 C 375.57039,515.57293 375.58228,515.57321 375.625,515.5 C 375.76199,515.26524 375.79184,515.12809 375.78125,515.15625 C 375.81807,515.06473 375.79977,515.04374 375.8125,515 C 375.82311,514.98978 375.83353,514.97936 375.84375,514.96875 C 375.90379,514.74477 375.93181,514.45186 375.90625,514.1875 C 375.89266,513.98387 375.84739,513.88985 375.84375,513.875 C 375.84389,513.86458 375.84389,513.85417 375.84375,513.84375 C 375.86975,513.94071 375.85901,513.85978 375.75,513.59375 C 375.69753,513.46336 375.66014,513.37439 375.625,513.3125 C 375.57262,513.22275 375.49154,513.05015 375.28125,512.84375 L 371.75,509.3125 C 371.29355,508.82579 370.66491,508.60087 370,508.65625 z"

+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1" />

+        <path

+           sodipodi:nodetypes="cccscccsssssssscccsccc"

+           id="path18063"

+           d="M 366.65625,515.40625 L 371.28125,515.40625 L 369.46875,517.21875 C 369.0718,517.6157 369.0718,518.2593 369.46875,518.65625 C 369.8657,519.0532 370.5093,519.0532 370.90625,518.65625 L 374.34375,515.1875 L 374.4375,515.125 C 374.44343,515.11918 374.43171,515.09972 374.4375,515.09375 C 374.49291,515.03659 374.5526,514.97676 374.59375,514.90625 C 374.62239,514.85717 374.63663,514.80216 374.65625,514.75 C 374.66861,514.71928 374.67831,514.68783 374.6875,514.65625 C 374.71862,514.54015 374.73024,514.43132 374.71875,514.3125 C 374.71489,514.25466 374.70138,514.21285 374.6875,514.15625 C 374.6766,514.1156 374.67237,514.07059 374.65625,514.03125 C 374.63982,513.99042 374.61578,513.94505 374.59375,513.90625 C 374.5483,513.82838 374.50015,513.74899 374.4375,513.6875 L 370.90625,510.15625 C 370.69734,509.93349 370.39809,509.8184 370.09375,509.84375 C 369.69897,509.8707 369.35398,510.12813 369.21875,510.5 C 369.08351,510.87187 369.18349,511.28826 369.46875,511.5625 L 371.34375,513.40625 L 366.65625,513.40625"

+           style="fill:#d9d9cd;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+      </g>

+    </marker>

+    <marker

+       id="marker52016"

+       orient="auto"

+       markerHeight="5.7450786"

+       markerWidth="4.6297302">

+      <g

+         id="g52010"

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

+        <path

+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"

+           id="path52012"

+           d="M 370,508.65625 C 369.13933,508.715 368.39056,509.27755 368.09375,510.09375 C 367.82399,510.83551 368.03605,511.62868 368.53125,512.21875 L 366.78125,512.21875 C 366.73884,512.21408 366.69882,512.22093 366.65625,512.21875 L 366.65625,516.59375 L 366.78125,516.59375 L 368.53125,516.59375 C 367.85229,517.45345 367.83424,518.70924 368.625,519.5 C 369.47591,520.35091 370.89909,520.35091 371.75,519.5 L 375.09375,516.125 C 375.12672,516.09552 375.15802,516.06422 375.1875,516.03125 C 375.21972,516.01191 375.25101,515.99105 375.28125,515.96875 C 375.28162,515.96839 375.49976,515.68796 375.5,515.6875 C 375.50005,515.68741 375.49338,515.64282 375.5,515.625 C 375.5011,515.62203 375.53002,515.62832 375.53125,515.625 C 375.57039,515.57293 375.58228,515.57321 375.625,515.5 C 375.76199,515.26524 375.79184,515.12809 375.78125,515.15625 C 375.81807,515.06473 375.79977,515.04374 375.8125,515 C 375.82311,514.98978 375.83353,514.97936 375.84375,514.96875 C 375.90379,514.74477 375.93181,514.45186 375.90625,514.1875 C 375.89266,513.98387 375.84739,513.88985 375.84375,513.875 C 375.84389,513.86458 375.84389,513.85417 375.84375,513.84375 C 375.86975,513.94071 375.85901,513.85978 375.75,513.59375 C 375.69753,513.46336 375.66014,513.37439 375.625,513.3125 C 375.57262,513.22275 375.49154,513.05015 375.28125,512.84375 L 371.75,509.3125 C 371.29355,508.82579 370.66491,508.60087 370,508.65625 z"

+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1" />

+        <path

+           sodipodi:nodetypes="cccscccsssssssscccsccc"

+           id="path52014"

+           d="M 366.65625,515.40625 L 371.28125,515.40625 L 369.46875,517.21875 C 369.0718,517.6157 369.0718,518.2593 369.46875,518.65625 C 369.8657,519.0532 370.5093,519.0532 370.90625,518.65625 L 374.34375,515.1875 L 374.4375,515.125 C 374.44343,515.11918 374.43171,515.09972 374.4375,515.09375 C 374.49291,515.03659 374.5526,514.97676 374.59375,514.90625 C 374.62239,514.85717 374.63663,514.80216 374.65625,514.75 C 374.66861,514.71928 374.67831,514.68783 374.6875,514.65625 C 374.71862,514.54015 374.73024,514.43132 374.71875,514.3125 C 374.71489,514.25466 374.70138,514.21285 374.6875,514.15625 C 374.6766,514.1156 374.67237,514.07059 374.65625,514.03125 C 374.63982,513.99042 374.61578,513.94505 374.59375,513.90625 C 374.5483,513.82838 374.50015,513.74899 374.4375,513.6875 L 370.90625,510.15625 C 370.69734,509.93349 370.39809,509.8184 370.09375,509.84375 C 369.69897,509.8707 369.35398,510.12813 369.21875,510.5 C 369.08351,510.87187 369.18349,511.28826 369.46875,511.5625 L 371.34375,513.40625 L 366.65625,513.40625"

+           style="fill:#f39300;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+      </g>

+    </marker>

+    <marker

+       id="marker64887"

+       orient="auto"

+       markerHeight="5.745079"

+       markerWidth="4.6297255">

+      <g

+         id="g64855"

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

+        <path

+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"

+           id="path64857"

+           d="M 370,508.65625 C 369.13933,508.715 368.39056,509.27755 368.09375,510.09375 C 367.82399,510.83551 368.03605,511.62868 368.53125,512.21875 L 366.78125,512.21875 C 366.73884,512.21408 366.69882,512.22093 366.65625,512.21875 L 366.65625,516.59375 L 366.78125,516.59375 L 368.53125,516.59375 C 367.85229,517.45345 367.83424,518.70924 368.625,519.5 C 369.47591,520.35091 370.89909,520.35091 371.75,519.5 L 375.09375,516.125 C 375.12672,516.09552 375.15802,516.06422 375.1875,516.03125 C 375.21972,516.01191 375.25101,515.99105 375.28125,515.96875 C 375.28162,515.96839 375.49976,515.68796 375.5,515.6875 C 375.50005,515.68741 375.49338,515.64282 375.5,515.625 C 375.5011,515.62203 375.53002,515.62832 375.53125,515.625 C 375.57039,515.57293 375.58228,515.57321 375.625,515.5 C 375.76199,515.26524 375.79184,515.12809 375.78125,515.15625 C 375.81807,515.06473 375.79977,515.04374 375.8125,515 C 375.82311,514.98978 375.83353,514.97936 375.84375,514.96875 C 375.90379,514.74477 375.93181,514.45186 375.90625,514.1875 C 375.89266,513.98387 375.84739,513.88985 375.84375,513.875 C 375.84389,513.86458 375.84389,513.85417 375.84375,513.84375 C 375.86975,513.94071 375.85901,513.85978 375.75,513.59375 C 375.69753,513.46336 375.66014,513.37439 375.625,513.3125 C 375.57262,513.22275 375.49154,513.05015 375.28125,512.84375 L 371.75,509.3125 C 371.29355,508.82579 370.66491,508.60087 370,508.65625 z"

+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1" />

+        <path

+           sodipodi:nodetypes="cccscccsssssssscccsccc"

+           id="path64859"

+           d="M 366.65625,515.40625 L 371.28125,515.40625 L 369.46875,517.21875 C 369.0718,517.6157 369.0718,518.2593 369.46875,518.65625 C 369.8657,519.0532 370.5093,519.0532 370.90625,518.65625 L 374.34375,515.1875 L 374.4375,515.125 C 374.44343,515.11918 374.43171,515.09972 374.4375,515.09375 C 374.49291,515.03659 374.5526,514.97676 374.59375,514.90625 C 374.62239,514.85717 374.63663,514.80216 374.65625,514.75 C 374.66861,514.71928 374.67831,514.68783 374.6875,514.65625 C 374.71862,514.54015 374.73024,514.43132 374.71875,514.3125 C 374.71489,514.25466 374.70138,514.21285 374.6875,514.15625 C 374.6766,514.1156 374.67237,514.07059 374.65625,514.03125 C 374.63982,513.99042 374.61578,513.94505 374.59375,513.90625 C 374.5483,513.82838 374.50015,513.74899 374.4375,513.6875 L 370.90625,510.15625 C 370.69734,509.93349 370.39809,509.8184 370.09375,509.84375 C 369.69897,509.8707 369.35398,510.12813 369.21875,510.5 C 369.08351,510.87187 369.18349,511.28826 369.46875,511.5625 L 371.34375,513.40625 L 366.65625,513.40625"

+           style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+      </g>

+    </marker>

+    <marker

+       id="marker4057"

+       orient="auto"

+       markerHeight="5.745079"

+       markerWidth="4.6297302">

+      <g

+         id="g51986"

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

+        <path

+           sodipodi:nodetypes="csccccccsccssssssssssssssccc"

+           id="path51988"

+           d="M 370,508.65625 C 369.13933,508.715 368.39056,509.27755 368.09375,510.09375 C 367.82399,510.83551 368.03605,511.62868 368.53125,512.21875 L 366.78125,512.21875 C 366.73884,512.21408 366.69882,512.22093 366.65625,512.21875 L 366.65625,516.59375 L 366.78125,516.59375 L 368.53125,516.59375 C 367.85229,517.45345 367.83424,518.70924 368.625,519.5 C 369.47591,520.35091 370.89909,520.35091 371.75,519.5 L 375.09375,516.125 C 375.12672,516.09552 375.15802,516.06422 375.1875,516.03125 C 375.21972,516.01191 375.25101,515.99105 375.28125,515.96875 C 375.28162,515.96839 375.49976,515.68796 375.5,515.6875 C 375.50005,515.68741 375.49338,515.64282 375.5,515.625 C 375.5011,515.62203 375.53002,515.62832 375.53125,515.625 C 375.57039,515.57293 375.58228,515.57321 375.625,515.5 C 375.76199,515.26524 375.79184,515.12809 375.78125,515.15625 C 375.81807,515.06473 375.79977,515.04374 375.8125,515 C 375.82311,514.98978 375.83353,514.97936 375.84375,514.96875 C 375.90379,514.74477 375.93181,514.45186 375.90625,514.1875 C 375.89266,513.98387 375.84739,513.88985 375.84375,513.875 C 375.84389,513.86458 375.84389,513.85417 375.84375,513.84375 C 375.86975,513.94071 375.85901,513.85978 375.75,513.59375 C 375.69753,513.46336 375.66014,513.37439 375.625,513.3125 C 375.57262,513.22275 375.49154,513.05015 375.28125,512.84375 L 371.75,509.3125 C 371.29355,508.82579 370.66491,508.60087 370,508.65625 z"

+           style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1" />

+        <path

+           sodipodi:nodetypes="cccscccsssssssscccsccc"

+           id="path51990"

+           d="M 366.65625,515.40625 L 371.28125,515.40625 L 369.46875,517.21875 C 369.0718,517.6157 369.0718,518.2593 369.46875,518.65625 C 369.8657,519.0532 370.5093,519.0532 370.90625,518.65625 L 374.34375,515.1875 L 374.4375,515.125 C 374.44343,515.11918 374.43171,515.09972 374.4375,515.09375 C 374.49291,515.03659 374.5526,514.97676 374.59375,514.90625 C 374.62239,514.85717 374.63663,514.80216 374.65625,514.75 C 374.66861,514.71928 374.67831,514.68783 374.6875,514.65625 C 374.71862,514.54015 374.73024,514.43132 374.71875,514.3125 C 374.71489,514.25466 374.70138,514.21285 374.6875,514.15625 C 374.6766,514.1156 374.67237,514.07059 374.65625,514.03125 C 374.63982,513.99042 374.61578,513.94505 374.59375,513.90625 C 374.5483,513.82838 374.50015,513.74899 374.4375,513.6875 L 370.90625,510.15625 C 370.69734,509.93349 370.39809,509.8184 370.09375,509.84375 C 369.69897,509.8707 369.35398,510.12813 369.21875,510.5 C 369.08351,510.87187 369.18349,511.28826 369.46875,511.5625 L 371.34375,513.40625 L 366.65625,513.40625"

+           style="fill:#49c2f1;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+      </g>

+    </marker>

+    <marker

+       id="marker72805"

+       orient="auto"

+       markerHeight="4.5568175"

+       markerWidth="4.0334239">

+      <path

+         sodipodi:nodetypes="cccscccsssssssscccsccc"

+         id="path18057"

+         d="M -2.0167119,0.50456824 L 0.29578813,0.50456824 L -0.61046187,1.4108182 C -0.80893187,1.6092982 -0.80893187,1.9310982 -0.61046187,2.1295682 C -0.41198187,2.3280482 -0.090181874,2.3280482 0.10828813,2.1295682 L 1.8270381,0.39519824 L 1.8739181,0.36394824 C 1.8768781,0.36103824 1.8710181,0.35130824 1.8739181,0.34831824 C 1.9016181,0.31973824 1.9314681,0.28982824 1.9520381,0.25456824 C 1.9663581,0.23002824 1.9734781,0.20252824 1.9832881,0.17644824 C 1.9894681,0.16108824 1.9943181,0.14535824 1.9989181,0.12956824 C 2.0144781,0.07151824 2.0202881,0.01710824 2.0145381,-0.04230176 C 2.0126081,-0.07122176 2.0058581,-0.09213176 1.9989181,-0.12043176 C 1.9934681,-0.14075176 1.9913481,-0.16326176 1.9832881,-0.18293176 C 1.9750781,-0.20334176 1.9630581,-0.22603176 1.9520381,-0.24543176 C 1.9293181,-0.28436176 1.9052381,-0.32406176 1.8739181,-0.35480176 L 0.10828813,-2.1204318 C 0.003838126,-2.2318118 -0.14579187,-2.2893518 -0.29796187,-2.2766818 C -0.49535187,-2.2632018 -0.66784187,-2.1344918 -0.73546187,-1.9485518 C -0.80308187,-1.7626218 -0.75309187,-1.5544218 -0.61046187,-1.4173018 L 0.32703813,-0.49543176 L -2.0167119,-0.49543176"

+         style="fill:#f39300;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+    </marker>

+    <marker

+       id="marker72808"

+       orient="auto"

+       markerHeight="4.5568123"

+       markerWidth="4.0334177">

+      <path

+         sodipodi:nodetypes="cccscccsssssssscccsccc"

+         id="path72801"

+         d="M -2.016709,0.50457301 L 0.29579105,0.50457301 L -0.61045895,1.410823 C -0.80893895,1.609293 -0.80893895,1.931093 -0.61045895,2.129573 C -0.41198895,2.328043 -0.090188953,2.328043 0.10829105,2.129573 L 1.827041,0.39519301 L 1.873911,0.36394301 C 1.876881,0.36103301 1.871021,0.35130301 1.873911,0.34832301 C 1.901621,0.31974301 1.931461,0.28982301 1.952041,0.25457301 C 1.966361,0.23003301 1.973481,0.20252301 1.983291,0.17644301 C 1.989471,0.16108301 1.994321,0.14536301 1.998911,0.12957301 C 2.014471,0.071523013 2.020281,0.017103013 2.014541,-0.042306987 C 2.012611,-0.071226987 2.005851,-0.092126987 1.998911,-0.12042699 C 1.993461,-0.14075699 1.991351,-0.16325699 1.983291,-0.18292699 C 1.975071,-0.20334699 1.963051,-0.22602699 1.952041,-0.24542699 C 1.929311,-0.28436699 1.905241,-0.32405699 1.873911,-0.35480699 L 0.10829105,-2.120427 C 0.003831047,-2.231807 -0.14578895,-2.289357 -0.29795895,-2.276677 C -0.49534895,-2.263207 -0.66784895,-2.134487 -0.73545895,-1.948557 C -0.80307895,-1.762617 -0.75308895,-1.554427 -0.61045895,-1.417307 L 0.32704105,-0.49542699 L -2.016709,-0.49542699"

+         style="fill:#d9d9cd;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />

+    </marker>

+    <marker

+       style="overflow:visible"

+       id="DotSuN"

+       refX="0"

+       refY="0"

+       orient="auto"

+       inkscape:stockid="DotSuN">

+      <path

+         transform="matrix(0.2,0,0,0.2,1.48,0.2)"

+         style="fill:#f39300;fill-rule:evenodd;stroke:#f39300;stroke-width:1pt;marker-start:none;marker-end:none"

+         d="M -2.5,-1 C -2.5,1.76 -4.74,4 -7.5,4 C -10.26,4 -12.5,1.76 -12.5,-1 C -12.5,-3.76 -10.26,-6 -7.5,-6 C -4.74,-6 -2.5,-3.76 -2.5,-1 z"

+         id="path81580" />

+    </marker>

+  </defs>

+  <metadata

+     id="metadata2480">

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

+     id="layer1"

+     inkscape:groupmode="layer"

+     inkscape:label="Layer 1">

+    <flowRoot

+       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+       id="flowRoot2485"

+       xml:space="preserve"><flowRegion

+         id="flowRegion2487"><rect

+           style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold"

+           y="238.07646"

+           x="262.85715"

+           height="120"

+           width="184.28572"

+           id="rect2489" /></flowRegion><flowPara

+         id="flowPara2491" /></flowRoot>    <g

+       transform="translate(-3.5714286,23.214286)"

+       id="g3178" />

+    <g

+       transform="translate(210.60668,261.00299)"

+       id="g2802">

+      <rect

+         ry="3.7880721"

+         y="208.55002"

+         x="172.42705"

+         height="35.93816"

+         width="119.02927"

+         id="rect2804"

+         style="opacity:1;fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         transform="translate(178.96771,226.54606)"

+         id="flowRoot2806"

+         style="font-size:12px;font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold Italic"

+         xml:space="preserve"><flowRegion

+           id="flowRegion2808" /><flowPara

+           id="flowPara2812">AbstractField</flowPara></flowRoot>    </g>

+    <g

+       transform="translate(506.97638,291.46457)"

+       id="g3836">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect3838"

+         width="98.786072"

+         height="35.433075"

+         x="14.173247"

+         y="237.40155"

+         ry="3.7880721" />

+      <flowRoot

+         xml:space="preserve"

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

+         id="flowRoot3840"

+         transform="translate(18.701001,254.28779)"><flowRegion

+           id="flowRegion3842" /><flowPara

+           id="flowPara3846">TextField</flowPara></flowRoot>      <text

+         xml:space="preserve"

+         style="font-size:10px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"

+         x="20.486355"

+         y="267.2616"

+         id="text2678"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan2680"

+           x="20.486355"

+           y="267.2616">v-textfield</tspan></text>

+    </g>

+    <g

+       transform="translate(510.31721,352.68684)"

+       id="g3848">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect3850"

+         width="98.581734"

+         height="35.849739"

+         x="10.832414"

+         y="224.97185"

+         ry="3.7880721" />

+      <text

+         xml:space="preserve"

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

+         x="15.902097"

+         y="240.91238"

+         id="text3860"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan3862"

+           x="15.902097"

+           y="240.91238">TextArea</tspan></text>

+      <text

+         xml:space="preserve"

+         style="font-size:10px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"

+         x="17.238098"

+         y="254.58466"

+         id="text3700"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan3702"

+           x="17.238098"

+           y="254.58466">v-textarea</tspan></text>

+    </g>

+    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 364.96063,786.61415 C nan,nan nan,nan 435.82677,786.61415"

+       id="path7429"

+       inkscape:connector-type="polyline" />

+    <flowRoot

+       style="font-size:12px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"

+       id="flowRoot8724"

+       xml:space="preserve"><flowRegion

+         id="flowRegion8726"><rect

+           style="font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"

+           y="752.14441"

+           x="39.286312"

+           height="22.868153"

+           width="29.904507"

+           id="rect8728" /></flowRegion><flowPara

+         id="flowPara8730" /></flowRoot>    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 521.9605,595.73226 L 442.91339,595.73226"

+       id="path49768"

+       inkscape:connector-type="polyline" />

+    <g

+       transform="matrix(0.5,0,0,0.5,103.34299,0.7940752)"

+       id="g18053" />

+    <g

+       transform="translate(211.21177,319.81101)"

+       id="g2656">

+      <rect

+         ry="3.7880721"

+         y="208.55002"

+         x="172.42705"

+         height="35.938164"

+         width="118.42417"

+         id="rect2658"

+         style="opacity:1;fill:#f39300;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />

+      <flowRoot

+         transform="translate(176.96771,224.54606)"

+         id="flowRoot2660"

+         style="font-size:12px;font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;text-align:start;line-height:100%;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica Rounded LT Std;-inkscape-font-specification:Helvetica Rounded LT Std Bold Italic"

+         xml:space="preserve"><flowRegion

+           id="flowRegion2662" /><flowPara

+           id="flowPara2664">AbstractTextField</flowPara></flowRoot>    </g>

+    <g

+       transform="translate(510.31721,401.19483)"

+       id="g2666">

+      <rect

+         style="opacity:1;fill:#49c2f1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"

+         id="rect2668"

+         width="98.79007"

+         height="35.433071"

+         x="10.832414"

+         y="224.97185"

+         ry="3.7880721" />

+      <text

+         xml:space="preserve"

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

+         x="16.225794"

+         y="240.50851"

+         id="text2670"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan2672"

+           x="16.225794"

+           y="240.50851">PasswordField</tspan></text>

+      <text

+         xml:space="preserve"

+         style="font-size:10px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light"

+         x="16.802633"

+         y="255.82668"

+         id="text3704"

+         sodipodi:linespacing="125%"><tspan

+           sodipodi:role="line"

+           id="tspan3706"

+           x="16.802633"

+           y="255.82668">v-textfield</tspan></text>

+    </g>

+    <path

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

+       d="M 442.91339,644.88187 L 442.91339,564.54877"

+       id="path3866"

+       inkscape:connector-type="polyline"

+       sodipodi:nodetypes="cc" />

+    <path

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

+       d="M 521.14963,546.49872 L 502.06299,546.45762"

+       id="path2674"

+       inkscape:connector-type="polyline"

+       sodipodi:nodetypes="cc"

+       inkscape:connection-start="#g3836"

+       inkscape:connection-end="#g2656" />

+    <path

+       sodipodi:nodetypes="cc"

+       style="fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#49c2f1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;display:inline"

+       d="M 531.49606,644.88187 L 442.91339,644.88187"

+       id="path2676"

+       inkscape:connector-type="polyline" />

+    <path

+       inkscape:connector-type="polyline"

+       id="path2868"

+       d="M 442.75846,528.36103 L 442.6408,505.49117"

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

+       inkscape:connection-start="#g2656"

+       inkscape:connection-end="#g2802" />

+  </g>

+</svg>

diff --git a/documentation/components/original-drawings/tooltip-plain-withpointer.svg b/documentation/components/original-drawings/tooltip-plain-withpointer.svg
new file mode 100644
index 0000000000..f58a50eed1
--- /dev/null
+++ b/documentation/components/original-drawings/tooltip-plain-withpointer.svg
@@ -0,0 +1,158 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>

+<!-- Created with Inkscape (http://www.inkscape.org/) -->

+

+<svg

+   xmlns:dc="http://purl.org/dc/elements/1.1/"

+   xmlns:cc="http://creativecommons.org/ns#"

+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

+   xmlns:svg="http://www.w3.org/2000/svg"

+   xmlns="http://www.w3.org/2000/svg"

+   xmlns:xlink="http://www.w3.org/1999/xlink"

+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"

+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"

+   width="210mm"

+   height="297mm"

+   id="svg1901"

+   sodipodi:version="0.32"

+   inkscape:version="0.48.2 r9819"

+   sodipodi:docname="tooltip-plain-withpointer.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="perspective2444"

+       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

+       y2="471.38400"

+       y1="45.132561"

+       xlink:href="#linearGradient7601"

+       x2="1370.5586"

+       x1="-526.86133"

+       spreadMethod="reflect"

+       inkscape:collect="always"

+       id="linearGradient10877"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(8.892150e-2,0.000000,0.000000,0.155616,635.7169,9.380527)" />

+    <linearGradient

+       y2="471.38400"

+       y1="45.132561"

+       xlink:href="#linearGradient7601"

+       x2="1370.5586"

+       x1="-526.86133"

+       spreadMethod="reflect"

+       inkscape:collect="always"

+       id="linearGradient10869"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(0.323979,0.000000,0.000000,0.566975,399.6324,14.15086)" />

+    <linearGradient

+       y2="471.38400"

+       y1="45.132561"

+       xlink:href="#linearGradient7601"

+       x2="1370.5586"

+       x1="-526.86133"

+       spreadMethod="reflect"

+       inkscape:collect="always"

+       id="linearGradient7607"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(0.755921,0,0,1.32289,-36,0)" />

+    <linearGradient

+       inkscape:collect="always"

+       id="linearGradient7601">

+      <stop

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

+         offset="0"

+         id="stop7603" />

+      <stop

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

+         offset="1"

+         id="stop7605" />

+    </linearGradient>

+    <inkscape:perspective

+       id="perspective2581"

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

+  </defs>

+  <sodipodi:namedview

+     id="base"

+     pagecolor="#ffffff"

+     bordercolor="#666666"

+     borderopacity="1.0"

+     inkscape:pageopacity="0.0"

+     inkscape:pageshadow="2"

+     inkscape:zoom="2.7777778"

+     inkscape:cx="323.26669"

+     inkscape:cy="909.70837"

+     inkscape:document-units="px"

+     inkscape:current-layer="layer1"

+     gridtolerance="10000"

+     inkscape:window-width="1342"

+     inkscape:window-height="819"

+     inkscape:window-x="0"

+     inkscape:window-y="0"

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

+    <image

+       sodipodi:absref="/home/magi/itmill/book-7/manual/original-drawings/components/../../img/components/tooltip-plain.png"

+       xlink:href="../../img/components/tooltip-plain.png"

+       height="50.32"

+       width="129.39429"

+       id="image2446"

+       x="271.5"

+       y="152.36218" />

+    <g

+       style="display:inline"

+       inkscape:label="Layer 1"

+       id="g2590"

+       transform="matrix(0.02617234,0,0,0.02617234,309.56235,171.43915)">

+      <g

+         id="g1317">

+        <path

+           style="fill:url(#linearGradient7607);fill-opacity:1;fill-rule:nonzero;stroke:none;display:inline"

+           id="path6080"

+           d="m 70.29035,24.82601 0,602.34375 35.4375,0 0,-35.4375 35.4375,0 0,-35.40625 35.40625,0 0,-35.4375 35.4375,0 35.4375,0 0,70.84375 35.4375,0 0,70.875 35.4375,0 0,70.875 35.4375,0 0,35.4375 70.84375,0 0,-35.4375 35.4375,0 0,-70.875 -35.4375,0 0,-70.875 -35.40625,0 0,-70.84375 -35.4375,0 0,-70.875 141.71875,0 0,-35.4375 -35.4375,0 0,-35.4375 -35.4375,0 0,-35.4375 -35.40625,0 0,-35.40625 -35.4375,0 0,-35.4375 -35.4375,0 0,-35.4375 -35.4375,0 0,-35.4375 -35.4375,0 0,-35.4375 -35.4375,0 0,-35.4375 -35.4375,0 0,-35.437499 -35.40625,0 0,-35.406251 -35.4375,0 0,-35.4375 -35.4375,0 z"

+           inkscape:connector-curvature="0" />

+        <path

+           style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"

+           id="rect1430"

+           d="m 35.4375,24.8125 0,602.34375 35.4375,0 0,-35.4375 35.4375,0 0,-35.40625 -35.4375,0 0,-460.65625 35.4375,0 0,-35.40625 -35.4375,0 0,-35.4375 -35.4375,0 z m 70.875,70.84375 0,35.4375 35.40625,0 0,-35.4375 -35.40625,0 z m 35.40625,35.4375 0,35.4375 35.4375,0 0,-35.4375 -35.4375,0 z m 35.4375,35.4375 0,35.4375 35.4375,0 0,-35.4375 -35.4375,0 z m 35.4375,35.4375 0,35.4375 35.4375,0 0,-35.4375 -35.4375,0 z m 35.4375,35.4375 0,35.4375 35.4375,0 0,-35.4375 -35.4375,0 z m 35.4375,35.4375 0,35.4375 35.4375,0 0,-35.4375 -35.4375,0 z m 35.4375,35.4375 0,35.40625 35.4375,0 0,-35.40625 -35.4375,0 z m 35.4375,35.40625 0,35.4375 35.40625,0 0,-35.4375 -35.40625,0 z m 35.40625,35.4375 0,35.4375 -106.28125,0 0,35.4375 0,70.875 35.4375,0 0,-70.875 141.71875,0 0,-35.4375 -35.4375,0 0,-35.4375 -35.4375,0 z m -70.84375,141.75 0,70.84375 35.4375,0 0,-70.84375 -35.4375,0 z m 35.4375,70.84375 0,70.875 35.40625,0 0,-70.875 -35.40625,0 z m 35.40625,70.875 0,70.875 35.4375,0 0,-70.875 -35.4375,0 z m 0,70.875 -70.84375,0 0,35.4375 70.84375,0 0,-35.4375 z m -70.84375,0 0,-70.875 -35.4375,0 0,70.875 35.4375,0 z m -35.4375,-70.875 0,-70.875 -35.4375,0 0,70.875 35.4375,0 z m -35.4375,-70.875 0,-70.84375 -35.4375,0 0,70.84375 35.4375,0 z m -35.4375,-70.84375 0,-70.875 -35.4375,0 0,35.4375 -35.4375,0 0,35.4375 35.4375,0 35.4375,0 z m -70.875,0 -35.40625,0 0,35.4375 35.40625,0 0,-35.4375 z"

+           inkscape:connector-curvature="0" />

+        <path

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

+           id="rect3779"

+           d="m 70.875,95.65625 0,460.65625 35.4375,0 0,-35.4375 35.40625,0 0,-35.4375 35.4375,0 0,-35.4375 35.4375,0 0,70.875 35.4375,0 0,70.84375 35.4375,0 0,70.875 35.4375,0 0,70.875 35.4375,0 35.40625,0 0,-70.875 -35.40625,0 0,-70.875 -35.4375,0 0,-70.84375 -35.4375,0 0,-106.3125 35.4375,0 35.4375,0 35.40625,0 0,-35.4375 -35.40625,0 0,-35.4375 -35.4375,0 0,-35.40625 -35.4375,0 0,-35.4375 -35.4375,0 0,-35.4375 -35.4375,0 0,-35.4375 -35.4375,0 0,-35.4375 -35.4375,0 0,-35.4375 -35.40625,0 0,-35.4375 -35.4375,0 z"

+           inkscape:connector-curvature="0" />

+      </g>

+    </g>

+  </g>

+</svg>

diff --git a/documentation/components/original-drawings/tooltip-richtext-withpointer.svg b/documentation/components/original-drawings/tooltip-richtext-withpointer.svg
new file mode 100644
index 0000000000..f3602a3372
--- /dev/null
+++ b/documentation/components/original-drawings/tooltip-richtext-withpointer.svg
@@ -0,0 +1,165 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>

+<!-- Created with Inkscape (http://www.inkscape.org/) -->

+

+<svg

+   xmlns:dc="http://purl.org/dc/elements/1.1/"

+   xmlns:cc="http://creativecommons.org/ns#"

+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"

+   xmlns:svg="http://www.w3.org/2000/svg"

+   xmlns="http://www.w3.org/2000/svg"

+   xmlns:xlink="http://www.w3.org/1999/xlink"

+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"

+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"

+   width="210mm"

+   height="297mm"

+   id="svg1901"

+   sodipodi:version="0.32"

+   inkscape:version="0.48.2 r9819"

+   sodipodi:docname="tooltip-richtext-withpointer.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="perspective2444"

+       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

+       y2="471.38400"

+       y1="45.132561"

+       xlink:href="#linearGradient7601"

+       x2="1370.5586"

+       x1="-526.86133"

+       spreadMethod="reflect"

+       inkscape:collect="always"

+       id="linearGradient10877"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(8.892150e-2,0.000000,0.000000,0.155616,635.7169,9.380527)" />

+    <linearGradient

+       y2="471.38400"

+       y1="45.132561"

+       xlink:href="#linearGradient7601"

+       x2="1370.5586"

+       x1="-526.86133"

+       spreadMethod="reflect"

+       inkscape:collect="always"

+       id="linearGradient10869"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(0.323979,0.000000,0.000000,0.566975,399.6324,14.15086)" />

+    <linearGradient

+       y2="471.38400"

+       y1="45.132561"

+       xlink:href="#linearGradient7601"

+       x2="1370.5586"

+       x1="-526.86133"

+       spreadMethod="reflect"

+       inkscape:collect="always"

+       id="linearGradient7607"

+       gradientUnits="userSpaceOnUse"

+       gradientTransform="matrix(0.755921,0,0,1.32289,-36,0)" />

+    <linearGradient

+       inkscape:collect="always"

+       id="linearGradient7601">

+      <stop

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

+         offset="0"

+         id="stop7603" />

+      <stop

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

+         offset="1"

+         id="stop7605" />

+    </linearGradient>

+    <inkscape:perspective

+       id="perspective2581"

+       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="perspective2694"

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

+  </defs>

+  <sodipodi:namedview

+     id="base"

+     pagecolor="#ffffff"

+     bordercolor="#666666"

+     borderopacity="1.0"

+     inkscape:pageopacity="0.0"

+     inkscape:pageshadow="2"

+     inkscape:zoom="1.9641855"

+     inkscape:cx="354.71787"

+     inkscape:cy="838.70549"

+     inkscape:document-units="px"

+     inkscape:current-layer="layer1"

+     gridtolerance="10000"

+     inkscape:window-width="1214"

+     inkscape:window-height="851"

+     inkscape:window-x="67"

+     inkscape:window-y="53"

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

+    <image

+       sodipodi:absref="/home/magi/itmill/book-7/manual/original-drawings/components/../../img/components/tooltip-richtext.png"

+       xlink:href="../../img/components/tooltip-richtext.png"

+       height="139.87039"

+       width="253.29762"

+       id="image2696"

+       x="273.8241"

+       y="149.4536" />

+    <g

+       style="display:inline"

+       inkscape:label="Layer 1"

+       id="g2590"

+       transform="matrix(0.02617234,0,0,0.02617234,326.04499,174.47285)">

+      <g

+         id="g1317">

+        <path

+           style="fill:url(#linearGradient7607);fill-opacity:1;fill-rule:nonzero;stroke:none;display:inline"

+           id="path6080"

+           d="m 70.29035,24.82601 0,602.34375 35.4375,0 0,-35.4375 35.4375,0 0,-35.40625 35.40625,0 0,-35.4375 35.4375,0 35.4375,0 0,70.84375 35.4375,0 0,70.875 35.4375,0 0,70.875 35.4375,0 0,35.4375 70.84375,0 0,-35.4375 35.4375,0 0,-70.875 -35.4375,0 0,-70.875 -35.40625,0 0,-70.84375 -35.4375,0 0,-70.875 141.71875,0 0,-35.4375 -35.4375,0 0,-35.4375 -35.4375,0 0,-35.4375 -35.40625,0 0,-35.40625 -35.4375,0 0,-35.4375 -35.4375,0 0,-35.4375 -35.4375,0 0,-35.4375 -35.4375,0 0,-35.4375 -35.4375,0 0,-35.4375 -35.4375,0 0,-35.437499 -35.40625,0 0,-35.406251 -35.4375,0 0,-35.4375 -35.4375,0 z"

+           inkscape:connector-curvature="0" />

+        <path

+           style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none"

+           id="rect1430"

+           d="m 35.4375,24.8125 0,602.34375 35.4375,0 0,-35.4375 35.4375,0 0,-35.40625 -35.4375,0 0,-460.65625 35.4375,0 0,-35.40625 -35.4375,0 0,-35.4375 -35.4375,0 z m 70.875,70.84375 0,35.4375 35.40625,0 0,-35.4375 -35.40625,0 z m 35.40625,35.4375 0,35.4375 35.4375,0 0,-35.4375 -35.4375,0 z m 35.4375,35.4375 0,35.4375 35.4375,0 0,-35.4375 -35.4375,0 z m 35.4375,35.4375 0,35.4375 35.4375,0 0,-35.4375 -35.4375,0 z m 35.4375,35.4375 0,35.4375 35.4375,0 0,-35.4375 -35.4375,0 z m 35.4375,35.4375 0,35.4375 35.4375,0 0,-35.4375 -35.4375,0 z m 35.4375,35.4375 0,35.40625 35.4375,0 0,-35.40625 -35.4375,0 z m 35.4375,35.40625 0,35.4375 35.40625,0 0,-35.4375 -35.40625,0 z m 35.40625,35.4375 0,35.4375 -106.28125,0 0,35.4375 0,70.875 35.4375,0 0,-70.875 141.71875,0 0,-35.4375 -35.4375,0 0,-35.4375 -35.4375,0 z m -70.84375,141.75 0,70.84375 35.4375,0 0,-70.84375 -35.4375,0 z m 35.4375,70.84375 0,70.875 35.40625,0 0,-70.875 -35.40625,0 z m 35.40625,70.875 0,70.875 35.4375,0 0,-70.875 -35.4375,0 z m 0,70.875 -70.84375,0 0,35.4375 70.84375,0 0,-35.4375 z m -70.84375,0 0,-70.875 -35.4375,0 0,70.875 35.4375,0 z m -35.4375,-70.875 0,-70.875 -35.4375,0 0,70.875 35.4375,0 z m -35.4375,-70.875 0,-70.84375 -35.4375,0 0,70.84375 35.4375,0 z m -35.4375,-70.84375 0,-70.875 -35.4375,0 0,35.4375 -35.4375,0 0,35.4375 35.4375,0 35.4375,0 z m -70.875,0 -35.40625,0 0,35.4375 35.40625,0 0,-35.4375 z"

+           inkscape:connector-curvature="0" />

+        <path

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

+           id="rect3779"

+           d="m 70.875,95.65625 0,460.65625 35.4375,0 0,-35.4375 35.40625,0 0,-35.4375 35.4375,0 0,-35.4375 35.4375,0 0,70.875 35.4375,0 0,70.84375 35.4375,0 0,70.875 35.4375,0 0,70.875 35.4375,0 35.40625,0 0,-70.875 -35.40625,0 0,-70.875 -35.4375,0 0,-70.84375 -35.4375,0 0,-106.3125 35.4375,0 35.4375,0 35.40625,0 0,-35.4375 -35.40625,0 0,-35.4375 -35.4375,0 0,-35.40625 -35.4375,0 0,-35.4375 -35.4375,0 0,-35.4375 -35.4375,0 0,-35.4375 -35.4375,0 0,-35.4375 -35.4375,0 0,-35.4375 -35.40625,0 0,-35.4375 -35.4375,0 z"

+           inkscape:connector-curvature="0" />

+      </g>

+    </g>

+  </g>

+</svg>