diff --git a/articles/components/email-field/index.adoc b/articles/components/email-field/index.adoc index 35bc62d6d7..ffb6d6638d 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::[] -- +== 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/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/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/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/articles/components/text-field/index.adoc b/articles/components/text-field/index.adoc index 1d3e80a559..a5b3e72ea1 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.] |=== +== 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/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/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/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/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/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/emailfield/EmailFieldValueChangeMode.java b/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java new file mode 100644 index 0000000000..4a91b42606 --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/emailfield/EmailFieldValueChangeMode.java @@ -0,0 +1,45 @@ +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.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 +} 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..f5771953fa --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/numberfield/NumberFieldValueChangeMode.java @@ -0,0 +1,45 @@ +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.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 +} 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..746dc3c23e --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/passwordfield/PasswordFieldValueChangeMode.java @@ -0,0 +1,47 @@ +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..082e2edc34 --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/richtexteditor/RichTextEditorValueChangeMode.java @@ -0,0 +1,44 @@ +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..a1212058cf --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/slider/SliderValueChangeMode.java @@ -0,0 +1,43 @@ +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..9f80f83222 --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/textarea/TextAreaValueChangeMode.java @@ -0,0 +1,45 @@ +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 +} 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..31720744a5 --- /dev/null +++ b/src/main/java/com/vaadin/demo/component/textfield/TextFieldValueChangeMode.java @@ -0,0 +1,46 @@ +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 +}