The Dali::Toolkit::TextField class is a control providing a single-line editable text field.

Figure: TextField

In this tutorial, the following subjects are covered:

• TextField events
• Creating a TextField
• Aligning Text
• TextField Properties

TextField events

The following table lists the basic signals provided by the Dali::Toolkit::TextField class.

Table: Dali::Toolkit::TextField input signals

Creating a TextField

Before text has been entered, the Dali::Toolkit::TextField class can display a placeholder text. An alternative placeholder can be displayed when the TextField has keyboard focus. For example, a TextField used to enter a username can initially show the text Unknown Name, and the text Enter Name. when the cursor is visible.

TextField field = TextField::New();
Property::Map propertyMap;
propertyMap[ Text::PlaceHolder::Property::TEXT ] = "Unnamed Name";
propertyMap[ Text::PlaceHolder::Property::TEXT_FOCUSED ] = "Enter Name.";
field.SetProperty( TextField::Property::PLACEHOLDER, propertyMap );
Stage::GetCurrent().Add( field );

When the TextField is tapped, it automatically gets the keyboard focus. Key events enter the text, and the placeholder text is removed. After text has been entered, it can be retrieved from the TEXT property.

Property::Value fieldText = field.GetProperty( TextField::Property::TEXT );
std::string fieldTextString = fieldText.Get< std::string >();

Aligning Text

The Dali::Toolkit::TextField class displays a single-line of text, which scrolls if there is not enough space for the text displayed. If there is enough space, the text can be aligned horizontally to the beginning, end, or center of the available area:

// "CENTER" or "END"
field.SetProperty( TextField::Property::HORIZONTAL_ALIGNMENT, "BEGIN" );

TextField Properties

Using Decorations

For text decorations, the following TextField class properties are available. All properties are writable and none are animatable.

Table: TextField properties

To change the color of the text, use the TEXT_COLOR property. An alternative color can be used for placeholder text by setting the PLACEHOLDER_TEXT_COLOR property. Unlike the Actor::COLOR property, these properties do not affect child actors added to the TextField.

field.SetProperty( TextField::Property::TEXT_COLOR, Color::CYAN );
field.SetProperty( TextField::Property::PLACEHOLDER_TEXT_COLOR, Color::BLACK );