- Overview of edit control
- Create an "Edit" control
- Main characteristics of edit control
- Type of an edit control
- Types and masks
- Displaying a hint text in an Edit control
- Edit control style
- Customizing the alphanumeric keypad
- Converting an Edit control to a Static control
The edit control allows the user to type information. The edit control can also be used to view information.
Create an "Edit" control
To create an "Edit" control:
- On the "Creation" tab, in the "Usual controls" group, click .
- Click where the control will be created in the window or page. The control appears in the editor.
Remark: You also have the ability to create an edit control from a list of preset controls by expanding "Edit". The list of available controls is displayed with the project skin template. Simply click the control you want to create in the editor.
To view the control characteristics, select "Description" in the context menu.
: You also have the ability to create an edit control in a report. For more details, see Input in the reports
Main characteristics of edit control
Type of an edit control
The format of an edit control depends on the type of information displayed or entered. The following types of edit controls can be created:
- Text to display or enter a character string (name, address, etc.).
- Multiline text to display or enter several lines separated by a "Carriage Return".
- Password: when typing information, all characters will be replaced by stars on the screen.
- Numeric to display or enter a numeric value (weight, etc.). The "+++" characters are displayed if the control is not large enough to display the entire number.
- Currency to display or enter monetary values.
- Currency + Euro to manage prices for example
- Date to display or enter dates.
- Time to enter or display times.
- Duration to enter or display durations.
- Text tokens to manage an input with tokens.
Types and masks
- Input mask: Several input masks can be used for each type of edit control.
These input masks are multilingual: different input masks can be selected according to the runtime language of the project. For more details, see Multilingual feature in the controls.
These input masks can be modified programmatically with the InputMask property.
The keyboard displayed when entering data in the control automatically adapts to the selected input mask. For example, the numeric keyboard will be automatically displayed to enter values in a control using a numeric input mask.
- Display mask: You can also define display masks for some types of controls (Currency, Currency + Euro, Date, Time and Duration). These display masks are used to define the characteristics of the control when it is not in edit.
For example, a Date control can have:
- the input mask: "MM/DD/YYYY".
- the display mask: "DDDD DD MMMM YYYY" (long date format).
Display masks can be multilingual and can be modified through programming with the DisplayMask
Displaying a hint text in an Edit control
The hint text is used to display a help text in the empty edit control. This help text is automatically erased as soon as the user types the first character in the control.
This hint text is available for:
- the text edit controls.
- the Numeric, Currency and Currency + Euro edit controls.
To show the hint text in Numeric, Currency or Currency + Euro edit controls, the option "Blank if zero" must be checked ("Details" tab of the control description).
You can also display the lower bound and the upper bound of the numeric edit control:
- in the hint text ("Display the bounds in the hint text" in the "Details" tab of the control description).
- in the control tooltip ("Display the bounds in the tooltip" in the "Details" tab of the control description).
The help text can be typed:
- in the Edit control description window ("Help" tab in WINDEV/WINDEV Mobile and "Content" tab in WEBDEV).
- programmatically with the Hint property.
The style of the hint text displayed in the control can be configured in the "Style" tab. By default, it corresponds to the style of the input area, in gray and italic. To modify it, simply select "Hint text" and check "Customize the style of the hint text".
The HintTextColor property is used to get and change the color of the information text programmatically.
To view the characteristics of the control, select "Description" in the context menu.
Edit control style
The "Style" tab allows you to customize the appearance of all the elements in the Edit control. You can apply styles to different elements:
- The control caption: You can define the text font, position, color, etc.
- The outside border.
- The text in the input area.
- The input area: For example, you can define the background color, border color, ...
New in version 27
The "Margins" button allows you to set the margins between the text and the border of of the input area.
- The hint text.
- The tokens (if any).
- Invalid or required input indicators.
Customizing the alphanumeric keypad
In Android and iOS applications, an on-screen keyboard appears automatically when a text input control receives the focus. This keyboard allows the user to enter the desired text.
This keyboard includes a button (bottom right) that can be customized:
To configure this button:
- Go to the "Details" tab of the Edit control description window.
- In the "Keyboard button" option, select the desired type of button. Depending on the selected type, the system will display the corresponding button in the current language on the device.
Remark: The "Custom" button can only be added in Android.
The event associated with this button can be entered in the code editor. It corresponds to the optional event "Validation via keyboard". For more details, see Events associated with the Edit control
Converting an Edit control to a Static control
WINDEV and WINDEV Mobile allow you to automatically convert an Edit control to several Static controls:
- Select the Edit control to be converted.
- On the "Modification" tab, in the "Transformations" group, expand "Refactoring and swapping" and select "Edit control to Static".
A static control is automatically created for the caption of the edit control and also for the input area.
Unit examples (WINDEV): The edit control
Unit examples (WINDEV): The special characters
Unit examples (WINDEV): The voice recognition functions
Unit examples (WINDEV): Advanced input mask
Training (WINDEV): WD Search Control
Complete examples (WEBDEV): WW_Rewali
This page is also available for…
Click [Add] to post a comment