diff options
author | Pekka Hyvönen <pekka@vaadin.com> | 2017-01-05 18:09:32 +0200 |
---|---|---|
committer | Ilia Motornyi <elmot@vaadin.com> | 2017-01-05 18:09:32 +0200 |
commit | 4130f1d87d6ab387a363a4e44e8746eddc049d13 (patch) | |
tree | 0a6cb8b997f95c710dbac269bfba3615eb74df6a /documentation/components/components-textfield.asciidoc | |
parent | 11f10b827e92ed7c07d6584a181f7f1374e8109b (diff) | |
download | vaadin-framework-4130f1d87d6ab387a363a4e44e8746eddc049d13.tar.gz vaadin-framework-4130f1d87d6ab387a363a4e44e8746eddc049d13.zip |
Update component docs for 8 except Grid
Diffstat (limited to 'documentation/components/components-textfield.asciidoc')
-rw-r--r-- | documentation/components/components-textfield.asciidoc | 36 |
1 files changed, 12 insertions, 24 deletions
diff --git a/documentation/components/components-textfield.asciidoc b/documentation/components/components-textfield.asciidoc index b0f00368db..34ec9d05a0 100644 --- a/documentation/components/components-textfield.asciidoc +++ b/documentation/components/components-textfield.asciidoc @@ -15,7 +15,7 @@ endif::web[] ((("[classname]#TextField#", id="term.components.textfield", range="startofrange"))) [classname]#TextField# is one of the most commonly used user interface components. -It is a [classname]#Field# component that allows entering textual values with keyboard. +It is a field that allows entering textual values with keyboard. The following example creates a simple text field: @@ -27,7 +27,6 @@ TextField tf = new TextField("A Field"); // Put some initial content in it tf.setValue("Stuff in the field"); ---- -See the http://demo.vaadin.com/book-examples-vaadin7/book#component.textfield.basic[on-line example, window="_blank"]. The result is shown in <<figure.components.textfield.basic>>. @@ -45,7 +44,6 @@ tf.addValueChangeListener(event -> // Do something with the value Notification.show("Value is: " + event.getValue())); ---- -See the http://demo.vaadin.com/book-examples-vaadin7/book#component.textfield.inputhandling[on-line example, window="_blank"]. [classname]#TextField# edits [classname]#String# values, but you can use [classname]#Binder# to bind it to any property type that has a proper converter, as described in @@ -89,37 +87,31 @@ to the server and cause a server-side event. Lazier change events allow sending larger changes in one event if the user is typing fast, thereby reducing server requests. -((([classname]#TextChangeEventMode#))) +((([classname]#ValueChangeMode#))) You can set the text change event mode of a [classname]#TextField# with -[methodname]#setTextChangeEventMode()#. The allowed modes are defined in -[classname]#TextChangeEventMode# enum and are as follows: +[methodname]#setValueChangeMode()#. The allowed modes are defined in +[classname]#ValueChangeMode# enum and are as follows: -[parameter]#TextChangeEventMode.LAZY#(default):: An event is triggered when there is a pause in editing the text. The length of -the pause can be modified with [methodname]#setInputEventTimeout()#. As with the -[parameter]#TIMEOUT# mode, a text change event is forced before a possible -[classname]#ValueChangeEvent#, even if the user did not keep a pause while -entering the text. +[parameter]#ValueChangeMode.LAZY#(default):: An event is triggered when there is a pause in editing the text. The length of +the pause can be modified with [methodname]#setValueChangeTimeout()#. + This is the default mode. -[parameter]#TextChangeEventMode.TIMEOUT#:: A text change in the user interface causes the event to be communicated to the +[parameter]#ValueChangeMode.TIMEOUT#:: A text change in the user interface causes the event to be communicated to the application after a timeout period. If more changes are made during this period, the event sent to the server-side includes the changes made up to the last change. The length of the timeout can be set with -[methodname]#setInputEventTimeout()#. +[methodname]#setValueChangeTimeout()#. -+ -If a [classname]#ValueChangeEvent# would occur before the timeout period, a -[classname]#TextChangeEvent# is triggered before it, on the condition that the -text content has changed since the previous [classname]#TextChangeEvent#. - -[parameter]#TextChangeEventMode.EAGER#:: An event is triggered immediately for every change in the text content, +[parameter]#ValueChangeMode.EAGER#:: The [classname]#ValueChangeEvent# is triggered immediately for every change in the text content, typically caused by a key press. The requests are separate and are processed sequentially one after another. Change events are nevertheless communicated asynchronously to the server, so further input can be typed while event requests are being processed. +[parameter]#ValueChangeMode.BLUR#:: The [classname]#ValueChangeEvent# is fired, after the field has lost focus. + [source, java] ---- // Text field with maximum length @@ -138,12 +130,10 @@ tf.addValueChangeListener(event -> { counter.setValue(len + " of " + tf.getMaxLength()); }); -tf.setValueChangeMode(ValueChangeMode.onKeyPress()); +tf.setValueChangeMode(ValueChangeMode.EAGER); ---- -See the http://demo.vaadin.com/book-examples-vaadin7/book#component.textfield.textchangeevents.counter[on-line example, window="_blank"]. - The result is shown in <<figure.components.textfield.textchangeevents>>. [[figure.components.textfield.textchangeevents]] @@ -170,10 +160,8 @@ For example, the following custom style uses dashed border: ---- .v-textfield-dashing { border: thin dashed; - background: white; /* Has shading image by default */ } ---- -See the http://demo.vaadin.com/book-examples-vaadin7/book#component.textfield.css[on-line example, window="_blank"]. The result is shown in <<figure.components.textfield.css>>. |