Text Entry

This component lets you gather information from customers using their native device data entry methods (on screen keyboard, voice, handwriting etc).

You can type in user-friendly prompts and add designer backgrounds to the form. Type your prompt text into the Empty Text field and it will disappear once the customer starts typing e.g. ‘Type your name here’.

There is a minimum size to the text entry box which is to simulate the minimum sizes for text entry on android and IOS systems.

Note on overlapping components

Like some other components, if a text entry component is overlapped by another Umajin component, the text entry will disappear. This will occur even if it’s only the outline of the component that overlaps, not the actual content inside it.

While in Umajin Editor 4.2 or later, it will also go red and show the message “Overlap!”, to help you debug the problem. This does not occur in Umajin Editor Lite, or in a published app, because the end user cannot do anything about it.

Umajin displays your application using a graphics engine, like a game, allowing 3D graphics and effects. However some components use “native” controls, such as text entry or web browser. These will always be displayed over top of the rest of Umajin’s display. Umajin will hide them if another Umajin component needs to go over top (such as a menu).

Properties for Text Entry Component

Name	When components are placed on a page they appear highlighted blue in the scene tree and can be renamed by double clicking in this panel and typing the new name. Components can also be set to be visible/invisible on the page, using the ‘eye’ icon on this panel.
Position and Size	Set position and size. As long as measurements are maintained as percentages it deals automatically with dynamic layout and resizing for different devices and orientations. You can use millimeters to control aspects of size like width or height in order to create a text entry box thats size will be maintained across devices.
Preset	A Preset is a pre-determined set of properties and files for a component. You can have a Predefined Preset (Umajin created) or a Custom Preset (custom designed by you). Where the component has a Predefined Preset it will automatically be loaded into your app as the default when you insert that component.The ‘LOAD’ button opens the Preset Selector, which has tabs for Predefined and Custom, so you can choose which preset to load for your component. Create your own Preset by building your assets, putting them in your Image folder and then selecting them in the Properties panel. The ’SAVE’ button will enable you to name and save your preset under the Custom tab.

Appearance

Set the content and placement of the text entry panel.

Text	The default text in the text entry field.
Enabled	Selects whether text entry will be initially enabled. If false, the user will not be able to enter or change text until an action enables text entry.
Entry Type	Select the kind of entry that is allowed from: ‘All characters’, ‘Phone Number’, ‘ Email’, ‘URL’, ‘Password’ or ‘Numbers only’.
Prompt	This is the text to display when the user has not typed anything and the text entry would otherwise be empty. It is usually an instruction like ‘Type your name here’.
Background image	The image which normally sits behind the text entry box. The Nine slice below can be used to manipulate the image.
Focus image	Set the image used when the text entry is focused for receiving input.
Disabled image	Set the image used when text entry is disabled.
Resize Type	Select ‘Scale with screen’ or ‘Millimeters’.
Nine Slice Values	Maintain the correct proportions for edges and corners of your image. Editing values in the Nine Slice will apply to the background image you have selected above. Top Slice: Stop the top of the image from being stretched. Bottom Slice: Stop the bottom of the image from being stretched. Left Slice: Stop the left of the image from being stretched. Right Slice : Stop the right of the image from being stretched.
Multiline	When selected, this allows the user to enter more than one line of text, pressing enter. Otherwise, only a single line is possible.
Select All on Focus	If selected, then all the current text will be selected when the text box receives input focus.
Character limit	Sets a limit on how many characters can be entered.

Text Styles

Text Style	Provides all the usual properties for style of text including, Base style, Font size, Font color, Opacity, Font, Alignment and Tracking.
Empty Text Style	Provides all the usual properties for style of text including, Base style, Font size, Font color, Opacity, Font, Alignment and Tracking. Used for the “Prompt” text shown when no text has been entered.
Disabled Text Style	Provides all the usual properties for style of text including, Base style, Font size, Font color, Opacity, Font, Alignment and Tracking. Used for the text style when text entry is disabled.

Form Validation

Set properties to validate the form entries.

Required field	Indicates that this text box is a required field and must have text entered or the form will not submit.
Validation type	How the text in the entry field will be validated for form submission: None, Phone number, Email, Number, Custom regex.
Validation Regex	Greyed out unless Custom Regex validation type option is selected from dropdown above. Opens an Editor panel to enter validation regex. This property lets advanced users specific a custom regular expression to restrict text entered in ways beyond the validation type.
Help	Links to Help.

Events

The text entry component can fire the following events:

On Focus	The text entry receives input focus.
On Focus Lost	The text entry loses input focus.
On Typing	Whenever the text in the text entry is changed.
On Tab	When the Tab key is pressed while the text entry has input focus.
On Enter	When the Enter key is pressed while the text entry has focus.
On Before Validation	Before validation is started.
On Fail Validation	When validation fails.
On Pass validation	When validation passes.