With this template you can add a new Text Editor component to your project. Text Editor provides functionality to enter, edit and delete text - be it single or multiline. The user can scroll the text by using the keyboard or by touching the screen. When the user touches the screen for a while, a magnifying glass appears permitting the user to move the caret directly with the finger. Each time the user modifies the text in the Editor, the component sends signals to associated slot methods where your particular implementation is executed.

Components created with this template are intended to be adapted to your particular design expectations. After adding the new Text Editor you should edit the component, change its appearance and if desired also its behavior. Once you have adapted the component, you can embed instances of this Text Editor wherever you need in your GUI project. Because it serves as template, it is intentionally kept very simple. Nevertheless, Text Editors created by the template are working widgets. If desired, they can already be used as they are. The following figure demonstrates the default appearance of the Text Editor created by using the here described component template:

The approach with component templates has two functions. Primarily the templates should simplify the development of new components. Instead of creating the Text Editor from scratch you can use the available template. The second function is more educative. The template implements fully working Text Editor component you can investigate and learn about the corresponding programming aspects. The template is well documented. It contains annotations and inline comments with instructions helping you to understand how the component works and how it can be adapted to your particular needs.

This chapter provides an overview how the Text Editor component template is used within your own application and how you adapt this component according to your particular needs. You will find here also further details concerning the internal implementation of the Text Editor component.

To create a new Text Editor component from a template you simply Drag & Drop it between the Templates window and the Composer with an opened unit. This is important in that by using the component templates you add in fact a new class to your project. Classes, in turn, can exist within units only. The following are the typical steps to create a new Text Editor component from a template:

The new created Text Editor component appears accompanied by annotation providing helpful tips how to proceed. If undesired, you can select and delete the annotation.

Once you have created the Text Editor component, you can use it to assemble more complex components. Technically seen, you embed an instance of the Text Editor class in-place within some superior GUI component. At the runtime, the superior GUI component takes care of the correct initialization and the displaying of all embedded components, so they appear similarly as you have composed them at the design time.

The following are the typical steps to create a new instance of an already existing Text Editor component:

As long as the Text Editor is selected you can inspect and modify its properties conveniently in the Inspector window as demonstrated with the property Bounds in the screenshot below. This is in so far worth mentioning as diverse features of the Text Editor are controlled by the corresponding properties. If you are not familiar with the concept of a property and the usage of Inspector window, please read first the preceding chapter Compositing component appearance.

The Text Editor component descends from the Mosaic class Core::Group. Consequently, most of the properties listed in the above screenshot are inherited from this base class. Particular to the Text Editor are only few following properties:

Property	Description
Alignment	The property Alignment determines how the editor should display the text rows if their size differs from the size of the editor. In this manner the rows can be aligned horizontally. The entire text block can be aligned vertically.
Color	The property Color controls the color of the text and the blinking caret.
Font	The property Font refers to the font object used to display the text. The text is determined by the property String.
OnChange	The property OnChange can refer to a slot method, which should be invoked by the text editor when the user modifies the text.
String	The property String stores the text of the editor.
WrapText	The property WrapText determines whether long text rows should be wrapped automatically.

Once added to the component, you can freely move the Text Editor instance, or you simply grab one of its corners and resize it in this way. You can control the position and the size of the component also by directly modifying its property Bounds. If you want the Text Editor to appear behind other views you can reorder it explicitly.