--- title: TextField order: 9 layout: page --- [[components.textfield]] = [classname]#TextField# ifdef::web[] [.sampler] image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/text-input/text-field"] 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. The following example creates a simple text field: [source, java] ---- // Create a text field 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]] .[classname]#TextField# Example 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()# 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 tf.addValueChangeListener(new Property.ValueChangeListener() { public void valueChange(ValueChangeEvent event) { // Assuming that the value type is a String String value = (String) event.getProperty().getValue(); // Do something with the value Notification.show("Value is: " + value); } }); // Fire value changes immediately when the field loses focus tf.setImmediate(true); ---- See the http://demo.vaadin.com/book-examples-vaadin7/book#component.textfield.inputhandling[on-line example, window="_blank"]. As with other event listeners, you can use lambda expression with one parameter to handle the events in Java 8. Much of the API of [classname]#TextField# is defined in [classname]#AbstractTextField#, which allows different kinds of text input fields, such as rich text editors, which do not share all the features of the single-line text fields. [[figure.components.textfield.api]] .Text Field Class Relationships image::img/textfield-diagram-hi.png[width=40%, scaledwidth=70%] [[components.textfield.databinding]] == Data Binding [classname]#TextField# edits [classname]#String# values, but you can bind it to any property type that has a proper converter, as described in <>. [source, java] ---- // Have an initial data model. As Double is unmodificable and // 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 property = new ObjectProperty(trouble); // Create a text field bound to it // (StringToDoubleConverter is used automatically) TextField tf = new TextField("The Answer", property); tf.setImmediate(true); // Show that the value is really written back to the // data source when edited by user. Label feedback = new Label(property); feedback.setCaption("The Value"); ---- See the http://demo.vaadin.com/book-examples-vaadin7/book#component.textfield.databinding[on-line example, window="_blank"]. When you put a [classname]#Table# in editable mode or create fields with a [classname]#FieldGroup#, the [classname]#DefaultFieldFactory# creates a [classname]#TextField# for almost every property type by default. You often need to make a custom factory to customize the creation and to set the field tooltip, validation, formatting, and so on. See <> for more details on data binding, field factories for [classname]#Table# in <>, and <> regarding forms. [[components.textfield.length]] == String Length The [methodname]#setMaxLength()# method sets the maximum length of the input string so that the browser prevents the user from entering a longer one. As a security feature, the input value is automatically truncated on the server-side, as the maximum length setting could be bypassed on the client-side. The maximum 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, 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 setting a value for it or bind the field value to a data source that allows null values. In such case, you might want to

/**
 * Pretty print a time in milliseconds.
 */
export function prettyMs( time ) {
	const minutes = Math.floor( time / 60000 );
	const seconds = Math.floor( time / 1000 );
	const ms = Math.floor( time % 1000 );

	let prettyTime = `${ ms }ms`;
	if ( seconds > 0 ) {
		prettyTime = `${ seconds }s ${ prettyTime }`;
	}
	if ( minutes > 0 ) {
		prettyTime = `${ minutes }m ${ prettyTime }`;
	}

	return prettyTime;
}