Formatted Text Field
Component Palette Icon:
This specialized text field is used for alphanumeric text input that must match some specific pattern or needs to be formatted in a specific way. It operates in two modes:
Formatted Mask
In this mode, input is automatically formatted and restricted based on a format mask. For example, a format mask like: (###) ###-#### will allow the entry of a 10-digit US phone number. The formatting characters are automatically inserted if the user does not type them in. Any other characters are restricted. The following characters may be used in a formatted mask pattern:
Symbol |
Description |
# |
Any valid number, Such as 0-9. |
' |
Escape character, used to escape any of the special formatting characters. |
U |
Any letter. All lowercase letters will be mapped to upper case automatically. |
L |
Any letter. All upper case letters will be mapped to lower case automatically. |
A |
Any letter or number. |
? |
Any letter, case is preserved. |
* |
Anything. |
H |
Any hex character (0-9, a-f or A-F). |
Regular Expression
In this mode, input is validated against a regular expression. A regular expression is a special string that defines a set of allowed strings. Any input that matches the given regular expression is allowed, and input that doesn't match, is restricted. And yes, while powerful, regular expressions are decidedly difficult to decipher.
Name |
Description |
Property Type |
Scripting |
Category |
Allows Invalid Text |
Allows Invalid text to Commit |
boolean |
.allowsInvalid |
Behavior |
Antialias |
Draw with antialias on? Makes text smoother |
boolean |
.antialias |
Appearance |
Background Color |
The background color of the component. |
Color |
.background |
Appearance |
Border |
The border surrounding this component. NOTE that the border is unaffected by rotation. |
Border |
.border |
Common |
Commit While Typing |
Commits valid text while user is typing |
boolean |
.commitsOnValidEdit |
Behavior |
Committed Value |
Committed Text Value |
String |
.committedValue |
Data |
Cursor |
The mouse cursor to use when hovering over this component. |
int |
.cursorCode |
Common |
Data Quality |
The data quality code for any tag bindings on this component. |
int |
.dataQuality |
Data |
Enabled |
If disabled, a component cannot be used. |
boolean |
.componentEnabled |
Common |
Focus Lost Behavior |
Controls how a transaction can be committed |
int |
.focusLostBehavior |
Behavior |
Font |
Font of text of this component |
Font |
.font |
Appearance |
Foreground Color |
The foreground color of the component. |
Color |
.foreground |
Appearance |
Formatted Mask Pattern |
Formatted Mask Validation Pattern |
String |
.formattedMaskPattern |
Behavior |
Horizontal Alignment |
Determines the alignment of the label's contents along the X axis |
int |
.horizontalAlignment |
Layout |
Mouseover Text |
The text that is displayed in the tooltip which pops up on mouseover of this component. |
String |
.toolTipText |
Common |
Name |
The name of this component. |
String |
.name |
Common |
Overwrites Text |
Overwrites text while typing |
boolean |
.overwriteMode |
Behavior |
Reg Ex Pattern |
Regular Expression Validation Pattern |
String |
.validationPattern |
Behavior |
Styles |
Contains the component's styles |
Dataset |
.styles |
Appearance |
Text |
Contents of this Text Field |
String |
.text |
Data |
Touchscreen Mode |
Controls when this input component responds if touchscreen mode is enabled. |
int |
.touchscreenMode |
Behavior |
Validation Mode |
Select regular expression or mask-driven field validation |
int |
.validationMode |
Behavior |
Visible |
If disabled, the component will be hidden. |
boolean |
.visible |
Common |
This component does not have scripting functions associated with it.
This component does not have extension functions associated with it.
focus
focusGained
This event occurs when a component that can receive input, such as a text box, receives the input focus. This usually occurs when a user clicks on the component or tabs over to it.
.source |
The component that fired this event. |
.oppositeComponent |
The other component involved in this focus change. That is, the component that lost focus in order for this one to gain it, or vise versa. |
focusLost
This event occurs when a component that had the input focus lost it to another component.
.source |
The component that fired this event |
.oppositeComponent |
The other component involved in this focus change. That is, the component that lost focus in order for this one to gain it, or vise versa. |
key
keyPressed
An integer that indicates whether the state was changed to "Selected" (on) or "Deselected" (off). Compare this to the event object's constants to determine what the new state is.
.source |
The component that fired this event. |
.keyCode |
The key code for this event. Used with the keyPressed and keyReleased events. See below for the key code constants. |
.keyChar |
The character that was typed. Used with the keyTyped event. |
.keyLocation |
Returns the location of the key that originated this key event. Some keys occur more than once on a keyboard, e.g. the left and right shift keys. Additionally, some keys occur on the numeric keypad. This provides a way of distinguishing such keys. See the KEY_LOCATION constants, the keyTyped event always has a location of KEY_LOCATION_UNKNOWN. |
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
keyReleased
Fires when a key is released and the source component has the input focus. Works for all characters, including non-printable ones, such as SHIFT and F3.
.source |
The component that fired this event. |
.keyCode |
The key code for this event. Used with the keyPressed and keyReleased events. See below for the key code constants. |
.keyChar |
The character that was typed. Used with the keyTyped event. |
.keyLocation |
Returns the location of the key that originated this key event. Some keys occur more than once on a keyboard, e.g. the left and right shift keys. Additionally, some keys occur on the numeric keypad. This provides a way of distinguishing such keys. See the KEY_LOCATION constants in the documentation, the keyTyped event always has a location of KEY_LOCATION_UNKNOWN. |
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
keyTyped
Fires when a key is pressed and then released when source component has the input focus. Only works for characters that can be printed on the screen.
.source |
The component that fired this event. |
.keyCode |
The key code for this event. Used with the keyPressed and keyReleased events. See below for the key code constants. |
.keyChar |
The character that was typed. Used with the keyTyped event. |
.keyLocation |
Returns the location of the key that originated this key event. Some keys occur more than once on a keyboard, e.g. the left and right shift keys. Additionally, some keys occur on the numeric keypad. This provides a way of distinguishing such keys. See the KEY_LOCATION constants in the documentation, the keyTyped event always has a location of KEY_LOCATION_UNKNOWN. |
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
mouse
mouseClicked
This event signifies a mouse click on the source component. A mouse click the combination of a mouse press and a mouse release, both of which must have occurred over the source component. Note that this event fires after the pressed and released events have fired.
.source |
The component that fired this event. |
.button |
The code for the button that caused this event to fire. |
.clickCount |
The number of mouse clicks associated with this event. |
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
mouseEntered
This event fires when the mouse enters the space over the source component.
.source |
The component that fired this event. |
.button |
The code for the button that caused this event to fire. |
.clickCount |
The number of mouse clicks associated with this event. |
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
mouseExited
This event fires when the mouse leaves the space over the source component.
.source |
The component that fired this event. |
.button |
The code for the button that caused this event to fire. |
.clickCount |
The number of mouse clicks associated with this event. |
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
mousePressed
This event fires when a mouse button is pressed down on the source component.
.source |
The component that fired this event. |
.button |
The code for the button that caused this event to fire. |
.clickCount |
The number of mouse clicks associated with this event. |
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
mouseReleased
This event fires when a mouse button is released, if that mouse button's press happened over this component.
.source |
The component that fired this event. |
.button |
The code for the button that caused this event to fire. |
.clickCount |
The number of mouse clicks associated with this event. |
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
mouseMotion
mouseDragged
Fires when the mouse moves over a component after a button has been pushed.
.source |
The component that fired this event. |
.button |
The code for the button that caused this event to fire. |
.clickCount |
The number of mouse clicks associated with this event. |
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
mouseMoved
Fires when the mouse moves over a component, but no buttons are pushed.
.source |
The component that fired this event. |
.button |
The code for the button that caused this event to fire. |
.clickCount |
The number of mouse clicks associated with this event. |
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
propertyChange
propertyChange
Fires whenever a bindable property of the source component changes. This works for standard and custom (dynamic) properties.
.source |
The component that fired this event. |
.newValue |
The new value that this property changed to. |
.oldValue |
The value that this property was before it changed. |
.propertyName |
The name of the property that changed. NOTE: remember to always filter out these events for the property that you are looking for! Components often have many properties that change. |
Example |
Description |
##U-####/UU |
A product code with a specifc format, like 28E-8213/AR |
0xHHHH |
A hex digit, automatically prepends " 0x " on the front. e.g. " 0x82FF " |
#UUU### |
A California license plate, eg. 4ABC123 |
Example |
Description |
\p{Upper}\p{Lower}*, \p{Upper}\p{Lower}* |
A name, formatted such as Smith, John |
\d{3}-\d{2}-\d{4} |
A US social security number, like 123-45-6789 |
\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3} |
A network IPv4 address, like 67.82.120.116 |
^[a-f0-9A-F]{6}$ |
A six-digit hexadecimal number |
Property Name |
Value |
Validation Mode |
Formatted Mask |
Formatted Mask Pattern |
(###) ###-#### |