Использование подпанелей

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

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

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

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

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

В нашем учебном пособии мы смоделировали простой торговый автомат по продаже закусок с помощью Data Table Contents. Мы создали модель с помощью узла Models в дереве системы (1), перешли на вкладку Model Variables (2), добавили переменную, которую назвали Contents, сделали таблицу доступной для записи (4) и открыли поле Format (5), где мы добавим несколько подполей, которые будут описывать содержимое нашего автомата.

Из меню Format мы открываем меню Fields (1):

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

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

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

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

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

• Емкость - текущая емкость автомата

Обратите внимание, что мы добавили Selection Values для поля type:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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