Change-Id: I0d5e76f7fb07f967dd04941a23e79dfb30049731tags/8.0.0.alpha1
@@ -190,11 +190,11 @@ class MyUI extends UI { | |||
You can also define it in the [filename]#web.xml# descriptor for the servlet: | |||
[source, xml, subs="normal"] | |||
[subs="normal"] | |||
---- | |||
<init-param> | |||
<param-name>widgetset</param-name> | |||
<param-value>com.example.myproject.MyWidgetSet</param-value> | |||
<param-value>[replaceable]##com.example.myproject.MyWidgetSet##</param-value> | |||
</init-param> | |||
---- | |||
@@ -237,7 +237,7 @@ The resulting image is shown in <<figure.application.resource.stream>>. | |||
[[figure.application.resource.stream]] | |||
.A stream resource | |||
image::img/application_streamresource.png[width=25%, scaledwidth=35%] | |||
image::img/application_streamresource.png[width=25%, scaledwidth=25%] | |||
Another way to create dynamic content is a request handler, described in | |||
<<dummy/../../../framework/advanced/advanced-requesthandler#advanced.requesthandler,"Request |
@@ -58,9 +58,9 @@ A button has an overall [literal]#++v-button++# style. The caption has | |||
[literal]#++v-button-caption++# style. There is also an intermediate wrap | |||
element, which may help in styling in some cases. | |||
The button component has many style variants in the Valo theme, as illustrated in <<figure.component.button.basic>>. | |||
The button component has many style variants in the Valo theme, as illustrated in <<figure.component.button.valostyles>>. | |||
The styles are defined in the [classname]#ValoTheme# class. | |||
[[figure.component.button.basic]] | |||
[[figure.component.button.valostyles]] | |||
.Button in different styles of the Valo theme | |||
image::img/button-valo-styles.png[width=70%, scaledwidth=100%] |
@@ -406,7 +406,7 @@ select.onValueChange(locale -> { | |||
date.setLocale(locale); | |||
localeCode.setValue("Locale code: " + | |||
locale.getLanguage() + "_" + | |||
locale.getCountry()); | |||
locale.getCountry()); | |||
}); | |||
---- | |||
See the http://demo.vaadin.com/book-examples-vaadin7/book#component.features.locale.selection[on-line example, window="_blank"]. | |||
@@ -497,8 +497,6 @@ components appear in italic. | |||
} | |||
---- | |||
[[components.features.stylename]] | |||
== Style Name | |||
@@ -512,7 +510,6 @@ can also add and remove individual style names with [methodname]#addStylename()# | |||
and [methodname]#removeStyleName()#. A style name must be a valid CSS style | |||
name. | |||
[source, java] | |||
---- | |||
Label label = new Label("This text has a lot of style"); | |||
@@ -614,9 +611,10 @@ component in absolute or relative units, or for leaving the size undefined. | |||
The size of a component can be set with [methodname]#setWidth()# and | |||
[methodname]#setHeight()# methods. The methods take the size as a floating-point | |||
value. You need to give the unit of the measure as the second parameter for the | |||
above methods. The available units are listed in | |||
<<components.features.sizeable.units.table>> below. | |||
above methods. | |||
ifdef::web[] | |||
The available units are listed in <<components.features.sizeable.units.table>>. | |||
endif::web[] | |||
[source, java] | |||
---- | |||
@@ -649,6 +647,7 @@ can set the height, width, or both as undefined with the methods [methodname]#se | |||
Always keep in mind that _a layout with undefined size may not contain components with defined relative size_, such as "full size", except in some special cases. | |||
See <<dummy/../../../framework/layout/layout-settings#layout.settings.size,"Layout Size">> for details. | |||
ifdef::web[] | |||
The <<components.features.sizeable.units.table>> table lists the available units and their codes defined in the [interfacename]#Sizeable# interface. | |||
[[components.features.sizeable.units.table]] | |||
@@ -666,6 +665,7 @@ The <<components.features.sizeable.units.table>> table lists the available units | |||
|[parameter]#Unit.INCH#|in|A physical length unit, _inches_ on the surface of a display device. However, the actual size depends on the display, its metrics in the operating system, and the browser. | |||
|[parameter]#Unit.PERCENTAGE#|%|A relative percentage of the available size. For example, for the top-level layout [parameter]#100%# would be the full width or height of the browser window. The percentage value must be between 0 and 100. | |||
|=============== | |||
endif::web[] | |||
If a component inside [classname]#HorizontalLayout# or [classname]#VerticalLayout# has full size in the namesake direction of the layout, the component will expand to take all available space not needed by the other components. | |||
See <<dummy/../../../framework/layout/layout-settings#layout.settings.size,"Layout Size">> for details. |
@@ -132,7 +132,6 @@ from the grid. | |||
For example: | |||
[source, java] | |||
---- | |||
grid.addSelectionListener(selectionEvent -> { | |||
@@ -289,8 +288,9 @@ columns in their natural order. | |||
[source, java] | |||
---- | |||
grid.setColumnOrder(firstnameColumn, lastnameColumn, bornColumn, | |||
birthplaceColumn, diedColumn); | |||
grid.setColumnOrder(firstnameColumn, lastnameColumn, | |||
bornColumn, birthplaceColumn, | |||
diedColumn); | |||
---- | |||
Note that the method can not be used to hide columns. You can hide columns with | |||
@@ -374,14 +374,11 @@ lambdas: | |||
[source, java] | |||
---- | |||
// Add generated full name column | |||
Column<String> fullNameColumn grid.addColumn(person -> { | |||
return person.getFirstName() + " " + person.getLastName(); | |||
}); | |||
Column<String> fullNameColumn = grid.addColumn(person -> | |||
person.getFirstName() + " " + person.getLastName()); | |||
fullNameColumn.setHeaderCaption("Full name"); | |||
---- | |||
[[components.grid.renderer]] | |||
== Column Renderers | |||
@@ -682,8 +679,6 @@ You can set a component in a header or footer cell with | |||
described in <<components.grid.filtering>>, which also gives an example of the | |||
use. | |||
[[components.grid.filtering]] | |||
== Filtering | |||
@@ -699,7 +694,6 @@ image::img/grid-filtering.png[width=50%, scaledwidth=80%] | |||
The filtering illustrated in <<figure.components.grid.filtering>> can be created | |||
as follows: | |||
[source, java] | |||
---- | |||
// Have a list of persons | |||
@@ -726,8 +720,7 @@ for (Column<?> col: grid.getColumns()) { | |||
// Filter the list of items | |||
List<String> filteredList = | |||
Lists.newArrayList(personList.filter( | |||
persons, | |||
Lists.newArrayList(personList.filter(persons, | |||
Predicates.containsPattern(event.getValue()))); | |||
// Apply filtered data | |||
@@ -737,11 +730,8 @@ for (Column<?> col: grid.getColumns()) { | |||
cell.setComponent(filterField); | |||
} | |||
---- | |||
[[components.grid.sorting]] | |||
== Sorting | |||
@@ -907,7 +897,6 @@ public class Person implements Serializable { | |||
We can now use a [classname]#BeanBinder# in the [classname]#Grid# as | |||
follows: | |||
[source, java] | |||
---- | |||
Grid<Person> grid = new Grid(examplePersonList()); |
@@ -20,7 +20,8 @@ the native selection input of web browsers, using the HTML | |||
[source, java] | |||
---- | |||
// Create the selection component | |||
NativeSelect<String> select = new NativeSelect<>("Native Selection"); | |||
NativeSelect<String> select = | |||
new NativeSelect<>("Native Selection"); | |||
// Add some items | |||
select.setItems("Mercury", "Venus", ...); | |||
@@ -31,7 +32,7 @@ The [methodname]#setColumns()# allows setting the width of the list as | |||
[[figure.components.nativeselect.basic]] | |||
.The [classname]#NativeSelect# Component | |||
image::img/nativeselect-basic.png[width=20%, scaledwidth=40%] | |||
image::img/nativeselect-basic.png[width=20%, scaledwidth=35%] | |||
Common selection component features are described in | |||
<<dummy/../../../framework/components/components-selection#components.selection,"Selection Components">>. |
@@ -29,11 +29,13 @@ enabled with [methodname]#setMultiSelect()#. | |||
[source, java] | |||
---- | |||
// A single-select radio button group | |||
OptionGroup<String> single = new OptionGroup<>("Single Selection"); | |||
OptionGroup<String> single = | |||
new OptionGroup<>("Single Selection"); | |||
single.setItems("Single", "Sola", "Yksi"); | |||
// A multi-select check box group | |||
OptionGroup<String> multi = new OptionGroup<>("Multiple Selection"); | |||
OptionGroup<String> multi = | |||
new OptionGroup<>("Multiple Selection"); | |||
multi.setMultiSelect(true); | |||
multi.setItems("Many", "Muchos", "Monta"); | |||
---- |
@@ -35,17 +35,13 @@ described in | |||
[source, java] | |||
---- | |||
final ProgressBar bar = new ProgressBar(0.0f); | |||
ProgressBar bar = new ProgressBar(0.0f); | |||
layout.addComponent(bar); | |||
layout.addComponent(new Button("Increase", | |||
new ClickListener() { | |||
@Override | |||
public void buttonClick(ClickEvent event) { | |||
float current = bar.getValue(); | |||
if (current < 1.0f) | |||
bar.setValue(current + 0.10f); | |||
} | |||
layout.addComponent(new Button("Increase", click -> { | |||
float current = bar.getValue(); | |||
if (current < 1.0f) | |||
bar.setValue(current + 0.10f); | |||
})); | |||
---- | |||
@@ -56,7 +52,6 @@ In the indeterminate mode, a non-progressive indicator is displayed | |||
continuously. The indeterminate indicator is a circular wheel in the built-in | |||
themes. The progress value has no meaning in the indeterminate mode. | |||
[source, java] | |||
---- | |||
ProgressBar bar = new ProgressBar(); |
@@ -69,7 +69,6 @@ caption, but can be any object type. We could as well have given Planet instance | |||
for the items and use captions generated based on them | |||
[methodname]#setItemCaptionProvider()# method. | |||
[source, java] | |||
---- | |||
// List of Planet objects | |||
@@ -101,7 +100,6 @@ retrieved with [methodname]#toString()# method from the item. This is useful | |||
for simple objects like String or Integers, but also for objects that have | |||
human readable output for [methodname]#toString()# . | |||
+ | |||
[source, java] | |||
---- | |||
ComboBox<Planet> select = new ComboBox<>("Inner Planets"); | |||
@@ -193,7 +191,8 @@ planets.add(new Planet(3, "Earth")); | |||
planets.add(new Planet(4, "Mars")); | |||
// Create a selection component | |||
ComboBox<Planet> select = new ComboBox<>("Planets"); | |||
ComboBox<Planet> select = | |||
new ComboBox<>("Planets"); | |||
// Set the caption provider to read the | |||
// caption directly from the 'name' |
@@ -35,7 +35,8 @@ column captions with [methodname]#setLeftColumnCaption()# and | |||
[source, java] | |||
---- | |||
TwinColSelect<String> select = new TwinColSelect<>("Select Targets"); | |||
TwinColSelect<String> select = | |||
new TwinColSelect<>("Select Targets"); | |||
// Put some items in the select | |||
select.setItems("Mercury", "Venus", "Earth", "Mars", | |||
@@ -49,7 +50,8 @@ select.setSelection("Venus", "Earth", "Mars"); | |||
// Handle value changes | |||
select.onSelect(selectedItems -> | |||
layout.addComponent(new Label("Selected: " + selectedItems))); | |||
layout.addComponent( | |||
new Label("Selected: " + selectedItems))); | |||
---- | |||
See the http://demo.vaadin.com/book-examples-vaadin7/book#component.select.twincolselect.captions[on-line example, window="_blank"]. | |||
@@ -89,7 +89,7 @@ You can install the plug-in from the NetBeans Plugin Portal Update Center as fol | |||
. Select "Tools > Plugins" from the NetBeans main menu. | |||
. Select the [guilabel]#Available Plugins# tab. | |||
.. Type "Vaadin" in the [guilabel]#Search# box and press kbd:Enter[]. | |||
.. Type "Vaadin" in the [guilabel]#Search# box and press kbd:[Enter]. | |||
.. Select the [guilabel]#Install# check box for the [guilabel]#Vaadin Plugin for NetBeans#. | |||
ifdef::web[] | |||
+ | |||
@@ -105,7 +105,7 @@ Click [guibutton]#Install#. | |||
. The Vaadin Plugin is not signed, so you need to verify the certificate. | |||
Click [guibutton]#Continue#. | |||
. In the final step, select [guilabel]#Restart IDE now" and click [guibutton]#Finish#. | |||
. In the final step, select [guilabel]#Restart IDE now# and click [guibutton]#Finish#. | |||
You can now proceed to create a Vaadin project, as described in <<DUMMY/../../../framework/getting-started/getting-started-netbeans#getting-started.netbeans, "Creating a Project with the NetBeans IDE">>. | |||
@@ -26,9 +26,9 @@ | |||
borderopacity="1.0" | |||
inkscape:pageopacity="1" | |||
inkscape:pageshadow="2" | |||
inkscape:zoom="2.8" | |||
inkscape:cx="153.1089" | |||
inkscape:cy="76.118195" | |||
inkscape:zoom="3.959798" | |||
inkscape:cx="116.03523" | |||
inkscape:cy="96.122162" | |||
inkscape:document-units="mm" | |||
inkscape:current-layer="layer1" | |||
inkscape:window-width="1920" | |||
@@ -65,7 +65,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> | |||
@@ -143,42 +143,12 @@ | |||
id="flowPara4249">Edition</flowPara><flowPara | |||
id="flowPara4245" /><flowPara | |||
id="flowPara4247" /></flowRoot> </g> | |||
<g | |||
id="g4392-4" | |||
transform="translate(60.236234,180.70866)"> | |||
<rect | |||
y="818.50391" | |||
x="56.692913" | |||
height="21.259813" | |||
width="49.606297" | |||
id="rect4347-8" | |||
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;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(2.6821639,0.70806943)" | |||
id="flowRoot4367-1" | |||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:125%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;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-1"><use | |||
height="100%" | |||
width="100%" | |||
id="use4371-0" | |||
xlink:href="#rect4347-8" | |||
y="0" | |||
x="0" /></flowRegion><flowPara | |||
id="flowPara4373-7">Install the</flowPara><flowPara | |||
id="flowPara4375-8">Vaadin Plugin</flowPara></flowRoot> </g> | |||
<flowRoot | |||
transform="translate(-80.859256,144.73179)" | |||
id="flowRoot4367-1-7" | |||
style="font-style:normal;font-variant:normal;font-weight:200;font-stretch:normal;font-size:7.5px;line-height:100%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Ultra-Light';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#5b686b;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" | |||
xml:space="preserve"><flowRegion | |||
id="flowRegion4369-1-5"><use | |||
height="100%" | |||
width="100%" | |||
id="use4371-0-1" | |||
xlink:href="#rect4347-8" | |||
y="0" | |||
x="0" /></flowRegion><flowPara | |||
id="flowRegion4369-1-5" /><flowPara | |||
id="flowPara4375-8-3">START</flowPara><flowPara | |||
id="flowPara4462">HERE</flowPara></flowRoot> <circle | |||
r="10.629871" | |||
@@ -204,15 +174,9 @@ | |||
id="path3003-6-5" | |||
inkscape:connector-curvature="0" | |||
sodipodi:nodetypes="cc" /> | |||
<path | |||
style="fill:none;stroke:#00b4f0;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" | |||
d="m 141.73228,985.03934 0,14.17323" | |||
id="path3003-6-5-3" | |||
inkscape:connector-curvature="0" | |||
sodipodi:nodetypes="cc" /> | |||
<g | |||
id="g4392-4-9" | |||
transform="translate(60.236217,209.05512)"> | |||
transform="translate(60.236221,180.70867)"> | |||
<rect | |||
y="818.50391" | |||
x="56.692913" | |||
@@ -235,7 +199,7 @@ | |||
id="flowPara4375-8-0">Install Vaadin Designer</flowPara></flowRoot> </g> | |||
<path | |||
style="fill:none;stroke:#00b4f0;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:0.70866144, 0.70866144;stroke-dashoffset:0;stroke-opacity:1" | |||
d="m 141.7323,1020.4724 -2e-5,7.0866" | |||
d="m 141.73228,985.03935 0,14.1732" | |||
id="path3003-6-5-3-5" | |||
inkscape:connector-curvature="0" | |||
sodipodi:nodetypes="cc" /> | |||
@@ -284,30 +248,6 @@ | |||
id="flowPara4249-2">Edition</flowPara><flowPara | |||
id="flowPara4245-2" /><flowPara | |||
id="flowPara4247-9" /></flowRoot> </g> | |||
<g | |||
id="g4392-4-0" | |||
transform="translate(60.236219,102.75591)"> | |||
<rect | |||
y="818.50391" | |||
x="56.692913" | |||
height="21.259813" | |||
width="49.606297" | |||
id="rect4347-8-6" | |||
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:#00b4f0;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(2.6821639,0.70806943)" | |||
id="flowRoot4367-1-2" | |||
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:6.25px;line-height:125%;font-family:Montserrat;-inkscape-font-specification:'Montserrat, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;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-1-4"><use | |||
height="100%" | |||
width="100%" | |||
id="use4371-0-9" | |||
xlink:href="#rect4347-8-6" | |||
y="0" | |||
x="0" /></flowRegion><flowPara | |||
id="flowPara4373-7-8">Install the</flowPara><flowPara | |||
id="flowPara4375-8-34">Vaadin Plugin</flowPara></flowRoot> </g> | |||
<g | |||
id="g4392-4-4-5" | |||
transform="translate(116.92913,102.75592)"> | |||
@@ -337,12 +277,6 @@ | |||
id="path3003-6-5-8" | |||
inkscape:connector-curvature="0" | |||
sodipodi:nodetypes="cc" /> | |||
<path | |||
style="fill:none;stroke:#00b4f0;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" | |||
d="m 141.73228,942.51965 0,14.17323" | |||
id="path3003-6-5-3-55" | |||
inkscape:connector-curvature="0" | |||
sodipodi:nodetypes="cc" /> | |||
<path | |||
style="fill:none;stroke:#00b4f0;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" | |||
d="m 191.33858,942.51965 0,14.17323" | |||
@@ -351,7 +285,7 @@ | |||
sodipodi:nodetypes="cc" /> | |||
<g | |||
id="g4392-4-9-3" | |||
transform="translate(60.236217,74.409445)"> | |||
transform="translate(60.236221,102.75593)"> | |||
<rect | |||
y="818.50391" | |||
x="56.692913" | |||
@@ -374,7 +308,7 @@ | |||
id="flowPara4375-8-0-4">Install Vaadin Designer</flowPara></flowRoot> </g> | |||
<path | |||
style="fill:none;stroke:#00b4f0;stroke-width:0.70866144;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:0.70866144, 0.70866144;stroke-dashoffset:0;stroke-opacity:1" | |||
d="m 141.73228,914.17319 0,7.08662" | |||
d="m 141.73228,942.51968 0,14.17321" | |||
id="path3003-6-5-3-5-1" | |||
inkscape:connector-curvature="0" | |||
sodipodi:nodetypes="cc" /> |
@@ -19,22 +19,27 @@ international pharmaceutical company. IT Mill made the application already in | |||
the year 2001 and it is still in use. Since then, the company has produced | |||
dozens of large business applications with the library and it has proven its | |||
ability to solve hard problems easily. | |||
Millstone 3 was released as open source in 2002. | |||
The next generation of the library, IT Mill Toolkit Release 4, was released in | |||
2006. It introduced an entirely new AJAX-based presentation engine. This allowed | |||
the development of AJAX applications without the need to worry about | |||
communications between the client and the server. | |||
Progress has often required hard decisions to avoid carrying unnecessary legacy burden far into the future. | |||
Nevertheless, our aim has always been to keep migrations easy. | |||
[[intro.background.toolkit-5]] | |||
== Release 5 Into the Open | |||
== Release 4 with Single-Page Rendering | |||
((("IT Mill | |||
Toolkit"))) | |||
The next generation of the library, IT Mill Toolkit 4, was released in 2006. | |||
It introduced an entirely new AJAX-based presentation engine. | |||
This allowed the development of AJAX applications without the need to worry about communications between the client and the server. | |||
[[intro.background.toolkit-5]] | |||
== Release 5 Powered by GWT | |||
((("IT Mill Toolkit"))) | |||
((("AJAX"))) | |||
IT Mill Toolkit 5, released initially at the end of 2007, took a significant | |||
step further into AJAX. The client-side rendering of the user interface was | |||
completely rewritten using GWT, the Google Web Toolkit. ((("Google Web | |||
Toolkit"))) | |||
completely rewritten using GWT, the Google Web Toolkit. | |||
((("Google Web Toolkit"))) | |||
IT Mill Toolkit 5 introduced many significant improvements both in the | |||
server-side API and in the functionality. Rewriting the Client-Side Engine with | |||
@@ -50,13 +55,12 @@ The Release 5 was published under the Apache License 2, an unrestrictive open | |||
source license, to create faster expansion of the user base and to make the | |||
formation of a developer community possible. | |||
[[intro.background.vaadin6]] | |||
== Birth of Vaadin Release 6 | |||
IT Mill Toolkit was renamed as __Vaadin Framework__, or Vaadin in short, in | |||
spring 2009. Later IT Mill, the company, was also renamed as Vaadin Ltd. Vaadin | |||
means an adult female semi-domesticated mountain reindeer in Finnish. | |||
IT Mill Toolkit was renamed as _Vaadin Framework_, or Vaadin in short, in | |||
spring 2009. Later IT Mill, the company, was also renamed as Vaadin Ltd. | |||
Vaadin means an adult female semi-domesticated mountain reindeer in Finnish. | |||
With Vaadin 6, the number of developers using the framework exploded. Together | |||
with the release, the Vaadin Plugin for Eclipse was released, helping the | |||
@@ -68,20 +72,16 @@ tremendous growth in the ecosystem around Vaadin. The size of the user | |||
community, at least if measured by forum activity, has already gone past the | |||
competing server-side frameworks and even GWT. | |||
[[intro.background.vaadin7]] | |||
== The Major Revision with Vaadin 7 | |||
Vaadin 7 was a major revision that changed the Vaadin API much more than Vaadin | |||
6 did. It is certainly more web-oriented than Vaadin 6 was. We are doing | |||
everything we can to help Vaadin rise high in the web universe. Some of this | |||
work is easy and almost routine - fixing bugs and implementing features. But | |||
going higher also requires standing firmer. That was one of the aims of Vaadin 7 | |||
- redesigning the product so that the new architecture enables Vaadin to reach | |||
over many long-standing challenges. Many of the changes required breaking API | |||
compatibility with Vaadin 6, especially in the client-side, but they are made | |||
with a strong desire to avoid carrying unnecessary legacy burden far into the | |||
future. | |||
6 did. | |||
It became more web-oriented than Vaadin 6 was. | |||
We are doing everything we can to help Vaadin rise high in the web universe. | |||
Some of this work is easy and almost routine - fixing bugs and implementing features. | |||
But going higher also requires standing firmer. | |||
That was one of the aims of Vaadin 7 - redesigning the product so that the new architecture enables Vaadin to reach over many long-standing challenges. | |||
Inclusion of the Google Web Toolkit in Vaadin 7 was a significant development, | |||
as it meant that Vaadin now provides support for GWT as well. When Google opened | |||
@@ -89,6 +89,13 @@ the GWT development in summer 2012, Vaadin (the company) joined the new GWT | |||
steering committee. As a member of the committee, Vaadin can work towards the | |||
success of GWT as a foundation of the Java web development community. | |||
[[intro.background.vaadin8]] | |||
== Vaadin 8 Introduces New Data Binding API | |||
The biggest change in Vaadin 8 is the complete modernization of the data binding API. | |||
Binding components to data sources is one of the core features of the Vaadin Framework, as it eliminates the need to explicitly shuffle data between Vaadin components and data objects, typically beans. | |||
The old data model was designed in time before Java features such as generics. | |||
While the data model was improved over the years, it was fundamentally outdated and complex to use. | |||
The new data binding API works much more fluently in Java 8, especially with Java 8 features such as lambda expressions. | |||
Consequently, to be able to fully use the new features of Java 8, we have raised the requirements from Java 6 to 8. | |||
The change should make Vaadin up to date with the most current Java technologies used by developers. |
@@ -5,28 +5,31 @@ layout: page | |||
--- | |||
[[intro.eclipse]] | |||
= Support for the Eclipse IDE | |||
= Support for IDEs | |||
While Vaadin is not bound to any specific IDE, and you can in fact easily use it | |||
without any IDE altogether, we provide special support for the Eclipse IDE, | |||
which has become the most used environment for Java development. | |||
without any IDE altogether, we provide special support for the Eclipse IDE, IntelliJ IDEA, and the NetBeans IDE, which have become the most used environment for Java development. | |||
*_Vaadin Plug-in for Eclipse_* helps you in: | |||
An official Vaadin plug-in is available for the Eclipse and NetBeans IDEs. | |||
It helps in: | |||
* creating new Vaadin projects, | |||
* creating custom themes, | |||
* creating custom client-side widgets, and | |||
* creating custom client-side widgets, | |||
* downloading add-ons from the Vaadin directory, and | |||
* easily upgrading to a newer version of the Vaadin library. | |||
Using the Vaadin plug-in for Eclipse is the recommended way of installing Vaadin for development. | |||
Downloading the installation package that contains the JARs or defining Vaadin as a Maven dependency is also possible. | |||
Availability of the features depends on the IDE. | |||
The ultimate edition of IntelliJ IDEA comes with built-in support for Vaadin. | |||
*_Vaadin Designer_* is a commercial Eclipse plug-in that enables visual editing of Vaadin UIs and composites. | |||
See <<dummy/../../../designer/designer-overview#designer.overview, "Vaadin Designer">> for its complete reference. | |||
*_Vaadin Designer_* is a commercial plug-in available for the Eclipse IDE and IntelliJ IDEA. | |||
It enables visual editing of declarative designs that you can use in your applications. | |||
See <<dummy/../../../designer/designer-overview#designer.overview, "Vaadin Designer">> for more information. | |||
Installation of the Eclipse IDE and the plug-in is covered in <<dummy/../../../framework/installing/installing-eclipse#installing.eclipse,"Installing the Eclipse IDE">>. | |||
The creation of a new Vaadin project using the plug-in is covered in <<dummy/../../../framework/getting-started/getting-started-first-project#getting-started.first-project.creation,"Creating a Project in the Eclipse IDE">>. | |||
See <<dummy/../../../framework/themes/themes-eclipse#themes.eclipse,"Creating a Theme in Eclipse">> and <<dummy/../../../framework/gwt/gwt-eclipse#gwt.eclipse,"Starting It Simple With Eclipse">> for instructions on using the different features of the plug-in. | |||
Using the Vaadin plug-in is the recommended way of installing Vaadin for development. | |||
Installing the IDEs and the plug-ins is covered in <<dummy/../../../framework/installing/installing-overview#installing, "Installing Development Tools">>. | |||
The creation of a new Vaadin project with each IDE is covered in <<dummy/../../../framework/getting-started/getting-started-first-project#getting-started.overview, "Creating a Vaadin Project">>. |
@@ -31,12 +31,7 @@ public class HelloWorld extends UI { | |||
// Have a clickable button | |||
content.addComponent(new Button("Push Me!", | |||
new ClickListener() { | |||
@Override | |||
public void buttonClick(ClickEvent e) { | |||
Notification.show("Pushed!"); | |||
} | |||
})); | |||
click -> Notification.show("Pushed!"))); | |||
} | |||
} | |||
---- | |||
@@ -59,18 +54,8 @@ user interface component, which displays simple text, and sets the text to | |||
The example also shows how to create a button and handle button click events. | |||
Event handling is described in | |||
<<dummy/../../../framework/architecture/architecture-events#architecture.events,"Events | |||
and Listeners">> and on the practical side in | |||
<<dummy/../../../framework/application/application-events#application.events,"Handling | |||
Events with Listeners">>. In addition to listeners, in Java 8 you can handle | |||
events with lambda expressions, which simplifies the handler code significantly. | |||
[source, java] | |||
---- | |||
content.addComponent(new Button("Push Me!", | |||
event -> Notification.show("Pushed!"))); | |||
---- | |||
<<dummy/../../../framework/architecture/architecture-events#architecture.events,"Events and Listeners">> and on the practical side in <<dummy/../../../framework/application/application-events#application.events,"Handling Events with Listeners">>. | |||
In Java 8, you can implement listeners with lambda expressions, which simplifies the handler code significantly. | |||
The result of the Hello World application, when opened in a browser, is shown in | |||
<<figure.intro.walkthrough>>. |
@@ -32,7 +32,7 @@ text field 50 pixels from both the left and the top edge: | |||
AbsoluteLayout layout = new AbsoluteLayout(); | |||
layout.setWidth("400px"); | |||
layout.setHeight("250px"); | |||
// A component with coordinates for its top-left corner | |||
TextField text = new TextField("Somewhere someplace"); | |||
layout.addComponent(text, "left: 50px; top: 50px;"); | |||
@@ -71,7 +71,7 @@ The result of the above code examples is shown in | |||
[[figure.layout.absolutelayout.bottomright]] | |||
.Components Positioned Relative to Various Edges | |||
image::img/absolutelayout-bottomright.png[] | |||
image::img/absolutelayout-bottomright.png[width=60%, scaledwidth=80%] | |||
Drag and drop is very useful for moving the components contained in an | |||
[classname]#AbsoluteLayout#. Check out the example in | |||
@@ -101,7 +101,7 @@ The result is shown in <<figure.layout.absolutelayout.area>> | |||
[[figure.layout.absolutelayout.area]] | |||
.Component Filling an Area Specified by Coordinates | |||
image::img/absolutelayout-area.png[] | |||
image::img/absolutelayout-area.png[width=50%, scaledwidth=80%] | |||
[[layout.absolutelayout.proportional]] | |||
@@ -125,7 +125,7 @@ The result is shown in <<figure.layout.absolutelayout.proportional>> | |||
[[figure.layout.absolutelayout.proportional]] | |||
.Specifying an Area by Proportional Coordinates | |||
image::img/absolutelayout-proportional.png[] | |||
image::img/absolutelayout-proportional.png[width=50%, scaledwidth=70%] | |||
[[layout.absolutelayout.css]] | |||
@@ -143,7 +143,3 @@ root style. Each component in the layout is contained within an element that has | |||
the [literal]#++v-absolutelayout-wrapper++#. The component captions are outside | |||
the wrapper elements, in a separate element with the usual | |||
[literal]#++v-caption++# style. | |||
@@ -60,7 +60,7 @@ default theme. | |||
[[figure.accordion.example1]] | |||
.An Accordion | |||
image::img/accordion-example1.png[] | |||
image::img/accordion-example1.png[width=40%, scaledwidth=55%] | |||
== CSS Style Rules | |||
@@ -84,7 +84,3 @@ content area element. | |||
The selected item (tab) has also the [literal]#++v-accordion-open++# style. The | |||
content area is not shown for the closed items. | |||
@@ -49,7 +49,7 @@ nearly always needed. | |||
[[figure.layout.csslayout.basic]] | |||
.Basic Use of [classname]#CssLayout# | |||
image::img/csslayout-basic.png[] | |||
image::img/csslayout-basic.png[width=60%, scaledwidth=100%] | |||
The [literal]#++display++# attribute of [classname]#CssLayout# is | |||
[literal]#++inline-block++# by default, so the components are laid out | |||
@@ -109,7 +109,7 @@ file: | |||
[[figure.layout.csslayout.getcss]] | |||
.Use of [methodname]#getCss()# and line wrap | |||
image::img/csslayout-getcss.png[] | |||
image::img/csslayout-getcss.png[width=60%, scaledwidth=100%] | |||
[[layout.csslayout.compatibility]] | |||
@@ -164,7 +164,7 @@ The example would now be rendered as shown in | |||
[[figure.layout.csslayout.styling]] | |||
.Styling [classname]#CssLayout# | |||
image::img/csslayout-styling.png[] | |||
image::img/csslayout-styling.png[width=50%, scaledwidth=70%] | |||
Captions and icons that are managed by the layout are contained in an element | |||
with [literal]#++v-caption++# style. These caption elements are contained flat |
@@ -67,7 +67,7 @@ CustomLayout content = new CustomLayout("layoutname"); | |||
content.setSizeUndefined(); | |||
loginPanel.setContent(content); | |||
loginPanel.setSizeUndefined(); | |||
// No captions for fields is they are provided in the template | |||
content.addComponent(new TextField(), "username"); | |||
content.addComponent(new TextField(), "password"); | |||
@@ -78,7 +78,7 @@ The resulting layout is shown below in <<figure.layout.customlayout>>. | |||
[[figure.layout.customlayout]] | |||
.Example of a Custom Layout Component | |||
image::img/customlayout-example1.png[] | |||
image::img/customlayout-example1.png[width=40%, scaledwidth=70%] | |||
You can use [methodname]#addComponent()# also to replace an existing component | |||
in the location given in the second parameter. | |||
@@ -100,6 +100,3 @@ or | |||
---- | |||
new CustomLayout(new FileInputStream(file)); | |||
---- | |||
@@ -47,7 +47,7 @@ when you hover the mouse pointer over the error indicator. | |||
[[figure.layout.formlayout]] | |||
.A [classname]#FormLayout# Layout for Forms | |||
image::img/formlayout-example1.png[] | |||
image::img/formlayout-example1.png[width=50%, scaledwidth=70%] | |||
[[layout.formlayout.css]] | |||
== CSS Style Rules |
@@ -34,7 +34,8 @@ grid.addStyleName("example-gridlayout"); | |||
// Fill out the first row using the cursor. | |||
grid.addComponent(new Button("R/C 1")); | |||
for (int i = 0; i < 3; i++) { | |||
grid.addComponent(new Button("Col " + (grid.getCursorX() + 1))); | |||
grid.addComponent(new Button("Col " + | |||
(grid.getCursorX() + 1))); | |||
} | |||
// Fill out the first column using coordinates. | |||
@@ -45,7 +46,8 @@ for (int i = 1; i < 4; i++) { | |||
// Add some components of various shapes. | |||
grid.addComponent(new Button("3x1 button"), 1, 1, 3, 1); | |||
grid.addComponent(new Label("1x2 cell"), 1, 2, 1, 3); | |||
InlineDateField date = new InlineDateField("A 2x2 date field"); | |||
InlineDateField date = | |||
new InlineDateField("A 2x2 date field"); | |||
date.setResolution(DateField.RESOLUTION_DAY); | |||
grid.addComponent(date, 2, 2, 3, 3); | |||
---- |
@@ -272,7 +272,8 @@ Button expandButton = new Button("Expanding component"); | |||
// Use 100% of the expansion cell's width. | |||
expandButton.setWidth("100%"); | |||
// The component must be added to layout before setting the ratio. | |||
// The component must be added to layout | |||
// before setting the ratio | |||
layout.addComponent(expandButton); | |||
// Set the component's cell to expand. |
@@ -31,7 +31,7 @@ Panel panel = new Panel("Astronomer Panel"); | |||
panel.addStyleName("mypanelexample"); | |||
panel.setSizeUndefined(); // Shrink to fit content | |||
layout.addComponent(panel); | |||
// Create the content | |||
FormLayout content = new FormLayout(); | |||
content.addStyleName("mypanelcontent"); | |||
@@ -46,7 +46,7 @@ The resulting layout is shown in <<figure.layout.panel>>. | |||
[[figure.layout.panel]] | |||
.A [classname]#Panel# | |||
image::img/panel.png[] | |||
image::img/panel.png[width=50%, scaledwidth=70%] | |||
[[layout.panel.scrolling]] | |||
== Scrolling the Panel Content | |||
@@ -71,7 +71,7 @@ In the following example, we have a 300 pixels wide and very high | |||
// Display an image stored in theme | |||
Image image = new Image(null, | |||
new ThemeResource("img/Ripley_Scroll-300px.jpg")); | |||
// To enable scrollbars, the size of the panel content | |||
// must not be relative to the panel size | |||
image.setSizeUndefined(); // Actually the default | |||
@@ -92,7 +92,7 @@ border and vertical scrollbar. | |||
[[figure.layout.panel.scrolling]] | |||
.Panel with Scroll Bars | |||
image::img/panel-scrolling.png[] | |||
image::img/panel-scrolling.png[width=50%, scaledwidth=70%] | |||
((("[interfacename]#Scrollable#", id="term.layout.panel.scrolling.scrollable", range="startofrange"))) | |||
@@ -137,6 +137,3 @@ add the style to a panel. Other themes may also provide the light and other | |||
styles for [classname]#Panel# as well. | |||
endif::web[] | |||
@@ -59,7 +59,7 @@ which can have scroll bars in both directions. | |||
[[figure.splitpanel.basic]] | |||
.[classname]#HorizontalSplitPanel# and [classname]#VerticalSplitPanel# | |||
image::img/splitpanel-example1.png[] | |||
image::img/splitpanel-example1.png[width=60%, scaledwidth=80%] | |||
You can set the split position with [methodname]#setSplitPosition()#. It accepts | |||
any units defined in the [classname]#Sizeable# interface, with percentual size | |||
@@ -100,7 +100,7 @@ illustrated in <<figure.component.splitpanel.splitposition>>. | |||
[[figure.component.splitpanel.splitposition]] | |||
.A Layout With Nested SplitPanels | |||
image::img/splitpanel-splitposition.png[] | |||
image::img/splitpanel-splitposition.png[width=50%, scaledwidth=70%] | |||
Notice that the size of a split panel must not be undefined in the split | |||
direction. | |||
@@ -134,5 +134,3 @@ depending on whether its position is locked or not. | |||
(((range="endofrange", startref="term.layout.splitpanel.horizontal"))) | |||
(((range="endofrange", startref="term.layout.splitpanel.vertical"))) | |||
@@ -19,7 +19,7 @@ and restoring sub-windows, as well as scrolling the window content. | |||
[[figure.layout.sub-window.basic]] | |||
.A Sub-Window | |||
image::img/subwindow-basic.png[] | |||
image::img/subwindow-basic.png[width=50%, scaledwidth=70%] | |||
Sub-windows are typically used for __Dialog Windows__ and __Multiple Document | |||
Interface__ applications. Sub-windows are by default not modal; you can set them | |||
@@ -42,20 +42,20 @@ public static class SubWindowUI extends UI { | |||
protected void init(VaadinRequest request) { | |||
// Some other UI content | |||
setContent(new Label("Here's my UI")); | |||
// Create a sub-window and set the content | |||
Window subWindow = new Window("Sub-window"); | |||
VerticalLayout subContent = new VerticalLayout(); | |||
subContent.setMargin(true); | |||
subWindow.setContent(subContent); | |||
// Put some components in it | |||
subContent.addComponent(new Label("Meatball sub")); | |||
subContent.addComponent(new Button("Awlright")); | |||
// Center it in the browser window | |||
subWindow.center(); | |||
// Open it in the UI | |||
addWindow(subWindow); | |||
} | |||
@@ -99,7 +99,7 @@ class MySub extends Window { | |||
content.addComponent(new Label("Just say it's OK!")); | |||
content.setMargin(true); | |||
setContent(content); | |||
// Disable the close button | |||
setClosable(false); | |||
@@ -125,7 +125,7 @@ final Button open = new Button("Open Sub-Window"); | |||
open.addClickListener(new ClickListener() { | |||
public void buttonClick(ClickEvent event) { | |||
MySub sub = new MySub(); | |||
// Add it to the root component | |||
UI.getCurrent().addWindow(sub); | |||
} | |||
@@ -197,7 +197,7 @@ You can make a sub-window modal with [methodname]#setModal(true)#. | |||
[[figure.layout.sub-window.modal]] | |||
.Modal Sub-Window | |||
image::img/subwindow-modal.png[] | |||
image::img/subwindow-modal.png[width=70%, scaledwidth=100%] | |||
Depending on the theme, the parent window may be grayed when the modal window is | |||
open. | |||
@@ -211,9 +211,3 @@ circumvented with client-side attack code. You should not trust in the modality | |||
of child windows in security-critical situations such as login windows. | |||
==== | |||
@@ -20,7 +20,7 @@ navigation buttons will appear. | |||
[[figure.tabsheet.example1]] | |||
.A Simple TabSheet Layout | |||
image::img/tabsheet-example1.png[] | |||
image::img/tabsheet-example1.png[width=50%, scaledwidth=70%] | |||
[[layout.tabsheet.adding]] | |||
== Adding Tabs | |||
@@ -95,11 +95,10 @@ there is only one tab. | |||
ifdef::web[] | |||
[[figure.tabsheet.example2]] | |||
.A TabSheet with Hidden and Disabled Tabs | |||
image::img/tabsheet-example2.png[] | |||
image::img/tabsheet-example2.png[width=50%, scaledwidth=70%] | |||
endif::web[] | |||
[[layout.tabsheet.events]] | |||
== Tab Change Events | |||
@@ -135,20 +134,20 @@ tabsheet.addSelectedTabChangeListener( | |||
public void selectedTabChange(SelectedTabChangeEvent event) { | |||
// Find the tabsheet | |||
TabSheet tabsheet = event.getTabSheet(); | |||
// Find the tab (here we know it's a layout) | |||
Layout tab = (Layout) tabsheet.getSelectedTab(); | |||
// Get the tab caption from the tab object | |||
String caption = tabsheet.getTab(tab).getCaption(); | |||
// Fill the tab content | |||
tab.removeAllComponents(); | |||
tab.addComponent(new Image(null, | |||
new ThemeResource("img/planets/"+caption+".jpg"))); | |||
} | |||
}); | |||
// Have some tabs | |||
String[] tabs = {"Mercury", "Venus", "Earth", "Mars"}; | |||
for (String caption: tabs) | |||
@@ -174,7 +173,7 @@ tabsheet.getTab(tabComponent).setClosable(true); | |||
[[figure.layout.tabsheet.closing]] | |||
.TabSheet with Closable Tabs | |||
image::img/tabsheet-tabclose.png[] | |||
image::img/tabsheet-tabclose.png[width=50%, scaledwidth=70%] | |||
[[layout.tabsheet.closing.handling]] | |||
=== Handling Tab Close Events | |||
@@ -194,7 +193,7 @@ tabsheet.setCloseHandler(new CloseHandler() { | |||
Component tabContent) { | |||
Tab tab = tabsheet.getTab(tabContent); | |||
Notification.show("Closing " + tab.getCaption()); | |||
// We need to close it explicitly in the handler | |||
tabsheet.removeTab(tab); | |||
} | |||
@@ -250,6 +249,3 @@ The content area where the tab contents are shown can be styled with | |||
[literal]#++v-tabsheet-deco++#. | |||
endif::web[] | |||
@@ -245,11 +245,10 @@ $v-error-indicator-color(default:[literal]#++#ed473b++#):: Color of the componen | |||
<<dummy/../../../framework/application/application-errors#application.errors.error-indicator,"Error | |||
Indicator and Message">>. | |||
$v-required-field-indicator-color(default:[literal]#++$v-error-indicator-color++#):: Color of the required indicator in field components, as described in | |||
<<dummy/../../../framework/components/components-fields#components.fields.field,"Field | |||
Interface">>. | |||
$v-required-field-indicator-color(default:[literal]#++$v-error-indicator-color++#):: Color of the required indicator in field components. | |||
ifdef::vaadin7[] | |||
Field components are described in <<dummy/../../../framework/components/components-fields#components.fields.field,"Field Interface">>. | |||
endif::vaadin7[] | |||
Color specifications for $v-border, $v-bevel, and $v-shadow may use, in addition | |||
to CSS colors, the following keywords: | |||
@@ -434,7 +433,3 @@ $v-included-components: remove($v-included-components, calendar); | |||
Note that in this case, you need to give the statement __after__ the | |||
[literal]#++@import++# statement for the Valo theme, because it overrides a | |||
variable by using its value that is defined in the theme. | |||