Change-Id: Iedcd7bfc04c53b7d1cdf621261234688d21a52f3

7 years ago · a8a773925c
--- a/documentation/application/application-architecture.asciidoc
+++ b/documentation/application/application-architecture.asciidoc
@@ -48,29 +48,21 @@ public class MyHierarchicalUI extends UI {
 }
 ----

 The component hierarchy could be illustrated with a tree as follows:
 The component hierarchy is illustrated in <<figure.application.architecture.schematic>>.

 [[figure.application.architecture.schematic]]
 .Schematic diagram of the UI
 image::img/ui-schematic-hi.png[width=80%, scaledwidth=100%]

 ----
 UI
 `-- VerticalLayout
   |-- Label
   `-- HorizontalLayout
     |-- Tree
     `-- Table
 ----

 The result is shown in <<figure.application.architecture.example>>.
 The actual UI is shown in <<figure.application.architecture.example>>.

 [[figure.application.architecture.example]]
 .Simple hierarchical UI
 image::img/ui-architecture-hierarchical.png[width=70%, scaledwidth=90%]

 Instead of building the layout in Java, you can also use a declarative design,
 as described later in
 <<dummy/../../../framework/application/application-declarative#application.declarative,"Designing
 UIs Declaratively">>. The examples given for the declarative layouts give
 exactly the same UI layout as built from the components above.
 Instead of building the layout in Java, you can also use a declarative design, as described later in <<dummy/../../../framework/application/application-declarative#application.declarative,"Designing UIs Declaratively">>.
 The examples given for the declarative layouts give exactly the same UI layout as built from the components above.
 The easiest way to create declarative designs is to use Vaadin Designer.

 The built-in components are described in
 <<dummy/../../../framework/components/components-overview.asciidoc#components.overview,"User
@@ -195,19 +187,13 @@ sub-views.

 [[figure.application.architecture.navigation]]
 .Navigation Between Views
 image::img/view-navigation-hi.png[]
 image::img/view-navigation-hi.png[width=80%, scaledwidth=100%]

 The [classname]#Navigator# described in
 <<dummy/../../../framework/advanced/advanced-navigator#advanced.navigator,"Navigating
 in an Application">> is a view manager that provides a flexible way to navigate
 between views and sub-views, while managing the URI fragment in the page URL to
 allow bookmarking, linking, and going back in browser history.
 The [classname]#Navigator# described in <<dummy/../../../framework/advanced/advanced-navigator#advanced.navigator,"Navigating in an Application">> is a view manager that provides a flexible way to navigate between views and sub-views, while managing the URI fragment in the page URL to allow bookmarking, linking, and going back in the browser history.

 Often Vaadin application views are part of something bigger. In such cases, you
 may need to integrate the Vaadin applications with the other website. You can
 use the embedding techniques described in
 <<dummy/../../../framework/advanced/advanced-embedding#advanced.embedding,"Embedding
 UIs in Web Pages">>.
 Often Vaadin application views are part of something bigger.
 In such cases, you may need to integrate the Vaadin applications with the other website.
 You can use the embedding techniques described in <<dummy/../../../framework/advanced/advanced-embedding#advanced.embedding,"Embedding UIs in Web Pages">>.


 [[application.architecture.accessing]]
@@ -245,9 +231,6 @@ You can get the page and the session also from a [classname]#UI# with
 [classname]#VaadinSession# with [methodname]#getService()#.

 The static methods use the built-in ThreadLocal support in the classes.

 ifdef::web[]
 The pattern is described in
 <<dummy/../../../framework/advanced/advanced-global#advanced.global.threadlocal,"ThreadLocal
 Pattern">>.
 The pattern is described in <<dummy/../../../framework/advanced/advanced-global#advanced.global.threadlocal,"ThreadLocal Pattern">>.
 endif::web[]
--- a/documentation/application/img/ui-schematic-hi.png
+++ b/documentation/application/img/ui-schematic-hi.png
--- a/documentation/application/img/view-navigation-hi.png
+++ b/documentation/application/img/view-navigation-hi.png
--- a/documentation/application/original-drawings/Makefile
+++ b/documentation/application/original-drawings/Makefile
@@ -1,5 +1,5 @@
 SVG =
 RASTERIMAGES = application-architecture
 RASTERIMAGES = application-architecture view-navigation ui-schematic

 RASTERSRCIMAGES := $(foreach file, $(RASTERIMAGES), $(file).svg)
 RASTERIMAGES_HI := $(foreach file, $(RASTERIMAGES), ../img/$(file)-hi.png)
--- a/documentation/application/original-drawings/ui-schematic.svg
+++ b/documentation/application/original-drawings/ui-schematic.svg
@@ -0,0 +1,302 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->

 <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="82mm"
   height="39mm"
   id="svg1901"
   sodipodi:version="0.32"
   inkscape:version="0.91 r"
   sodipodi:docname="ui-schematic.svg"
   version="1.1">
  <defs
     id="defs1903" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="1"
     inkscape:pageshadow="2"
     inkscape:zoom="7.919596"
     inkscape:cx="106.82403"
     inkscape:cy="68.655822"
     inkscape:document-units="mm"
     inkscape:current-layer="layer1"
     inkscape:window-width="1920"
     inkscape:window-height="1060"
     inkscape:window-x="-2"
     inkscape:window-y="-3"
     showgrid="true"
     inkscape:window-maximized="1"
     inkscape:snap-center="true"
     inkscape:snap-grids="true"
     inkscape:snap-bbox="true"
     inkscape:object-paths="true"
     inkscape:object-nodes="true"
     inkscape:snap-object-midpoints="true"
     showguides="true"
     inkscape:guide-bbox="true"
     units="mm"
     fit-margin-top="2"
     fit-margin-left="2"
     fit-margin-right="2"
     fit-margin-bottom="2">
    <inkscape:grid
       type="xygrid"
       id="grid2982"
       empspacing="10"
       visible="true"
       enabled="true"
       snapvisiblegridlinesonly="true"
       spacingx="3.5433071"
       spacingy="3.5433071"
       units="mm"
       originx="18.581643"
       originy="0.35428181" />
  </sodipodi:namedview>
  <metadata
     id="metadata1906">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Taso 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(18.581643,-914.52756)">
    <rect
       y="917.71655"
       x="88.58268"
       height="131.10237"
       width="162.99213"
       id="rect4347-0-2-5-5-9-59"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#e61e6d;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
    <flowRoot
       xml:space="preserve"
       id="flowRoot4349"
       style="font-style:normal;font-weight:normal;font-size:10px;line-height:125%;font-family:Sans;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       transform="translate(49.606293,889.3701)"><flowRegion
         id="flowRegion4351"><rect
           id="rect4353"
           width="67.322838"
           height="42.519684"
           x="49.6063"
           y="56.692909"
           style="font-size:10px" /></flowRegion><flowPara
         id="flowPara4355" /></flowRoot>    <g
       id="g4392-0-4-6-8"
       transform="translate(258.66142,49.60637)" />
    <rect
       y="921.25989"
       x="92.125977"
       height="124.01573"
       width="155.90552"
       id="rect4347-0-2-5-5-9"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#e61e6d;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
    <rect
       y="924.80316"
       x="95.669289"
       height="21.259869"
       width="148.81889"
       id="rect4347-0-2-5-5-9-5-8"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffc13f;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
    <rect
       y="953.14966"
       x="95.669296"
       height="88.582695"
       width="148.81889"
       id="rect4347-0-2-5-5-9-5-84"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#e61e6d;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
    <rect
       y="960.23627"
       x="102.75591"
       height="74.409431"
       width="38.976372"
       id="rect4347-0-2-5-5-9-5-8-0-5"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffc13f;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
    <path
       style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 92.125976,931.88981 -10.629919,-5e-5"
       id="path3003-6-5-1"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <circle
       cy="931.88977"
       cx="92.125969"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ff3a49;fill-opacity:1;stroke:none;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
       id="path2997-7-6"
       r="2.1259842" />
    <circle
       cy="931.88977"
       cx="81.496063"
       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#00b4f0;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
       id="path2997-7-6-1"
       r="2.1259842" />
    <path
       style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 95.669279,956.69293 -14.173222,-4e-5"
       id="path3003-6-5-1-5-1"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <circle
       cy="956.69287"
       cx="95.669281"
       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ff3a49;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
       id="path2997-7-6-13-9"
       r="2.1259842" />
    <circle
       cy="956.69293"
       cx="81.496063"
       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#00b4f0;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
       id="path2997-7-6-1-7-8"
       r="2.1259842" />
    <path
       style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 95.66929,942.51969 -14.173228,-5e-5"
       id="path3003-6-5-1-5-78"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <circle
       cy="942.51971"
       cx="95.669289"
       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ff3a49;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
       id="path2997-7-6-13-7"
       r="2.1259842" />
    <circle
       cy="942.51965"
       cx="81.496063"
       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#00b4f0;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
       id="path2997-7-6-1-7-0"
       r="2.1259842" />
    <path
       style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 102.75591,970.86616 -21.259843,-3e-5"
       id="path3003-6-5-1-5-13"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <circle
       cy="970.86615"
       cx="102.7559"
       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ff3a49;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
       id="path2997-7-6-13-39"
       r="2.1259842" />
    <circle
       cy="970.86615"
       cx="81.496063"
       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#00b4f0;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
       id="path2997-7-6-1-7-9"
       r="2.1259842" />
    <flowRoot
       transform="translate(76.448922,934.22971)"
       id="flowRoot4367-0-7-2-4-4-43-5-2"
       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:121.00000381%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       xml:space="preserve"><flowRegion
         id="flowRegion4369-0-6-7-7-5-6-6-7" /><flowPara
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:121.00000381%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;writing-mode:lr-tb;text-anchor:end"
         id="flowPara4783-7-2-8-1-0-0">VerticalLayout</flowPara></flowRoot>    <flowRoot
       transform="translate(76.696085,959.29715)"
       id="flowRoot4367-0-7-2-4-4-43-3"
       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:121.00000381%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       xml:space="preserve"><flowRegion
         id="flowRegion4369-0-6-7-7-5-6-1" /><flowPara
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:121.00000381%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;letter-spacing:0px;writing-mode:lr-tb;text-anchor:end"
         id="flowPara4684">HorizontalLayout</flowPara></flowRoot>    <flowRoot
       transform="translate(76.575196,945.6249)"
       id="flowRoot4367-0-7-2-4-4-43-5"
       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:121.00000381%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       xml:space="preserve"><flowRegion
         id="flowRegion4369-0-6-7-7-5-6-6" /><flowPara
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:121.00000381%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;writing-mode:lr-tb;text-anchor:end"
         id="flowPara4783-7-2-8-1-0">Label</flowPara></flowRoot>    <flowRoot
       transform="translate(76.291926,974.3158)"
       id="flowRoot4367-0-7-2-4-4-43-8"
       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:121.00000381%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       xml:space="preserve"><flowRegion
         id="flowRegion4369-0-6-7-7-5-6-7" /><flowPara
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:121.00000381%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;writing-mode:lr-tb;text-anchor:end"
         id="flowPara4783-7-2-8-1-1">Tree</flowPara></flowRoot>    <path
       style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 88.582669,921.25991 -7.086612,-5e-5"
       id="path3003-6-5-1-86"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <circle
       cy="921.25989"
       cx="88.58268"
       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ff3a49;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
       id="path2997-7-6-8"
       r="2.1259842" />
    <circle
       cy="921.25989"
       cx="81.496063"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#00b4f0;fill-opacity:1;stroke:none;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
       id="path2997-7-6-1-6"
       r="2.1259842" />
    <flowRoot
       transform="translate(76.448923,924.36512)"
       id="flowRoot4367-0-7-2-4-4-43-5-2-5"
       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:121.00000381%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       xml:space="preserve"><flowRegion
         id="flowRegion4369-0-6-7-7-5-6-6-7-3" /><flowPara
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:121.00000381%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;writing-mode:lr-tb;text-anchor:end"
         id="flowPara4783-7-2-8-1-0-0-9">UI</flowPara></flowRoot>    <rect
       y="960.23627"
       x="155.90552"
       height="74.4095"
       width="81.496071"
       id="rect4347-0-2-5-5-9-5-8-0-5-8"
       style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:#ffc13f;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate" />
    <flowRoot
       transform="translate(76.291902,985.12429)"
       id="flowRoot4367-0-7-2-4-4-43-8-0"
       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:121.00000381%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       xml:space="preserve"><flowRegion
         id="flowRegion4369-0-6-7-7-5-6-7-9" /><flowPara
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:10px;line-height:121.00000381%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:end;writing-mode:lr-tb;text-anchor:end"
         id="flowPara4783-7-2-8-1-1-7">Table</flowPara></flowRoot>    <path
       style="fill:none;stroke:#e61e6d;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 248.0315,949.60636 -155.905517,-4e-5"
       id="path3003-6-5-1-5-1-2"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <path
       style="fill:none;stroke:#e61e6d;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 148.8189,1041.7323 0,-88.58268"
       id="path3003-6-5-1-5-1-2-9"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <path
       style="fill:none;stroke:#33383a;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="m 155.9055,981.49612 -74.409457,-7e-5"
       id="path3003-6-5-1-5-13-9"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="cc" />
    <circle
       cy="981.49609"
       cx="81.49604"
       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#00b4f0;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.70866142;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
       id="path2997-7-6-1-7-9-9"
       r="2.1259842" />
    <circle
       cy="981.49609"
       cx="155.9055"
       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ff3a49;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
       id="path2997-7-6-13-39-2"
       r="2.1259842" />
  </g>
 </svg>
--- a/documentation/application/original-drawings/view-navigation.svg
+++ b/documentation/application/original-drawings/view-navigation.svg
--- a/documentation/architecture/architecture-client-side.asciidoc
+++ b/documentation/architecture/architecture-client-side.asciidoc
@@ -17,7 +17,7 @@ The client-side engine is illustrated in <<figure.architecture.client-side>>.

 [[figure.architecture.client-side]]
 .Vaadin Client-Side Engine
 image::img/clientside-arch-hi.png[width=60%, scaledwidth=90%]
 image::img/clientside-arch-hi.png[width=80%, scaledwidth=100%]

 The client-side framework includes two kinds of built-in widgets: GWT widgets
 and Vaadin-specific widgets. The two widget collections have significant
--- a/documentation/architecture/architecture-technology.asciidoc
+++ b/documentation/architecture/architecture-technology.asciidoc
@@ -165,7 +165,7 @@ dynamic content. This is illustrated in

 [[figure.architecture.technology.servlet]]
 .Java Web Applications and Servlets
 image::img/java-servlet-hi.png[width=40%, scaledwidth=70%]
 image::img/java-servlet-hi.png[width=80%, scaledwidth=100%]

 Web applications are usually packaged and deployed to a server as __WAR__ (
 __Web application ARchive__) files, which are Java JAR packages, which in turn
--- a/documentation/architecture/img/clientside-arch-hi.png
+++ b/documentation/architecture/img/clientside-arch-hi.png
--- a/documentation/architecture/img/java-servlet-hi.png
+++ b/documentation/architecture/img/java-servlet-hi.png
--- a/documentation/architecture/original-drawings/Makefile
+++ b/documentation/architecture/original-drawings/Makefile
@@ -1,5 +1,5 @@
 SVG =
 RASTERIMAGES = architecture-detailed
 RASTERIMAGES = architecture-detailed java-servlet clientside-arch

 RASTERSRCIMAGES := $(foreach file, $(RASTERIMAGES), $(file).svg)
 RASTERIMAGES_HI := $(foreach file, $(RASTERIMAGES), ../img/$(file)-hi.png)
--- a/documentation/architecture/original-drawings/clientside-arch.svg
+++ b/documentation/architecture/original-drawings/clientside-arch.svg
--- a/documentation/architecture/original-drawings/java-servlet.svg
+++ b/documentation/architecture/original-drawings/java-servlet.svg
--- a/documentation/components/chapter-components.asciidoc
+++ b/documentation/components/chapter-components.asciidoc
@@ -44,14 +44,14 @@ include::components-optiongroup.asciidoc[leveloffset=+2]

 include::components-twincolselect.asciidoc[leveloffset=+2]

 include::components-grid.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]
--- a/documentation/components/components-calendar.asciidoc
+++ b/documentation/components/components-calendar.asciidoc
@@ -17,7 +17,7 @@ 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
 * Add events directly 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
@@ -33,8 +33,7 @@ ifdef::web[handlers, as described in <<components.calendar.customizing>>.]
 ifndef::web[handlers.]

 The data source of a calendar can be practically anything, as its events are
 queried dynamically by the component. You can bind the calendar to a Vaadin
 container, or to any other data source by implementing an __event provider__.
 queried dynamically by the component. You can bind the calendar to any 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.
@@ -103,7 +102,6 @@ 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
@@ -125,12 +123,13 @@ 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.

 ifdef::vaadin7[]
 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.

 endif::vaadin7[]

 [[components.calendar.events.details]]
 === Event Types
@@ -184,8 +183,7 @@ 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.



 ifdef::vaadin7[]
 [[components.calendar.container]]
 == Getting Events from a Container

@@ -311,8 +309,8 @@ BasicEvent event = new BasicEvent("The Event", "Single Event",
    new GregorianCalendar(2012,1,15,14,00).getTime());
 calendar.addEvent(event);
 ----

 endif::web[]
 endif::vaadin7[]


 ifdef::web[]
--- a/documentation/components/components-fields.asciidoc
+++ b/documentation/components/components-fields.asciidoc
@@ -24,13 +24,19 @@ addition to the component features inherited from
 [classname]#AbstractComponent#, it implements the features defined in the
 [classname]#HasValue# and [classname]#Component.Focusable# interfaces.

 The description of the field interfaces and base classes is broken down in the
 following sections.

 [[figure.components.fields.hasvalue]]
 .Field components having values
 image::img/field-interface-v8-hi.png[width=60%, scaledwidth=100%]

 /////////////////////////////////////////////////////////////////////////////
 // Disabled because everything has changed in Vaadin 8.
 // Revise
 /////////////////////////////////////////////////////////////////////////////
 ifdef::disabled[]

 The description of the field interfaces and base classes is broken down in the
 following sections.

 [[components.fields.field]]
 == The [classname]#Field# Interface

@@ -337,4 +343,6 @@ 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.

 endif::disabled[]

 (((range="endofrange", startref="term.components.fields")))
--- a/documentation/components/components-table.asciidoc
+++ b/documentation/components/components-table.asciidoc
@@ -14,6 +14,13 @@ endif::web[]

 ((("[classname]#Table#", id="term.components.table", range="startofrange")))

 [NOTE]
 ====
 [classname]#Table# is largely obsolete and has been replaced by the newer [classname]#Grid# component.
 Nevertheless, it still has some features, such as drag and drop, which have no counterpart in Grid.
 Table also still uses the old data API.
 Hence, only a short introduction is given below; see the online Vaadin Docs for more details.
 ====

 The [classname]#Table# component is intended for presenting tabular data
 organized in rows and columns. The [classname]#Table# is one of the most
@@ -21,6 +28,9 @@ 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.

 .Basic Table Example
 image::img/table-example1.png[width=35%, scaledwidth=50%]

 The data contained in a [classname]#Table# is managed using the Vaadin data model (see <<dummy/../../../framework/datamodel/datamodel-overview.asciidoc#datamodel.overview,"Binding Components to Data">>), through the [classname]#Container# interface of the [classname]#Table#.
 This makes it possible to bind a table directly to a data source, such as a database query.
 Only the visible part of the table is loaded
@@ -72,8 +82,7 @@ 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[width=35%, scaledwidth=50%]
 ifdef::vaadin7[]

 Scalability of the [classname]#Table# is largely dictated by the container. The
 default [classname]#IndexedContainer# is relatively heavy and can cause
@@ -1152,5 +1161,6 @@ image::img/table-cellstylegenerator1.png[width=50%, scaledwidth=80%]

 endif::web[]

 endif::vaadin7[]

 (((range="endofrange", startref="term.components.table")))
--- a/documentation/getting-started/img/myproject-created-annotated-hi.png
+++ b/documentation/getting-started/img/myproject-created-annotated-hi.png
--- a/documentation/getting-started/img/netbeans-created-annotated-hi.png
+++ b/documentation/getting-started/img/netbeans-created-annotated-hi.png
--- a/documentation/getting-started/original-drawings/myproject-created-annotated.svg
+++ b/documentation/getting-started/original-drawings/myproject-created-annotated.svg
@@ -72,8 +72,8 @@
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="1.979899"
     inkscape:cx="544.97755"
     inkscape:cy="286.33054"
     inkscape:cx="252.01881"
     inkscape:cy="309.91553"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     inkscape:window-width="1920"
@@ -149,7 +149,7 @@
         transform="translate(0,308.2677)" />
      <path
         sodipodi:type="arc"
         style="color:#000000;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
         style="color:#000000;fill:#ff3a49;fill-opacity:1;stroke:none;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
         id="path3005-2-10"
         sodipodi:cx="25"
         sodipodi:cy="419.09448"
@@ -159,7 +159,7 @@
         transform="matrix(0.54549827,0,0,0.54549827,36.362543,498.74687)" />
      <path
         sodipodi:type="arc"
         style="color:#000000;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946000000006;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
         style="color:#000000;fill:#00b4f0;fill-opacity:1;stroke:none;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
         id="path3005-2-10-5"
         sodipodi:cx="25"
         sodipodi:cy="419.09448"
@@ -202,14 +202,14 @@
         inkscape:connector-curvature="0"
         transform="translate(0,308.2677)" />
      <circle
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ff3a49;fill-opacity:1;stroke:none;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         id="path3005-2-10-8"
         transform="matrix(0.54549827,0,0,0.54549827,31.362543,498.74687)"
         cx="25"
         cy="419.09448"
         r="9.1659365" />
      <circle
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#00b4f0;fill-opacity:1;stroke:none;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         id="path3005-2-10-5-2"
         transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)"
         cx="25"
@@ -227,14 +227,14 @@
         inkscape:connector-curvature="0"
         transform="translate(0,308.2677)" />
      <circle
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ff3a49;fill-opacity:1;stroke:none;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         id="path3005-2-10-8-2"
         transform="matrix(0.54549827,0,0,0.54549827,-83.637457,498.74688)"
         cx="25"
         cy="419.09448"
         r="9.1659365" />
      <circle
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#00b4f0;fill-opacity:1;stroke:none;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         id="path3005-2-10-5-2-3"
         transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)"
         cx="25"
@@ -252,14 +252,14 @@
         inkscape:connector-curvature="0"
         transform="translate(0,308.2677)" />
      <circle
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ff3a49;fill-opacity:1;stroke:none;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         id="path3005-2-10-8-2-3"
         transform="matrix(0.54549827,0,0,0.54549827,-58.637457,498.74688)"
         cx="25"
         cy="419.09448"
         r="9.1659365" />
      <circle
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#00b4f0;fill-opacity:1;stroke:none;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         id="path3005-2-10-5-2-3-8"
         transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)"
         cx="25"
--- a/documentation/getting-started/original-drawings/netbeans-created-annotated.svg
+++ b/documentation/getting-started/original-drawings/netbeans-created-annotated.svg
@@ -82,9 +82,9 @@
     borderopacity="1.0"
     inkscape:pageopacity="1"
     inkscape:pageshadow="2"
     inkscape:zoom="0.98994949"
     inkscape:cx="427.53838"
     inkscape:cy="397.85985"
     inkscape:zoom="1.4"
     inkscape:cx="241.94765"
     inkscape:cy="400.47504"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     inkscape:window-width="1920"
@@ -123,7 +123,7 @@
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
@@ -152,14 +152,14 @@
         inkscape:connector-curvature="0"
         transform="translate(0,308.2677)" />
      <circle
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ff3a49;fill-opacity:1;stroke:none;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         id="path3005-2-10"
         transform="matrix(0.54549827,0,0,0.54549827,6.3625532,498.74687)"
         cx="25"
         cy="419.09448"
         r="9.1659365" />
      <circle
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#00b4f0;fill-opacity:1;stroke:none;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         id="path3005-2-10-5"
         transform="matrix(0.54549827,0,0,0.54549827,156.36255,498.74687)"
         cx="25"
@@ -200,14 +200,14 @@
         inkscape:connector-curvature="0"
         transform="translate(0,308.2677)" />
      <circle
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ff3a49;fill-opacity:1;stroke:none;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         id="path3005-2-10-8"
         transform="matrix(0.54549827,0,0,0.54549827,31.362543,498.74687)"
         cx="25"
         cy="419.09448"
         r="9.1659365" />
      <circle
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#00b4f0;fill-opacity:1;stroke:none;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         id="path3005-2-10-5-2"
         transform="matrix(0.54549827,0,0,0.54549827,86.362543,498.74687)"
         cx="25"
@@ -225,14 +225,14 @@
         inkscape:connector-curvature="0"
         transform="translate(0,308.2677)" />
      <circle
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffedd1;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ff3a49;fill-opacity:1;stroke:none;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         id="path3005-2-10-8-2"
         transform="matrix(0.54549827,0,0,0.54549827,-83.637457,498.74688)"
         cx="25"
         cy="419.09448"
         r="9.1659365" />
      <circle
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ecf3ff;fill-opacity:1;stroke:#000000;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#00b4f0;fill-opacity:1;stroke:none;stroke-width:2.74977946;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
         id="path3005-2-10-5-2-3"
         transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)"
         cx="25"