Как добавить компоненту “Вкладка” на страницу?
Постановка задачи: необходимо расположить на пользовательской странице Карточка задачи набор параметров задачи таким образом, чтобы визуально страница воспринималась, как состоящая из двух вкладок, каждая со своим набором параметров задачи (вкладка “общие параметры” и вкладка “сотрудники”).
Решение задачи:
Предполагается, что страницаКарточка задачиуже создана бизнес-аналитиком и визуальные компоненты и источник данных компоненты Форма настроен.
Для оптимизации расположения параметров в соответствии с условиями задачи необходимо сделать следующее:
- внутрь компоненты Форма добавить компоненту Контейнер вкладок (рис.1)

Рис.1 Добавление компоненты Контейнер вкладок
- внутрь компоненты Контейнер вкладок добавить две компоненты Вкладка (рис. 2)

Рис.2 Добавление двух компонент Вкладка
-
оставляем значения параметров компоненты “Контейнер вкладок” в состоянии ‘по умолчанию’
-
внутрь каждой из компонент Вкладка располагаем визуальные компоненты (рис.4)

Рис.4 Добавление визуальных компонентов в скомбинированные компоненты-контейнеры “Контейнер вкладок” и “Вкладка”
На этом настройка предложенного порядка расположения визуальных компонентов на странице, предусмотренная заданием, завершена.
При проверке результата в работающем приложении визуальные компоненты должны выглядеть так:


Рис. 5 Представление визуальных компонентов после использования компоненты-контейнеры “Контейнер вкладок” и “Вкладка”
Страница воспринимается как состоящая из 2 вкладок, в которых визуальные компоненты расположены в вертикальном направлении друг за другом
image2019-3-12_18-13-53.png (image/png)
image2019-3-12_18-15-38.png (image/png)
image2019-3-12_18-16-59.png (image/png)
image2019-3-12_18-17-7.png (image/png)
image2019-3-12_18-42-37.png (image/png)
image2019-3-12_18-37-14.png (image/png)
image2019-3-12_18-48-28.png (image/png)
image2019-3-12_18-50-18.png (image/png)
image2019-3-21_18-15-20.png (image/png)
image2019-3-21_18-16-48.png (image/png)
image2019-3-21_18-20-2.png (image/png)
image2019-3-21_18-30-7.png (image/png)
image2019-3-21_18-31-15.png (image/png)
image2019-3-21_18-33-4.png (image/png)
image2019-3-21_18-37-29.png (image/png)
image2019-3-21_18-41-37.png (image/png)