Textbox Control Guide on Native CrossPlatform Swift Mobile Apps
Tags: mobile, swift, ios, android
Published: 2022-10-18 14:35:49

The Textbox control's fundamental concept is to accept user input. By default, it writes on its textfield the word **"Enter"** and also takes a single line of text. However, you can make it accept multiple texts too. 

A Textbox in [SCADE](https://www.scade.io/download/) collects inputs from the keyboard into an app. We can use Textbox Control in many mobile apps to build forms, send messages, create search experiences, and many more. Use it as an input element.

The Textbox control in SCADE has a lot of properties and a few methods that we can use to configure it to the taste of our mobile app project - we'll go over a number of them in this tutorial.

## Some Key Textbox Control's Properties
1. `Name`: The name of a given Textbox control.
2. `Text`: a default text value shown by the textfield.
3. `Placeholder`: It's used for displaying the hint text inside the textfield.
4. `Secure`: makes use of iOS and Android masking characters to hide texts.
5. `Accessability`: accepts texts to help impaired.
6. `Tab Index`: order of the textfields.
7. `Keyboard`: It has two attributes (`OnTop` and `Resize`) that you can use to configure how the keyboard is displayed.
8. `Keyboard type`: it provides an option to have the keyboard set numerically or alphabetically. Note that you can only do this using the `keyboardType` property (the page builder currently has no support for this).

## Some Key Textbox Control's Properties
1. `onEditFinished`: thanks to this method, you can capture when a user presses return or the tab key or leave the control to show that they are done editing a text.
2. `onTextChanged`: you can simply use this to listen to the changes made to the value of a textfield.
3. `hideKeyboard`: it simply does the work of hiding the keyboard for us via code.

**Note:** Both the `onEditFinished` and `onTextChanged` methods have two important properties known as `newValue` and `oldValue` for listening and capturing a textfield value.

## Implementation
In this tutorial, we are going to learn how to use the textbox control by creating two textboxes that require users to enter their names and unique password.

## Setting an Initial Text for the Textboxes

After adding textboxes to your page builder (via the `Widget Palette`), click on any of them to have access to the textbox control properties. The `Text` attribute, found at the top-right side of your page builder, is used to set a default value for textboxes. A textbox control displays these initial text values first whenever an app is launched.

**See the screenshot below as a guide:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3u8phogr31uxr69y6fm.jpeg)

Also, depending on the `layout container` you decided to work with, you can use a layout container's properties to configure each of your textbox to the size and position you want them displayed on your mobile page.

For instance, we built this tutorial on an **Autolayout container** and use its constraints property to set the two textboxes (named `nameTextbox` and `passwordTextbox`) horizontally centered and give them the same height and width. It also allows us to set the top-constraint of the `nameTextbox` and that of the `passwordTextbox` to just 40-points and 30-points below the `NavBar` and `nameTextbox` respectively:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gixoktxrzsaxmtkxws1a.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d402fo715zafgi2y4heo.png)

**Output on iOS:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cq6jcbctl2shedvo75t6.png)

**Output on Android:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5vipymy97o5cybjapcyw.png)

## Creating a Multiline Textbox 

Textbox control has a **multiline** property that allows users to input text over multiple lines. You can easily activate this feature on the textbox(es) of your mobile app project by checking the `Multiline` attribute just underneath the `Text` property of the Textbox control you are working on in the page builder of your **SCADE IDE**:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mo0hdwdspjqavu403hs9.jpeg)

## Adding Placeholder on Textfield in SCADE 

Placeholders are used to provide users with a notion of the input values that the textfield will take. In other words, the `Placeholder` property may offer a hint to users of the input that is expected of them in a Textbox control. The hint text disappears when users click inside the textbox and start inputting texts. The default color is grey, however, you may change it through the `color` element of the `Text` Property:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zx226616jh6wmav4pbq3.jpeg)

**Output on iOS:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iz9pfujy9b3mgek55odr.gif)

**Output on Android:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0a6qgqcnfidlhe926fy0.gif)

## How to retrieve the value of a TextField?

SCADE has two main methods you can use to retrieve users' text value: 

1. **onEditFinished method:** The `onEditFinished` method is of type `SCDWidgetsEditFinishEventHandler` and it basically listens when a user clicks on the `return` key or `tab` key on the keyboard. Another way the `onEditFinished` method can be called in SCADE is when users leave a Textbox control completely after inputting or editing a text. 

    **Below is the sample code:**
    ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xv1zdzqkbt51hwcrowi.png)

    For instance, in the screenshot below, the `onEditFinshed` method prints to the **IDE terminal** the textfield value of the `nameTextbox` each time either the `return` key or `tab` key is pressed:

    ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9y497coqyy5bkonhx8m4.jpeg)

2. **onTextChanged method:** This second method is of type `SCDWidgetsTextChangeEventHandler` and it works in a completely different way compared to the aforementioned. The `onTextChanged` method captures a changed textfield value when called upon.

    **Below is the sample code:**
    ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vjn2c8vgqu5vuahk1s0p.png)

    For example, as shown in the illustration below, the `onTextChanged` method prints to the **IDE terminal** each time the textfield value of the `nameTextbox` changes:

    ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jdypc9w5ganagro15izz.jpeg)

## Changing from an Alphabetical to a Numeric Keyboard

SCADE Textbox control has a `keyboardType` property that you can use to change the default keyboard type of a textfield from `alphabetical` to `numeric` in your app project. For example, we switched the keyboard type of `passwordTextbox` in our project sample from accepting `alphabetical` input to `numeric`.

**Below is the sample code:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zrz70ao4grvmszr0tweg.png)

**Output on iOS:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vnrv5emkzzzlfzr1zds8.gif)

**Output on Android:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5mf73pfktvc31qo25h8.gif)

## Masking Textfield Values inside a Textbox Control in SCADE

Another important SCADE Textbox control attribute is the `Secure` property. Its function is to obscure textfield values from being easily readable or understandable and it's commonly used on a textfield that contains a password.  

We activated this feature on the `passwordTextbox` of our sample project by checking on the `Secure box` beneath the `Placeholder` property of the Textbox control in the page builder of SCADE IDE:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ve3wwv70qk13v6o5apc3.jpeg)

**Output on iOS:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jf8fzxkuwe3qbsoix0dy.gif)

**Output on Android:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m5d2mjhvr1mn3yu912oq.gif)

## Conclusion
This tutorial has taught us how to use a Textbox control in a Cross-Platform Swift mobile app that requires user input. Most importantly, we covered all the important properties and methods of SCADE Textbox control that can make the aforementioned possible.

The source code for this tutorial is available on GitHub: [Textbox-Control](https://github.com/Cdf-creator/Textbox-Control).