From 44a94bb28605bec406f415ef66fc332c265f7c9a Mon Sep 17 00:00:00 2001 From: Marko Gronroos Date: Tue, 19 Jul 2016 19:12:09 +0300 Subject: Revised client-side arch, Java Servlet, new project, view navigation, and basic UI schematic diagrams (#19897). Mostly disabled and rearranged Table section, etc. Change-Id: Iedcd7bfc04c53b7d1cdf621261234688d21a52f3 --- .../application/application-architecture.asciidoc | 45 +- documentation/application/img/ui-schematic-hi.png | Bin 0 -> 27020 bytes .../application/img/view-navigation-hi.png | Bin 154673 -> 101744 bytes .../application/original-drawings/Makefile | 2 +- .../application/original-drawings/ui-schematic.svg | 302 ++ .../original-drawings/view-navigation.svg | 3469 ++++++++++---------- 6 files changed, 2092 insertions(+), 1726 deletions(-) create mode 100644 documentation/application/img/ui-schematic-hi.png create mode 100644 documentation/application/original-drawings/ui-schematic.svg (limited to 'documentation/application') diff --git a/documentation/application/application-architecture.asciidoc b/documentation/application/application-architecture.asciidoc index c00a378a11..5b945e9abc 100644 --- a/documentation/application/application-architecture.asciidoc +++ b/documentation/application/application-architecture.asciidoc @@ -48,29 +48,21 @@ public class MyHierarchicalUI extends UI { } ---- -The component hierarchy could be illustrated with a tree as follows: +The component hierarchy is illustrated in <>. +[[figure.application.architecture.schematic]] +.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 <>. +The actual UI is shown in <>. [[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 -<>. 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 <>. +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 <> 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 <> 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 -<>. +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 <>. [[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 -<>. +The pattern is described in <>. endif::web[] diff --git a/documentation/application/img/ui-schematic-hi.png b/documentation/application/img/ui-schematic-hi.png new file mode 100644 index 0000000000..2fa835f551 Binary files /dev/null and b/documentation/application/img/ui-schematic-hi.png differ diff --git a/documentation/application/img/view-navigation-hi.png b/documentation/application/img/view-navigation-hi.png index 7c0775d983..2b41a6be23 100644 Binary files a/documentation/application/img/view-navigation-hi.png and b/documentation/application/img/view-navigation-hi.png differ diff --git a/documentation/application/original-drawings/Makefile b/documentation/application/original-drawings/Makefile index a2f48c722b..11fa5aa8fd 100644 --- a/documentation/application/original-drawings/Makefile +++ b/documentation/application/original-drawings/Makefile @@ -1,5 +1,5 @@ SVG = -RASTERIMAGES = application-architecture +RASTERIMAGES = application-architecture view-navigation ui-schematic RASTERSRCIMAGES := $(foreach file, $(RASTERIMAGES), $(file).svg) RASTERIMAGES_HI := $(foreach file, $(RASTERIMAGES), ../img/$(file)-hi.png) diff --git a/documentation/application/original-drawings/ui-schematic.svg b/documentation/application/original-drawings/ui-schematic.svg new file mode 100644 index 0000000000..6182bdf5ee --- /dev/null +++ b/documentation/application/original-drawings/ui-schematic.svg @@ -0,0 +1,302 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + VerticalLayout HorizontalLayout Label Tree + + + UI + Table + + + + + + diff --git a/documentation/application/original-drawings/view-navigation.svg b/documentation/application/original-drawings/view-navigation.svg index 9e8ee92c03..e4acdf1e69 100644 --- a/documentation/application/original-drawings/view-navigation.svg +++ b/documentation/application/original-drawings/view-navigation.svg @@ -1,1694 +1,1775 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - Login View - - - Username - - Password - - Login - Register - - - - Registration View - - - Name - - Email - - - Username - - ... - - - - - - - - - - - - - Main View - - - My Application - One Four Five SixTwo Seven EightThree Nine - - - - - - - - - - - - - - - - - Logout - - - - Help View - - Help on BoxesBoxes are things thatcan be somewherewhile not being in someother place. - - - - - - - - - - - - - - - - - - - - - - ContentSub-View - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + REGISTRATION VIEW + + + Name + + Username + + Email + + Planet + + + OK + + + + + + HELP VIEW + + Boxes are things thatcan be somewhere whilenot being in someother place. + Help on Cubes + Back + + + + + LOGIN VIEW + + + Username + + Password + + Register + Login + + + + + + MAIN VIEW + Cube + Sphere + Pyramid + Donut + + Logout + Help + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -- cgit v1.2.3