diff options
author | Pekka Hyvönen <pekka@vaadin.com> | 2017-01-02 13:40:48 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-01-02 13:40:48 +0200 |
commit | 9c6831bab067ccdb47c3063f2e77d3c0e7fe3440 (patch) | |
tree | 190002e96b0d76fe4ac2ebaa9b21cc31fd7bd406 /documentation/application/application-declarative.asciidoc | |
parent | 6adc887b7f94f5fb6e83c34822358e2240018147 (diff) | |
download | vaadin-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.asciidoc | 38 |
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, <!-- Expands to take up all remaining vertical space --> <vaadin-horizontal-layout size-full **:expand**> <!-- Automatic width - shrinks horizontally --> - <vaadin-tree width-auto height-full/> + <vaadin-radio-button-group width-auto height-full/> <!-- Expands horizontally to take remaining space --> - <vaadin-table size-full **:expand**/> + <vaadin-grid size-full **:expand**/> </vaadin-horizontal-layout> </vaadin-vertical-layout> ---- -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 |