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

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

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

На первом каркасе мы видим боковое меню (красный контур), а затем страницу (зеленый контур) для обзора производства.

На следующем каркасе есть то же боковое меню (красный контур), а на главной странице отображается информация, относящаяся к конкретной электростанции (синий контур). Дизайнер исходил из того, что в конечном итоге на этой панели будут отображаться данные с нескольких электростанций.

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

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

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

Третьей инструментальной панелью, которую необходимо разработать, будет обзор завода. Аналогично производственной сводке, переменные отображаются в виде графиков, диаграмм и отдельных значений. Также используется дополнительный компонент " Последние события". Для этой панели мы также изучим функции модели и события, а также различные способы их активации.

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