From ef406ae250aa650a52111a60369d9f0796714b00 Mon Sep 17 00:00:00 2001 From: Marko Gronroos Date: Fri, 18 Mar 2016 15:52:20 +0200 Subject: Fixed some missing images and broken xrefs, as well as problems in the getting-started chapter (#19639). Change-Id: Ie8e371c059f70600bafcf781938ef35878f41324 --- .../advanced/advanced-architecture.asciidoc | 40 +- documentation/advanced/advanced-debug.asciidoc | 6 +- .../advanced/img/three-layer-architecture-hi.png | Bin 0 -> 39007 bytes documentation/advanced/original-drawings/Makefile | 13 + .../original-drawings/three-layer-architecture.svg | 1069 ++++++++++++++++ .../clientside/clientside-widget.asciidoc | 7 +- documentation/clientside/img/gwt-widgets-hi.png | Bin 0 -> 190196 bytes .../clientside/original-drawings/Makefile | 13 + .../clientside/original-drawings/gwt-widgets.svg | 1337 ++++++++++++++++++++ .../getting-started-archetypes.asciidoc | 2 +- .../getting-started/getting-started-maven.asciidoc | 32 +- .../getting-started-netbeans.asciidoc | 20 +- .../img/netbeans-created-annotated-hi.png | Bin 99367 -> 100861 bytes .../netbeans-created-annotated.svg | 2 +- .../gwt/original-drawings/gwt-widgets.svg | 1337 -------------------- documentation/installing/installing-eclipse.adoc | 2 - documentation/portal/img/project-new-portlet-1.png | Bin 0 -> 51283 bytes documentation/portal/img/project-new-portlet-3.png | Bin 0 -> 43571 bytes 18 files changed, 2474 insertions(+), 1406 deletions(-) create mode 100644 documentation/advanced/img/three-layer-architecture-hi.png create mode 100644 documentation/advanced/original-drawings/Makefile create mode 100644 documentation/advanced/original-drawings/three-layer-architecture.svg create mode 100644 documentation/clientside/img/gwt-widgets-hi.png create mode 100644 documentation/clientside/original-drawings/Makefile create mode 100644 documentation/clientside/original-drawings/gwt-widgets.svg delete mode 100644 documentation/gwt/original-drawings/gwt-widgets.svg create mode 100644 documentation/portal/img/project-new-portlet-1.png create mode 100644 documentation/portal/img/project-new-portlet-3.png (limited to 'documentation') diff --git a/documentation/advanced/advanced-architecture.asciidoc b/documentation/advanced/advanced-architecture.asciidoc index 437c6f4a1d..219443b470 100644 --- a/documentation/advanced/advanced-architecture.asciidoc +++ b/documentation/advanced/advanced-architecture.asciidoc @@ -29,14 +29,13 @@ model and the "business logic" of the application, typically as beans or POJOs. A user interface is built on top of the domain model, in our context with the Vaadin Framework. The Vaadin user interface could be bound directly to the data model through the Vaadin Data Model, described in -<>. Beneath the domain model lies a data store, such as a -relational database. The dependencies between the layers are restricted so that -a higher layer may depend on a lower one, but never the other way around. +<>. +Beneath the domain model lies a data store, such as a relational database. +The dependencies between the layers are restricted so that a higher layer may depend on a lower one, but never the other way around. [[figure.advanced.architecture.layering]] -.Three-Layer Architecture -image::img/three-layer-architecture-hi.png[] +.Three-layer architecture +image::img/three-layer-architecture-hi.png[width=80%] An __application layer__ (or __service layer__) is often distinguished from the domain layer, offering the domain logic as a service, which can be used by the @@ -65,8 +64,8 @@ implementation better than in MVC and allows easier unit testing of the presenter and model. [[figure.advanced.architecture.mvp]] -.Model-View-Presenter Pattern -image::img/mvp-pattern-hi.png[] +.Model-View-Presenter pattern +image::img/mvp-pattern-hi.png[width=60%] <> illustrates the MVP pattern with a simple calculator. The domain model is realized in the [classname]#Calculator# class, @@ -88,10 +87,10 @@ the following example: // Create the model and the Vaadin view implementation CalculatorModel model = new CalculatorModel(); CalculatorViewImpl view = new CalculatorViewImpl(); - + // The presenter binds the model and view together new CalculatorPresenter(model, view); - + // The view implementation is a Vaadin component layout.addComponent(view); ---- @@ -111,7 +110,7 @@ for manipulating it. /** The model **/ class CalculatorModel { private double value = 0.0; - + public void clear() { value = 0.0; } @@ -128,11 +127,11 @@ class CalculatorModel { if (arg != 0.0) value /= arg; } - + public double getValue() { return value; } - + public void setValue(double value) { this.value = value; } @@ -181,7 +180,7 @@ class CalculatorViewImpl extends CustomComponent // Create a result label that spans over all // the 4 columns in the first row layout.addComponent(display, 0, 0, 3, 0); - + // The operations for the calculator in the order // they appear on the screen (left to right, top // to bottom) @@ -196,7 +195,7 @@ class CalculatorViewImpl extends CustomComponent setCompositionRoot(layout); } - + public void setDisplay(double value) { display.setValue(Double.toString(value)); } @@ -239,13 +238,13 @@ class CalculatorPresenter private double current = 0.0; private char lastOperationRequested = 'C'; - + public CalculatorPresenter(CalculatorModel model, CalculatorView view) { this.model = model; this.view = view; - - view.setDisplay(current); + + view.setDisplay(current); view.addListener(this); } @@ -291,8 +290,3 @@ class CalculatorPresenter In the above example, we held some state information in the presenter. Alternatively, we could have had an intermediate controller between the presenter and the model to handle the low-level button logic. - - - - - diff --git a/documentation/advanced/advanced-debug.asciidoc b/documentation/advanced/advanced-debug.asciidoc index 5415d0655e..3bbd6eb931 100644 --- a/documentation/advanced/advanced-debug.asciidoc +++ b/documentation/advanced/advanced-debug.asciidoc @@ -154,8 +154,8 @@ currently visible UI and makes a report of possible layout related problems. All detected layout problems are displayed in the log and also printed to the console. -[[]] -.Debug Window Showing the Result of Layout Analysis. +[[figure.advanced.debug.hierarchy.analyze]] +.Debug window showing the result of layout analysis. image::img/debug-window-analyze-layouts.png[] Clicking on a reported problem highlights the component with the problem in the @@ -166,7 +166,7 @@ relative size inside a container (layout) that has undefined size in the particular direction (height or width). For example, adding a [classname]#Button# with 100% width inside a [classname]#VerticalLayout# with undefined width. In such a case, the error would look as shown in -<>. +<>. [classname]#CustomLayout# components can not be analyzed in the same way as other layouts. For custom layouts, the button analyzes all contained diff --git a/documentation/advanced/img/three-layer-architecture-hi.png b/documentation/advanced/img/three-layer-architecture-hi.png new file mode 100644 index 0000000000..dbdd8a3e49 Binary files /dev/null and b/documentation/advanced/img/three-layer-architecture-hi.png differ diff --git a/documentation/advanced/original-drawings/Makefile b/documentation/advanced/original-drawings/Makefile new file mode 100644 index 0000000000..ea22c86fac --- /dev/null +++ b/documentation/advanced/original-drawings/Makefile @@ -0,0 +1,13 @@ +IMAGES = three-layer-architecture + +SRCIMAGES := $(foreach file, $(IMAGES), $(file).svg) +TRGIMAGES_HI := $(foreach file, $(IMAGES), ../img/$(file)-hi.png) +TRGIMAGES_LO := $(foreach file, $(IMAGES), ../img/$(file)-lo.png) + +images: $(TRGIMAGES_HI) FORCE +# Just do low now $(TRGIMAGES_LO) + +$(TRGIMAGES_HI): ../img/%-hi.png: %.svg + inkscape --export-png $@ --export-dpi=150 --export-area-drawing $< + +FORCE: diff --git a/documentation/advanced/original-drawings/three-layer-architecture.svg b/documentation/advanced/original-drawings/three-layer-architecture.svg new file mode 100644 index 0000000000..64e3792e7c --- /dev/null +++ b/documentation/advanced/original-drawings/three-layer-architecture.svg @@ -0,0 +1,1069 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + Presentation Layer + + + class Comet { int id; String name; ...} + Domain Layer + + + Data Access Layer CREATE TABLE Comets ( id INTEGER PRIMARY KEY, name VARCHAR(20))INSERT INTO Comets (id, name) VALUES (1, 'Halley');... + + + + + + + diff --git a/documentation/clientside/clientside-widget.asciidoc b/documentation/clientside/clientside-widget.asciidoc index ed911a46b4..2fab75ed18 100644 --- a/documentation/clientside/clientside-widget.asciidoc +++ b/documentation/clientside/clientside-widget.asciidoc @@ -22,13 +22,12 @@ hierarchy is illustrated in <>. Please see the GWT API documentation for a complete description of the widget classes. [[figure.clientside.widgets]] -.GWT Widget Base Class Hierarchy +.GWT widget base class hierarchy image::img/gwt-widgets-hi.png[] For example, we could extend the [classname]#Label# widget to display some custom text. - ---- package com.example.myapp.client; @@ -70,7 +69,3 @@ public class MyEntryPoint implements EntryPoint { } } ---- - - - - diff --git a/documentation/clientside/img/gwt-widgets-hi.png b/documentation/clientside/img/gwt-widgets-hi.png new file mode 100644 index 0000000000..e09b60c422 Binary files /dev/null and b/documentation/clientside/img/gwt-widgets-hi.png differ diff --git a/documentation/clientside/original-drawings/Makefile b/documentation/clientside/original-drawings/Makefile new file mode 100644 index 0000000000..5479a473e9 --- /dev/null +++ b/documentation/clientside/original-drawings/Makefile @@ -0,0 +1,13 @@ +IMAGES = gwt-widgets + +SRCIMAGES := $(foreach file, $(IMAGES), $(file).svg) +TRGIMAGES_HI := $(foreach file, $(IMAGES), ../img/$(file)-hi.png) +TRGIMAGES_LO := $(foreach file, $(IMAGES), ../img/$(file)-lo.png) + +images: $(TRGIMAGES_HI) FORCE +# Just do low now $(TRGIMAGES_LO) + +$(TRGIMAGES_HI): ../img/%-hi.png: %.svg + inkscape --export-png $@ --export-dpi=150 --export-area-drawing $< + +FORCE: diff --git a/documentation/clientside/original-drawings/gwt-widgets.svg b/documentation/clientside/original-drawings/gwt-widgets.svg new file mode 100644 index 0000000000..258fa50172 --- /dev/null +++ b/documentation/clientside/original-drawings/gwt-widgets.svg @@ -0,0 +1,1337 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + My Widget + Google Web Toolkit + + + Widget + + + + + UIObject + + + + + FocusWidget + + + + Composite + + + + + Panel + + + + + + + + ? + + + + ? + + + + ? + + + + ? + + + + + ComplexPanel + + + + SimplePanel + + + + HTMLTable + + + + + + FileUpload + Hidden + Image + Label + MenuBar + Hyperlink + TabBar + TabPanel + DisclosurePanel + SuggestBox + TextBoxBase + ButtonBase + ListBox + + + + diff --git a/documentation/getting-started/getting-started-archetypes.asciidoc b/documentation/getting-started/getting-started-archetypes.asciidoc index fbb75093e1..18d1eda56d 100644 --- a/documentation/getting-started/getting-started-archetypes.asciidoc +++ b/documentation/getting-started/getting-started-archetypes.asciidoc @@ -27,7 +27,7 @@ It has two modules: one for the add-on and another for a demo application. `vaadin-archetype-touchkit`:: A mobile development starter project using Vaadin TouchKit. -See <>. +See <>. Notice that this archetype uses the AGPL-licensed version of TouchKit, which requires that your project must also be licensed under the AGPL license. `vaadin-archetype-liferay-portlet`:: diff --git a/documentation/getting-started/getting-started-maven.asciidoc b/documentation/getting-started/getting-started-maven.asciidoc index 79f3b2febb..5d4618cb94 100644 --- a/documentation/getting-started/getting-started-maven.asciidoc +++ b/documentation/getting-started/getting-started-maven.asciidoc @@ -46,34 +46,12 @@ The parameters are as follows: archetypes. [parameter]#archetypeArtifactId#:: The archetype ID. -Vaadin 7 currently supports the following archetypes: +See the list of available archetypes in <>. -`vaadin-archetype-application`;; -A single-module project for simple applications. -Good for quick demos and trying out Vaadin. - -`vaadin-archetype-application-multimodule`;; -A complete Vaadin application development setup. -It features separate production and development profiles. - -`vaadin-archetype-application-example`;; -An example CRUD web application using multi-module project setup. - -`vaadin-archetype-widget`;; -A multi-module project for a new Vaadin add-on. -It has two modules: one for the add-on and another for a demo application. - -`vaadin-archetype-touchkit`;; -A mobile development starter project using Vaadin TouchKit. -See <>. -Notice that this archetype uses the AGPL-licensed version of TouchKit, which requires that your project must also be licensed under the AGPL license. - -`vaadin-archetype-liferay-portlet`;; -A portlet development setup for the open-source Liferay portal. - -[parameter]#archetypeVersion#:: Version of the archetype to use. This should be [literal]#++LATEST++# for normal -Vaadin releases. For prerelease versions it should be the exact version number, -such as [literal]#++7.5.3++#. +[parameter]#archetypeVersion#:: +Version of the archetype to use. +This should be [literal]#++LATEST++# for normal Vaadin releases. +For prerelease versions it should be the exact version number, such as [literal]#++7.6.4++#. [parameter]#groupId#:: A Maven group ID for your project. It is normally your organization domain name in reverse order, such as com.example. The group ID is also used as a prefix for diff --git a/documentation/getting-started/getting-started-netbeans.asciidoc b/documentation/getting-started/getting-started-netbeans.asciidoc index eff1697243..f5fa0afb14 100644 --- a/documentation/getting-started/getting-started-netbeans.asciidoc +++ b/documentation/getting-started/getting-started-netbeans.asciidoc @@ -59,7 +59,7 @@ Creating the project can take a while as Maven loads all the needed dependencies. [[getting-started.netbeans.exploring]] -== Exploring a Project +== Exploring the Project The project wizard has done all the work for you: a UI class skeleton has been written to the [filename]#src# directory. The project hierarchy shown in the Project Explorer is shown in <>. @@ -68,6 +68,14 @@ The project hierarchy shown in the Project Explorer is shown in <> for information about themes. + +[filename]#MyUI.java#:: +The UI class, which is the main entry-point of your application. +See <> for information about the basic structure of Vaadin applications. + The Vaadin libraries and other dependencies are managed by Maven. Notice that the libraries are not stored under the project folder, even though they are listed in the "Java Resources > Libraries > Maven Dependencies" virtual folder. @@ -78,16 +86,16 @@ Once created, you can run it in a server as follows. . In [guilabel]#Projects# tab, select the project and click in the [guilabel]#Run Project# button in the tool bar (or press kbd:[F6]). -. In the [guilabel]#Select deployment server#, select a server from the [guilabel]#Server# list. -It should show either GlassFish or Apache Tomcat, depending on what you chose in NetBeans installation. +. In the [guilabel]#Select deployment server# window, select a server from the [guilabel]#Server# list. +It should show either GlassFish or Apache Tomcat or both, depending on what you chose in NetBeans installation. + -image::img/netbeans-server.png[width=60%] +image::img/netbeans-server.png[width=75%] + Also, select [guilabel]#Remember Permanently# if you want to use the same server also in future while developing applications. + Click [guibutton]#OK#. -. -It will compile the widget set at this point, which may take a while. ++ +The widget set will be compiled at this point, which may take a while. If all goes well, NetBeans starts the server in port 8080 and, depending on your system configuration, launches the default browser to display the web diff --git a/documentation/getting-started/img/netbeans-created-annotated-hi.png b/documentation/getting-started/img/netbeans-created-annotated-hi.png index fd94e88321..5abea08c58 100644 Binary files a/documentation/getting-started/img/netbeans-created-annotated-hi.png and b/documentation/getting-started/img/netbeans-created-annotated-hi.png differ diff --git a/documentation/getting-started/original-drawings/netbeans-created-annotated.svg b/documentation/getting-started/original-drawings/netbeans-created-annotated.svg index 3b87ce23e0..ae0176f25b 100644 --- a/documentation/getting-started/original-drawings/netbeans-created-annotated.svg +++ b/documentation/getting-started/original-drawings/netbeans-created-annotated.svg @@ -297,7 +297,7 @@ sodipodi:role="line" id="tspan13163-0" x="354.74399" - y="839.23932">The widget set + y="839.23932">The widget set definition - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - My Widget - Google Web Toolkit - - - Widget - - - - - UIObject - - - - - FocusWidget - - - - Composite - - - - - Panel - - - - - - - - ? - - - - ? - - - - ? - - - - ? - - - - - ComplexPanel - - - - SimplePanel - - - - HTMLTable - - - - - - FileUpload - Hidden - Image - Label - MenuBar - Hyperlink - TabBar - TabPanel - DisclosurePanel - SuggestBox - TextBoxBase - ButtonBase - ListBox - - - - diff --git a/documentation/installing/installing-eclipse.adoc b/documentation/installing/installing-eclipse.adoc index 244a2a7b7d..8139c1d164 100644 --- a/documentation/installing/installing-eclipse.adoc +++ b/documentation/installing/installing-eclipse.adoc @@ -86,10 +86,8 @@ You can install the plugin as follows: . Select "Help > Install New Software...". . Add the Vaadin plugin update site by clicking [guibutton]#Add...# button. - + image::img/plugin-install-addsite.png[] - + Enter a name such as "Vaadin Update Site" and the URL of the update site: http://vaadin.com/eclipse. If you want or need to use the latest unstable diff --git a/documentation/portal/img/project-new-portlet-1.png b/documentation/portal/img/project-new-portlet-1.png new file mode 100644 index 0000000000..e1ef5837d5 Binary files /dev/null and b/documentation/portal/img/project-new-portlet-1.png differ diff --git a/documentation/portal/img/project-new-portlet-3.png b/documentation/portal/img/project-new-portlet-3.png new file mode 100644 index 0000000000..d8eeaa71bc Binary files /dev/null and b/documentation/portal/img/project-new-portlet-3.png differ -- cgit v1.2.3