Component Interface
The AbstractComponent class implements all of the methods specified in the Component interface, which is linked with the Component interface.
Component Tree Management
🔥 The user interface's components are organized hierarchically. Components that implement the ComponentContainer interface, or components more generally, handle the layout. The parent of the components it contains is such a container.
🔥 The parent component of a component can be retrieved using the getParent() method. Although there is a setParent() function, you seldom ever use it as adding components is often done via the addComponent() method of the ComponentContainer interface, which sets the parent automatically.
🔥 A component does not know its parent when the component is still being created, so you can not refer to the parent in the constructor with getParent().
🔥 A call to a UI's attach() method occurs when a component is attached to it. Accordingly, using the detach() method is triggered by removing a component from a container. SetParent instantly calls attach() if the parent of a newly added component is already linked to the user interface ().
Java Code
public class AttachExample extends CustomComponent {
public AttachExample() {
}
@Override
public void attach() {
super.attach(); // Must call.
// Now we know who ultimately owns us.
ClassResource r = new ClassResource("smiley.jpg");
Image image = new Image("Image:", r);
setCompositionRoot(image);
}
}
Label
Uneditable text is displayed via the label component. This text can be used to display extended passages of text, such as paragraphs, or short, simple labels. Depending on the content mode of the label, the text can be formatted either as preformatted text or in HTML.
You can give the label text most conveniently in the constructor, as shown in the example below. Label's default width is unknown, therefore it will only use the space it requires.
Java Code
// A container that is 100% wide by default
VerticalLayout layout = new VerticalLayout();
// label will only take the space it needs
Label label = new Label("Labeling can be dangerous");
layout.addComponent(label);
Link
Making hyperlinks is possible with the Link component. According to "Images and Other Resources," references to specific places are displayed as resource objects. The Link is a typical HTML hyperlink, or an <a href> anchor element that the browser can handle natively. A server-side event is not triggered when a link is clicked as opposed to when a button is clicked.
Java Code
// Textual link
Link link = new Link("Click Me!",
new ExternalResource("http://vaadin.com/"));
TextField
TextField is one of the most commonly used user interface components. It is a field that allows entering textual values with the keyboard.
Java Code
// Create a text field
TextField tf = new TextField("A Field");
// Put some initial content in it
tf.setValue("Stuff in the field");
TextArea
TextArea is a multi-line version of the TextField component described in "TextField".
Java Code
// Create the area
TextArea area = new TextArea("Big Area");
// Put some content in it
area.setValue("A row\n"+
"Another row\n"+
"Yet another row");
Set the number of visible rows using the setRows() function, then define the height in other units using the standard setHeight() method. A vertical scrollbar will show up if the actual number of rows is more than the number. The number of rows that are actually visible may be one greater if the horizontal scrollbar is not visible because setting the height with setRows() leaves room for it.
The standard setWidth() method can be used to set the width. It is advised to set the size using the em unit, which is related to the chosen font size.
Button
The Button component is typically used to start an action, like completing form data. When a button is clicked by the user. A click listener can be added by handling the click event by utilizing the onClick() or addClickListener() methods.
Java Code
Button button = new Button("Do not press this button");
button.addClickListener(clickEvent ->
Notification.show("Do not press this button again"));
Check Box
The checkbox selection component has two states: checked and unchecked. The check box's caption will appear to the right of the actual check box. Check boxes can be created in two different ways with Vaadin: individually with the CheckBox component, which is covered in this section, and collectively with the CheckBoxGroup component, which is covered in "CheckBoxGroup and RadioButtonGroup."
A check box's status can be changed by clicking on it. The getValue() function and the setValue() method are both used to set and get the Boolean property known as the state. A ValueChangeEvent is generated whenever the value of a check box is changed, and a ValueChangeListener can respond to this event.
Java Code
CheckBox checkbox1 = new CheckBox("Box with no Check");
CheckBox checkbox2 = new CheckBox("Box with a Check");
checkbox2.setValue(true);
checkbox1.addValueChangeListener(event ->
checkbox2.setValue(! checkbox1.getValue()));
Tree
Data with hierarchical relationships can be represented in a natural fashion using the Tree component. By pressing the expand arrow next to an item and simultaneously clicking the collapse arrow, the user can dig down in the hierarchy. The tree is a selection element that enables item selection.
MenuBar
Similar to the main menu in desktop programs, horizontal drop-down menus can be created with the MenuBar component. As the user moves the mouse over or clicks on menu items, they appear in the menu. Separators can be used on menus to group things into subsections. Menu items can be styled and have an icon. Additionally, they may be checkable, allowing the user to click on them to switch between checked and unchecked states.
Java Code
MenuBar barmenu = new MenuBar();
main.addComponent(barmenu);
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 don't provide any styles is the standard default Vaading normal button, which is the next size up from the tiny button.
Is Vaadin a GWT based?
The Vaadin framework is well-known to GWT programmers. Vaadin created a complete application framework using GWT. Along with the Errai framework, it is one of the main GWT-based frameworks and offers several intriguing features including add-ons, themes, and connectors with other Java frameworks like Spring.
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).
Conclusion
In this article, we have extensively discussed the Vaadin-User Interface Components.
We hope this blog has helped you enhance your knowledge regarding Vaadin-User Interface Components.
We hope this blog increased your knowledge regarding the Vaadin-User Interface Components.. We recommend you to visit our articles on different topics of Vaadin, such as
Refer to our Guided Path on Coding Ninjas Studio to upskill yourself in Data Structures and Algorithms, Competitive Programming, JavaScript, System Design, and many more! If you want to test your competency in coding, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio! But suppose you have just started your learning process and are looking for questions asked by tech giants like Amazon, Microsoft, Uber, etc. In that case, you must look at the problems, interview experiences, and interview bundle for placement preparations.
Nevertheless, you may consider our paid courses to give your career an edge over others!
Do upvote our blog to help other ninjas grow.
Happy Coding!
34+ registered 
