About TextField
The TextField component is used to receive an input of or output a single-line string. It is similar to the Edit component, but reflects Material Design elements and allows you to designate the input format by setting the inputtype or pattern property values and validate the input value.
The TextField component is designed to represent only a single line of string, so it doesn't wrap the text. If you need to enter multiple lines or paragraphs, use the MultiLineTextField component.
Usage examples
The Text Fields component in Material Design efficiently exposes label information in environments where the page size is limited, such as mobile devices, and provides immediate feedback on the values entered by the user.
For more information about the Text Fields component in Material Design, see the links below.
Using TextField
To use the TextField component, you need to add it to TypeDefinition.
1
In the Project Explorer, double-click [TypeDefinition > Objects].
2
In Modules, expand MobileComp.json item.
3
Click the [+] icon next to the nexacro.TextField entry to add the TextField component to the Objects list.
Displaying Validity as an Icon Based on Input Values
The TextField component can specify a basic input value type with the inputtype property. If an input value is invalid, a message can be displayed at the bottom of the input window or an icon may be displayed on the right side of the input window.
Example
Checks if the input is in the form of an email address and if it is invalid, displays a message at the bottom and an icon on the right side of the input window
sample_edit_01_01
Core features used in the example
- invalidtext
Checks if the input is valid and if not, displays the string set as the invalidtext property value at the bottom of the input window
- usetrailingbutton
Set whether to display an icon to the right of the input bar. The icon image can be set in Style, and different icons can be displayed based on whether the input is valid or invalid.
How to implement an example
1
Place a TextField component on the page.
2
In the Properties pane, change the value of the inputtype property to "email."
3
In the Properties pane, change the value of the usetrailingbutton property to true.
4
In the Properties pane, enter the value of the invalidtext property.
5
Open the xcss file and add the code as shown below.
Make sure the icon is included in ImageResource.
Use the image named like50.png as the trailingbutton when the TextField component's userstatus is valid and the image named angry50.png as the trailingbutton when the userstatus is invalid.
.TextField.sample_textfield_01 .box .trailingbutton[userstatus=valid]
{
background : transparent url('imagerc::like50.png') no-repeat center center;
}
.TextField.sample_textfield_01 .box .trailingbutton[userstatus=invalid]
{
background : transparent URL('imagerc::angry50.png') no-repeat center center;
}6
Set the value of the cssclass property of the TextField component to "sample_textfield_01."
7
Run QuickView (Ctrl + F6) to see if the icon changed before and after the email address format (i.e., includes the "@" character) was included in the value entered in the TextField component.
Does the component size change depending on the label position?
The TextField component allows you to set and display a label within the component. It will look like the component size is different depending on where the label is displayed, but this is not due to a change in the component size, but rather a change in the size and placement of the editing area within the component based on the property value settings.
Example
Starting from the left side of the page, the labelposition property value has been set to "overlap," "outside," and "inside." For the first line, the labelfloatingfixed property has been set to false, so the label is displayed within the editing area when there is no focus, and then moves to the position specified by the labelposition property when the focus is moved or a value is entered.
sample_edit_01_01
Core features used in the example
- labelfloatingfixed
This property is for setting how the label will be displayed based on the state of the component. You can set the font size, etc. of the label based on its floating state.
- labelposition
This property is for setting where to display the label. If the value of the labelfloatingfixed property is false, the label will be displayed in the editing area and then move to the specified position when it reaches a certain state.
How to implement an example
1
Place three TextField components of the same size on the page.
2
Set the labeltext property value to "TEST" and the labelposition property values of the second and third components to "outside" and "inside."
Notice that the size of the components hasn't changed, but the size of the edit area has.
3
Copy the three TextField components and paste them to the bottom. Then, change the value of the labelfloatingfixed property to true.
You can see that the size of the editing area changes as the area occupied by the label changes depending on the label position.
4
Open the xcss file and add the code as shown below.
Change the font size and color when the label is floating (appearing at the position set by the labelposition property).
.TextField.sample_textfield_02 .label[userstatus=floating]
{
font : 10px/normal "Arial";
color : red;
}5
Set the cssclass property value of the top three TextField components to "sample_textfield_02", the usehelpertext property value to true, and the helpertext property value to the desired text.
6
Run QuickView (Ctrl + F6) to see how the position and font of the label changes when the top three components are in focus.
Displaying the components in the same size regardless of label position
If there is only one component, it does not matter if the component size is automatically adjusted according to the label position and font size, but if it is displayed together with other components, it is not easy to align the components. So we added contentheight, headerheight, and footerheight properties that allow you to specify a fixed size of the component.
The contentheight, headerheight, and footerheight properties are supported from version 24.0.0.200.
Example
The sizes of the label display area, text input area, and help text display area are fixed regardless of the value of the labelposition property.
sample_edit_01_01
Core features used in the example
- contentheight, headerheight, footerheight
Set the height of each area within the component. Refer to the image below.
How to implement an example
In this example, only the property values were edited additionally in the code written in Does the component size change depending on the label position?
1
Select all components.
2
Enter “height” in the properties window.
Only properties containing "height" are displayed.
3
Change the contentheight, headerheight, and footerheight property values as follows.
contentheight: 40
headerheight: 20
footerheight: 20
The height property value may be changed according to the contentheight, headerheight, and footerheight property values.
4
Run QuickView (Ctrl + F6) and check that it is displayed at the same size regardless of the labelposition property value.