Basic Component Features

Id

Any component's Id can be set with the following:

• The client-side receives the Id as the id of the appropriate element.
• A page's Id must be distinct from other Ids.
   

For instance, Ids can be used in CSS or JavaScript code to select the element.

Example

Setting a component's Id using the setId() function.

/* 
	Java Code 
*/
component.setId("componentName");

You can also try this code with Online Java Compiler

Run Code

Element

Each component has a root Element that it is linked to.

The component's low-level functionality can be accessed using the element by using the component.getElement() function.

Example

Element exampleField = ElementFactory.createInput();
exampleField.setAttribute("id", "exampleField");

You can also try this code with Online Java Compiler

Run Code

Visibility

Using the component.setVisible(false) function, a component can be made invisible.

Invisible components of Vaadin Framework:

• No longer show up in the UI;
• Do not receive client-side updates; server-side changes start to get transmitted again when the component becomes visible again.

Example

Using the component.setVisible() function.

Span label = new Span("Label Example");
label.setVisible(false);

// The client-side does not receive this.
label.setText("changedLabel");

Button makeLabelVisible = new Button("Push me to make label visible", evt -> {
    /* 
       Makes the label visible, simply transmitting 
       the words "ChangedLabel" now
    */
    label.setVisible(true);
});

You can also try this code with Online Java Compiler

Run Code

All inner components become invisible when a container with child components (such as a Div or Vertical/HorizontalLayout) is set to invisible. They don't receive any client updates and don't receive any server-side changes either. Transmission of updates to the children resumes once the container becomes visible again.

Client-side Impacts of the Invisible Setting

Depending on whether the component has been rendered, the invisible option has distinct effects:

• Before being rendered for the first time, if a component is set to invisible, the associated element in the DOM is not constructed, but the server-side structure is kept. The component's visibility setting causes the DOM to be correctly updated.

Example 1

Setting an unrendered component to invisible.

Span label = new Span("Label Example");
label.setVisible(false);

Div container = new Div();
/* 
   The client side does not receive the label. 
   When it becomes visible, the matching 
   element will only be produced in the DOM.
*/
container.add(label);
/* 
   Regardless of whether the component is visible or not, 
   It will print 1 means that the server-side structure is kept.
*/
System.out.println("The number of children: "
        + container.getChildren().collect(
                Collectors.counting()));

You can also try this code with Online Java Compiler

Run Code

• The accompanying DOM element is given the hidden property when a previously rendered component is made invisible. The component is left in the DOM and is not deleted.
   

This also holds true for PolymerTemplate components mapped via the @Id annotation. The component is identified on the client side with the hidden attribute when it is set to invisible. No changes are made to the DOM structure.

Example 2

It is possible to hide a displayed component mapped by the @Id annotation.

@Id("Label Example")
private Component mappedComponent;

// On the client-side, sets the element's attribute "hidden"
mappedComponent.setVisible(false);

You can also try this code with Online Java Compiler

Run Code

Enabled and Disabled Components

You can disable user interaction with a component on the server by using the component.setEnabled(false) function. This method adds a disabled attribute to the client element or elements and blocks all client-server communication for the disabled component and its children.

When a component is deactivated, its enabled state cascades down to any child components it has, but it does not take precedence over the children's enabled states. 

For instance, if B is disabled in a layout with children A and B, setting layout.setEnabled(false) designates both A and B as disabled. Child B remains disabled even if you subsequently enable the layout by setting layout.setEnabled(true) since it was disabled at the component level.

Disabling a component in a template is not the same as disabling it on the server because the server is unaware of client elements. Any template components that have a @Id associated with them are treated like regular child components and receive enabled state changes.

Component Enabled State

A user-interactive component (such as a TextField or a Button) may be in one of three enabled states:

• enabled: It is the default state. The user can interact with an enabled component.
   
• explicitly disabled: When setEnabled(false) is called directly on a component, it becomes explicitly disabled. The user is unable to interact with the component in any way, and all communication between the client and server is prohibited.
   
• implicitly disabled: When a component is a child of a container that is explicitly disabled, it is considered disabled. The component functions precisely like one that has been explicitly disabled, but when it is separated from the container that has been disabled, it becomes enabled once more.
   

It is possible to explicitly enable or deactivate any component that implements the HasEnabled interface. 

Example

TextField name = new TextField("Example");
name.setEnabled(false);

You can also try this code with Online Java Compiler

Run Code

Frequently Asked Questions

Vaadin is stateless or stateful?

Vaadin fusion uses token-based authentication by default and doesn't establish server sessions. The server is then stateless, making it simpler to scale instances horizontally and provide high service availability.

Describe Vaadin.

Vaadin is an open-source framework for creating cutting-edge, group-based web applications with Java backends. It combines UI elements, frameworks, and tools into a unified stack for web development. It has more than 40 interchangeable parts.

What is the use of Vaadin?

Vaadin is made to increase full-stack teams' productivity. You may concentrate all your efforts on creating functionality thanks to full-stack type safety and smooth server-to-browser communication.

What are the basic component features?

The basic component features are Id, Element, and Visibility.

Does using Vaadin need me to be an expert in HTML, CSS, and JavaScript?

No. Using Vaadin Flow, a full-featured, contemporary web app may be created entirely in Java.

Conclusion

In this article, we have discussed the Basic Component Features. We discussed what different types of basic component features are, and we have them in a detailed manner.

We hope this blog has helped you enhance your knowledge of Basic Component Features. If you want to learn more, check out our articles on Creating Components, All about Vaadin, Router Exception Handling, and Routing with Spring.

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enroll in our courses and refer to the mock test and problems available; look at the Top 150 Interview Puzzles,  interview experiences, and interview bundle for placement preparations.

Do upvote our blog to help other ninjas grow. 

Happy Coding!