Change-Id: Iedcd7bfc04c53b7d1cdf621261234688d21a52f3pull/60/head
@@ -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[] |
@@ -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) |
@@ -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> |
@@ -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 |
@@ -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 |
@@ -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) |
@@ -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] |
@@ -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[] |
@@ -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"))) |
@@ -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"))) |
@@ -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" |
@@ -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" |