Введение и Резюме
Доброе утро всем, в предыдущем сообщении в блоге мы начали перенос нашего старого приложения с устаревшего макета SplitApp на новый и блестящий гибкий макет столбца. Как вы помните, процесс был очень простым и гладким: нужно было изменить всего пару файлов, чтобы получить окончательный результат.
В этом сообщении блога я объясню вам, как полностью перенести наше приложение, заменив устаревший (начиная с версии 1.48) макет страницы новым динамическим макетом страницы.
В общем, мы заменим все, что у нас есть в нашей странице, на что-то похожее из DynamicPage.
- Название страницы будет заменено на агрегацию DynamicPageTitle
- SearchField из панели инструментов подзаголовка будет помещен внутри DynamicPageHeader.
- ObjectHeader немного сложнее, и я подробно объясню в разделе ниже.
Шаг 1 — Обновите представление BusinessPartnerList
Этот шаг прост, нам просто нужно заменить заголовок нашей страницы и создать DynamicPageHeader, где мы разместим наше поле поиска. Все остальное будет размещено внутри агрегации контента без изменений.
Шаг 2 — Обновите представление BusinessPartnerDetail
Так что эта страница (например, BusinessPartnerSalesOrderDetail) немного сложнее, потому что нам нужно заменить больше вещей.
Динамический макет страницы — это свободный макет, это означает, что он идеально подходит, когда вы хотите делать что-то самостоятельно без ограничений и с большой гибкостью. Это также означает, что вам придется создавать макет самостоятельно без всех крутых вещей, которые уже предлагаются по умолчанию из ObjectPageHeader.
Для меня DynamicPageLayout идеален, я предпочитаю тратить больше времени на создание UI/UX, но чтобы получить идеальный результат, о котором я думал.
Итак, что нам нужно сделать:
- Добавьте к DynamicPage DynamicPageTitle
- Внутри DynamicPageTitle мы переместим все наши навигационные кнопки (открыть/закрыть полноэкранный режим и выйти). Эти кнопки будут размещены внутри агрегации navigationActions.
- Вся информация ObjectHeader, такая как Intro и Title, будет помещена внутри заголовка Title и ExpandContent/snappedContent нашего sap.f.DynamicPagetitle.
- Каждый ObjectAttribute и ObjectStatus, которые находятся внутри ObjectHeader, будут помещены в наш sap.f.DynamicPageHeader.
- Все остальное будет размещено внутри агрегации контента DynamicPage.
Шаг 3 — Обновите представление BusinessPartnerSalesOrderDetail
Это представление более или менее соответствует BusinessPartnerDetail, поэтому вам просто нужно повторить тот же процесс, что и выше;)
Шаг 4 — наслаждайтесь конечным результатом
Если вы хотите, вы можете клонировать проект и попробовать его самостоятельно. Проверьте это на моей учетной записи GitHub.
После выполнения всех этих шагов это будет окончательный результат. Вы видите разницу между этим видео и первым в начале сообщения в блоге?
PS: Как обычно, анимация не очень плавная, но я думаю, что проблема может быть в моем текущем ноутбуке и количестве открытых в данный момент вкладок Chrome (+ все IDE, которые потребляют мою оперативную память)
Нужна обратная связь
Что вы думаете об этом сериале? Вы хотите больше сосредоточиться на каком-то конкретном аспекте SAPUI5?
Напишите это в разделе комментариев! Всем удачного кодирования!
