CLASS: LargeTextArea

SUPER CLASS: Text

Subclasses

Rich Text

Synopsis

A large scrolling text area

Full Description

Properties

LargeTextArea.autoSizeHeight

described in Text

When your editor is in readonly mode, you may need it to grow/shrink to fit its contents.

LargeTextArea.autoSizeWidth

described in Text

When your editor is in readonly mode, you may need it to grow/shrink to fit its contents.

LargeTextArea.border

described in Control

Sets the border-width in pixels for your widget. Enter a single value like 5 to have a 5 px border around the widget. To have borders with different widths, enter a comma-separated list of pixel values like this:

border-top, border-right, border-bottom, border-left

For example, entering

10, 0, 5, 1

Will result in a border that is 10px wide on top, 0px wide on the right, 5px wide on the bottom and 1px wide on the left.

Use within the javascript editor

this.<WidgetID>.setBorder("5,0,10,15")

LargeTextArea.borderColor

described in Control

Enter a border color for your widget; rgb and hex values are accepted: rgb(0,255,0) and #00FF00 are both valid entries.

You can also enter css color names, including black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white.

Use within the javascript editor

this.<WidgetID>.setBorderColor("rgb(0,255,0)");       
this.panel1.setBorderColor("#00FF00");
main.editor2.setBorderColor("purple");

LargeTextArea.caption

described in Abstract Editor

The caption is the text that the end user sees next to your edit control. You can bind this to a variety of values including static values (just type some text into the caption text box), fields of text received from a database or web service, or even tie it to some other widget.

Use within the javascript editor

this.<EditorName>.setCaption("This is my new caption")

LargeTextArea.captionAlign

described in Abstract Editor

The caption for your widget can be left, center or right aligned.

LargeTextArea.captionPosition

described in Abstract Editor

This property determines where your caption appears with respect to the edit field. It is up to you to insure that there is sufficient height or width for the caption to fit in the selected position.

LargeTextArea.captionSize

described in Abstract Editor

The editor widget is actually a container consisting of a label element and an edit element. This container follows standard wavemaker studio width rules for laying out its contained elements. So if your caption/label has a width of 30%, then the edit element gets a width of 70%. If the caption width is 30px, then the edit element is parentWidth - 30px.

LargeTextArea.changeOnKey

described in Text

Checking this box causes the onChange event to fire every time a new character is entered in the text editor.

For example, if you've mapped your onChange event to do a database search, then this is a good way to refine your search as the user types.

LargeTextArea.dataValue

described in Abstract Editor

The dataValue property returns the value of an editor. For basic data types like text and number, the dataValue and the displayValue will be the same, but for advanced editors, like date, radioButton, checkBox and lookup, the dataValue may be different than what is displayed.

Use within the javascript editor

var result = this.<WidgetID>.getDataValue();

LargeTextArea.disabled

described in Abstract Editor

If the disabled property is true (checked) the the value of the editor cannot change. The widget becomes display-only.

This is similar to the readonly property, but the key difference is that the user can see that this is an editor, and that there is something about the state of their page such that this editor can not yet be editted.

Readonly is used to emphasize the VALUE of the editor, not the PRESENCE of the editor.

LargeTextArea.displayValue

described in Abstract Editor

This is the value to display value for your edit widget. Note that the display value is just what the user sees, and is not always the dataValue returned by the widget.

For Example: a pulldown menu option tag can have a dataValue that is different from its displayValue.

Use within the javascript editor

this.<WidgetID>.setDisplayValue("What you see");

LargeTextArea.editorBorder

described in Abstract Editor

If true then displays a border around the content of the editor.

LargeTextArea.emptyValue

described in Abstract Editor

This property specifies the dataValue to be returned by the editor if the user does not enter any value (e.g., the null value to return from the getDataValue() function call).

• null: calling getDataValue() returns null if there is no value set for this editor
• emptyString: calling getDataValue() returns "" if there is no value set for this editor
• false: call to getValue returns false if there is no value set for this editor
• unset: calling getDataValue() returns no value if there is no value set for this editor (not particularly useful)

Use within the javascript editor

// Check if widget has been set
if (this.<WidgetID>.getDataValue() == null) {
   alert("You must enter a value");
}

LargeTextArea.height

described in Control

The height of your widget can be specified in px or % (i.e 50px, 75%).

You can have a column of widgets that combined are more than 100% width; components will be allocated space based on the ratio of sizes (a 80% height widget gets twice as much space as a 40% widget).

Use within the javascript editor

this.<WidgetID>.setHeight("50%");  
this.label1.setHeight("40px");

LargeTextArea.invalidMessage

described in Text

If you have setup validation on your widget, or if your widget comes with validation (such as the time and date widgets), this is the message to show the user if validation fails. Just enter some text and that text will be shown automatically if validation fails.

LargeTextArea.margin

described in Control

Sets the margin in pixels for your widget. The margin for an object is outside of its border (the padding is inside the border).

Enter a single value like 5 to have a 5 px margin around the widget. To have margins with different widths, enter a comma-separated list of pixel values like this:

margin-top, margin-right, margin-bottom, margin-left

For example, entering

10, 0, 5, 1

Will result in a margin that is 10px wide on top, 0px wide on the right, 5px wide on the bottom and 1px wide on the left.

Use within the javascript editor

this.<WidgetID>.setMargin("5,0,10,15")

LargeTextArea.maxChars

described in Text

Defines the maximum number of characters that can be entered in the editor.

LargeTextArea.maxHeight

described in Abstract Editor

If using the autoSizeHeight property, this property specifies a maximum that the widget will grow before it adds a scrollbar and handles any additional content via scrolling.

LargeTextArea.minHeight

LargeTextArea.minWidth

described in Control

Defines the minimum size of a widget. The minWidth property is used when the width property is set to a percent (%) value. The widget will shrink based on the available space until the minWidth pixel value is reached, at which point the widget will not shrink further.

LargeTextArea.name

described in Component

The name is a unique identifier for your widget. Each page element and component must be uniquely identified. WaveMaker automatically renames any non-unique element.

The name makes it easy

1. Find the component in a bind dialog box
2. Find the component in your model tree
3. Reference the component in javascript

Use within the javascript editor

this.<UniqueID>.setShowing(true)

LargeTextArea.onclick

described in Control

Specifies what kind of action to take when the user clicks on this page element. The basic options are:

• Javascript: creates a new Javascript function that will be called when this event occurs.
• Javascript Shared: creates a new Javascript function that other widgets of the same type can use. Now you can have 20 buttons, any and all of which can use the same onclick function instead of having 20 separate onclick functions.
• New Service: creates a new service variable to call when this event occurs, for example to trigger a new database query.
• New Navigation: creates a new navigation variable to call when this event occurs, for example to navigate to a new page or layer.
• LiveVariable: refreshes a LiveVariable when this event occurs, for example by re-executing a query to fetch all customer data.

LargeTextArea.padding

described in Control

Sets the padding in pixels for your widget. The padding for an object is inside of its border (the margin is outside the border).

Enter a single value like 5 to have a 5 px padding around the widget. To have padding with different widths, enter a comma-separated list of pixel values like this:

padding-top, padding-right, padding-bottom, padding-left

For example, entering

10, 0, 5, 1

Will result in padding that is 10px wide on top, 0px wide on the right, 5px wide on the bottom and 1px wide on the left.

Use within the javascript editor

this.<WidgetID>.setPadding("5,0,10,15")

LargeTextArea.promptMessage

described in Text

The prompt message is displayed when the editor is selected. The message will remain visible for the duration set by the tooltipDisplayTime property.

LargeTextArea.readonly

described in Abstract Editor

You can make this edit widget read only to prevent the user from changing values. There are two main ways of using this:

Use the property checkbox + javascript

You can use the checkbox to set its initial state and use javascript to change that later on with

this.<EditorName>.setReadonly(true);

Bind

You can use the bind dialog to enable this widget only when certain conditions are met. For example, you can bind your edit widget to a DataGrid's emptySelection property to make this editor only editable if something is selected in your grid.

LiveForm

LiveForm will automatically manage the readonly state of its editors.

Comparison to disabled property

This is similar to the disabled property, but the key difference is that the user can see that there is an editor when you use the disabled property.

Readonly is used to emphasize the VALUE of the editor, not the PRESENCE of the editor.

LargeTextArea.regExp

described in Text

Enter any regular expression to be used to validate user input for client-side input validation.

Regex to enter zero or more digits (0-9)
[0-9]*
Regex to enter one or more alpha characters (A-Z or a-z)
[A-Za-z]+
Social security number:
^d{3}-d{2}-d{4}$<
US Phone number:
\(?\d\d\d\)?[ \-]?\d{3}[ \-]?\d{4}

LargeTextArea.required

described in Abstract Editor

Places a red asterisk (*) in the caption of the editor, signifying that the field is required.

A required editor in wm.LiveForm may refuse to save without a required field.

LargeTextArea.scrollX

described in Control

The ScrollX property enables you to turn on scrollbars for this widget such that more contents than would normally fit into its allocated width can be accessed. Technically, this sets the overflow style to scroll or to none.

Use within the javascript editor

You may want to programatically access this after changing the contents of this widget at runtime.

this.<WidgetID>.setScrollX(true);

LargeTextArea.scrollY

described in Control

The ScrollY property enables you to turn on scrollbars for this widget such that more contents than would normally fit into its allocated height can be accessed. Technically, this sets the overflow style to scroll or to none.

Use within the javascript editor

You may want to programatically access this after changing the contents of this widget at runtime.

this.<WidgetID>.setScrollY(true);

LargeTextArea.showing

described in Control

Showing determines whether or not a component is visible. A page element that is not showing has its css display style set to none; it is still a part of the DOM model of the page, but no longer affects the layout of other components.

Uncheck the checkbox to make this widget invisible. A widget that is not showing can still be selected by navigating to that widget in the model tree and clicking it.

Bind to a boolean value You can also bind the "showing" property to any boolean value, for example you can use this to toggle whether a button shows based on whether a datagrid row is selected.

To do this, open the bind dialog for the "showing" property and and select the "advanced" radio button to bring up the advanced binding editor. Now traverse the widget tree to find the datagrid.emptySelection property and bind to that. It will look something like this

datagrid.emptySelection

Note that the simple binding works when you want to the "showing" property to be true when a row is selected in the datagrid. What about setting the showing property to true when the datagrid is not selected?

For this, you need to open the bind dialog for the "showing" property and select the "expression" radio button to bring up the expression editor. In the expression editor, enter something like the following:

!${datagrid.emptySelection}

Use within the javascript editor

this.<UniqueID>.setShowing(true)

LargeTextArea.showMessages

described in Text

If not checked, then do not show any messages for this editor, including invalidMessage and promptMessage. This property should usually be checked.

LargeTextArea.singleLine

described in Abstract Editor

Your edit widget is a container containing a label element and an edit element. singleLine indicates whether your label element displays its text on a single line or is allowed to wrap its text to the next line.

This property has no effect on how the edit widget looks or works, only the label.

Making a label wrap around does NOT gaurentee it will have enough height to show the extra lines; you must set the height of the edit widget to be high enough to show all lines.

LargeTextArea.tooltipDisplayTime

described in Text

Time (in milliseconds) that the prompt message (defined in the promptMessage property) is displayed when the editor gains focus.

LargeTextArea.width

described in Control

The width of your widget can be specified in px or % (i.e 50px, 75%).

You can have a row of widgets that combined are more than 100% width; components will be allocated space based on the ratio of sizes (a 80% width widget gets twice as much space as a 40% widget; they will fit in the designated space even though the sum is 120%).

Use within the javascript editor

this.<WidgetID>.setWidth("80px");