Change-Id: Ie8e371c059f70600bafcf781938ef35878f41324tags/7.7.0.alpha1
@@ -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 | |||
<<dummy/../../../framework/datamodel/datamodel-overview.asciidoc#datamodel.overview,"Binding | |||
Components to Data">>. 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. | |||
<<dummy/../../../framework/datamodel/datamodel-overview.asciidoc#datamodel.overview,"Binding Components to Data">>. | |||
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%] | |||
<<figure.advanced.architecture.mvp>> 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. | |||
@@ -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 | |||
<<dummy/../../../framework//-overview.asciidoc#figure.advanced.debug.hierarchy.analyze,"">>. | |||
<<figure.advanced.debug.hierarchy.analyze>>. | |||
[classname]#CustomLayout# components can not be analyzed in the same way as | |||
other layouts. For custom layouts, the button analyzes all contained |
@@ -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: |
@@ -22,13 +22,12 @@ hierarchy is illustrated in <<figure.clientside.widgets>>. 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 { | |||
} | |||
} | |||
---- | |||
@@ -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: |
@@ -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 <<dummy/../../../touchkit/touchkit-overview#touchkit.overview,"Vaadin TouchKit">>. | |||
See <<dummy/../../../touchkit/mobile-overview#mobile.overview,"Vaadin TouchKit">>. | |||
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`:: |
@@ -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 <<dummy/../../../framework/getting-started-archetypes#getting-started.archetypes,"Overview of Maven Archetypes">>. | |||
`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 <<dummy/../../../touchkit/touchkit-overview#touchkit.overview,"Vaadin TouchKit">>. | |||
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 |
@@ -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 <<figure.getting-started.netbeans.exploring>>. | |||
@@ -68,6 +68,14 @@ The project hierarchy shown in the Project Explorer is shown in <<figure.getting | |||
.A new Vaadin project in NetBeans | |||
image::img/netbeans-created-annotated-hi.png[width=80%] | |||
[filename]#mytheme#:: | |||
The theme of the UI. | |||
See <<DUMMY/../../../framework/themes/themes-overview#themes.overview, "Themes">> for information about themes. | |||
[filename]#MyUI.java#:: | |||
The UI class, which is the main entry-point of your application. | |||
See <<DUMMY/../../../framework/application/application-overview#application.overview, "Server-Side Applications">> 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 |
@@ -297,7 +297,7 @@ | |||
sodipodi:role="line" | |||
id="tspan13163-0" | |||
x="354.74399" | |||
y="839.23932">The widget set</tspan></text> | |||
y="839.23932">The widget set definition</tspan></text> | |||
<text | |||
xml:space="preserve" | |||
style="font-size:16px;font-style:normal;font-variant:normal;font-weight:300;font-stretch:normal;text-align:start;line-height:125%;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;font-family:Helvetica LT Std;-inkscape-font-specification:Helvetica LT Std Light" |
@@ -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 |