Genie Text Area

A text area is a multi-line input control. You can create a text area from the designer toolbar or join multiple textboxes on the green-screen into one multi-line text area.

Scrolling Properties

You can allow horizontal and vertical scrolling in a multi-line text area. To accomplish this, make sure Design Mode is On. Then select the text area and from the Properties Dialog, and find the properties: overflow x and overflow y.

Overflow x: Determines whether a horizontal scrollbar is displayed for this element.

Overflow y: Determines whether a vertical scrollbar is displayed for this element.

Valid options for these properties are:

• Visible: Lets the content flow beyond the dimensions of the element without a scrollbar.

• Hidden: Does not display a scrollbar and hides overflowing content.

• Scroll: Always displays the scrollbar.

• Auto: Displays the scrollbar only when the element's content goes beyond the elements dimensions.

Open

Note: auto is the default option.

Combining multiple Textboxes into a Text Area

You can also join multiple textboxes from the original green-screen application into one multi-line text area. To do this, make sure Design Mode is On. Then, select the textboxes that you would like to combine.

To select multiple elements on the screen, you can either:

(1)  Hold down your Ctrl key and click on the elements.

(2)  Use the rubber band by clicking on a blank area of the screen and dragging the mouse around the elements as shown below.

Open

Next, right-click on one of the selected textboxes to get to the following context menu:

Select the option Combine into Text Area.  The textboxes you selected will be combined into one resizable text area as shown below:

Note: The text area is created by associating a group of textboxes together. This is managed through the “related field” property of a text area. This property can associate a text area with a group of textboxes by specifying a comma separated list of textbox IDs as shown below:

Note: A text area created from combined textboxes maintains the same number of maximum lines as the number of textboxes used.  In addition, each line’s maximum length will be equivalent to the maximum length of the corresponding textbox. In our case, the text area will maintain 4 lines for the 4 textboxes that we selected before.  The user will not be able to enter any text beyond the 4^th line.

Handling Events

As with all elements in Genie, you can initiate client-side scripts on text areas, such as a script to clear the content of a text area using JavaScript. In this example, we will assume that a “clear” button already exists on the screen. For more information about buttons, click here.

We can add an onclick event to the button that clears the content of a text area on the screen. The onclick event is a native JavaScript event that fires when an object is clicked.

Select the “clear” button. In the properties dialog, find the onclick event and type in the following:

In this case, we are setting the value of the text area to an empty string (blank).

Note: TextArea1 is the ID of the text area. To find the ID of any element, simply select the element in the designer and its ID will appear in the title of the Properties Window.

Note: getObj() is a Genie api that retrieves an element by its ID.  It is equivalent to using JavaScript’s document.getElementById() function.  For more information on JavaScript API that can be utilized in Genie and Profound UI, click here.