From 4593b57357348d20aed5ffe3cfa064540593b7d9 Mon Sep 17 00:00:00 2001 From: Herberts Markuns Date: Wed, 6 May 2026 10:31:49 +0300 Subject: [PATCH 1/5] #4946 Add ValueChangeMode documentation and examples for TextField --- articles/components/text-field/index.adoc | 32 ++++++++++++++ .../textfield/text-field-value-change-mode.ts | 7 +++ .../textfield/TextFieldValueChangeMode.java | 43 +++++++++++++++++++ 3 files changed, 82 insertions(+) create mode 100644 frontend/demo/component/textfield/text-field-value-change-mode.ts create mode 100644 src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java diff --git a/articles/components/text-field/index.adoc b/articles/components/text-field/index.adoc index 1d3e80a559..283bdffe5d 100644 --- a/articles/components/text-field/index.adoc +++ b/articles/components/text-field/index.adoc @@ -155,7 +155,39 @@ kbd:[Tab]|Cursor at the end of the input value. kbd:[Shift+Tab]|Contents selectedfootnote:[Consequent keyboard navigation results in the contents being selected until the selection is changed, by either arrow navigation or mouse click.] |=== +== Different Change Modes [badge-flow]#Flow# +With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classes]`ValueChangeMode` enum provides several modes for different use cases. + +These modes are described below. + + +[options="header", cols="1,4,1"] +|=== +|Mode |Synchronization timing |Custom timeout interval +|`EAGER`|Synchronizes the value whenever it changes on the client side, for example on each keystroke.|No +|`LAZY`|Synchronizes the value after a defined interval has passed without further changes. If another change occurs before the interval ends, the timeout is restarted.|Yes +|`TIMEOUT`|Synchronizes the value at defined intervals while the value continues to change.|Yes +|`ON_BLUR`|Synchronizes the value on the `blur` event, when the component loses focus.|No +|`ON_CHANGE` (default)|Synchronizes the value on the `change` event, when the component value is committed.|No +|=== + +For modes that support a custom timeout interval, use the `setValueChangeTimeout(int ms)` method. + + +[.example] +-- +[source,typescript] +---- + +include::{root}/frontend/demo/component/textfield/text-field-value-change-mode.ts[preimport,hidden] +---- + +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] +---- +-- == Related Components diff --git a/frontend/demo/component/textfield/text-field-value-change-mode.ts b/frontend/demo/component/textfield/text-field-value-change-mode.ts new file mode 100644 index 0000000000..eab6d561d8 --- /dev/null +++ b/frontend/demo/component/textfield/text-field-value-change-mode.ts @@ -0,0 +1,7 @@ +import 'Frontend/demo/init'; +import '@vaadin/text-field'; +import '@vaadin/select'; +import '@vaadin/horizontal-layout'; +import '@vaadin/vertical-layout'; + +// This file only has the required imports for the Java-only example diff --git a/src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java new file mode 100644 index 0000000000..16c924c4e8 --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java @@ -0,0 +1,43 @@ +package com.vaadin.demo.component.textfield; + +import com.vaadin.demo.DemoExporter; +import com.vaadin.demo.flow.routing.Route; +import com.vaadin.flow.component.html.Span; +import com.vaadin.flow.component.orderedlayout.HorizontalLayout; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.component.select.Select; +import com.vaadin.flow.component.textfield.TextField; +import com.vaadin.flow.data.value.ValueChangeMode; + +@Route("text-field-value-change-mode") +public class TextFieldValueChangeMode extends VerticalLayout { + + public TextFieldValueChangeMode() { + setPadding(false); + + // tag::snippet[] + var textField = new TextField("Text Field"); + var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + modeSelector.setValue(textField.getValueChangeMode()); + modeSelector.addValueChangeListener(e -> { + textField.clear(); + textField.setValueChangeMode(e.getValue()); + }); + var serverSideContent = new Span(); + textField.addValueChangeListener(e -> serverSideContent.setText(e.getValue())); + // end::snippet[] + + modeSelector.setItemLabelGenerator(ValueChangeMode::name); + + var horizontalLayout = new HorizontalLayout(textField, modeSelector); + horizontalLayout.setAlignItems(Alignment.BASELINE); + + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + + add(horizontalLayout, serverSideLayout); + } + + + public static class Exporter extends DemoExporter { // hidden-source-line + } // hidden-source-line +} From aa5c0fb3f8954e42ac248f5a4b3f5fb15dd9e532 Mon Sep 17 00:00:00 2001 From: Herberts Markuns Date: Wed, 6 May 2026 10:46:51 +0300 Subject: [PATCH 2/5] #4946 Add ValueChangeMode documentation and examples for EmailField --- articles/components/email-field/index.adoc | 34 ++++++++++++++ .../email-field-value-change-mode.ts | 7 +++ .../emailfield/EmailFieldValueChangeMode.java | 44 +++++++++++++++++++ 3 files changed, 85 insertions(+) create mode 100644 frontend/demo/component/emailfield/email-field-value-change-mode.ts create mode 100644 src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java diff --git a/articles/components/email-field/index.adoc b/articles/components/email-field/index.adoc index 35bc62d6d7..be02f8f750 100644 --- a/articles/components/email-field/index.adoc +++ b/articles/components/email-field/index.adoc @@ -152,4 +152,38 @@ include::{root}/frontend/demo/component/emailfield/react/email-field-readonly-an endif::[] -- +== Different Change Modes [badge-flow]#Flow# + +With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classes]`ValueChangeMode` enum provides several modes for different use cases. + +These modes are described below. + + +[options="header", cols="1,4,1"] +|=== +|Mode |Synchronization timing |Custom timeout interval +|`EAGER`|Synchronizes the value whenever it changes on the client side, for example on each keystroke.|No +|`LAZY`|Synchronizes the value after a defined interval has passed without further changes. If another change occurs before the interval ends, the timeout is restarted.|Yes +|`TIMEOUT`|Synchronizes the value at defined intervals while the value continues to change.|Yes +|`ON_BLUR`|Synchronizes the value on the `blur` event, when the component loses focus.|No +|`ON_CHANGE` (default)|Synchronizes the value on the `change` event, when the component value is committed.|No +|=== + +For modes that support a custom timeout interval, use the `setValueChangeTimeout(int ms)` method. + + +[.example] +-- +[source,typescript] +---- + +include::{root}/frontend/demo/component/emailfield/email-field-value-change-mode.ts[preimport,hidden] +---- + +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] +---- +-- + [discussion-id]`CC0AAD7F-3E1C-4A8E-A331-52F2AEDDD907` diff --git a/frontend/demo/component/emailfield/email-field-value-change-mode.ts b/frontend/demo/component/emailfield/email-field-value-change-mode.ts new file mode 100644 index 0000000000..5c156014b8 --- /dev/null +++ b/frontend/demo/component/emailfield/email-field-value-change-mode.ts @@ -0,0 +1,7 @@ +import 'Frontend/demo/init'; +import '@vaadin/email-field'; +import '@vaadin/select'; +import '@vaadin/horizontal-layout'; +import '@vaadin/vertical-layout'; + +// This file only has the required imports for the Java-only example diff --git a/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java new file mode 100644 index 0000000000..3161014bd6 --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java @@ -0,0 +1,44 @@ +package com.vaadin.demo.component.emailfield; + +import com.vaadin.demo.DemoExporter; +import com.vaadin.demo.flow.routing.Route; +import com.vaadin.flow.component.html.Span; +import com.vaadin.flow.component.orderedlayout.HorizontalLayout; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.component.select.Select; +import com.vaadin.flow.component.textfield.EmailField; +import com.vaadin.flow.component.textfield.TextField; +import com.vaadin.flow.data.value.ValueChangeMode; + +@Route("email-field-value-change-mode") +public class EmailFieldValueChangeMode extends VerticalLayout { + + public EmailFieldValueChangeMode() { + setPadding(false); + + // tag::snippet[] + var emailField = new EmailField("Email Field"); + var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + modeSelector.setValue(emailField.getValueChangeMode()); + modeSelector.addValueChangeListener(e -> { + emailField.clear(); + emailField.setValueChangeMode(e.getValue()); + }); + var serverSideContent = new Span(); + emailField.addValueChangeListener(e -> serverSideContent.setText(e.getValue())); + // end::snippet[] + + modeSelector.setItemLabelGenerator(ValueChangeMode::name); + + var horizontalLayout = new HorizontalLayout(emailField, modeSelector); + horizontalLayout.setAlignItems(Alignment.BASELINE); + + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + + add(horizontalLayout, serverSideLayout); + } + + + public static class Exporter extends DemoExporter { // hidden-source-line + } // hidden-source-line +} From dac84f742071c62f63899618bc2202b1a9c57d27 Mon Sep 17 00:00:00 2001 From: Herberts Markuns Date: Wed, 6 May 2026 10:57:20 +0300 Subject: [PATCH 3/5] #4946 Add ValueChangeMode documentation and examples for NumberField --- articles/components/email-field/index.adoc | 2 +- articles/components/number-field/index.adoc | 34 ++++++++++++++ articles/components/text-field/index.adoc | 2 +- .../number-field-value-change-mode.ts | 7 +++ .../emailfield/EmailFieldValueChangeMode.java | 2 - .../NumberFieldValueChangeMode.java | 44 +++++++++++++++++++ 6 files changed, 87 insertions(+), 4 deletions(-) create mode 100644 frontend/demo/component/numberfield/number-field-value-change-mode.ts create mode 100644 src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java diff --git a/articles/components/email-field/index.adoc b/articles/components/email-field/index.adoc index be02f8f750..ffb6d6638d 100644 --- a/articles/components/email-field/index.adoc +++ b/articles/components/email-field/index.adoc @@ -152,7 +152,7 @@ include::{root}/frontend/demo/component/emailfield/react/email-field-readonly-an endif::[] -- -== Different Change Modes [badge-flow]#Flow# +== Value Change Modes [badge-flow]#Flow# With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classes]`ValueChangeMode` enum provides several modes for different use cases. diff --git a/articles/components/number-field/index.adoc b/articles/components/number-field/index.adoc index ea7e973e97..e1b9a6c681 100644 --- a/articles/components/number-field/index.adoc +++ b/articles/components/number-field/index.adoc @@ -273,6 +273,40 @@ include::{root}/frontend/demo/component/numberfield/react/number-field-readonly- endif::[] -- +== Value Change Modes [badge-flow]#Flow# + +With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classes]`ValueChangeMode` enum provides several modes for different use cases. + +These modes are described below. + + +[options="header", cols="1,4,1"] +|=== +|Mode |Synchronization timing |Custom timeout interval +|`EAGER`|Synchronizes the value whenever it changes on the client side, for example on each keystroke.|No +|`LAZY`|Synchronizes the value after a defined interval has passed without further changes. If another change occurs before the interval ends, the timeout is restarted.|Yes +|`TIMEOUT`|Synchronizes the value at defined intervals while the value continues to change.|Yes +|`ON_BLUR`|Synchronizes the value on the `blur` event, when the component loses focus.|No +|`ON_CHANGE` (default)|Synchronizes the value on the `change` event, when the component value is committed.|No +|=== + +For modes that support a custom timeout interval, use the `setValueChangeTimeout(int ms)` method. + + +[.example] +-- +[source,typescript] +---- + +include::{root}/frontend/demo/component/numberfield/number-field-value-change-mode.ts[preimport,hidden] +---- + +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] +---- +-- + == Best Practices diff --git a/articles/components/text-field/index.adoc b/articles/components/text-field/index.adoc index 283bdffe5d..a5b3e72ea1 100644 --- a/articles/components/text-field/index.adoc +++ b/articles/components/text-field/index.adoc @@ -155,7 +155,7 @@ kbd:[Tab]|Cursor at the end of the input value. kbd:[Shift+Tab]|Contents selectedfootnote:[Consequent keyboard navigation results in the contents being selected until the selection is changed, by either arrow navigation or mouse click.] |=== -== Different Change Modes [badge-flow]#Flow# +== Value Change Modes [badge-flow]#Flow# With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classes]`ValueChangeMode` enum provides several modes for different use cases. diff --git a/frontend/demo/component/numberfield/number-field-value-change-mode.ts b/frontend/demo/component/numberfield/number-field-value-change-mode.ts new file mode 100644 index 0000000000..78f1c60716 --- /dev/null +++ b/frontend/demo/component/numberfield/number-field-value-change-mode.ts @@ -0,0 +1,7 @@ +import 'Frontend/demo/init'; +import '@vaadin/number-field'; +import '@vaadin/select'; +import '@vaadin/horizontal-layout'; +import '@vaadin/vertical-layout'; + +// This file only has the required imports for the Java-only example diff --git a/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java index 3161014bd6..184dffa085 100644 --- a/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java @@ -7,7 +7,6 @@ import com.vaadin.flow.component.orderedlayout.VerticalLayout; import com.vaadin.flow.component.select.Select; import com.vaadin.flow.component.textfield.EmailField; -import com.vaadin.flow.component.textfield.TextField; import com.vaadin.flow.data.value.ValueChangeMode; @Route("email-field-value-change-mode") @@ -15,7 +14,6 @@ public class EmailFieldValueChangeMode extends VerticalLayout { public EmailFieldValueChangeMode() { setPadding(false); - // tag::snippet[] var emailField = new EmailField("Email Field"); var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); diff --git a/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java new file mode 100644 index 0000000000..21ab486a8d --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java @@ -0,0 +1,44 @@ +package com.vaadin.demo.component.numberfield; + +import com.vaadin.demo.DemoExporter; +import com.vaadin.demo.flow.routing.Route; +import com.vaadin.flow.component.html.Span; +import com.vaadin.flow.component.orderedlayout.HorizontalLayout; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.component.select.Select; +import com.vaadin.flow.component.textfield.EmailField; +import com.vaadin.flow.component.textfield.NumberField; +import com.vaadin.flow.data.value.ValueChangeMode; + +@Route("number-field-value-change-mode") +public class NumberFieldValueChangeMode extends VerticalLayout { + + public NumberFieldValueChangeMode() { + setPadding(false); + // tag::snippet[] + var numberField = new NumberField("Number Field"); + var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + modeSelector.setValue(numberField.getValueChangeMode()); + modeSelector.addValueChangeListener(e -> { + numberField.clear(); + numberField.setValueChangeMode(e.getValue()); + }); + var serverSideContent = new Span(); + numberField.addValueChangeListener(e -> + serverSideContent.setText(e.getValue() == null ? "" : e.getValue().toString())); + // end::snippet[] + + modeSelector.setItemLabelGenerator(ValueChangeMode::name); + + var horizontalLayout = new HorizontalLayout(numberField, modeSelector); + horizontalLayout.setAlignItems(Alignment.BASELINE); + + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + + add(horizontalLayout, serverSideLayout); + } + + + public static class Exporter extends DemoExporter { // hidden-source-line + } // hidden-source-line +} From 2e3e73d086ef06a7ad7481b9322157ce1dec3139 Mon Sep 17 00:00:00 2001 From: Herberts Markuns Date: Wed, 6 May 2026 15:45:12 +0300 Subject: [PATCH 4/5] #4946 Add ValueChangeMode documentation and examples for PasswordField, RichTextEditor, Slider, and TextArea --- articles/components/password-field/index.adoc | 34 +++++++++++++++ .../components/rich-text-editor/index.adoc | 34 +++++++++++++++ articles/components/slider/index.adoc | 34 +++++++++++++++ articles/components/text-area/index.adoc | 34 +++++++++++++++ .../password-field-value-change-mode.ts | 7 ++++ .../rich-text-editor-value-change-mode.ts | 7 ++++ .../slider/slider-value-change-mode.ts | 7 ++++ .../textarea/text-area-value-change-mode.ts | 7 ++++ .../NumberFieldValueChangeMode.java | 1 - .../PasswordFieldValueChangeMode.java | 42 +++++++++++++++++++ .../RichTextEditorValueChangeMode.java | 40 ++++++++++++++++++ .../slider/SliderValueChangeMode.java | 41 ++++++++++++++++++ .../textarea/TextAreaValueChangeMode.java | 42 +++++++++++++++++++ 13 files changed, 329 insertions(+), 1 deletion(-) create mode 100644 frontend/demo/component/passwordfield/password-field-value-change-mode.ts create mode 100644 frontend/demo/component/richtexteditor/rich-text-editor-value-change-mode.ts create mode 100644 frontend/demo/component/slider/slider-value-change-mode.ts create mode 100644 frontend/demo/component/textarea/text-area-value-change-mode.ts create mode 100644 src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java create mode 100644 src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java create mode 100644 src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java create mode 100644 src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java diff --git a/articles/components/password-field/index.adoc b/articles/components/password-field/index.adoc index 68e2d87af4..facb80d67c 100644 --- a/articles/components/password-field/index.adoc +++ b/articles/components/password-field/index.adoc @@ -166,6 +166,40 @@ endif::[] -- +== Value Change Modes [badge-flow]#Flow# + +With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classes]`ValueChangeMode` enum provides several modes for different use cases. + +These modes are described below. + + +[options="header", cols="1,4,1"] +|=== +|Mode |Synchronization timing |Custom timeout interval +|`EAGER`|Synchronizes the value whenever it changes on the client side, for example on each keystroke.|No +|`LAZY`|Synchronizes the value after a defined interval has passed without further changes. If another change occurs before the interval ends, the timeout is restarted.|Yes +|`TIMEOUT`|Synchronizes the value at defined intervals while the value continues to change.|Yes +|`ON_BLUR`|Synchronizes the value on the `blur` event, when the component loses focus.|No +|`ON_CHANGE` (default)|Synchronizes the value on the `change` event, when the component value is committed.|No +|=== + +For modes that support a custom timeout interval, use the `setValueChangeTimeout(int ms)` method. + + +[.example] +-- +[source,typescript] +---- + +include::{root}/frontend/demo/component/passwordfield/password-field-value-change-mode.ts[preimport,hidden] +---- + +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] +---- +-- + == Best Practices Express clearly your password requirements to the user, so that they don't have to guess. The <> feature is appropriate for this purpose. diff --git a/articles/components/rich-text-editor/index.adoc b/articles/components/rich-text-editor/index.adoc index aac2d42968..5e7266faa7 100644 --- a/articles/components/rich-text-editor/index.adoc +++ b/articles/components/rich-text-editor/index.adoc @@ -279,6 +279,40 @@ include::{root}/frontend/demo/component/richtexteditor/react/rich-text-editor-mi endif::[] -- +== Value Change Modes [badge-flow]#Flow# + +With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classes]`ValueChangeMode` enum provides several modes for different use cases. + +These modes are described below. + + +[options="header", cols="1,4,1"] +|=== +|Mode |Synchronization timing |Custom timeout interval +|`EAGER`|Synchronizes the value whenever it changes on the client side, for example on each keystroke.|No +|`LAZY`|Synchronizes the value after a defined interval has passed without further changes. If another change occurs before the interval ends, the timeout is restarted.|Yes +|`TIMEOUT`|Synchronizes the value at defined intervals while the value continues to change.|Yes +|`ON_BLUR`|Synchronizes the value on the `blur` event, when the component loses focus.|No +|`ON_CHANGE` (default)|Synchronizes the value on the `change` event, when the component value is committed.|No +|=== + +For modes that support a custom timeout interval, use the `setValueChangeTimeout(int ms)` method. + + +[.example] +-- +[source,typescript] +---- + +include::{root}/frontend/demo/component/richtexteditor/rich-text-editor-value-change-mode.ts[preimport,hidden] +---- + +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] +---- +-- + == Toolbar Actions diff --git a/articles/components/slider/index.adoc b/articles/components/slider/index.adoc index 637ebe6e44..a8ad67cf25 100644 --- a/articles/components/slider/index.adoc +++ b/articles/components/slider/index.adoc @@ -279,6 +279,40 @@ endif::[] -- +== Value Change Modes [badge-flow]#Flow# + +With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classes]`ValueChangeMode` enum provides several modes for different use cases. + +These modes are described below. + + +[options="header", cols="1,4,1"] +|=== +|Mode |Synchronization timing |Custom timeout interval +|`EAGER`|Synchronizes the value whenever it changes on the client side, for example on each keystroke.|No +|`LAZY`|Synchronizes the value after a defined interval has passed without further changes. If another change occurs before the interval ends, the timeout is restarted.|Yes +|`TIMEOUT`|Synchronizes the value at defined intervals while the value continues to change.|Yes +|`ON_BLUR`|Synchronizes the value on the `blur` event, when the component loses focus.|No +|`ON_CHANGE` (default)|Synchronizes the value on the `change` event, when the component value is committed.|No +|=== + +For modes that support a custom timeout interval, use the `setValueChangeTimeout(int ms)` method. + + +[.example] +-- +[source,typescript] +---- + +include::{root}/frontend/demo/component/slider/slider-value-change-mode.ts[preimport,hidden] +---- + +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] +---- +-- + == Best Practices Slider is best suited for settings where the user benefits from immediate visual feedback, such as adjusting volume or brightness. Range Slider is best suited for filtering or selecting a subset of a continuous range, such as a price range or date span. diff --git a/articles/components/text-area/index.adoc b/articles/components/text-area/index.adoc index 985cae6d0e..86746e834c 100644 --- a/articles/components/text-area/index.adoc +++ b/articles/components/text-area/index.adoc @@ -257,6 +257,40 @@ include::{root}/frontend/demo/component/textarea/react/text-area-helper.tsx[rend endif::[] -- +== Value Change Modes [badge-flow]#Flow# + +With the Flow Java API, you can define when client-side value changes are synchronized to the server. The [classes]`ValueChangeMode` enum provides several modes for different use cases. + +These modes are described below. + + +[options="header", cols="1,4,1"] +|=== +|Mode |Synchronization timing |Custom timeout interval +|`EAGER`|Synchronizes the value whenever it changes on the client side, for example on each keystroke.|No +|`LAZY`|Synchronizes the value after a defined interval has passed without further changes. If another change occurs before the interval ends, the timeout is restarted.|Yes +|`TIMEOUT`|Synchronizes the value at defined intervals while the value continues to change.|Yes +|`ON_BLUR`|Synchronizes the value on the `blur` event, when the component loses focus.|No +|`ON_CHANGE` (default)|Synchronizes the value on the `change` event, when the component value is committed.|No +|=== + +For modes that support a custom timeout interval, use the `setValueChangeTimeout(int ms)` method. + + +[.example] +-- +[source,typescript] +---- + +include::{root}/frontend/demo/component/textarea/text-area-value-change-mode.ts[preimport,hidden] +---- + +[source,java] +---- +include::{root}/src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java[render,tags=snippet,indent=0,group=Flow] +---- +-- + == Related Components [cols="1,2"] diff --git a/frontend/demo/component/passwordfield/password-field-value-change-mode.ts b/frontend/demo/component/passwordfield/password-field-value-change-mode.ts new file mode 100644 index 0000000000..eab6d561d8 --- /dev/null +++ b/frontend/demo/component/passwordfield/password-field-value-change-mode.ts @@ -0,0 +1,7 @@ +import 'Frontend/demo/init'; +import '@vaadin/text-field'; +import '@vaadin/select'; +import '@vaadin/horizontal-layout'; +import '@vaadin/vertical-layout'; + +// This file only has the required imports for the Java-only example diff --git a/frontend/demo/component/richtexteditor/rich-text-editor-value-change-mode.ts b/frontend/demo/component/richtexteditor/rich-text-editor-value-change-mode.ts new file mode 100644 index 0000000000..6d7c9abef2 --- /dev/null +++ b/frontend/demo/component/richtexteditor/rich-text-editor-value-change-mode.ts @@ -0,0 +1,7 @@ +import 'Frontend/demo/init'; +import '@vaadin/rich-text-editor'; +import '@vaadin/select'; +import '@vaadin/horizontal-layout'; +import '@vaadin/vertical-layout'; + +// This file only has the required imports for the Java-only example diff --git a/frontend/demo/component/slider/slider-value-change-mode.ts b/frontend/demo/component/slider/slider-value-change-mode.ts new file mode 100644 index 0000000000..2d3f6b638e --- /dev/null +++ b/frontend/demo/component/slider/slider-value-change-mode.ts @@ -0,0 +1,7 @@ +import 'Frontend/demo/init'; +import '@vaadin/slider'; +import '@vaadin/select'; +import '@vaadin/horizontal-layout'; +import '@vaadin/vertical-layout'; + +// This file only has the required imports for the Java-only example diff --git a/frontend/demo/component/textarea/text-area-value-change-mode.ts b/frontend/demo/component/textarea/text-area-value-change-mode.ts new file mode 100644 index 0000000000..eab6d561d8 --- /dev/null +++ b/frontend/demo/component/textarea/text-area-value-change-mode.ts @@ -0,0 +1,7 @@ +import 'Frontend/demo/init'; +import '@vaadin/text-field'; +import '@vaadin/select'; +import '@vaadin/horizontal-layout'; +import '@vaadin/vertical-layout'; + +// This file only has the required imports for the Java-only example diff --git a/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java index 21ab486a8d..4711e22150 100644 --- a/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java @@ -6,7 +6,6 @@ import com.vaadin.flow.component.orderedlayout.HorizontalLayout; import com.vaadin.flow.component.orderedlayout.VerticalLayout; import com.vaadin.flow.component.select.Select; -import com.vaadin.flow.component.textfield.EmailField; import com.vaadin.flow.component.textfield.NumberField; import com.vaadin.flow.data.value.ValueChangeMode; diff --git a/src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java new file mode 100644 index 0000000000..562a6d4039 --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java @@ -0,0 +1,42 @@ +package com.vaadin.demo.component.passwordfield; + +import com.vaadin.demo.DemoExporter; +import com.vaadin.demo.flow.routing.Route; +import com.vaadin.flow.component.html.Span; +import com.vaadin.flow.component.orderedlayout.HorizontalLayout; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.component.select.Select; +import com.vaadin.flow.component.textfield.PasswordField; +import com.vaadin.flow.data.value.ValueChangeMode; + +@Route("password-field-value-change-mode") +public class PasswordFieldValueChangeMode extends VerticalLayout { + + public PasswordFieldValueChangeMode() { + setPadding(false); + + // tag::snippet[] + var passwordField = new PasswordField("Password Field"); + var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + modeSelector.setValue(passwordField.getValueChangeMode()); + modeSelector.addValueChangeListener(e -> { + passwordField.clear(); + passwordField.setValueChangeMode(e.getValue()); + }); + var serverSideContent = new Span(); + passwordField.addValueChangeListener(e -> serverSideContent.setText(e.getValue())); + // end::snippet[] + + modeSelector.setItemLabelGenerator(ValueChangeMode::name); + + var horizontalLayout = new HorizontalLayout(passwordField, modeSelector); + horizontalLayout.setAlignItems(Alignment.BASELINE); + + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + + add(horizontalLayout, serverSideLayout); + } + + public static class Exporter extends DemoExporter { // hidden-source-line + } // hidden-source-line +} diff --git a/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java b/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java new file mode 100644 index 0000000000..1f61e4ea6e --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java @@ -0,0 +1,40 @@ +package com.vaadin.demo.component.richtexteditor; + +import com.vaadin.demo.DemoExporter; +import com.vaadin.demo.flow.routing.Route; +import com.vaadin.flow.component.html.Span; +import com.vaadin.flow.component.orderedlayout.HorizontalLayout; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.component.richtexteditor.RichTextEditor; +import com.vaadin.flow.component.select.Select; +import com.vaadin.flow.data.value.ValueChangeMode; + +@Route("rich-text-editor-value-change-mode") +public class RichTextEditorValueChangeMode extends VerticalLayout { + + public RichTextEditorValueChangeMode() { + setPadding(false); + + // tag::snippet[] + var rte = new RichTextEditor(); + rte.setMaxHeight("300px"); + var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + modeSelector.setValue(rte.getValueChangeMode()); + modeSelector.addValueChangeListener(e -> { + rte.setValue(""); + rte.setValueChangeMode(e.getValue()); + }); + var serverSideContent = new Span(); + rte.addValueChangeListener(e -> serverSideContent.setText(e.getValue())); + // end::snippet[] + + modeSelector.setItemLabelGenerator(ValueChangeMode::name); + + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + + add(rte, modeSelector, serverSideLayout); + } + + public static class Exporter extends DemoExporter { // hidden-source-line + } // hidden-source-line +} diff --git a/src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java b/src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java new file mode 100644 index 0000000000..11f322a27a --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java @@ -0,0 +1,41 @@ +package com.vaadin.demo.component.slider; + +import com.vaadin.demo.DemoExporter; +import com.vaadin.demo.flow.routing.Route; +import com.vaadin.flow.component.html.Span; +import com.vaadin.flow.component.orderedlayout.HorizontalLayout; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.component.select.Select; +import com.vaadin.flow.component.slider.DecimalSlider; +import com.vaadin.flow.data.value.ValueChangeMode; + +@Route("slider-value-change-mode") +public class SliderValueChangeMode extends VerticalLayout { + + public SliderValueChangeMode() { + setPadding(false); + + // tag::snippet[] + var slider = new DecimalSlider("Slider"); + slider.setValue(50.0); + var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + modeSelector.setValue(slider.getValueChangeMode()); + modeSelector.addValueChangeListener(e -> { + slider.setValue(50.0); + slider.setValueChangeMode(e.getValue()); + }); + var serverSideContent = new Span(); + slider.addValueChangeListener(e -> + serverSideContent.setText(e.getValue() == null ? "" : e.getValue().toString())); + // end::snippet[] + + modeSelector.setItemLabelGenerator(ValueChangeMode::name); + + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + + add(slider, modeSelector, serverSideLayout); + } + + public static class Exporter extends DemoExporter { // hidden-source-line + } // hidden-source-line +} diff --git a/src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java b/src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java new file mode 100644 index 0000000000..8d1dd1265a --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java @@ -0,0 +1,42 @@ +package com.vaadin.demo.component.textarea; + +import com.vaadin.demo.DemoExporter; +import com.vaadin.demo.flow.routing.Route; +import com.vaadin.flow.component.html.Span; +import com.vaadin.flow.component.orderedlayout.HorizontalLayout; +import com.vaadin.flow.component.orderedlayout.VerticalLayout; +import com.vaadin.flow.component.select.Select; +import com.vaadin.flow.component.textfield.TextArea; +import com.vaadin.flow.data.value.ValueChangeMode; + +@Route("text-area-value-change-mode") +public class TextAreaValueChangeMode extends VerticalLayout { + + public TextAreaValueChangeMode() { + setPadding(false); + + // tag::snippet[] + var textArea = new TextArea("Text Area"); + var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + modeSelector.setValue(textArea.getValueChangeMode()); + modeSelector.addValueChangeListener(e -> { + textArea.clear(); + textArea.setValueChangeMode(e.getValue()); + }); + var serverSideContent = new Span(); + textArea.addValueChangeListener(e -> serverSideContent.setText(e.getValue())); + // end::snippet[] + + modeSelector.setItemLabelGenerator(ValueChangeMode::name); + + var horizontalLayout = new HorizontalLayout(textArea, modeSelector); + horizontalLayout.setAlignItems(Alignment.BASELINE); + + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + + add(horizontalLayout, serverSideLayout); + } + + public static class Exporter extends DemoExporter { // hidden-source-line + } // hidden-source-line +} From aab8e4ffdbb424e007220c0e1d0d7923c1924fb6 Mon Sep 17 00:00:00 2001 From: Herberts Markuns Date: Fri, 8 May 2026 14:38:34 +0300 Subject: [PATCH 5/5] #4946 Fix broken style rules --- .../emailfield/EmailFieldValueChangeMode.java | 13 ++++++++----- .../numberfield/NumberFieldValueChangeMode.java | 14 ++++++++------ .../PasswordFieldValueChangeMode.java | 15 ++++++++++----- .../RichTextEditorValueChangeMode.java | 12 ++++++++---- .../component/slider/SliderValueChangeMode.java | 10 ++++++---- .../textarea/TextAreaValueChangeMode.java | 9 ++++++--- .../textfield/TextFieldValueChangeMode.java | 13 ++++++++----- 7 files changed, 54 insertions(+), 32 deletions(-) diff --git a/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java index 184dffa085..4a91b42606 100644 --- a/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java @@ -16,14 +16,16 @@ public EmailFieldValueChangeMode() { setPadding(false); // tag::snippet[] var emailField = new EmailField("Email Field"); - var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + var modeSelector = new Select<>("Value Change Mode", + ValueChangeMode.values()); modeSelector.setValue(emailField.getValueChangeMode()); modeSelector.addValueChangeListener(e -> { emailField.clear(); emailField.setValueChangeMode(e.getValue()); }); var serverSideContent = new Span(); - emailField.addValueChangeListener(e -> serverSideContent.setText(e.getValue())); + emailField.addValueChangeListener( + e -> serverSideContent.setText(e.getValue())); // end::snippet[] modeSelector.setItemLabelGenerator(ValueChangeMode::name); @@ -31,12 +33,13 @@ public EmailFieldValueChangeMode() { var horizontalLayout = new HorizontalLayout(emailField, modeSelector); horizontalLayout.setAlignItems(Alignment.BASELINE); - var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), + serverSideContent); add(horizontalLayout, serverSideLayout); } - - public static class Exporter extends DemoExporter { // hidden-source-line + public static class Exporter + extends DemoExporter { // hidden-source-line } // hidden-source-line } diff --git a/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java index 4711e22150..f5771953fa 100644 --- a/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java @@ -16,15 +16,16 @@ public NumberFieldValueChangeMode() { setPadding(false); // tag::snippet[] var numberField = new NumberField("Number Field"); - var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + var modeSelector = new Select<>("Value Change Mode", + ValueChangeMode.values()); modeSelector.setValue(numberField.getValueChangeMode()); modeSelector.addValueChangeListener(e -> { numberField.clear(); numberField.setValueChangeMode(e.getValue()); }); var serverSideContent = new Span(); - numberField.addValueChangeListener(e -> - serverSideContent.setText(e.getValue() == null ? "" : e.getValue().toString())); + numberField.addValueChangeListener(e -> serverSideContent + .setText(e.getValue() == null ? "" : e.getValue().toString())); // end::snippet[] modeSelector.setItemLabelGenerator(ValueChangeMode::name); @@ -32,12 +33,13 @@ public NumberFieldValueChangeMode() { var horizontalLayout = new HorizontalLayout(numberField, modeSelector); horizontalLayout.setAlignItems(Alignment.BASELINE); - var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), + serverSideContent); add(horizontalLayout, serverSideLayout); } - - public static class Exporter extends DemoExporter { // hidden-source-line + public static class Exporter + extends DemoExporter { // hidden-source-line } // hidden-source-line } diff --git a/src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java index 562a6d4039..746dc3c23e 100644 --- a/src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java @@ -17,26 +17,31 @@ public PasswordFieldValueChangeMode() { // tag::snippet[] var passwordField = new PasswordField("Password Field"); - var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + var modeSelector = new Select<>("Value Change Mode", + ValueChangeMode.values()); modeSelector.setValue(passwordField.getValueChangeMode()); modeSelector.addValueChangeListener(e -> { passwordField.clear(); passwordField.setValueChangeMode(e.getValue()); }); var serverSideContent = new Span(); - passwordField.addValueChangeListener(e -> serverSideContent.setText(e.getValue())); + passwordField.addValueChangeListener( + e -> serverSideContent.setText(e.getValue())); // end::snippet[] modeSelector.setItemLabelGenerator(ValueChangeMode::name); - var horizontalLayout = new HorizontalLayout(passwordField, modeSelector); + var horizontalLayout = new HorizontalLayout(passwordField, + modeSelector); horizontalLayout.setAlignItems(Alignment.BASELINE); - var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), + serverSideContent); add(horizontalLayout, serverSideLayout); } - public static class Exporter extends DemoExporter { // hidden-source-line + public static class Exporter + extends DemoExporter { // hidden-source-line } // hidden-source-line } diff --git a/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java b/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java index 1f61e4ea6e..082e2edc34 100644 --- a/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java @@ -18,23 +18,27 @@ public RichTextEditorValueChangeMode() { // tag::snippet[] var rte = new RichTextEditor(); rte.setMaxHeight("300px"); - var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + var modeSelector = new Select<>("Value Change Mode", + ValueChangeMode.values()); modeSelector.setValue(rte.getValueChangeMode()); modeSelector.addValueChangeListener(e -> { rte.setValue(""); rte.setValueChangeMode(e.getValue()); }); var serverSideContent = new Span(); - rte.addValueChangeListener(e -> serverSideContent.setText(e.getValue())); + rte.addValueChangeListener( + e -> serverSideContent.setText(e.getValue())); // end::snippet[] modeSelector.setItemLabelGenerator(ValueChangeMode::name); - var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), + serverSideContent); add(rte, modeSelector, serverSideLayout); } - public static class Exporter extends DemoExporter { // hidden-source-line + public static class Exporter + extends DemoExporter { // hidden-source-line } // hidden-source-line } diff --git a/src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java b/src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java index 11f322a27a..a1212058cf 100644 --- a/src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java @@ -18,20 +18,22 @@ public SliderValueChangeMode() { // tag::snippet[] var slider = new DecimalSlider("Slider"); slider.setValue(50.0); - var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + var modeSelector = new Select<>("Value Change Mode", + ValueChangeMode.values()); modeSelector.setValue(slider.getValueChangeMode()); modeSelector.addValueChangeListener(e -> { slider.setValue(50.0); slider.setValueChangeMode(e.getValue()); }); var serverSideContent = new Span(); - slider.addValueChangeListener(e -> - serverSideContent.setText(e.getValue() == null ? "" : e.getValue().toString())); + slider.addValueChangeListener(e -> serverSideContent + .setText(e.getValue() == null ? "" : e.getValue().toString())); // end::snippet[] modeSelector.setItemLabelGenerator(ValueChangeMode::name); - var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), + serverSideContent); add(slider, modeSelector, serverSideLayout); } diff --git a/src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java b/src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java index 8d1dd1265a..9f80f83222 100644 --- a/src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java @@ -17,14 +17,16 @@ public TextAreaValueChangeMode() { // tag::snippet[] var textArea = new TextArea("Text Area"); - var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + var modeSelector = new Select<>("Value Change Mode", + ValueChangeMode.values()); modeSelector.setValue(textArea.getValueChangeMode()); modeSelector.addValueChangeListener(e -> { textArea.clear(); textArea.setValueChangeMode(e.getValue()); }); var serverSideContent = new Span(); - textArea.addValueChangeListener(e -> serverSideContent.setText(e.getValue())); + textArea.addValueChangeListener( + e -> serverSideContent.setText(e.getValue())); // end::snippet[] modeSelector.setItemLabelGenerator(ValueChangeMode::name); @@ -32,7 +34,8 @@ public TextAreaValueChangeMode() { var horizontalLayout = new HorizontalLayout(textArea, modeSelector); horizontalLayout.setAlignItems(Alignment.BASELINE); - var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), + serverSideContent); add(horizontalLayout, serverSideLayout); } diff --git a/src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java index 16c924c4e8..31720744a5 100644 --- a/src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java +++ b/src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java @@ -17,14 +17,16 @@ public TextFieldValueChangeMode() { // tag::snippet[] var textField = new TextField("Text Field"); - var modeSelector = new Select<>("Value Change Mode", ValueChangeMode.values()); + var modeSelector = new Select<>("Value Change Mode", + ValueChangeMode.values()); modeSelector.setValue(textField.getValueChangeMode()); modeSelector.addValueChangeListener(e -> { textField.clear(); textField.setValueChangeMode(e.getValue()); }); var serverSideContent = new Span(); - textField.addValueChangeListener(e -> serverSideContent.setText(e.getValue())); + textField.addValueChangeListener( + e -> serverSideContent.setText(e.getValue())); // end::snippet[] modeSelector.setItemLabelGenerator(ValueChangeMode::name); @@ -32,12 +34,13 @@ public TextFieldValueChangeMode() { var horizontalLayout = new HorizontalLayout(textField, modeSelector); horizontalLayout.setAlignItems(Alignment.BASELINE); - var serverSideLayout = new HorizontalLayout(new Span("Server side:"), serverSideContent); + var serverSideLayout = new HorizontalLayout(new Span("Server side:"), + serverSideContent); add(horizontalLayout, serverSideLayout); } - - public static class Exporter extends DemoExporter { // hidden-source-line + public static class Exporter + extends DemoExporter { // hidden-source-line } // hidden-source-line }