Элементы управления. Общие принципы работы

Элементы управления — это объекты, используемые для организации интерфейса между пользователем и приложением. Как правило, они отображаются в навигационных панелях, диалоговых окнах и на панелях инструментов. К ним относятся кнопки, чекбоксы, радиокнопки, поля для ввода и пр.

Все элементы управления наследуются от класса Terrasoft.Component (полное имя — Terrasoft.controls.Component), который, в свою очередь, наследуется от Terrasoft.BaseObject. Благодаря тому, что в классе родителе (Component) объявлен миксин Bindable, имеется возможность связывания свойств элемента управления с желаемыми свойствами, методами или атрибутами модели представления.

В элементе управления объявляются события, необходимые для корректной работы. Также каждый элемент содержит в себе события, унаследованные от класса Terrasoft.Component:

• added — срабатывает после того, как компонент был добавлен в контейнер.
• afterrender — срабатывает после того, как компонент был отрендерен и его HTML-представление попало в DOM.
• afterrerender — срабатывает после того, как компонент отрабатывает ререндеринг и его HTML представление обновилось в DOM.
• beforererender — срабатывает перед тем, как компонент был отрендерен и его HTML представление попало в DOM.
• destroy — срабатывает перед окончательным уничтожением элемента управления.
• destroyed — срабатывает после удаления компонента.
• init — срабатывает, когда инициализация компонента завершена.

Подробнее о событиях класса Terrasoft.Component можно узнать из "JavaScript API клиентской части ядра платформы".

Также элемент управления может подписываться на события браузера и определять свои собственные события.

Элемент управления определяется в массиве модификаций diff модуля, в котором его необходимо расположить.

//Массив модификаций diff модуля
diff: [{
    // Операция вставки.
    "operation": "insert",
    // Имя элемента-родителя, в который осуществится вставка элемента управления.
    "parentName": "CardContentContainer",
    // Имя свойства элемента-родителя, с которым производится операция.
    "propertyName": "items",
    // Имя элемента управления.
    "name": "ExampleButton",
    // Значения элемента управления.
    "values": {
        // Тип элемента управления.
        "itemType": "Terrasoft.ViewItemType.BUTTON",
        // Заголовок элемента управления.
        "caption": "ExampleButton",
        // Связывание события элемента управления с функцией.
        "click": {"bindTo": "onExampleButtonClick"}, 
        // Стиль элемента управления.
        "style": Terrasoft.controls.ButtonEnums.style.GREEN
    }
}]

Внешний вид элемента управления определяется шаблоном (template <tpl>). Во время рендеринга элемента управления в представление страницы генерация представления элемента выполняется согласно заданному шаблону.

Элемент управления не должен иметь никакой бизнес логики — она определяется в модуле, в который добавляется элемент управления.

Элемент управления имеет атрибуты styles, selectors, которые определены в классе-родителе Terrasoft.Component. Эти атрибуты предоставляют возможность гибкой настройки стилей.