123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778 |
- ---
- title: Overview
- order: 1
- layout: page
- ---
-
- [[layout.overview]]
- = Overview
-
- 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.
- 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.png[width=100%, scaledwidth=100%]
-
- Let us look at building a bit simplified version of the layout in <<figure.layout.intro.simple>>:
-
- [source, java]
- ----
- // Set the root layout for the UI
- VerticalLayout content = new VerticalLayout();
- setContent(content);
-
- HorizontalLayout titleBar = new HorizontalLayout();
- titleBar.setWidth("100%");
- root.addComponent(titleBar);
-
- Label title = new Label("The Ultimate Cat Finder");
- titleBar.addComponent(title);
- titleBar.setExpandRatio(title, 1.0f); // Expand
-
- Label titleComment = new Label("for Vaadin");
- titleComment.setSizeUndefined(); // Take minimum space
- titleBar.addComponent(titleComment);
-
- ... build rest of the layout ...
- ----
-
- Or in the declarative format (roughly):
-
- [source, html]
- ----
- <vaadin-vertical-layout>
- <vaadin-label>The Ultimate Cat Finder</vaadin-label>
-
- <vaadin-horizontal-layout>
- <vaadin-radio-button-group caption="Possible Places"/>
- <vaadin-panel/>
- ...
- </vaadin-horizontal-layout>
- </vaadin-vertical-layout>
- ----
-
- You will usually need to tune the layout components a bit by setting sizes,
- expansion ratios, alignments, spacings, and so on. The general settings are
- described in
- <<layout-settings#layout.settings,"Layout
- Formatting">>.
-
- Layouts are coupled with themes that specify various layout features, such as
- backgrounds, borders, text alignment, and so on. Definition and use of themes is
- described in
- <<../themes/themes-overview.asciidoc#themes.overview,"Themes">>.
-
- You can see a finished version of the above example in
- <<figure.layout.intro.simple>>.
|