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:

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:

1. Build page with labels, textfields and grid
2. For each textfield, please make sure that you populate the Tab Index
3. 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()