The WRTKit supports two controls for text entry: TextField for a single line of text and TextArea for multiple lines of text. The API for both controls is identical, except for the constructor. The TextField can be created in masked mode, which is useful for entry of text that should not be displayed (e.g. passwords). For every character that is typed in masked mode, an asterisk is shown instead in the text field. While a TextArea control can hold an unlimited number of lines of text, its height (as number of rows to display without scrolling) is specified when it is constructed.
TextField and TextArea controls are created and added to views like any other controls in the WRTKit. The code assumes that a view has already been created and that a variable called exampleView refers to it.
// create textfield var nameField = new TextField("field1", "Enter your name"); exampleView.addControl(nameField);
"field1" is a unique identifier for the control and "Enter your name" is the control caption. An optional third argument to the constructor can be used to specify the text to display in the control, however the text can also be set at any time later on using the setText() method as follows:
// set the text in the textfield nameField.setText("John Smith");
The current text in a text entry control can be retrieved using the getText() method:
// get the current text from the textfield var text = nameField.getText();
Text entry controls fire "TextChanged" events when a user edits the text in a control. These events can be handled using by registering an event listener to the control. The code below shows what a typical callback function would look like:
// Callback function for text changed events. function nameChanged(event) { // implement what happens when the text changed here }
Registering the event listener function is done as follows, for example right after the control was created:
// register event listener nameField.addEventListener("TextChanged", nameChanged);