Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

setVisible(false) documentation #3617

Merged
merged 6 commits into from
Aug 27, 2024
Merged

setVisible(false) documentation #3617

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e51f71d
Update PR check configs from master
jouni Jan 11, 2021
7e52096
doc
AlainaFaisal Aug 27, 2024
357cd8c
Delete .github/workflows/alex.yml
AlainaFaisal Aug 27, 2024
bad15da
Full edit of touched document.
russelljtdyer Aug 27, 2024
5a18c90
Second edit of touched document.
russelljtdyer Aug 27, 2024
22c1653
Third edit of touched document.
russelljtdyer Aug 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 23 additions & 53 deletions articles/flow/create-ui/basic-features.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,39 @@
---
title: Basic Features
description: Common features available in all components.
description: Common features available in all Vaadin components.
order: 10
---


= Basic Component Features

You can use the basic features listed below with all components that extend [classname]`com.vaadin.flow.component.Component`.
You can use the basic features listed here with all of the Vaadin components that extend [classname]`com.vaadin.flow.component.Component`.


== Id
== Setting Id

You can set an `Id` for any component:
You can set an `Id` for any component. The `Id` is passed to the client side as the `id` of the corresponding element. However, an `Id` must be unique within the page.

* The `Id` is transmitted to the client side as the `id` of the corresponding element.
* An `Id` must be unique within the page.

Ids can be used to select the element in JavaScript code or CSS rules, for example.

*Example*: Using the [methodname]`setId()` method to set a component `Id`.
Ids can be used to select the element in JavaScript code or CSS rules. Below is an example using the [methodname]`setId()` method to set a component `Id`:

[source,java]
----
component.setId("my-component");
----


== Element

Every component is associated with a root `Element`.
Every component is associated with a root `Element`. You can use the `Element` to access low-level functionality by using the [methodname]`component.getElement()` method.

You can use the `Element` to access low-level functionality using the [methodname]`component.getElement()` method.
See <<{articles}/flow/create-ui/element-api/properties-attributes#,Element Properties & Attributes>> for more information on this.

See <<{articles}/flow/create-ui/element-api/properties-attributes#,Element Properties and Attributes>> for more.

== Visibility

You can set a component to invisible using the [methodname]`component.setVisible(false)` method.

Invisible components:

* are no longer displayed in the UI;

* don't receive updates from the client side; transmission of server-side updates resumes when the component is made visible again.
You can set a component to invisible by using the [methodname]`component.setVisible(false)` method. If you do this, invisible components are no longer displayed in the UI. They won't receive updates from the client side. Transmission of server-side updates resumes when the component is made visible again.

*Example*: Using the [methodname]`component.setVisible()` method.
Below is an example using the [methodname]`component.setVisible()` method:

[source,java]
----
Expand All @@ -61,20 +50,15 @@ Button makeVisible = new Button("Make visible", evt -> {
----

[NOTE]
If you set a container (such as a `Div` or `Vertical/HorizontalLayout`) that has child components to invisible, all inner components also become invisible.
No server-side updates are sent to them, and no client updates are received from them.
When the container becomes visible again, transmission of updates to the children also resumes.
If you set a container to invisible (e.g., a `Div` or `Vertical/HorizontalLayout`) -- a container that has child components -- all inner components are also made invisible. No server-side updates are sent to them, and no client updates are received from them. When the container becomes visible again, updates to the children also resume.

=== Client-side Consequences of the Invisible Setting

The invisible setting has different consequences, depending on whether the component has been rendered:
=== Client-Side Consequences

* If a component is set to invisible before it's rendered for the first time, the corresponding element in the DOM isn't created, but the server-side structure is maintained.
When the component is set to visible, the DOM is updated.
The invisible settings have different consequences, depending on whether the component has been rendered. If a component is set to invisible before it's rendered for the first time, the corresponding element in the DOM isn't created, but the server-side structure is maintained. When the component is set to visible, the DOM is updated.

Here's an example in which an unrendered component is set to invisible:

+
*Example*: Setting an unrendered component to invisible.
+
[source,java]
----
Span label = new Span("My label");
Expand All @@ -93,17 +77,12 @@ System.out.println("Number of children: "
Collectors.counting()));
----

* If a component that has already been rendered is set to invisible, the corresponding element in the DOM is marked with the `hidden` attribute.
The component isn't removed from the DOM.
If a component that has already been rendered is set to invisible, the corresponding element in the DOM is marked with the `hidden` attribute. The component isn't removed from the DOM. DOM elements of invisible components don't receive updates from the server. Server-side components don't react to RPCs (Remote Procedure Calls) if the component is set to invisible.

This is also true for components used in a [classname]`PolymerTemplate` mapped by the `@Id` annotation. When set to invisible, the component is marked with the `hidden` attribute on the client side. The DOM structure isn't altered.

+
This is also true for components used in a [classname]`PolymerTemplate` mapped by the `@Id` annotation.
When set to invisible, the component is marked with the `hidden` attribute on the client side.
The DOM structure isn't altered.
Below is an example setting a rendered component mapped by the `@Id` annotation to invisible:

+
*Example*: Setting a rendered component mapped by the `@Id` annotation to invisible.
+
[source,java]
----
@Id("my-component")
Expand All @@ -114,23 +93,14 @@ private Component mappedComponent;
mappedComponent.setVisible(false);
----

== Enabled State

You can disable user interaction with a component using the [methodname]`component.setEnabled(false)` method on the server.
This method:
== Enabled State

* blocks any interaction from the client to the server for the disabled component and its children, and
* adds a `disabled` property to any client elements.
You can disable user interaction with a component using the [methodname]`component.setEnabled(false)` method on the server. This method blocks any interaction from the client to the server for the disabled component and its children, and it adds a `disabled` property to any client elements.

The enabled state of the component cascades to the child components of the element when it's disabled, but it doesn't override the enabled state of the children.
For example, if you have a layout with children A and B, and B is disabled, calling [methodname]`layout.setEnabled(false)` marks both A and B as disabled.
If you later enable the layout by calling [methodname]`layout.setEnabled(true)`, child B remains disabled, because it was disabled at the component level.
The enabled state of the component cascades to the child components of the element when it's disabled, but it doesn't override the enabled state of the children. For example, suppose you have a layout with children A and B, and B is disabled. Calling [methodname]`layout.setEnabled(false)` marks both A and B as disabled. If you later enable the layout by calling [methodname]`layout.setEnabled(true)`, child B remains disabled, because it was disabled at the component level.

[NOTE]
Disabling a component in a template isn't the same as disabling it on the server, because the server doesn't know about client elements.
Any `@Id` bound template components are handled as if they are normal child components, and receive enabled state changes.

See <<enabled-state#,Component Enabled State>> for more.

Disabling a component in a template isn't the same as disabling it on the server. This is because the server doesn't know about client elements. Any `@Id` bound template components are handled as if they're normal child components, and receive enabled state changes. See <<enabled-state#,Component Enabled State>> for more on this.

[discussion-id]`4DE87AF2-2DFA-49FE-81FD-EAFF02FD5644`
Loading