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.
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 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|
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.|
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.|