Создание приборных панелей

Первым шагом будет создание пустых контекстов Dashboard в системе SberMobile. Аналогично созданию других контекстов, выберите опцию Create из контекстного меню Dashboard в дереве системы.

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

• Имя - Как и в случае с другими контекстами, имя определяет контекстный путь новой приборной панели. Создайте приборные панели со следующими именами:

  • powerStation_mainDashboard

  • productionSummary_subDashboard

  • plantOverview_subDashboard

• Описание - текст, отображаемый в пользовательском интерфейсе при ссылке на объект, и мы задаем их аналогично имени.

  • Электростанция

  • Сводка производства

  • Обзор завода

• Назначение - Мы хотим, чтобы эти приборные панели были доступны через веб-интерфейс, поэтому все приборные панели будут иметь назначение Web.

• Тип - Все наши приборные панели будут созданы как абсолютные приборные панели.

• Макет - В следующем примере для упрощения будет использован макет Grid.

Например, свойства приборной панели powerStation_mainDashboard выглядят следующим образом:

После создания трех приборных панелей они должны появиться под узлом Dashboard в дереве системы.

Приборные панели Сводка производства и Обзор завода будут отображаться на вложенной приборной панели в панели Power Station Dashboard. Мы добавим текст-заполнитель к панелям сводки производства и обзора завода, чтобы можно было различать, какие из них загружаются в подпанель. Позже мы сможем добавить другие компоненты.

Откройте контекстное меню для приборной панели " Сводка производства " и выберите опцию " Редактировать приборную панель ".

Откроется Web UI builder с пустой сеткой, куда можно добавить компоненты приборной панели . Откройте палитру компонентов (1) и перетащите компонент Label в одну из ячеек сетки (2).

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

Предварительный просмотр приборной панели показывает, что текст очень маленький и выровнен по левому краю. Чтобы сделать текст заполнителя более привлекательным, откройте вкладку Стиль элемента редактора свойств метки (1) и добавьте некоторые CSS-стили для элемента (2).

Используйте следующий CSS, чтобы сделать шрифт крупнее и выровнять текст по центру.

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

При предварительном просмотре или открытии приборной панели должно отображаться что-то вроде следующего:

Повторите описанные выше действия для приборной панели " Обзор завода ", чтобы получить аналогичный результат.

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

• users.admin.dashboards.powerStation_mainDashboard

• users.admin.dashboards.productionSummary_subDashboard

• users.admin.dashboards.plantOverview_subDashboard

В окне Application Configuration вы должны увидеть новые приборные панели, отраженные в списке ресурсов.

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

Откройте приборную панель Power Station для редактирования. Откройте палитру компонентов (1) и щелкните на компоненте Custom Tree (2), чтобы добавить компонент на приборную панель. Измените размер компонента так, чтобы он занимал две ячейки (3), и нажмите на значок шестеренки (4), чтобы открыть редактор свойств компонента.

Чтобы добавить пункты в меню в пользовательском дереве, откройте свойство Tree Data в редакторе свойств.

Переменная Tree Data позволяет определить любое количество узлов дерева. В этой переменной есть несколько полей, которые мы рассмотрим позже. Пока вам нужно добавить данные только в поля Key и Title для создания некоторых пунктов меню.

• Поле Key - это уникальный идентификатор для каждого узла в пользовательском дереве, который предоставляется при определенных событиях, вызываемых компонентом. Узлы - это пункты бокового меню, и каждый из них соответствует приборной панели.

• Поле Title определяет текст, который будет отображаться в пользовательском интерфейсе.

Вспомните из предыдущих шагов, что вы создали две другие приборные панели, Production Summary и Plant Overview, и извлекли их соответствующие контекстные пути users.admin.dashboards.productionSummary_subDashboard и users.admin.dashboards.plantOverview_subDashboard.

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

Теперь вы должны увидеть два новых узла в компоненте Custom Tree.

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

Вернитесь к палитре компонентов и добавьте компонент Sub-dashboard (1) к приборной панели, изменив его размер так, чтобы он занимал большую часть пространства сетки (2). Наконец, выберите свойство References (Ссылки ) (3), чтобы открыть окно Select Context (Выбор контекста ).

В окне Select Context перемещайтесь по контекстному дереву, чтобы найти панель Production Summary (Производственная сводка ) в разделе панелей администратора. Нажмите OK для сохранения и закрытия. Это действие устанавливает сводную производственную панель в качестве панели по умолчанию для отображения вложенной панели. В рабочей области должен отображаться предварительный просмотр компонентов, которые вы добавили, а также сводная производственная панель в компоненте вложенной панели по умолчанию.

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

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

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

Откройте дерево компонентов (1), чтобы отобразить список текущих компонентов приборной панели. Щелкните значок Root (Корень ) (2), чтобы открыть редактор свойств для компонента Root.

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

Таблица Bindings содержит поля для определения Target для данных, Expression для подготовки данных и Activator для определения событий, которые приведут к активации привязки. Добавьте строку в таблицу (1), затем откройте меню Select Target (2).

Цель - это переменная, поле, функция, действие или событие, которое будет изменено или вызвано при активации привязки. Для того чтобы изменить, какая приборная панель отображается компонентом подпанели, привязка должна изменить свойство Reference подпанели.

Чтобы нацелиться на это свойство, в окне Select Target выберите пункт Properties из бокового меню (1) и откройте пункт меню subdashboard0 (2), чтобы открыть список его свойств. Выберите Reference из списка (3) и нажмите OK для сохранения и закрытия.

Вы заметите, что значение form/subdashboard0:reference было помещено в поле Target. Вместо того чтобы использовать меню Select Target, вы можете напрямую вводить целевые ссылки с помощью синтаксиса form/<имя компонента>:<имя свойства компонента>.

Теперь, когда есть цель для привязки, выберите активатор. Существует несколько различных способов активации привязки. При запуске, на основе определенного события или периодически. В данном случае вы хотите, чтобы привязка активировалась, когда пользователь нажимает на пункт в меню боковой панели. Установите флажок On Event в True (1), чтобы указать, что привязка должна срабатывать по событию. Затем откройте окно Выбор активатора, нажав на значок под полем Активатор (2).

В окне Select Activator выберите Component Events (1) и разверните компонент customTree0 (2), чтобы выбрать событие Node Selection. Нажмите OK для сохранения и закрытия.

Вы увидите, что поле Activator теперь заполнено текстом form/customTree0:treeSelection@. Аналогично полю Target, вы можете создать ввод для поля Activator на основе синтаксиса form/<имя компонента>:<имя события компонента>@, если хотите вызвать привязку с помощью события компонента приборной панели.

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

Поле Expression оценивается при активации привязки, и SberMobile пытается поместить полученные данные в поле Target. Откройте окно Конструктора выражений, щелкнув по указанному значку под полем Выражение.

В документации к компоненту Custom Tree показано, что событие Node Selection срабатывает, когда пользователь выбирает узел в дереве, и генерирует таблицу данных с одним полем-ключом, содержащим ключевое значение выбранного узла. Например, когда пользователь щелкает на узле Производственная сводка, событие генерирует следующую таблицу данных:

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

• {env/value} - это ссылка на среду, специфичная для привязки Web UI для получения данных о событиях активатора. Когда привязка Web UI запускается событием, эта ссылка указывает на данные, сгенерированные событием.

• cell(DataTable table [, String field [, Integer row [, Boolean description]]]) - это функция обработки таблицы данных, которая позволяет извлечь определенную ячейку из таблицы данных.

Функция cell() требует следующих аргументов:

• DataTable table - Таблица для обработки, в данном случае вы будете использовать ссылку {env/value} для получения таблицы, сгенерированной событием активации Node Selection.

• String field - Строка, указывающая имя поля. Из документации компонента Custom Tree известно, что таблица имеет единственный ключ поля.

• Integer row - Какая строка из указанного поля должна быть извлечена, с индексацией, начинающейся с 0. Событие Node Selection создает только одну строку, поэтому это значение будет равно 0.

Подставляя указанные аргументы в функцию, получаем:

cell( {env/value} , "key", 0 )

Которое вы можете вставить в Конструктор выражений, затем нажмите OK для сохранения и закрытия.

Вы определили привязку, которая активируется каждый раз, когда пользователь нажимает на узел в компоненте Custom Tree , и отправляет значение ключа узла в компонент Sub-Dashboard. Нажмите OK для сохранения и закрытия.

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

Щелкните по узлам дерева, чтобы убедиться, что отображаются правильные приборные панели. Ваша приборная панель должна работать примерно так:

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