Change-Id: Iedcd7bfc04c53b7d1cdf621261234688d21a52f3pull/60/head
} | } | ||||
---- | ---- | ||||
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]] | [[figure.application.architecture.example]] | ||||
.Simple hierarchical UI | .Simple hierarchical UI | ||||
image::img/ui-architecture-hierarchical.png[width=70%, scaledwidth=90%] | 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 | The built-in components are described in | ||||
<<dummy/../../../framework/components/components-overview.asciidoc#components.overview,"User | <<dummy/../../../framework/components/components-overview.asciidoc#components.overview,"User | ||||
[[figure.application.architecture.navigation]] | [[figure.application.architecture.navigation]] | ||||
.Navigation Between Views | .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]] | [[application.architecture.accessing]] | ||||
[classname]#VaadinSession# with [methodname]#getService()#. | [classname]#VaadinSession# with [methodname]#getService()#. | ||||
The static methods use the built-in ThreadLocal support in the classes. | The static methods use the built-in ThreadLocal support in the classes. | ||||
ifdef::web[] | 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[] | endif::web[] |
SVG = | SVG = | ||||
RASTERIMAGES = application-architecture | |||||
RASTERIMAGES = application-architecture view-navigation ui-schematic | |||||
RASTERSRCIMAGES := $(foreach file, $(RASTERIMAGES), $(file).svg) | RASTERSRCIMAGES := $(foreach file, $(RASTERIMAGES), $(file).svg) | ||||
RASTERIMAGES_HI := $(foreach file, $(RASTERIMAGES), ../img/$(file)-hi.png) | RASTERIMAGES_HI := $(foreach file, $(RASTERIMAGES), ../img/$(file)-hi.png) |
<?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> |
[[figure.architecture.client-side]] | [[figure.architecture.client-side]] | ||||
.Vaadin Client-Side Engine | .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 | The client-side framework includes two kinds of built-in widgets: GWT widgets | ||||
and Vaadin-specific widgets. The two widget collections have significant | and Vaadin-specific widgets. The two widget collections have significant |
[[figure.architecture.technology.servlet]] | [[figure.architecture.technology.servlet]] | ||||
.Java Web Applications and Servlets | .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 applications are usually packaged and deployed to a server as __WAR__ ( | ||||
__Web application ARchive__) files, which are Java JAR packages, which in turn | __Web application ARchive__) files, which are Java JAR packages, which in turn |
SVG = | SVG = | ||||
RASTERIMAGES = architecture-detailed | |||||
RASTERIMAGES = architecture-detailed java-servlet clientside-arch | |||||
RASTERSRCIMAGES := $(foreach file, $(RASTERIMAGES), $(file).svg) | RASTERSRCIMAGES := $(foreach file, $(RASTERIMAGES), $(file).svg) | ||||
RASTERIMAGES_HI := $(foreach file, $(RASTERIMAGES), ../img/$(file)-hi.png) | RASTERIMAGES_HI := $(foreach file, $(RASTERIMAGES), ../img/$(file)-hi.png) |
include::components-twincolselect.asciidoc[leveloffset=+2] | include::components-twincolselect.asciidoc[leveloffset=+2] | ||||
include::components-grid.asciidoc[leveloffset=+2] | |||||
include::components-table.asciidoc[leveloffset=+2] | include::components-table.asciidoc[leveloffset=+2] | ||||
include::components-tree.asciidoc[leveloffset=+2] | include::components-tree.asciidoc[leveloffset=+2] | ||||
include::components-treetable.asciidoc[leveloffset=+2] | include::components-treetable.asciidoc[leveloffset=+2] | ||||
include::components-grid.asciidoc[leveloffset=+2] | |||||
include::components-menubar.asciidoc[leveloffset=+2] | include::components-menubar.asciidoc[leveloffset=+2] | ||||
include::components-upload.asciidoc[leveloffset=+2] | include::components-upload.asciidoc[leveloffset=+2] |
* Monthly, weekly, and daily views | * Monthly, weekly, and daily views | ||||
* Two types of events: all-day events and events with a time range | * 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 | * Control the range of the visible dates | ||||
* Selecting and editing date or time range by dragging | * Selecting and editing date or time range by dragging | ||||
* Drag and drop events to calendar | * Drag and drop events to calendar | ||||
ifndef::web[handlers.] | ifndef::web[handlers.] | ||||
The data source of a calendar can be practically anything, as its events are | 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 | The [classname]#Calendar# has undefined size by default and you usually want to | ||||
give it a fixed or relative size, for example as follows. | give it a fixed or relative size, for example as follows. | ||||
to manage the calendar events: | to manage the calendar events: | ||||
* Add events directly to the [classname]#Calendar# object using the [methodname]#addEvent()# | * 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 | * Use the __event provider__ mechanism | ||||
You can add events with [methodname]#addEvent()# and remove them with the | You can add events with [methodname]#addEvent()# and remove them with the | ||||
implement the [interfacename]#CalendarEventProvider# interface. It is up to the | implement the [interfacename]#CalendarEventProvider# interface. It is up to the | ||||
event provider that [classname]#Calendar# gets the correct events. | 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 | You can bind any Vaadin [classname]#Container# to a calendar, in which case a | ||||
[classname]#ContainerEventProvider# is used transparently. The container must be | [classname]#ContainerEventProvider# is used transparently. The container must be | ||||
ordered by start date and time of the events. See | ordered by start date and time of the events. See | ||||
<<dummy/../../../framework/datamodel/datamodel-container#datamodel.container,"Collecting | <<dummy/../../../framework/datamodel/datamodel-container#datamodel.container,"Collecting | ||||
Items in Containers">> for basic information about containers. | Items in Containers">> for basic information about containers. | ||||
endif::vaadin7[] | |||||
[[components.calendar.events.details]] | [[components.calendar.events.details]] | ||||
=== Event Types | === Event Types | ||||
package, there is no need to refresh the calendar. Just create events, set their | package, there is no need to refresh the calendar. Just create events, set their | ||||
properties and add them to the Event Provider. | properties and add them to the Event Provider. | ||||
ifdef::vaadin7[] | |||||
[[components.calendar.container]] | [[components.calendar.container]] | ||||
== Getting Events from a Container | == Getting Events from a Container | ||||
new GregorianCalendar(2012,1,15,14,00).getTime()); | new GregorianCalendar(2012,1,15,14,00).getTime()); | ||||
calendar.addEvent(event); | calendar.addEvent(event); | ||||
---- | ---- | ||||
endif::web[] | endif::web[] | ||||
endif::vaadin7[] | |||||
ifdef::web[] | ifdef::web[] |
[classname]#AbstractComponent#, it implements the features defined in the | [classname]#AbstractComponent#, it implements the features defined in the | ||||
[classname]#HasValue# and [classname]#Component.Focusable# interfaces. | [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]] | [[figure.components.fields.hasvalue]] | ||||
.Field components having values | .Field components having values | ||||
image::img/field-interface-v8-hi.png[width=60%, scaledwidth=100%] | 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]] | [[components.fields.field]] | ||||
== The [classname]#Field# Interface | == The [classname]#Field# Interface | ||||
group runs the validation for all the fields in the group, and if successful, | group runs the validation for all the fields in the group, and if successful, | ||||
writes the input values to the data source. | writes the input values to the data source. | ||||
endif::disabled[] | |||||
(((range="endofrange", startref="term.components.fields"))) | (((range="endofrange", startref="term.components.fields"))) |
((("[classname]#Table#", id="term.components.table", range="startofrange"))) | ((("[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 | The [classname]#Table# component is intended for presenting tabular data | ||||
organized in rows and columns. The [classname]#Table# is one of the most | organized in rows and columns. The [classname]#Table# is one of the most | ||||
components. You can easily implement editing of the table data, for example | 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. | 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#. | 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. | 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 | Only the visible part of the table is loaded | ||||
properties were added. The objects must be of the correct class, as defined in | properties were added. The objects must be of the correct class, as defined in | ||||
the [methodname]#addContainerProperty()# calls. | 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 | Scalability of the [classname]#Table# is largely dictated by the container. The | ||||
default [classname]#IndexedContainer# is relatively heavy and can cause | default [classname]#IndexedContainer# is relatively heavy and can cause | ||||
endif::web[] | endif::web[] | ||||
endif::vaadin7[] | |||||
(((range="endofrange", startref="term.components.table"))) | (((range="endofrange", startref="term.components.table"))) |
inkscape:pageopacity="0.0" | inkscape:pageopacity="0.0" | ||||
inkscape:pageshadow="2" | inkscape:pageshadow="2" | ||||
inkscape:zoom="1.979899" | 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:document-units="px" | ||||
inkscape:current-layer="layer1" | inkscape:current-layer="layer1" | ||||
inkscape:window-width="1920" | inkscape:window-width="1920" | ||||
transform="translate(0,308.2677)" /> | transform="translate(0,308.2677)" /> | ||||
<path | <path | ||||
sodipodi:type="arc" | 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" | id="path3005-2-10" | ||||
sodipodi:cx="25" | sodipodi:cx="25" | ||||
sodipodi:cy="419.09448" | sodipodi:cy="419.09448" | ||||
transform="matrix(0.54549827,0,0,0.54549827,36.362543,498.74687)" /> | transform="matrix(0.54549827,0,0,0.54549827,36.362543,498.74687)" /> | ||||
<path | <path | ||||
sodipodi:type="arc" | 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" | id="path3005-2-10-5" | ||||
sodipodi:cx="25" | sodipodi:cx="25" | ||||
sodipodi:cy="419.09448" | sodipodi:cy="419.09448" | ||||
inkscape:connector-curvature="0" | inkscape:connector-curvature="0" | ||||
transform="translate(0,308.2677)" /> | transform="translate(0,308.2677)" /> | ||||
<circle | <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" | id="path3005-2-10-8" | ||||
transform="matrix(0.54549827,0,0,0.54549827,31.362543,498.74687)" | transform="matrix(0.54549827,0,0,0.54549827,31.362543,498.74687)" | ||||
cx="25" | cx="25" | ||||
cy="419.09448" | cy="419.09448" | ||||
r="9.1659365" /> | r="9.1659365" /> | ||||
<circle | <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" | id="path3005-2-10-5-2" | ||||
transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)" | transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)" | ||||
cx="25" | cx="25" | ||||
inkscape:connector-curvature="0" | inkscape:connector-curvature="0" | ||||
transform="translate(0,308.2677)" /> | transform="translate(0,308.2677)" /> | ||||
<circle | <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" | id="path3005-2-10-8-2" | ||||
transform="matrix(0.54549827,0,0,0.54549827,-83.637457,498.74688)" | transform="matrix(0.54549827,0,0,0.54549827,-83.637457,498.74688)" | ||||
cx="25" | cx="25" | ||||
cy="419.09448" | cy="419.09448" | ||||
r="9.1659365" /> | r="9.1659365" /> | ||||
<circle | <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" | id="path3005-2-10-5-2-3" | ||||
transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)" | transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)" | ||||
cx="25" | cx="25" | ||||
inkscape:connector-curvature="0" | inkscape:connector-curvature="0" | ||||
transform="translate(0,308.2677)" /> | transform="translate(0,308.2677)" /> | ||||
<circle | <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" | id="path3005-2-10-8-2-3" | ||||
transform="matrix(0.54549827,0,0,0.54549827,-58.637457,498.74688)" | transform="matrix(0.54549827,0,0,0.54549827,-58.637457,498.74688)" | ||||
cx="25" | cx="25" | ||||
cy="419.09448" | cy="419.09448" | ||||
r="9.1659365" /> | r="9.1659365" /> | ||||
<circle | <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" | id="path3005-2-10-5-2-3-8" | ||||
transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)" | transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)" | ||||
cx="25" | cx="25" |
borderopacity="1.0" | borderopacity="1.0" | ||||
inkscape:pageopacity="1" | inkscape:pageopacity="1" | ||||
inkscape:pageshadow="2" | 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:document-units="px" | ||||
inkscape:current-layer="layer1" | inkscape:current-layer="layer1" | ||||
inkscape:window-width="1920" | inkscape:window-width="1920" | ||||
<dc:format>image/svg+xml</dc:format> | <dc:format>image/svg+xml</dc:format> | ||||
<dc:type | <dc:type | ||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> | rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> | ||||
<dc:title></dc:title> | |||||
<dc:title /> | |||||
</cc:Work> | </cc:Work> | ||||
</rdf:RDF> | </rdf:RDF> | ||||
</metadata> | </metadata> | ||||
inkscape:connector-curvature="0" | inkscape:connector-curvature="0" | ||||
transform="translate(0,308.2677)" /> | transform="translate(0,308.2677)" /> | ||||
<circle | <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" | id="path3005-2-10" | ||||
transform="matrix(0.54549827,0,0,0.54549827,6.3625532,498.74687)" | transform="matrix(0.54549827,0,0,0.54549827,6.3625532,498.74687)" | ||||
cx="25" | cx="25" | ||||
cy="419.09448" | cy="419.09448" | ||||
r="9.1659365" /> | r="9.1659365" /> | ||||
<circle | <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" | id="path3005-2-10-5" | ||||
transform="matrix(0.54549827,0,0,0.54549827,156.36255,498.74687)" | transform="matrix(0.54549827,0,0,0.54549827,156.36255,498.74687)" | ||||
cx="25" | cx="25" | ||||
inkscape:connector-curvature="0" | inkscape:connector-curvature="0" | ||||
transform="translate(0,308.2677)" /> | transform="translate(0,308.2677)" /> | ||||
<circle | <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" | id="path3005-2-10-8" | ||||
transform="matrix(0.54549827,0,0,0.54549827,31.362543,498.74687)" | transform="matrix(0.54549827,0,0,0.54549827,31.362543,498.74687)" | ||||
cx="25" | cx="25" | ||||
cy="419.09448" | cy="419.09448" | ||||
r="9.1659365" /> | r="9.1659365" /> | ||||
<circle | <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" | id="path3005-2-10-5-2" | ||||
transform="matrix(0.54549827,0,0,0.54549827,86.362543,498.74687)" | transform="matrix(0.54549827,0,0,0.54549827,86.362543,498.74687)" | ||||
cx="25" | cx="25" | ||||
inkscape:connector-curvature="0" | inkscape:connector-curvature="0" | ||||
transform="translate(0,308.2677)" /> | transform="translate(0,308.2677)" /> | ||||
<circle | <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" | id="path3005-2-10-8-2" | ||||
transform="matrix(0.54549827,0,0,0.54549827,-83.637457,498.74688)" | transform="matrix(0.54549827,0,0,0.54549827,-83.637457,498.74688)" | ||||
cx="25" | cx="25" | ||||
cy="419.09448" | cy="419.09448" | ||||
r="9.1659365" /> | r="9.1659365" /> | ||||
<circle | <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" | id="path3005-2-10-5-2-3" | ||||
transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)" | transform="matrix(0.54549827,0,0,0.54549827,91.362543,498.74687)" | ||||
cx="25" | cx="25" |