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

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

Рис.2 Переименование и озаглавливание компонент Группа полей
- внутри каждой из компонент Группа полей расположить визуальные компоненты для ввода и отображения информации (рис. 3)
|
|
| Рис.3 Распределение полей ввода и отображения информации по компонентам Группа полей |
На этом настройка предложенного порядка расположения визуальных компонентов на странице, предусмотренная заданием, завершена.
При проверке результата в работающем приложении визуальные компоненты должны выглядеть так:
Рис. 4 Представление визуальных компонентов после использования компонент - контейнеров Группа полей Страница воспринимается как совокупность 3 логических блоков, следующих в вертикальном направлении друг за другом
Тот же самый набор визуальных компонентов, расположенный в составе компоненты Форма, без использования контейнеров выглядел бы так:
|
|
|
|
Рис. 5 Все визуальные компоненты расположены внутри компоненты Форма. Компонента Форма сама по себе является Вертикальным контейнером ! |
Рис. 6 Расположение визуальных компонентов в запущенном приложении без использования компонент- контейнеров Группа полей. Поскольку Компонента Форма сама по себе является Вертикальным контейнером, то все визуальные компоненты расположены в один столбик в вертикальной последовательности |
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-7-8_12-5-31.png (image/png)
image2019-7-8_12-36-8.png (image/png)
image2019-7-8_12-39-16.png (image/png)
image2019-7-8_12-42-2.png (image/png)
image2019-7-8_12-45-21.png (image/png)
image2019-7-8_12-47-44.png (image/png)
image2019-7-8_12-53-13.png (image/png)


