You are here: Creating an TextBox Using a Constructor: voltmx.ui.TextBox2

TextBox2 Widget

The TextBox widget enables you to get a single-line input from users. This widget can accept input from the users in the form of numbers or text.

Here are some of scenarios where you can use a TextBox widget:

• Getting the username and password on a login screen and the details on a sign-up screen
• Entering purchase details while shopping online
• Searching through a list of data to provide the relevant search results
• Providing details while booking a flight or hotel

Some key features of the TextBox widget are as follows:

Various Input Types: Customize the soft keypad of any device. You can specify whether the soft keypad should be numeric or not, whether it should have cancel, search, done, or next and previous buttons, and much more.

Text Masking: Mask the entered text for security purposes. This feature is useful when you are designing password and payment details page.

Searching through a list: Provide a list of search items, and the TextBox widget can search through the list and generate search results. For instance, while providing the address of a user, you can create a list with all the states of a country. If the user types an alphabet, all the states that start with the alphabet A are displayed.

Restricting Input: Set certain characters that you do not want a user to use as input. This is useful when you want the user to decide a username for your application. If you want the user to not enter certain characters, for example, ‘$#@’. You can restrict the usage of these characters by using a TextBox widget.

Note: In Windows platform, when a FlexForm has multiple TextArea/ TextBox widgets, and none of the widgets are in focus, the focus control of the form moves to the first focussable widget. This will also make the Form scroll up to the first widget.

Widgets are normally added to your application using Volt MX Iris, but can also be added from code. For general information on using widgets in Volt MX Iris, see Designing an Application in the Iris User Guide.

For general information on the TextBox2 widget see the TextBox2 topic in the Volt MX Iris User Guide.

This widget supports drag and drop of text for iOS 11 on iPad.

The TextBox widget capabilities can be broadly categorized into the following:

• Layout
• Data Management
• Animations
• User Input Handling
• UI Appearance
• Enabling RTL
• Miscellaneous
• Configurations Common To All Widgets

Layout

Data Management

Animations

3D Touch

User Input Handling

UI Appearance

Enabling RTL

Miscellaneous

Configurations Common To All Widgets

TextBox2 Widget Basics

You can use the TextBox widget to provide a field where a user can enter input text.
For example, in the “Login” page of an Application, you can place two TextBox widgets for Login Password fields and instruct the users to enter their login credentials in those fields.

Creating an TextBox Using a Constructor: voltmx.ui.TextBox2

var mytextbox = new voltmx.ui.TextBox2 (basicConf, layoutConf, pspConf);

• basicConf is an object with basic properties.
• layoutConf is an object with layout properties.
• pspConf is an object with platform specific properties.

Note: The configuration properties should be passed only in the respective configuration objects otherwise they are ignored.

Example

//Defining the properties for a Textbox with isVisible: true.
var txtBasic = {
    id: "textBox1",
    placeholder: "enter text",
    maxTextLength: 20,
    isVisible: true,
    autoCapitalize: constants.TEXTBOX_AUTO_CAPITALIZE_SENTENCES
};

var txtLayout = {
    padding: [5, 5, 5, 5],
    margin: [5, 5, 5, 5],
    containerWeight: 100,
    hExpand: true,
    widgetAlignment: constants.WIDGET_ALIGN_TOP_LEFT
};

var txtPSP = {
    pasteboardType: constants.TEXTBOX_PASTE_BOARD_TYPE_SYSTEM_LEVEL,
    keyboardActionLabel: constants.TEXTBOX_KEYBOARD_LABEL_GOOGLE
};
//Creating the Textbox.
var textBox1 = new voltmx.ui.TextBox2(txtBasic, txtLayout, txtPSP);

//Reading the autoCapitalize of the Textbox.	
alert("Textbox autoCapitalize ::" + textBox1.autoCapitalize);

For backward compatibility with support for all deprecated properties and behaviors, use the constructor voltmx.ui.TextBox.

var myTextBox = new voltmx.ui.TextBox(basicConf, layoutConf, pspConf)

Changing the Text Size through the Larger Text option in iOS

You can now change the text size of TextBox widget through the Larger Text option from Settings -> General -> Accessibility -> Larger Text in iOS.

To support this feature, you must implement the ‘dynamicTypeList’ dictionary in the voltmx.application.setApplicationBehaviors function as follows:

voltmx.application.setApplicationBehaviors({
    dynamicTypeList: {
        enableChangeTextSizeFromAccessibility: true,
        fontTextStyle: constants.FONT_TEXT_STYLE_BODY
    }
});

Input Parameters

• enableChangeTextSizeFromAccessibility (BOOL): If set to true, you can change the text size through the Larger Text option from Settings -> General -> Accessibility -> Larger Text in iOS. Otherwise, the text size will not be changed.

• fontTextStyle: This is the font style applied on the TextBox widget. If you pass only the enableChangeTextSizeFromAccessibility key-value pair in the dictionary and don’t send the fontTextStyle key-value pair, the default value for fontTextStyle will be constants.FONT_TEXT_STYLE_BODY. The values for fontTextStyle are as follows:

  • constants.FONT_TEXT_STYLE_BODY

  • constants.FONT_TEXT_STYLE_HEADLINE

  • constants.FONT_TEXT_STYLE_SUBHEADLINE

  • constants.FONT_TEXT_STYLE_FOOTNOTE

  • constants.FONT_TEXT_STYLE_CAPTION1

  • constants.FONT_TEXT_STYLE_CAPTION2

  • constants.FONT_TEXT_STYLE_TITLE1 (available in iOS 9.0 and later)

  • constants.FONT_TEXT_STYLE_TITLE2 (available in iOS 9.0 and later)

  • constants.FONT_TEXT_STYLE_TITLE3 (available in iOS 9.0 and later)

  • constants.FONT_TEXT_STYLE_CALLOUT (available in iOS 9.0 and later)

  • constants.FONT_TEXT_STYLE_LARGETITLE (available in iOS 11.0 and later)

Platform Availability

• iOS

Limitations

• If you enable this feature, the font size and font family from the respective skin is not respected.

• This feature is available only in iOS.

Customizing Appearance

You can customize the appearance of the TextBox widget using the following properties:

• widgetAlignment: Specifies the alignment of the widget.
• margin: Defines the space around the widget.
• padding: Defines the space between the content of the widget and the widget boundaries.
• skin: Specifies the skin.
• focusSkin: Specifies the focus skin.