TextField
UITextfield for Android and iOS
Introduction
This chapter describes how to use the textbox control and the keyboard across both the Android and iOS platform to enter text. The basic functionality we provide includes
- showing/hiding the keyboard automatically (and programmatically via code)
- display of the keyboard in overlap mode, where the keyboard panel sits on top of the UI
- dispay of the keyboard in resize mode, where the UI adjust and resizes when the keyboard is displayed
- you can listen to size changes when the keyboard changes its size
- you can listen to text changes when typing text into the keyboard
- process the event when the send/return key is pressed
- change alphabetic/number type of keyboard
Overview
You can manipulate most the textbox features using the page editor panel:

Attribute | Description |
---|---|
Name | The name of the control. SCADE adds a variable with the same name to the page class. |
Accessability | The text to help impaired |
Text | The initial text displayed by the text field |
Placeholder | The placeholder text displayed by the text field |
Keyboard | How the keyboard is displayed. Options are OnTop or Resize |
Tab Index | Sequence of the text fields |
Secure | Text is masked using iOS and Android masking characters |
Keyboard type | Can be set to alphabetic or number. Currently not possible through page builder. Please use attribute. |
Textfield Events
We can capture the following events
- onEditFinished - when the user pressed return or the tab key or left the control
- onTextChanged - when the value of the text field changed
The code is beautiful and effective
import ScadeKit
class MainPageAdapter: SCDLatticePageAdapter {
// page adapter initialization
override func load(_ path: String) {
super.load(path)
// define the logic onEditFinish
self.tbName.onEditFinish.append(SCDWidgetsEditFinishEventHandler{
ev in print("Finished Editing. New value:" + ev!.newValue)
})
// define the logic onTextChange
self.tbName.onTextChange.append(SCDWidgetsTextChangeEventHandler{
ev in print("Value has changed to : " + ev!.newValue )
})
}
}

Building app that is using resizing / shifting
Many apps require that controls shift and/or resize in case the keyboard is displayed. For instance, imagine a form that you fill out and the textfield to fill out is overlaid by the keyboard control. In that case, you want to shift up the control to make it possible for the user to see the textfield the user is entering the text in:

Build the entry form
Build a simple entry form. Include a number of labels and textfield within a grid gridForm. When the text entry comes active, i.e. when the user clicks on one of the textfields that would be covered by the keyboard, shift the grid upwards:
- Build page with labels, textfields and grid
- For each textfield, please make sure that you populate the Tab Index
- Set horizontal scrollable to true

You now got an entry form that adjusts to the keyboard, depending on whether its expanded or hidden:
Switch to numeric keyboard
By default the textField is displayed with an alphabetical keyboard type. But we can change the type of the keyboard by setting the keyboardType attribute:
class MainPageAdapter: SCDLatticePageAdapter {
// page adapter initialization
override func load(_ path: String) {
super.load(path)
let textbox1 = self.page!.getWidgetByName("textbox1") as! SCDWidgetsTextbox
textbox1.keyboardType = .number
}
}
This results in
Hide the keyboard
The keyboard is displayed automatically when a user enters text in a textbox. Sometimes there is a need to use code to hide the keyboard. This is done using the hideKeyboard method
// hide the keyboard on Android and iOS
SCDRuntime.getSystem().hideKeyboard()
Updated about 2 years ago