Введение и Резюме

Доброе утро всем, в предыдущем сообщении в блоге я познакомил вас с базовыми знаниями о гибком макете столбцов и динамическом макете страницы, шаблоне UI / UX, который заменит ваш старый макет SlitApp, который устарел с версии 1.48 SAPUI5. .

В этом сообщении блога я объясню, как можно легко перейти с приложения SplitApp на приложение с гибкой компоновкой столбцов за считанные минуты.

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

Состояние нашего приложения

Давайте взглянем на UI/UX текущего приложения, чтобы мы могли сравнить его в конце трансформации.

Здесь нет ничего нового, это базовый макет Split App с операцией CRUD, так что давайте двигаться дальше.

Шаг 1 — Клонируйте и импортируйте приложение из GitHub

Итак, первый шаг — клонировать приложение из последней версии тега на GitHub. Вы можете свободно клонировать и импортировать его в свое рабочее пространство WebIDE.

Шаг 2. Обновите manifest.json, index.html и App.view.xml.

App.view.xml

Первое, что мы хотим сделать, это заменить старый SplitApp новым FlexibleColumnLayout внутри нашего App.xml.view (основное представление, загружаемое при загрузке приложения).

Вот новый код нашего App.view.xml

Вы должны отметить несколько важных вещей:

  • Я добавил новое пространство имен XML sap.f, потому что наш FlexibleColumnLayout включен в библиотеку SAP Fiori SAPUI5.
  • Мы удалили SplitApp и добавили наш FCL внутри приложения.
  • В FLC свойство макета привязано к app›/layout. Мы будем использовать эту привязку позже в нашем коде для обработки полноэкранной визуализации нашего второго и третьего столбца.

Индекс.html

Как вы можете видеть в приведенном ниже коде, мы перешли из Shell в ComponentContainer. Это первый шаг к удалению почтового ящика из нашего макета.

Леттербоксинг

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

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

В нашем случае нам нужно удалить Letterboxing, потому что нам потребуется максимально возможная полезная площадь экрана для правильного отображения трех столбцов в одном!

manifest.json

В нашем манифесте есть четыре важные модификации, которые нам нужно сделать.

  • Добавьте конфигурацию, позволяющую приложению использовать полноэкранную ширину (это вторая часть удаления Letterboxing).
  • Добавьте sap.f в список зависимостей, загружаемых вместе с приложением.
  • Замените класс маршрутизатора с sap.m.routing.Router на sap.f.routing.Router, чтобы использовать новые функции маршрутизации.
  • Обновите маршруты и цели, чтобы использовать новое свойство, добавленное новым классом Router и используемое гибким макетом столбца.

Обратите внимание, что это только часть содержимого manifest.json, я добавил только фрагмент, который мы изменим для маршрутизации.

Как видите, внутри каждого элемента Route у нас есть новое свойство, называемое layout.

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

  • OneColumn, когда мы находимся на главной странице, и нам просто нужно отобразить список бизнес-партнеров.
  • TwoColumnsMidExpanded, который будет отображать два столбца с развернутым средним (справа). Мы используем этот макет для отображения типичного типа представления Master-Detail, когда пользователь щелкает бизнес-партнера в списке.
  • ThreeColumnsEndExpanded, который будет отображать три столбца, последний из которых будет развернут. Мы используем этот макет для отображения информации о списке заказов бизнес-партнеров.

Каждая цель маршрута имеет другое свойство, называемое «controlAggregation», которое указывает, в какую агрегацию FlexibleColumnLayout будет добавлена ​​эта цель.

В нашем сценарии:

  • Представление BusinessPartnerList будет добавлено к агрегации beginColumnPages (первый столбец).
  • Представление BusinessPartnerDetail будет добавлено в агрегацию midColumnPages (второй столбец).
  • Представление BusinessPartnerSalesOrderDetail будет добавлено в агрегацию endColumnPages (третий и последний столбец).

Почему так важно правильно настроить manifest.json? С помощью нескольких строк кода мы автоматически настроили все поведение UI/UX нашего приложения. Разве это не мило? ;)

Шаг 3 — Обработка полноэкранного поведения / выхода

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

В файлы BusinessPartnerDetail.view.xml и BusinessPartnerList.view.xml добавьте три кнопки для управления этими функциями:

  • Развернуть на весь экран текущую страницу
  • Выйти из полноэкранного режима
  • Закрыть текущую страницу (например, щелчок назад в навигации)

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

На стороне контроллера вам просто нужно реализовать такие методы, как этот

Если вы помните, мы привязали свойство FlexibleColumnLayout в App.view.xml к значению app›/layout.

Чтобы развернуть страницу в полноэкранном режиме, мы собираемся изменить это значение на MidColumnFullScreen (это код из контроллера средней страницы) и обратно на TwoColumnsMidExpanded или ThreeColumnsEndExpanded (это зависит от того, отображаем ли мы также третий столбец) при выходе пользователя. полноэкранный.

Кнопка закрытия обрабатывается кнопкой onCloseDetailPress, которая просто переводит наше приложение на домашнюю страницу.

Шаг 4 — Наслаждайтесь конечным результатом (без динамического макета страницы)

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

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

PS: анимация не очень плавная, но я думаю, что проблема может быть в моем текущем ноутбуке и количестве открытых вкладок Chrome (+ все IDE, которые потребляют мою оперативную память)

Что дальше

В следующем сообщении блога мы выведем наше приложение на новый уровень, удалив все sap.m.Page и заменив их новым sap.f.DynamicPage.

Нужна обратная связь

Что вы думаете об этом сериале? Вы хотите больше сосредоточиться на каком-то конкретном аспекте SAPUI5?

Напишите это в разделе комментариев! Всем удачного кодинга!