summaryrefslogtreecommitdiffstats
path: root/documentation/components/components-textfield.asciidoc
diff options
context:
space:
mode:
authorMarko Gronroos <magi@vaadin.com>2016-05-20 14:44:42 +0300
committerMarko Grönroos <magi@vaadin.com>2016-06-30 11:13:20 +0000
commit93767cf76b2fb14c65b758066c67fc8b48cc2eeb (patch)
tree958ddb8c45271e9a505280ef750ae07ebeda170f /documentation/components/components-textfield.asciidoc
parentedad7348bb8eba807225bfa72d4b0a4342426c71 (diff)
downloadvaadin-framework-93767cf76b2fb14c65b758066c67fc8b48cc2eeb.tar.gz
vaadin-framework-93767cf76b2fb14c65b758066c67fc8b48cc2eeb.zip
Scaled images for print edition and fixed errors up to the beginning of layouts chapter (#19835). Also major revision of Tree, CustomField, and layouts overview.
Change-Id: I19f5e9511b83f953ce4707f324d81c2821ebb69d
Diffstat (limited to 'documentation/components/components-textfield.asciidoc')
-rw-r--r--documentation/components/components-textfield.asciidoc22
1 files changed, 10 insertions, 12 deletions
diff --git a/documentation/components/components-textfield.asciidoc b/documentation/components/components-textfield.asciidoc
index 296eefb71e..8cb0629232 100644
--- a/documentation/components/components-textfield.asciidoc
+++ b/documentation/components/components-textfield.asciidoc
@@ -14,9 +14,8 @@ 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 using keyboard.
+[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.
The following example creates a simple text field:
@@ -24,7 +23,7 @@ The following example creates a simple text field:
----
// Create a text field
TextField tf = new TextField("A Field");
-
+
// Put some initial content in it
tf.setValue("Stuff in the field");
----
@@ -34,7 +33,7 @@ The result is shown in <<figure.components.textfield.basic>>.
[[figure.components.textfield.basic]]
.[classname]#TextField# Example
-image::img/textfield-example.png[]
+image::img/textfield-example.png[width=40%, scaledwidth=50%]
Value changes are handled with a [classname]#Property.ValueChangeListener#, as
in most other fields. The value can be acquired with [methodname]#getValue()#
@@ -69,7 +68,7 @@ single-line text fields.
[[figure.components.textfield.api]]
.Text Field Class Relationships
-image::img/textfield-diagram-hi.png[width=50%]
+image::img/textfield-diagram-hi.png[width=40%, scaledwidth=70%]
[[components.textfield.databinding]]
== Data Binding
@@ -85,11 +84,11 @@ Between Property Type and Representation">>.
// doesn't support assignment from String, the object is
// reconstructed in the wrapper when the value is changed.
Double trouble = 42.0;
-
+
// Wrap it in a property data source
final ObjectProperty<Double> property =
new ObjectProperty<Double>(trouble);
-
+
// Create a text field bound to it
// (StringToDoubleConverter is used automatically)
TextField tf = new TextField("The Answer", property);
@@ -146,8 +145,7 @@ values. In such case, you might want to show a special value that stands for the
null value. You can set the null representation with the
[methodname]#setNullRepresentation()# method. Most typically, you use an empty
string for the null representation, unless you want to differentiate from a
-string that is explicitly empty. The default null representation is "
-[literal]#++null++#", which essentially warns that you may have forgotten to
+string that is explicitly empty. The default null representation is "[literal]#null#", which essentially warns that you may have forgotten to
initialize your data objects properly.
((("[methodname]#setNullSettingAllowed()#")))
@@ -180,7 +178,7 @@ interface is shown in <<figure.components.textfield.nullvalues>>.
[[figure.components.textfield.nullvalues]]
.Null Value Representation
-image::img/textfield-nullrepresentation.png[]
+image::img/textfield-nullrepresentation.png[width=35%, scaledwidth=50%]
(((range="endofrange", startref="term.components.textfield.nullvalues")))
@@ -231,7 +229,7 @@ The result is shown in <<figure.components.textfield.textchangeevents>>.
[[figure.components.textfield.textchangeevents]]
.Text Change Events
-image::img/textfield-textchangeevents.png[]
+image::img/textfield-textchangeevents.png[width=35%, scaledwidth=50%]
The __text change event mode__ defines how quickly the changes are transmitted
to the server and cause a server-side event. Lazier change events allow sending