Основы SAPUI5 11 — Конфигурация компонента (Component)

Основы SAPUI5 11 — Конфигурация компонента (компонент)

2024-07-12

1. История

компоненты(Компонент) — это независимый и многократно используемый компонент в приложении SAPUI5.

SAPUI5 предоставляет следующие два типа компонентов:

безликий компонент (сорт:sap.ui.core.Component): Отсутствие компонента интерфейса означает отсутствиепользовательский интерфейсСвязанные элементы, используемые в сценариях, не требующих кодирования элементов пользовательского интерфейса;
Компоненты пользовательского интерфейса (сорт:sap.ui.core.UICcomponent): Компоненты пользовательского интерфейса используются для представления элементов пользовательского интерфейса в интерфейсе приложения, таких как кнопки, а также соответствующих настроек и метаданных.

Примечание. «Безголовые компоненты» нельзя добавить в контейнер компонентов.Component Containerсередина;
sap.ui.core.UICcomComponent расширяет sap.ui.core.Component и добавляет функцию рендеринга экрана на основе sap.ui.core.Component.

Вообще говоря, в приложении полный компонент должен содержать две части: компонентконтроллердокумент(component .js) и файл дескриптора описания приложения (manifest.json)。

Самым большим преимуществом использования компонентов является то, что инкапсулированные компоненты можно гибко встраивать вдругой组件容器（Component Container） середина. Например, Fiori Launchpad — это контейнер компонентов; во время тестирования приложения мы обычно также создаем контейнер компонентов вручную.

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

2. Пример

2.1 Определить файл контроллера компонента

Ниже приведен пример файла контроллера компонента Component.js:


sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/model/json/JSONModel"
], function (UIComponent, JSONModel) {
    "use strict";

    return UIComponent.extend("my.namespace.demo.Component", {

        metadata : {
            manifest: "json"
        },

        init : function () {
            // call the init function of the parent
            UIComponent.prototype.init.apply(this, arguments);

            // set data model
            var oData = {
                recipient : {
                    name : "World"
                }
            };
            var oModel = new JSONModel(oData);
            this.setModel(oModel);
        }
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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

Затем в функции init мы сначала вызвали функцию init родительского класса, затем установили модель JSON и установили ее в качестве модели компонента. Эта модель содержит объект-получатель, который имеет атрибут имени со значением World.

2.2 Загрузка компонентов

После определения файла компонента мы добавим его в файл приложения.index.jsфайл, создайте экземпляр контейнера компонента, загрузите созданный компонент и загрузите его на страницу.

Вот пример компонента загрузки файла index.js:

sap.ui.define([
    "sap/ui/core/ComponentContainer"
], function (ComponentContainer) {
    "use strict";
    new ComponentContainer({
        name: "my.namespace.demo",
        settings : {
            id : "demo"
        },
        async: true
    }).placeAt("content");
});
1
2
3
4
5
6
7
8
9
10
11
12

3. Практика

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

Таким образом, всякий раз, когда мы получаем доступ к ресурсу, мы делаем это относительно компонента (а не относительно index.html).

Это архитектурное изменение делает загрузку приложения более гибкой, чем предыдущая статическая страница index.html. Например, ее можно напрямую встроить в такой контейнер, как панель запуска SAP Fiori.

3.1 Создайте файл Component.js

Во-первых, давайтеwebappНачальныйComponent.js Файл для хранения настроек нашего приложения.Когда создается экземпляр компонента, SAPUI5 автоматически вызывает метод компонента.init функция.Наш компонент наследует от базового классаsap/ui/core/UICcomponent, в переписанном видеinitМетод должен сначала вызвать функцию init базового класса.

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

Код Component.js выглядит следующим образом:

sap.ui.define([
    "sap/ui/core/UIComponent"
], function (UIComponent) {
"use strict";

    return UIComponent.extend("zsapui5.test.Component", {
        init() {
            // call the init function of the parent
            UIComponent.prototype.init.apply(this, arguments);
        }
    });
});
1
2
3
4
5
6
7
8
9
10
11
12

3.2 Добавьте метаданные в Component.js

Далее добавим конфигурацию приложения в файл Component.js.

Модифицированный код Component.js выглядит следующим образом:

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/model/json/JSONModel",
    "sap/ui/model/resource/ResourceModel"
], function (UIComponent,JSONModel,ResourceModel) {
    "use strict";

    return UIComponent.extend("zsapui5.test.Component", {
        metadata: {
            "interfaces": ["sap.ui.core.IAsyncContentCreation"],
            "rootView": {
                "viewName": "zsapui5.test.view.App",
                "type": "XML",
                "id": "app"
            }
        },

        init() {
            //call  the init function of the parent
            UIComponent.prototype.init.apply(this, arguments);

            //set data model
            const oData = {
                recipient : {
                    name: "World"
                }
            };
            const oModel = new JSONModel(oData);
            this.setModel(oModel);

            //set i18n model
            const i18nModel = new ResourceModel({
                bundleName: "zsapui5.test.i18n.i18n"
            });
            this.setModel(i18nModel, "i18n");
        }
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

Модифицированный файл компонента .js состоит из двух частей:元数据部分и вызывается при инициализации компонента.init函数部分。

Раздел метаданных определяет корневое представление.App.view.xmlссылку на файл, чтобы компонент мог управлять отображением представления приложения, а не непосредственно вindex.js Создайте и отобразите корневое представление непосредственно в файле.Часть определения метаданных также реализуетsap.ui.core.IAsyncContentCreationИнтерфейс, позволяющий создавать компоненты полностью асинхронно.

...
        metadata: {
            "interfaces": ["sap.ui.core.IAsyncContentCreation"],
            "rootView": {
                "viewName": "zsapui5.test.view.App",
                "type": "XML",
                "id": "app"
            }
...
1
2
3
4
5
6
7
8
9

Обратите внимание, что интерфейс sap.ui.core.IAsyncContentCreation неявно устанавливает как для rootView компонента, так и для конфигурации его маршрутизатора значение «async»: true; мы обсудим его роль в следующем блоге, посвященном описанию «Маршрутизация и навигация».

В разделе функции инициализации мы делаем то же самое, что и раньше.App.controller.jsСоздайте экземпляр модели данных, как вы это сделали в файле контроллера.oModelи модель i18ni18nModel。

...
        init() {
            //call  the init function of the parent
            UIComponent.prototype.init.apply(this, arguments);

            //set data model
            const oData = {
                recipient : {
                    name: "World"
                }
            };
            const oModel = new JSONModel(oData);
            this.setModel(oModel);

            //set i18n model
            const i18nModel = new ResourceModel({
                bundleName: "zsapui5.test.i18n.i18n"
            });
            this.setModel(i18nModel, "i18n");
        }
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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

3.3. Настройте файл App.controller.js.

Поскольку привязку объектов данных и объектов модели i18n мы уже реализовали в файле Component.js, напишем перед этимApp.controller.jsЛогическое удаление файлов контроллера, т.е. удаление onInit 函数и所需的模块引用。
Вставьте сюда описание изображения

Эффект от модифицированного кода следующий:

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/m/MessageToast"
], function (Controller, MessageToast) {
    "use strict";

    return Controller.extend("zsapui5.test.controller.App", {

        onShowHello: function () {
            // read msg from i18n model
            const oBundle = this.getView().getModel("i18n").getResourceBundle();
            const sRecipient = this.getView().getModel().getProperty("/recipient/name");
            const sMsg = oBundle.getText("helloMsg", [sRecipient]);

            // show message
            MessageToast.show(sMsg);
        }
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

3.4. Настройте файл index.js.

В предыдущем файле index.js мы напрямую создали экземпляр объекта представления приложения.XMLView . Теперь давайте создадим представление через контейнер компонента.

Для этого мы заменяем ранее добавленную зависимость представления новойsap/ui/core/ComponentContainer Зависимости. Контейнер компонента действует как родительский компонент компонента приложения и обрабатывает его свойства и события навигации.

При создании экземпляра контейнера компонента необходимо указать пространство имен приложения, то естьzsapui5.test(Он указывает на папку веб-приложения проекта, в которой расположены файлы .js компонента).

Вставьте сюда описание изображения

Эффект от скорректированного файла index.js следующий:

sap.ui.define([
    "sap/ui/core/ComponentContainer"
], function (ComponentContainer) {
    "use strict";

    new ComponentContainer({
        name: "zsapui5.test",
        settings : {
            id : "test"
        },
        async: true
    }).placeAt("content");
});
1
2
3
4
5
6
7
8
9
10
11
12
13

3.5 Общие соглашения

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

Имя компонента Component .js
Компоненты должны располагаться вместе со всеми ресурсами пользовательского интерфейса приложения.webappпапка
Если вы хотите эффективно использовать файл index.html, он также находится по адресуwebappв папке

3.6 Эксплуатация

Запускаем настроенную программу и эффект следующий:

Вставьте сюда описание изображения

Приложение работает так же, как и до настройки.Но если оно пройдетctrl + shift + alt + sОткройте окно диагностики, чтобы просмотреть схему управления, мы можем обнаружить следующие различия.

Недавно добавленный ComponentContainer является родительским элементом управления XMLView.
Вставьте сюда описание изображения

4. Резюме

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

Обмен технологиями