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 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.
Name: The name of a given Textbox control.
Text: a default text value shown by the textfield.
Placeholder: It's used for displaying the hint text inside the textfield.
Secure: makes use of iOS and Android masking characters to hide texts.
Accessability: accepts texts to help impaired.
Tab Index: order of the textfields.
Keyboard: It has two attributes (
Resize) that you can use to configure how the keyboard is displayed.
Keyboard type: it provides an option to have the keyboard set numerically or alphabetically. Note that you can only do this using the
keyboardTypeproperty (the page builder currently has no support for this).
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.
onTextChanged: you can simply use this to listen to the changes made to the value of a textfield.
hideKeyboard: it simply does the work of hiding the keyboard for us via code.
Note: Both the
onTextChanged methods have two important properties known as
oldValue for listening and capturing a textfield value.
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.
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.
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
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
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:
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
SCADE has two main methods you can use to retrieve users' text value:
onEditFinished method: The
onEditFinishedmethod is of type
SCDWidgetsEditFinishEventHandlerand it basically listens when a user clicks on the
tabkey on the keyboard. Another way the
onEditFinishedmethod can be called in SCADE is when users leave a Textbox control completely after inputting or editing a text.
For instance, in the screenshot below, the
onEditFinshedmethod prints to the IDE terminal the textfield value of the
nameTextboxeach time either the
tabkey is pressed:
onTextChanged method: This second method is of type
SCDWidgetsTextChangeEventHandlerand it works in a completely different way compared to the aforementioned. The
onTextChangedmethod captures a changed textfield value when called upon.
For example, as shown in the illustration below, the
onTextChangedmethod prints to the IDE terminal each time the textfield value of the
SCADE Textbox control has a
keyboardType property that you can use to change the default keyboard type of a textfield from
numeric in your app project. For example, we switched the keyboard type of
passwordTextbox in our project sample from accepting
alphabetical input to
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.
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.