Do you think IIT Guwahati certified course can help you in your career?
Introduction
Vaadin is an open-source web application development platform for Java. Vaadin comes with a collection of Web Components, a Java web framework, and a number of tools that let programmers create cutting-edge web graphical user interfaces exclusively in TypeScript, exclusively in Java, or both at once.
Layout components serve as placeholders for the data that will be displayed on the front end. We will learn the various layout components of the VAADIN in this chapter.
Vertical Layout and Horizontal Layout are the two fundamental layout elements in Vaadin. They exhibit their contents vertically and horizontally, respectively, as their names would imply.
In this article, we will be looking at the Vaadin-Layout Component.
Vertical Layout
The vertical Layout arranges elements in a column from top to bottom. It starts off with a 100% width and an indeterminate height, which means that its parent component controls its width, and the components it includes control its height. A Vertical Layout allows for both vertical and horizontal alignment of its components.
A Vertical Layout allows for both vertical and horizontal alignment of its components.
🍁 Vertical Alignment
Components might be positioned at the top, center, or bottom. As an alternative, you can place components by defining how any extra space in a layout is divided up among them.
Value
Description
START (default)
Positions items at the top.
CENTER
Vertically centers items.
END
Positions items at the bottom.
BETWEEN
Available space is distributed evenly between items. No space is added before the first item, or after the last.
AROUND
Available space is distributed evenly between items. The space before the first item, and after the last, is half of that between items.
EVENLY
Available space is distributed evenly between items. The space before the first item, between items and after the last item is the same.
🍁 Horizontal Alignment
In a vertical layout, components can be extended horizontally, centered, right-aligned, or left-aligned (the default).
Value
Description
START (default)
Left-aligns (LTR) or right-aligns (RTL) items
CENTER
Horizontally centers items
END
Right-aligns (LTR) or left-aligns (RTL) items
STRETCH
Stretches items with undefined width horizontally
Horizontal Layout
Components are arranged horizontally, side by side in a row. Its default width and height are undefinable, therefore the elements it contains decide its size.
Similar to Vertical Layout, Horizontal Layout allows for component alignment on both the vertical and horizontal axes.
🍁 Vertical Alignment
Components might be positioned at the top, center, or bottom. Items can also be positioned along the text baseline of the layout or made to span vertically. It is also possible to vertically align individual components, overriding the alignment set by the parent layout.
VALUE
Description
STRETCH (default)
Stretches items with undefined height horizontally
START
Positions items at the top of the layout
CENTER
Vertically centers items
END
Positions items at the bottom of the layout
BASELINE
Position items along the layout’s (text) baseline.
🍁 Horizontal Alignment
A horizontal layout allows for the alignment of components to be left, center, or right. As an alternative, you can place components by defining how the extra room in a layout is divided up amongst them.
Value
Description
START (default)
Left-aligns (LTR) or right-aligns (RTL) items
END
Right-aligns (LTR) or left-aligns (RTL) items
CENTER
Horizontally centers items
BETWEEN
Available space is distributed evenly between items. No space is added before the first item, or after the last.
AROUND
Available space is distributed evenly between items. The space before the first item, and after the last, is half of that between items.
EVENLY
Available space is distributed evenly between items. The space before the first item, between items and after the last item is the same.
Spacing
In the same arrangement, spacing is used to make room between components. Spacing can be used to identify content regions and stop accidental clicks.
Five different spacing theme variants are available:
Theme variant
Usage recommendations
spacing-xs
Extra-small space between items
spacing-s
Small space between items
spacing
Medium space between items
spacing-l
Large space between items
spacing-xl
Extra-large space between items
Padding
The distance between a layout's outer border and its content is known as padding. Padding can aid in separating the substance of a layout from its surroundings. The padding theme variant is used to apply padding.
Grid
Grid is a component for showing tabular data. A basic Grid uses plain text to display information in rows and columns. Rich content can be used to provide additional information in a more legible fashion. Components such as input fields and buttons are also supported.
🍁 Java Code
Grid<Person> grid = new Grid<>(Person.class, false);
grid.addColumn(Person::getFirstName).setHeader("First name");
grid.addColumn(Person::getLastName).setHeader("Last name");
grid.addColumn(Person::getEmail).setHeader("Email");
grid.addColumn(Person::getProfession).setHeader("Profession");
List<Person> people = DataService.getPeople();
grid.setItems(people);
Form Layout
Form Layout allows you to build responsive forms with multiple columns, and to position input labels above or to the side of, the input.
🍁 Java Code
TextField firstName = new TextField("First name");
TextField lastName = new TextField("Last name");
TextField username = new TextField("Username");
PasswordField password = new PasswordField("Password");
PasswordField confirmPassword = new PasswordField("Confirm password");
FormLayout formLayout = new FormLayout();
formLayout.add(
firstName, lastName,
username,
password, confirmPassword
);
formLayout.setResponsiveSteps(
// Use one column by default
new ResponsiveStep("0", 1),
// Use two columns, if layout's width exceeds 500px
new ResponsiveStep("500px", 2)
);
// Stretch the username field over 2 columns
formLayout.setColspan(username, 2);
Sub Window
An active browser contains a sub-window, which is a floating panel. This gives the user the option to separate the material into a separate window. Runtime Vaadin HTML codes are used to manipulate it, just like other Layout elements.
Tab-Sheet
Tab sheets are multi-component containers that allow tabs to be used to switch between the components. At the top of the tab sheet, a tab bar contains all of the tabs.
Absolute Layout
Absolute layout lets you place the content in a selective position in an arbitrary manner.
Custom Layout
A custom layout is a layout that you can customize as per your requirements, and hence the name.
Frequently Asked Questions
In Vaadin, how can I create a button?
Button new Button("Normal Button") = normalButton; addClickListener(myClickListener) for normalButton; The button that Vaadin uses when you do not provide any styles is the standard default Vaading normal button, which is the next size up from the tiny button.
Define Vaadin plugin
An open source Java UI library called Vaadin is used to build complex web user interfaces. Developers can build attractive web applications in plain Java by using its component-based API. You don't have to worry about developing JavaScript, CSS, or markup languages with Vaadin, or about client-server communication (XHR, WebSockets).
Define vaadin board Framework?
A Java web framework called Vaadin Flow (formerly known as Vaadin Framework) is used to create web pages and web applications. Without having to utilize HTML or JavaScript directly, Vaadin Flow's programming architecture enables developers to use Java as the programming language for creating User Interfaces (UIs).
Conclusion
In this article, we have extensively discussed the Vaadin-Layout Component.
We hope this blog has helped you enhance your knowledge regarding Vaadin-Layout Component.
We hope this blog increased your knowledge regarding the Vaadin-Layout Component. We recommend you to visit our articles on different topics of Vaadin, such as
34+ registered 
