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

NameWhen 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 SizeSet 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.
PresetA 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.

TextThe default text in the text entry field.
EnabledSelects 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 TypeSelect the kind of entry that is allowed from: ‘All characters’, ‘Phone Number’, ‘ Email’, ‘URL’, ‘Password’ or ‘Numbers only’.
PromptThis 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 imageThe image which normally sits behind the text entry box. The Nine slice below can be used to manipulate the image.
Focus imageSet the image used when the text entry is focused for receiving input.
Disabled imageSet the image used when text entry is disabled.
Resize TypeSelect ‘Scale with screen’ or ‘Millimeters’.
Nine Slice ValuesMaintain 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.
MultilineWhen 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 FocusIf selected, then all the current text will be selected when the text box receives input focus.
Character limitSets a limit on how many characters can be entered.

Text Styles

Text StyleProvides all the usual properties for style of text including, Base style, Font size, Font color, Opacity, Font, Alignment and Tracking.
Empty Text StyleProvides 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 StyleProvides 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 fieldIndicates that this text box is a required field and must have text entered or the form will not submit.
Validation typeHow the text in the entry field will be validated for form submission: None, Phone number, Email, Number, Custom regex.
Validation RegexGreyed 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.
HelpLinks to Help.

Events

The text entry component can fire the following events:

On FocusThe text entry receives input focus.
On Focus LostThe text entry loses input focus.
On TypingWhenever the text in the text entry is changed.
On TabWhen the Tab key is pressed while the text entry has input focus.
On EnterWhen the Enter key is pressed while the text entry has focus.
On Before ValidationBefore validation is started.
On Fail ValidationWhen validation fails.
On Pass validationWhen validation passes.