Использование вложенных панелей

Инструментальные панели SberMobile позволяют создавать комплексную компоновку путем объединения нескольких компонентов различных типов и вложенных контейнеров с динамическими значениями. Данное руководство поможет вам создать продвинутую компоновку, которая изменяется в зависимости от окружения. Такие динамические панели можно построить с помощью вложенных панелей , которые позволяют выбрать и отобразить шаблоны на основе пользовательского ввода.

Текущее руководство иллюстрирует следующие концепции шаблонов динамических панелей:

• Использование нескольких уровней вложенных подпанелей.

• Изменение ссылок на шаблоны вложенных панелей во время отображения панели.

Чтобы проиллюстрировать концепцию вложенных панелей, мы разработаем несколько панелей для визуализации состояния и содержимого современного торгового автомата, который можно контролировать и проверять удаленно. Мы предполагаем, что наш автомат может предоставлять некоторые данные об оставшихся товарах, а также диагностическую информацию.

В нашем руководстве мы смоделировали простой автомат по продаже снеков, используя Содержимое таблицы данных. Мы создали модель через узел Модели в дереве системы (1), перешли на вкладку Переменные модели (2), добавили переменную, которую назвали Содержимое, сделали таблицу доступной для записи (4) и открыли поле Формат (5), где добавим несколько подполей, которые будут описывать содержимое нашего автомата.

Из меню Формат мы открываем меню Поля (1):

В меню Поля мы добавим несколько полей, характеризующих состояние нашего автомата:

• Слот - расположение продукта в автомате.

• Тип - тип автомата (небольшой, средний или большой).

• Продукт - название продукта, который в данный момент загружен в автомат

• Количество - количество товаров, которые в данный момент находятся в автомате

• Емкость - текущая емкость диспенсера

Обратите внимание, что мы добавили Допустимые значения для поля Тип:

Наконец, мы добавим несколько примеров данных в нашу модель автомата. Из контекстного меню нашего снекового автомата мы редактируем дополнительные свойства:

В меню Дополнительные свойства мы разблокируем таблицу для редактирования (1), а затем откроем только что созданную таблицу Содержимое (2).

Мы добавим несколько слотов в наш торговый автомат, указав продукты, тип слота, текущее количество и емкость.

Сейчас, когда есть несколько макетов данных, отражающих состояние торгового автомата, мы можем перейти к созданию визуального представления в нашей панели инструментов.

Наш автомат будет отображаться на одной инструментальной панели под названием Компоновка автомата. Панель будет содержать компоненты, предоставляющие стандартную информацию об автомате, и ряд вложенных панелей для визуализации диспенсеров. Каждая из этих вложенных панелей будет называться Dispenser Slot, а количество вложенных панелей Dispenser template будет соответствовать количеству доступных слотов.

Начнем с инструментальной панели для рендеринга диспенсеров. Мы создадим инструментальную панель и назовем ее dispenser_slot1 (1), с описанием Dispenser Slot1 и типом Absolute (2). Имя здесь важно, так как нам нужно будет динамически ссылаться на шаблонные панели диспенсеров по их именам в зависимости от того, какой слот нашей машины вызывается.

Мы сохраним панель инструментов, нажав кнопку OK, и откроем ее для редактирования, выбрав в контекстном меню пункт Редактировать панель инструментов.

В конструкторе Инструментальной панели откроем Палитру компонентов (1) и перетащим компоненты Надпись (2) в верхнюю ячейку сетки и три нижние ячейки сетки.

Сейчас, когда наши метки на месте, мы можем редактировать, открыть окно свойств (1) и переименовать каждый компонент (2).

После переименования компонентов мы видим, что в дереве компонентов есть четырекомпонента метки.

Мы сосредоточимся на взаимодействии между инструментальными панелями и компонентами Вложенной панели, поэтому будет использована самая простая визуализация.

Чтобы управлять размером шрифта и выравниванием текста наших компонентов, откроем редактор свойств (1) для каждого компонента и откроем вкладку Стиль элемента (2). Здесь можно использовать любой CSS, но мы решили просто выровнять текст по центру и увеличить относительный размер шрифта.

Для изменения размера шрифта мы использовали следующий CSS-код:

^{{ display: flex; justify-content: center; align-items: center; font-size: 3em; }}

Обратите внимание на строку font-size: 3em; здесь мы увеличиваем относительный размер шрифта.

Прежде чем создавать копии нашего шаблона, мы добавим привязки для размещения правильных данных в каждой из текстовых меток, продукта, емкости и количества.

Из модели содержимого мы прочитаем таблицу, извлечем значение "продукт" и вставим его в текстовую часть нашей метки продукта.

Текущая привязка изменяет значение текста на этикетке продукта. Мы добавим аналогичные привязки для этикеток объема и количества.

Сейчас, когда у нас есть пример шаблона с правильными привязками, мы сделаем копию для каждого слота, который хотим смоделировать. Открыв контекстное меню панели шаблонов, мы увидим опцию создания копии.

Обратите внимание, что мы обновляем Имя копии на dispenser_slot2, dispenser_slot3 и так далее, что позволит нам использовать разные шаблоны панели в основной панели. В нашем случае мы создадим копии для слотов диспенсера 2-6, назвав их соответствующим образом.

Сейчас мы обновим привязки для каждой панели dispenser_slot<number>. Метки продукта, емкости и количества были обновлены с помощью выражения: select({users.admin.models.contents:contents}, "product", "slot", "slot1").

Но каждая Инструментальная панель ссылается на разные слоты. Поэтому для dispenser_slot2 нам понадобится выражение select({users.admin.models.contents:contents}, "product", "slot", "slot2") и так далее для каждого слота инструментальной панели.

Инструментальная панель будет служить в качестве "каркаса", который визуально отобразит различные слоты в нашем автомате. Каждый слот будет отображаться с помощью компонента вложенной панели.

В этом руководстве мы создадим только один макет автомата, который будет привязан к контексту нашей модели вендингового аппарата. Мы создадим новую инструментальную панель, назовем ее machine_layout и настроим ее с помощью свойств колонок сетки с 2 колонками и свойств строк сетки с четырьмя строками. Кроме того:

• В верхней строке мы добавляем компонент Label, который будет содержать заголовок для нашей инструментальной панели.

• В каждую из 6 оставшихся ячеек мы добавим компоненты вложенных панелей, которые будут отображать слоты, содержащие различные продукты в нашей машине.

Добавление компонентов должно выглядеть примерно так:

Тип автомата, установленного в слоте в данный момент, определяется полем Слот таблицы Содержимое. Таким образом, нам нужны шесть привязок, которые изменяют свойство Ссылка компонента Sub-Инструментальная панель во время запуска основной панели. Привязки шаблонов следует настроить следующим образом:

Текущая привязка изменяет шаблонную ссылку на вложенную панель, представляющую содержимое слота slot1, которое будет оцениваться при запуске основной панели. Выражение строит контекстный путь подпанели, который должен быть использован для отображения содержимого текущего слота. Текущий путь создается путем конкатенации префикса контекстного пути(users.admin.dashboards.dispenser_) и значения номера слота диспенсера, установленного в данном слоте.

Мы создаем аналогичные Привязки для слотов с 2 по 6:

Сейчас, когда созданы привязки для нашей инструментальной панели и каждой из инструментальных панелей слотов, мы сохраним нашу работу (1) и запустим предпросмотр инструментальной панели (2):

Когда наша панель загрузится, мы увидим, что каждый из слотов отображается в компонентах Вложенной панели: