summaryrefslogtreecommitdiffstats
path: root/documentation/application/application-declarative.asciidoc
diff options
context:
space:
mode:
authorPekka Hyvönen <pekka@vaadin.com>2017-01-02 13:40:48 +0200
committerGitHub <noreply@github.com>2017-01-02 13:40:48 +0200
commit9c6831bab067ccdb47c3063f2e77d3c0e7fe3440 (patch)
tree190002e96b0d76fe4ac2ebaa9b21cc31fd7bd406 /documentation/application/application-declarative.asciidoc
parent6adc887b7f94f5fb6e83c34822358e2240018147 (diff)
downloadvaadin-framework-9c6831bab067ccdb47c3063f2e77d3c0e7fe3440.tar.gz
vaadin-framework-9c6831bab067ccdb47c3063f2e77d3c0e7fe3440.zip
Update documentation, BoV chapters 1 - 5.3 (#8085)
* Update documentation chapters 1 - 5.3 Images and diagrams have not been updated, but unnecessary images have been removed. * Sync application declarative and architecture sections source code. Screenshot image is updated to match the source code. * Old datamodel image is removed. * Ivy install image is removed. * Remove unnecessary linking / reference
Diffstat (limited to 'documentation/application/application-declarative.asciidoc')
-rw-r--r--documentation/application/application-declarative.asciidoc38
1 files changed, 12 insertions, 26 deletions
diff --git a/documentation/application/application-declarative.asciidoc b/documentation/application/application-declarative.asciidoc
index dd6523ca86..9bffa4b371 100644
--- a/documentation/application/application-declarative.asciidoc
+++ b/documentation/application/application-declarative.asciidoc
@@ -25,7 +25,6 @@ vertical.addComponent(new TextField("Street address"));
vertical.addComponent(new TextField("Postal code"));
layout.addComponent(vertical);
----
-See the http://demo.vaadin.com/book-examples-vaadin7/book#layout.orderedlayout.basic[on-line example, window="_blank"].
You could define it declaractively with the following equivalent design:
@@ -37,9 +36,6 @@ You could define it declaractively with the following equivalent design:
<vaadin-text-field caption="Postal code"/>
</vaadin-vertical-layout>
----
-ifdef::web[]
-See the http://demo.vaadin.com/book-examples-vaadin7/book#layout.orderedlayout.basic[on-line example, window="_blank"].
-endif::web[]
Declarative designs can be crafted by hand, but are most conveniently created
with the Vaadin Designer.
@@ -72,12 +68,8 @@ to variables in the Java code, as well as optional attributes.
<vaadin-label><b>Hello!</b> -
How are you?</vaadin-label>
- <vaadin-horizontal-layout size-full :expand>
- <vaadin-tree _id="mytree" caption="My Tree"
- width-auto height-full/>
- <vaadin-table _id="mytable" caption="My Table"
- size-full :expand/>
- </vaadin-horizontal-layout>
+ <vaadin-grid _id="mygrid" caption="My Grid"
+ size-full :expand/>
</vaadin-vertical-layout>
</body>
</html>
@@ -248,17 +240,13 @@ component [parameter]#c# is equivalent to calling [methodname]#setExpandRatio(c,
&lt;!-- Expands to take up all remaining vertical space --&gt;
&lt;vaadin-horizontal-layout size-full **:expand**&gt;
&lt;!-- Automatic width - shrinks horizontally --&gt;
- &lt;vaadin-tree width-auto height-full/&gt;
+ &lt;vaadin-radio-button-group width-auto height-full/&gt;
&lt;!-- Expands horizontally to take remaining space --&gt;
- &lt;vaadin-table size-full **:expand**/&gt;
+ &lt;vaadin-grid size-full **:expand**/&gt;
&lt;/vaadin-horizontal-layout&gt;
&lt;/vaadin-vertical-layout&gt;
----
-Again, compare the above declaration to the Java code given in
-<<dummy/../../../framework/application/application-architecture#application.architecture,"Building
-the UI">>.
-
[[application.declarative.identifiers]]
@@ -281,7 +269,7 @@ design. This is the recommended way to identifying components.
[source, html]
----
-<vaadin-tree _id="mytree" caption="My Tree"/>
+<vaadin-grid _id="mygrid" caption="My Grid"/>
----
@@ -310,26 +298,24 @@ For example, the following class could be used to bind the design given earlier.
----
@DesignRoot
public class MyViewDesign extends VerticalLayout {
- Tree mytree;
- Table mytable;
+ RadioButtonGroup<String> myRadioButtonGroup;
+ Grid<String> myGrid;
public MyViewDesign() {
Design.read("MyDeclarativeUI.html", this);
// Show some (example) data
- mytree.setContainerDataSource(
- TreeExample.createTreeContent());
- mytable.setContainerDataSource(
- TableExample.generateContent());
+ myCheckBoxGroup.setItems("Venus", "Earth", "Mars");
+ myGrid.setItems(
+ GridExample.generateContent());
// Some interaction
- mytree.addItemClickListener(event -> // Java 8
+ myCheckBoxGroup.addValueChangeListener(event ->
Notification.show("Selected " +
- event.getItemId()));
+ event.getValue());
}
}
----
-See the http://demo.vaadin.com/book-examples-vaadin7/book#application.declarative.designroot[on-line example, window="_blank"].
The design root class must match or extend the root element class of the design.
For example, earlier we had [literal]#++<vaadin-vertical-layout>++# element in the