diff options
Diffstat (limited to 'documentation/layout/layout-overview.asciidoc')
| -rw-r--r-- | documentation/layout/layout-overview.asciidoc | 48 |
1 files changed, 26 insertions, 22 deletions
diff --git a/documentation/layout/layout-overview.asciidoc b/documentation/layout/layout-overview.asciidoc index 6481db6229..7a57e2a518 100644 --- a/documentation/layout/layout-overview.asciidoc +++ b/documentation/layout/layout-overview.asciidoc @@ -9,15 +9,23 @@ layout: page The user interface components in Vaadin can roughly be divided in two groups: components that the user can interact with and layout components for placing the -other components to specific places in the user interface. The layout components -are identical in their purpose to layout managers in regular desktop frameworks -for Java and you can use plain Java to accomplish sophisticated component -layouting. +other components to specific places in the user interface. +The layout components are identical in their purpose to layout managers in regular desktop frameworks for Java. +You can use plain Java to accomplish sophisticated component layouts. + +[[figure.layout.intro.simple]] +.Layout example +image::img/layout-intro-example-1.png[width=75%, scaledwidth=100%] You start by creating a content layout for the UI and then add other layout components hierarchically, and finally the interaction components as the leaves of the component tree. +[[figure.layout.intro.schematic]] +.Layout schematic +image::img/layout-schematic-hi.png[width=100%, scaledwidth=100%] + +Let us look at building a bit simplified version of the layout in <<figure.layout.intro.simple>>: [source, java] ---- @@ -25,20 +33,22 @@ of the component tree. VerticalLayout content = new VerticalLayout(); setContent(content); -// Add the topmost component. -content.addComponent(new Label("The Ultimate Cat Finder")); +HorizontalLayout titleBar = new HorizontalLayout(); +titleBar.setWidth("100%"); +root.addComponent(titleBar); -// Add a horizontal layout for the bottom part. -HorizontalLayout bottom = new HorizontalLayout(); -content.addComponent(bottom); +Label title = new Label("The Ultimate Cat Finder"); +titleBar.addComponent(title); +titleBar.setExpandRatio(title, 1.0f); // Expand -bottom.addComponent(new Tree("Major Planets and Their Moons")); -bottom.addComponent(new Panel()); -... ----- +Label titleComment = new Label("for Vaadin"); +titleComment.setSizeUndefined(); // Take minimum space +titleBar.addComponent(titleComment); -Or in the declarative format: +... build rest of the layout ... +---- +Or in the declarative format (roughly): [source, html] ---- @@ -46,8 +56,9 @@ Or in the declarative format: <vaadin-label>The Ultimate Cat Finder</vaadin-label> <vaadin-horizontal-layout> - <vaadin-tree caption="Major Planets and Their Moons"/> + <vaadin-tree caption="Possible Places"/> <vaadin-panel/> + ... </vaadin-horizontal-layout> </vaadin-vertical-layout> ---- @@ -65,10 +76,3 @@ described in You can see a finished version of the above example in <<figure.layout.intro.simple>>. - -[[figure.layout.intro.simple]] -.Layout Example -image::img/layout-intro-example-1.png[] - - - |