diff options
| -rw-r--r-- | documentation/components/components-textfield.asciidoc | 31 |
1 files changed, 5 insertions, 26 deletions
diff --git a/documentation/components/components-textfield.asciidoc b/documentation/components/components-textfield.asciidoc index e59b38bbf7..016ced3c58 100644 --- a/documentation/components/components-textfield.asciidoc +++ b/documentation/components/components-textfield.asciidoc @@ -9,14 +9,12 @@ layout: page ((("[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. The following example creates a simple text field: - [source, java] ---- // Create a text field @@ -38,7 +36,6 @@ in most other fields. The value can be acquired with [methodname]#getValue()# directly from the text field, as is done in the example below, or from the property reference of the event. - [source, java] ---- // Handle changes in the value @@ -67,7 +64,7 @@ single-line text fields. [[figure.components.textfield.api]] .Text Field Class Relationships -image::img/textfield-diagram-hi.png[] +image::img/textfield-diagram-hi.png[width=50%] [[components.textfield.databinding]] == Data Binding @@ -77,7 +74,6 @@ any property type that has a proper converter, as described in <<dummy/../../../framework/datamodel/datamodel-properties#datamodel.properties.converter,"Converting Between Property Type and Representation">>. - [source, java] ---- // Have an initial data model. As Double is unmodificable and @@ -116,7 +112,6 @@ the Values in a Table">>, and <<dummy/../../../framework/datamodel/datamodel-itembinding#datamodel.itembinding,"Creating Forms by Binding Fields to Items">> regarding forms. -Bean Binding [[components.textfield.length]] == String Length @@ -129,21 +124,15 @@ length property is defined at [classname]#AbstractTextField# level. Notice that the maximum length setting does not affect the width of the field. You can set the width with [methodname]#setWidth()#, as with other components. Using __em__ widths is recommended to better approximate the proper width in -relation to the size of the used font. There is no standard way in HTML for -setting the width exactly to a number of letters (in a monospaced font). You can -trick your way around this restriction by putting the text field in an -undefined-width [classname]#VerticalLayout# together with an undefined-width -[classname]#Label# that contains a sample text, and setting the width of the -text field as 100%. The layout will get its width from the label, and the text -field will use that. - -Fitting TextField width to fixed input length +relation to the size of the used font, but the __em__ width is not exactly the +width of a letter and varies by browser and operating system. There is no standard +way in HTML for setting the width exactly to a number of letters (in a monospaced font). + [[components.textfield.nullvalues]] == Handling Null Values ((("Null representation", id="term.components.textfield.nullvalues", range="startofrange"))) - ((("[methodname]#setNullRepresentation()#"))) As with any field, the value of a [classname]#TextField# can be set as [parameter]#null#. This occurs most commonly when you create a new field without @@ -164,7 +153,6 @@ representation string sets the value as the literal value of the string, not null. This default assumption is a safeguard for data sources that may not allow null values. - [source, java] ---- // Have a property with null value @@ -196,7 +184,6 @@ image::img/textfield-nullrepresentation.png[] ((("[classname]#Text change events#", id="term.components.textfield.textchangeevents", range="startofrange"))) - Often you want to receive a change event immediately when the text field value changes. The __immediate__ mode is not literally immediate, as the changes are transmitted only after the field loses focus. In the other extreme, using @@ -210,7 +197,6 @@ Text change events are received with a [classname]#TextChangeListener#, as is done in the following example that demonstrates how to create a text length counter: - [source, java] ---- // Text field with maximum length @@ -278,14 +264,11 @@ 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. - - (((range="endofrange", startref="term.components.textfield.textchangeevents"))) [[components.textfield.css]] == CSS Style Rules - [source, css] ---- .v-textfield { } @@ -296,7 +279,6 @@ only of an element with the [literal]#++v-textfield++# style. For example, the following custom style uses dashed border: - [source, css] ---- .v-textfield-dashing { @@ -317,7 +299,4 @@ that contain a text input field, even if the text input is not an actual [classname]#TextField#. This ensures that the style of different text input boxes is similar. - (((range="endofrange", startref="term.components.textfield"))) - - |