Options
All
  • Public
  • Public/Protected
  • All
Menu

Class TextEntryComponent

Once an Text Entry Component has been added to the page from the Component selector, the Text Entry Component can be passed as a parameter to actions. Code within the action can set properties on the Text Entry Component.

var uComps = require('u-components');
var uActions = require('u-actions');
var Action = uActions.Action;
new Action('Text Entry Demo', textEntryDemo)
.addParameter('Text Entry', uActions.ParamType.TEXT_ENTRY)
.register();
function textEntryDemo(comp) {
    var textEntryComp = uComps.cast.toTextEntry(comp);
    textEntryComp.emptyText = 'Username';
    textEntryComp.fontColor = '#2a2c94';
    textEntryComp.fontSize = 12;
}

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

Properties

align

align: AlignType

Sets the alignment of the text. uComps.AlignType: 0 - LEFT, 1 - CENTER, 2 - RIGHT, 3 - JUSTIFIED

var textEntryComp = uComps.cast.toTextEntry(comp);
textEntryComp.align = uComps.AlignType.RIGHT;

alpha

alpha: number

The alpha transparency of the Component. Range from 0 to 100.

characterLimit

characterLimit: number

Sets a limit on how many characters can be entered.

var textEntryComp = uComps.cast.toTextEntry(comp);
textEntryComp.characterLimit = 100;

clippingType

clippingType: ClippingType

Clip the components contents using one of the options in ClippingType.

components

components: ComponentList

Access this Component's sub-components.

disabledAlign

disabledAlign: AlignType

Alignment of text when the text component is disabled. uComps.AlignType: 0 - LEFT, 1 - CENTER, 2 - RIGHT, 3 - JUSTIFIED

var textEntryComp = uComps.cast.toTextEntry(comp);
textEntryComp.disabledAlign = uComps.AlignType.LEFT;

disabledFont

disabledFont: string

Font file of text when the text component is disabled.

var textEntryComp = uComps.cast.toTextEntry(comp);
textEntryComp.disabledFont = 'vera.ttf';

disabledFontColor

disabledFontColor: string

Color of text when the text component is disabled.

var textEntryComp = uComps.cast.toTextEntry(comp);
textEntryComp.disabledFontColor = '#777777';

disabledFontSize

disabledFontSize: number

Size of text when the text component is disabled.

var textEntryComp = uComps.cast.toTextEntry(comp);
textEntryComp.disabledFontSize = 10;

disabledTracking

disabledTracking: number

The distance between text characters when the text component is disabled. Range -5 to 10. Default is 0.

var textEntryComp = uComps.cast.toTextEntry(comp);
textEntryComp.disabledTracking = 0.1

emptyAlign

emptyAlign: AlignType

Alignment of text that appears in the text component before any input. uComps.AlignType: 0 - LEFT, 1 - CENTER, 2 - RIGHT, 3 - JUSTIFIED

var textEntryComp = uComps.cast.toTextEntry(comp);
textEntryComp.emptyAlign = uComps.AlignType.LEFT;

emptyFont

emptyFont: string

Font file of text that appears in the text component before any input.

var textEntryComp = uComps.cast.toTextEntry(comp);
textEntryComp.emptyFont = 'vera.ttf';

emptyFontColor

emptyFontColor: string

Color of text that appears in the text component before any input.

var textEntryComp = uComps.cast.toTextEntry(comp);
textEntryComp.emptyFontColor = '#981e9c';

emptyFontSize

emptyFontSize: number

Size of text that appears in the text component before any input.

var textEntryComp = uComps.cast.toTextEntry(comp);
textEntryComp.emptyFontSize = 10;

emptyText

emptyText: string

Text that appears in the text component before any input.

var textEntryComp = uComps.cast.toTextEntry(comp);
textEntryComp.emptyText = 'Username';

emptyTracking

emptyTracking: number

The distance between text characters. Range -5 to 10. Default is 0.

var textEntryComp = uComps.cast.toTextEntry(comp);
textEntryComp.tracking = -2.4

enabled

enabled: boolean

When set to false, text cannot be entered into the component by a user.

var textEntryComp = uComps.cast.toTextEntry(comp);
textEntryComp.enabled = false;

font

font: string

The font file to use for the text component.

var textEntryComp = uComps.cast.toTextEntry(comp);
textEntryComp.font = 'vera.ttf';

fontColor

fontColor: string

The color of the font used in the text component, as a hexadecimal value.

var textEntryComp = uComps.cast.toTextEntry(comp);
textEntryComp.fontColor = '#2a2c94';

fontSize

fontSize: number

The font size for the text component.

var textEntryComp = uComps.cast.toTextEntry(comp);
textEntryComp.fontSize = 12;

formEnabled

formEnabled: boolean

Whether or not is component is enabled for the parent form. Only relevant when inside a Form Component.

formFieldName

formFieldName: string

Label used to identify the field this Component belongs to in a form. Only relevant when inside a Form Component.

height

height: number

The height of the Component.

mask

mask: RectangleComponent | CircleComponent

Shape component to be used as a mask. Can be either a Rectangle or Circle Component.

multiline

multiline: boolean

Set to true to allow the text to wrap within the boundaries of the text component.

var textEntryComp = uComps.cast.toTextEntry(comp);
textEntryComp.multiline = true;

name

name: string

Name of the component.

nativeHeight

nativeHeight: number

parent

parent: Component

Access this Component's parent component.

passedFormValidation

passedFormValidation: boolean

Whether or not the Component has passed form validation. Only relevant when inside a Form Component.

required

required: boolean

When part of a form, this property indicates that this text box is a required field and must have text entered or the form will not submit.

var textEntryComp = uComps.cast.toTextEntry(comp);
textEntryComp.required = true;

resizeToContent

resizeToContent: boolean

When set to true, the text will reflow vertically to fit in all the original content.

var textEntryComp = uComps.cast.toTextEntry(comp);
textEntryComp.resizeToContent = false;

resizeType

resizeType: ResizeType

Resize as Millimeters (font will stay the same size regardless of device) or Scale with Screen..

var textEntryComp = uComps.cast.toTextEntry(comp);
textEntryComp.resizeType = uComps.ResizeType.SCALE_WITH_SCREEN;

selectAllOnFocus

selectAllOnFocus: boolean

If true, then all the current text will be selected when the text box receives input focus.

var textEntryComp = uComps.cast.toTextEntry(comp);
textEntryComp.selectAllOnFocus = true;

text

text: string

Text that appears in the text entry component.

var textEntryComp = uComps.cast.toTextEntry(comp);
var input = textEntryComp.text;

tracking

tracking: number

The distance between text characters. Range -5 to 10. Default is 0.

var textEntryComp = uComps.cast.toTextEntry(comp);
textEntryComp.tracking = 0.2

type

type: string

Type of the component.

uniqueId

uniqueId: string

Unique ID of the component.

validationRegex

validationRegex: string

Specific a custom regular expression to restrict text entered in ways beyond the validation type.

validationType

validationType: ValidationType

How the text in the entry field will be validated for form submission. uComps.ValidationType: 0 - NONE, 1 - PHONE_NUMBER, 2 - EMAIL, 3 - NUMBER, 4 - CUSTOM_REGEX (defined in validationRegex)

var textEntryComp = uComps.cast.toTextEntry(comp);
textEntryComp.validationType = uComps.ValidationType.EMAIL;

visible

visible: boolean

Whether or not the Component is visible.

width

width: number

The width of the Component.

x

x: number

The x position of the Component relative to its parent.

y

y: number

The y position of the Component relative to its parent.

Methods

emit

  • emit(eventType: string, data: Object): void

  • Call each callback that is registered for the given eventType, in the order they were registered, passing the supplied data to each.

    Parameters

    • eventType: string

      The type of the event to emit.

    • data: Object

      Data object to pass to each callback.

    Returns void

focus

  • focus(): void

  • Set the keyboard focus to this component.

    new uActions.Action('set focus', setFocus)
        .addParameter('text entry',uActions.ParamType.TEXT_ENTRY)
        .register();
    function setFocus(textEntry) {
        textEntry.focus();
    }

    Returns void

get

  • get(propertyName: string): any

  • Get a property by name.

    var uActions = require('u-actions');
    new uActions.Action('get fontsize',getFontSize).register();
    function getFontSize() {
        var text1=uPages.current.components.getText('Text 1');
        console.log(text1.get('font_size'));
    }

    Parameters

    • propertyName: string

      The name of the property to get.

    Returns any

    Returned value can be of any type, or even null.

on

  • on(eventType: string, callback: Function): void

  • Adds the callback function to the end of the listeners array for eventType.

    Parameters

    • eventType: string

      The type of the event.

    • callback: Function

      The callback function

    Returns void

refresh

  • refresh(): void

  • Refresh this component to force it to be re-rendered, or for its dynamic data to be updated.

    Returns void

set

  • set(propertyName: string, value: any): void
  • set(data: Object): void

  • Set a properties value by name.

    var uActions = require('u-actions');
    new uActions.Action('set text color',setTextColor).register();
    function setTextColor() {
        uPages.get('follow').components.getText('Text 1').set('font_color','0x0000FFFF');
    }

    Parameters

    • propertyName: string

      The name of the property to set.

    • value: any

      The value to set. Can be of any type.

    Returns void

  • Set a number properties at once.

    Parameters

    • data: Object

      Data object containing property name and value pairs to set on this component.

    Returns void

tween

  • tween(seconds: number, params: Object, type?: TweenType): void

  • Tween a component property over time.

    Parameters

    • seconds: number

      The number of seconds to tween for.

    • params: Object

      An objects that contains key/value pairs of the properties and values to tween.

    • Optional type: TweenType

      (Optional) Tween type can be any type from "Tween.type"

    Returns void