Kony, Inc.

Animated Textfield Component

User Guide

For Kony Stakeholders only

Kony Animated Textfield Component

Document Revision History

Revisi Date Description of change Author
on
Adusumalli Narendranath
0.1 04-Feb-2017 Initial version
Koundinya

2017 Kony, Inc. All rights reserved Page 2 of 10

Kony Animated Textfield Component

Copyright 2017 by Kony, Inc.

All rights reserved.
February, 2017

This document contains information proprietary to Kony, Inc., is bound by the Kony
license agreements and may not be used except in the context of understanding the
use and methods of Kony Inc, software without prior, express, written permission. Kony,
Empowering Everywhere, Kony MobileFabric, Kony Modeler, and Kony Visualizer are
trademarks of Kony, Inc. Microsoft, the Microsoft logo, Internet Explorer, Windows, and
Windows Vista are registered trademarks of Microsoft Corporation. Apple, the Apple
logo, iTunes, iPhone, iPad, OS X, Objective-C, Safari, Apple Pay, Apple Watch, and Xcode
are trademarks or registered trademarks of Apple, Inc. Google, the Google logo,
Android, and the Android logo are registered trademarks of Google, Inc. Chrome is a
trademark of Google, Inc. BlackBerry, PlayBook, Research in Motion, and RIM are
registered trademarks of BlackBerry. All other terms, trademarks, or service marks
mentioned in this document have been capitalized and are to be considered the
property of their respective owners.

2017 Kony, Inc. All rights reserved Page 3 of 10

Kony Animated Textfield Component

Contents

1 Introduction............................................................................................................... 5
2 Release Summary...................................................................................................... 5
3 Reference Documents................................................................................................ 5
4 Installation and Deployment Guidelines....................................................................5
5 Changes in this Release............................................................................................. 5
6 Component Developer Guide..................................................................................... 5
6.1 Properties........................................................................................................... 5
6.1.1 placeholderText............................................................................................... 5
6.1.2 maxTextLength............................................................................................... 6
6.1.3 secureTextEntry.............................................................................................. 6
6.1.4 textBoxText..................................................................................................... 6
6.1.5 placeholderSkin.............................................................................................. 6
6.1.6 placeholderFocusSkin..................................................................................... 6
6.1.7 underlineSkin.................................................................................................. 7
6.1.8 underlineFocusSkin......................................................................................... 7
6.1.9 textboxSkin..................................................................................................... 7
6.2 Events................................................................................................................ 7
6.2.1 textBoxTouchStart Event................................................................................. 7
6.2.2 textBoxTouchEnd Event.................................................................................. 7
6.2.3 textBoxTouchMove Event................................................................................ 8
6.2.4 textBoxTextChange Event............................................................................... 8
6.2.5 onTextBoxDone event..................................................................................... 8
6.3 Consuming the TextBox Component through Visualizer.....................................8
6.4 Consuming the TextBox Component dynamically...............................................9
7 Known Issues........................................................................................................... 10

2017 Kony, Inc. All rights reserved Page 4 of 10

Kony Animated Textfield Component

1 Introduction
TextBox Component is a user defined text box widget with pass through and custom
properties.

2 Release Summary
Product name TextBox Component
Release number 1.0
Release date 04 February, 2017

Scope of release First version of TextBox User widget

iPhone Native
Platforms supported Android Phone Native
Windows 10
Kony Product Version
Kony Studio Enterprise : GA- 7.2.5
used

iOS 10
Android Native
Channels/Devices
Nexus 6 with Android N
certified
Samsung Galaxy S6 Neo with Android 6.1
Windows 10

Product Management
Chandan Esanakula
contact
Engineering Contact Dilip Sukumar

3 Reference Documents
For Kony Studio and Kony Visualizer related documents, see Kony Library.

4 Installation and Deployment Guidelines

5 Changes in this Release
This is the first official release of the TextBox component user widget.

6 Component Developer Guide

6.1 Properties
6.1.1placeholderText
Specifies the text that acts as placeholder for the textbox component.
Syntax: placeholderText
Type: String

2017 Kony, Inc. All rights reserved Page 5 of 10

Kony Animated Textfield Component

Read/Write: Read + Write

6.1.2maxTextLength
Specifies the maximum length of text that can be entered in the textbox.
Syntax: maxTextLength
Type: Number
Read/Write: Read + Write
6.1.3secureTextEntry
Specifies whether the text in textbox should be masked or not.
Syntax: secureTextEntry
Type: Boolean
Read/Write: Read + Write
Remarks:
If the secureTextEntry filed is set to true, the textbox behaves as a
password field that will mask the text entered in the textbox.

6.1.4textBoxText
Specifies the text to be entered in the textbox.
Syntax: textBoxText
Type: String
Read/Write: Read + Write

6.1.5placeholderSkin
Specifies the skin to be applied for the placeholder text.
Syntax: placeholderSkin
Type: String
Read/Write: Read + Write
Remarks:
Before setting this property one should make sure that the skin with the
specified id exists.
Skin id assigned to this property should be skin of Label.

6.1.6placeholderFocusSkin
Specifies the skin to be applied to the placeholder text while the textbox is
in focus.
Syntax: placeholderFocusSkin
Type: String

2017 Kony, Inc. All rights reserved Page 6 of 10

Kony Animated Textfield Component

Read/Write: Read + Write

Remarks:
Before setting this property one should make sure that the skin with the
specified id exists.
Skin id assigned to this property should be skin of Label.

6.1.7underlineSkin
Specifies the skin to be applied to underline below the textbox.
Syntax: underlineSkin
Type: String
Read/Write: Read + Write
Remarks:
Before setting this property one should make sure that the skin with the
specified id exists.
Skin id assigned to this property should be skin of Label.

6.1.8underlineFocusSkin
Specifies the skin to be applied to underline while the textbox is in focus.
Syntax: underlineFocusSkin
Type: String
Read/Write: Read + Write
Remarks:
Before setting this property one should make sure that the skin with the
specified id exists.
Skin id assigned to this property should be skin of Label.

6.1.9textboxSkin
Specifies the skin to be applied for the textbox
Syntax: textboxSkin
Type: String
Read/Write: Read + Write
Remarks:
Before setting this property one should make sure that the skin with the
specified id exists.

6.2 Events
6.2.1textBoxTouchStart Event
An event callback is invoked by the platform when the user touches the touch
surface of the textbox.

2017 Kony, Inc. All rights reserved Page 7 of 10

Kony Animated Textfield Component

Syntax: textBoxTouchStart()
6.2.2textBoxTouchEnd Event
An event callback is invoked by the platform when the user touch is
released from the touch surface of the textbox.
Syntax: textBoxTouchEnd()
6.2.3textBoxTouchMove Event
An event invoked when the user touch moves on the touch surface of the
textbox continuously until movement ends.
Syntax: textBoxTouchMove()
6.2.4textBoxTextChange Event
An event invoked when the when text in the text box changes. This event
is not fired when the text is changed programmatically.
Syntax: textBoxTextChange()
6.2.5onTextBoxDone event
An event invoked when the when user clicks on keyboard action label.
Syntax: onTextBoxDone()

6.3 Consuming the TextBox Component through Visualizer

We can simply drag and drop the component into app.

We can set both custom and pass-through properties in the UDW tab of the
component in the right panel of the visualizer as shown below.

2017 Kony, Inc. All rights reserved Page 8 of 10

Kony Animated Textfield Component

6.4 Consuming the TextBox Component dynamically

You can also consume the textbox component from the code dynamically.

/* creating a component's Object */

var textboxComponent = new component.ui.textbox({
"clipBounds": true,
"height": "10%",
"id": "textbox",
"isVisible": true,
"centerX": "50%",
"centerY": "50%",
"width" : "80%",
"skin": "slFbox",
"zIndex": 1
}, {}, {});
/* Setting component's pass-through and custom properties */
textboxComponent.placeholderText = "Username";
textboxComponent.maxTextLength = 10;
textboxComponent.secureTextEntry = false;
textboxComponent.textBoxText = "";
textboxComponent.placeholderSkin = "
sknTextBoxComponent424242Op60";
textboxComponent.placeholderFocusSkin = " sknPlaceholderAnimated";
textboxComponent.underlineSkin = "
sknTextBoxComponent424242BGOp60";

2017 Kony, Inc. All rights reserved Page 9 of 10

Kony Animated Textfield Component

textboxComponent.underlineFocusSkin = " sknUnderlineAnimated";

textboxComponent.textboxSkin = " sknTextBoxComponent";
/*Adding Component to the Form*/
this.view.add(textboxComponent);

7 Known Issues
Skins are currently exposed as Custom Properties. As a result, when the
user changes skins from the UDW properties, there will not be an
immediate visual change on the Visualizer UI. This change will be
reflected only in the functional preview of the app.

2017 Kony, Inc. All rights reserved Page 10 of 10